Hello friends. In this article we will talk about how to design Twitter with Xamarin Forms. Design issue is one of the most challenging issues in Xamarin Forms. People are afraid of Xamarin Forms because there are not too many resources. Previously we made the screen of Instagram’s home screen and the home screen. In this article, we will try to design Twitter. When we look at the design of Twitter; There is a Master Detail Page. The Master also has user information and pages that he wants to go to and the Detail page has 4 pages of Tabbed Page. On these pages, Home page, Notices, Search and Messages section. I’ll just try to get the main page and master part in this article. And then we go to other pages with you.
First, we open a Master Detail page. Then, we place a tabbed page in the detail part of this Master Detail page and create 4 content pages under this Tabbed Page. We only assign icons to the pages we have created. Normally, the Master Page icon is the hamburger menu. To change this, we need to assign an icon to the Master page. Twitter’s profile photo. So I’ve assigned a user profile photo.
Then let’s go to the design of the page. Using the grid to create a design for tweets is the most logical move. I’m throwing a ListView to show all the tweets in the list form. I’m putting the grid in List View. I divide this gradient into two columns. The first of the columns will contain a profile photo of the tweet. The second one will give information about the tweet. In the second column I divide it into three separate lines. The first of the lines contains information about the user who has tweeted. The second line is about tweeting. Directly press the screen to tweet. The last line contains comments, likes and retweet numbers.
<?xml version="1.0" encoding="UTF-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamarinTwitterDesign.Views.AnaSayfaViews.AnaSayfaDetail"
Icon="pp.png"
BarBackgroundColor="#1c2938"
Title="Ana Sayfa">
<NavigationPage.TitleView>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="1"
HorizontalOptions="Start"
VerticalOptions="Center"
Text="Ana Sayfa"
FontSize="Medium"
TextColor="White"/>
</Grid>
</NavigationPage.TitleView>
<ContentPage Icon="home.png">
<AbsoluteLayout>
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<ListView x:Name="liste"
ItemsSource="{Binding .}"
SeparatorColor="Transparent"
SeparatorVisibility="None"
HasUnevenRows="true">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5,10,5,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- tweetin yanında bulunan kullanıcı profil foto -->
<StackLayout Grid.Column="0">
<Image Source="pp1.png"/>
</StackLayout>
<!-- Tweet ve aşağısında ki bilgiler -->
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding FullName}"
Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Center"/>
<Label
TextColor="#8899a6"
Grid.Column="1">
<Label.FormattedText>
<FormattedString>
<Span Text="@" />
<Span Text="{Binding Username}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Text="{Binding Time}"
Grid.Column="2"
TextColor="#8899a6"/>
<Image Grid.Column="3"
Source="arrowdown.png"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="15"
HeightRequest="15"/>
</Grid>
<Grid Grid.Row="1">
<Label HorizontalOptions="StartAndExpand"
VerticalTextAlignment="Start"
Text="{Binding Tweet}"
TextColor="#8899a6"/>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="comment.png"
Grid.Column="0"
WidthRequest="5"
HeightRequest="5"/>
<Label Text="{Binding MentionCount}"
Grid.Column="1"
TextColor="#8899a6"/>
</Grid>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="retweet.png"
Grid.Column="0"
WidthRequest="10"
HeightRequest="10"/>
<Label Text="{Binding RetweetCount}"
Grid.Column="1"
TextColor="#8899a6"/>
</Grid>
<Grid Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="heart.png"
Grid.Column="0"
WidthRequest="5"
HeightRequest="5"/>
<Label Text="{Binding LikeCount}"
Grid.Column="1"
TextColor="#8899a6"/>
</Grid>
<StackLayout Grid.Column="3">
<Image Source="share.png"/>
</StackLayout>
</Grid>
</Grid>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".95,.95,60,60">
<Button Text="+"
FontSize="Large"
FontAttributes="Bold"
BorderRadius="30"
WidthRequest="60"
HeightRequest="60"
TextColor="White"
BackgroundColor="#1da1f2"/>
</StackLayout>
</AbsoluteLayout>
</ContentPage>
<ContentPage Icon="search.png"></ContentPage>
<ContentPage Icon="notification.png"></ContentPage>
<ContentPage Icon="message.png"></ContentPage>
</TabbedPage>
After the design is over, I’m going to have to show the information inside. I have to create a model for this. At a simple level, I’m planting what I need into this model.
public class Model
{
public string FullName
{
get;
set;
}
public string Username
{
get;
set;
}
public string Date
{
get;
set;
}
public string Time
{
get;
set;
}
public string MentionCount
{
get;
set;
}
public string Tweet
{
get;
set;
}
public string LikeCount
{
get;
set;
}
public string RetweetCount
{
get;
set;
}
}
Then I create a list of these models. I’m importing this list into the List View.
public partial class AnaSayfaDetail : TabbedPage
{
public AnaSayfaDetail()
{
InitializeComponent();
FillInfo();
}
private void FillInfo()
{
List<Model> tweetList = new List<Model>
{
new Model
{
Date = "11/11/2018",
FullName = "Ayşegül Leylak",
Username = "leylakaysegul",
Time = "7sa",
LikeCount = "55",
MentionCount = "13",
Tweet = "Merhaba arkdaşlar Bu deneme tweetidir.",
RetweetCount = "29"
},
new Model
{
Date = "11/11/2018",
FullName = "Ayşegül Leylak",
Username = "leylakaysegul",
Time = "7sa",
LikeCount = "55",
MentionCount = "13",
Tweet = "Merhaba arkdaşlar Bu deneme tweetidir.",
RetweetCount = "29"
},
new Model
{
Date = "11/11/2018",
FullName = "Ayşegül Leylak",
Username = "leylakaysegul",
Time = "7sa",
LikeCount = "55",
MentionCount = "13",
Tweet = "Merhaba arkdaşlar Bu deneme tweetidir.",
RetweetCount = "29"
},
new Model
{
Date = "11/11/2018",
FullName = "Ayşegül Leylak",
Username = "leylakaysegul",
Time = "7sa",
LikeCount = "55",
MentionCount = "13",
Tweet = "Merhaba arkdaşlar Bu deneme tweetidir asdasd",
RetweetCount = "29"
},
new Model
{
Date = "11/11/2018",
FullName = "Ayşegül Leylak",
Username = "leylakaysegul",
Time = "7sa",
LikeCount = "55",
MentionCount = "13",
Tweet = "Merhaba arkdaşlar Bu deneme tweetidir asdadasdasds a asdasd.",
RetweetCount = "29"
},
new Model
{
Date = "11/11/2018",
FullName = "Ayşegül Leylak",
Username = "leylakaysegul",
Time = "7sa",
LikeCount = "55",
MentionCount = "13",
Tweet = "Merhaba arkdaşlar Bu deneme tweetidir. asdadas ads asd asd asd asda dad adasd asdasd asd asd ",
RetweetCount = "29"
},
new Model
{
Date = "11/11/2018",
FullName = "Ayşegül Leylak",
Username = "leylakaysegul",
Time = "7sa",
LikeCount = "55",
MentionCount = "13",
Tweet = "Merhaba arkdaşlar Bu deneme tweetidir.",
RetweetCount = "29"
},
new Model
{
Date = "11/11/2018",
FullName = "Ayşegül Leylak",
Username = "leylakaysegul",
Time = "7sa",
LikeCount = "55",
MentionCount = "13",
Tweet = "Merhaba arkdaşlar Bu deneme tweetidir.",
RetweetCount = "29"
},
};
liste.BindingContext = tweetList;
}
}
}
Finally, let’s put the new tweeting button. For this, we use Absolute Layout. The main page of the application is as follows.
There may be some difficulties because the icons are not fitted properly. For this you can find and put better icons, or convert them to different sizes for platforms icons.
If you have pages you want, we can make their screen designs. If you have any questions, you can contact me by mail or comment. Good work.
Leave a Reply