Xamarin Forms Reddit Design
Hello my friends, Today i will make one of the most used social app which name is Reddit. I will design the main screen of the reddit using with the Xamarin.Forms. I try to design Reddit but i did not find the same icons so it can be seem a little bit different but if you can find the right icons it will be better and Design will be seem better.
I start to my project to telling my page it will be a tabbed page and then i added a titleview and i added the my user icon and search bar in the titleview. Reddit have 5 tabbed page in the bottom. I add 5 tabbed page in the bottom and then in the main page there are 3 tabbed page on top. I do my operations in the “home page”.
<ContentPage Icon="reddit.png" Title="" WidthRequest="30" BackgroundColor="#E8D1DC"/>
<ContentPage Icon="apps.png" Title="" WidthRequest="30"/>
<TabbedPage Icon="post.png" Title="" WidthRequest="30" BarBackgroundColor="White" BarTextColor="Black">
<ContentPage Title="News"/>
<ContentPage Title="Home">
<StackLayout>
<Grid x:Name="gridHotPost">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="fire.png"
HorizontalOptions="Start"
HeightRequest="30"
WidthRequest="30"/>
</StackLayout>
<StackLayout Grid.Column="1">
<Label Text="Hot Posts"
FontSize="Medium"
FontAttributes="Bold"
TextColor="Silver"
HorizontalOptions="StartAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="2">
<Image Source="hamburger.png"
HeightRequest="30"
WidthRequest="30"
HorizontalOptions="End"/>
</StackLayout>
</Grid>
<ListView x:Name="listPost"
ItemsSource="{Binding .}"
HasUnevenRows="True"
SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid BackgroundColor="White"
Margin="0,0,0,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="user.png"
Grid.Column="0"
WidthRequest="30"
HeightRequest="30"
VerticalOptions="Center"
HorizontalOptions="Start"/>
<Grid Grid.Column="1"
VerticalOptions="Center"
HorizontalOptions="Start">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Text="r/worldnews"
TextColor="Silver"
Grid.Row="0"/>
<Label Grid.Row="1"
Text="u/EbuSezer"
TextColor="Silver"/>
</Grid>
<Label Text="..."
TextColor="Silver"
FontAttributes="Bold"
HorizontalOptions="End"
Grid.Column="2"/>
</Grid>
<StackLayout Grid.Row="1">
<Label Text="Best WebSite Ever!!!"/>
</StackLayout>
<StackLayout Grid.Row="2">
<Image Source="post1.png"
Aspect="AspectFill"
HeightRequest="300"
WidthRequest="300"/>
</StackLayout>
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Source="up.png"
WidthRequest="20"
HeightRequest="20"
HorizontalOptions="StartAndExpand"
Grid.Column="0"/>
<Label Text="1.4k"
HeightRequest="30"
WidthRequest="30"
Grid.Column="1"
HorizontalOptions="StartAndExpand"/>
<Image Source="down.png"
WidthRequest="20"
HeightRequest="20"
Grid.Column="2"
HorizontalOptions="StartAndExpand"/>
<Image Grid.Column="3"
HorizontalOptions="EndAndExpand"
HeightRequest="20"
WidthRequest="20"
Source="comment.png"/>
<Label Grid.Column="4"
Text="10"
HorizontalOptions="StartAndExpand"
HeightRequest="20"
WidthRequest="20"/>
<Image HorizontalOptions="EndAndExpand"
Grid.Column="5"
Source="share.png"
HeightRequest="20"
WidthRequest="20"/>
<Label Text="Share"
Grid.Column="6"
HeightRequest="20"
HorizontalOptions="StartAndExpand"/>
</Grid>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
<ContentPage Title="Popular"/>
</TabbedPage>
<ContentPage Icon="comment2.png" Title="" WidthRequest="30"/>
<ContentPage Icon="message.png" Title="" WidthRequest="30"/>
I use the these code syntax above for the design Reddit Main Screen. If you realize i use listview and i bind the this listview for the bind this listview i create a model in the class side. Here are the code syntax;
List<model> models = new List<model>
{
new model
{
name="1"
},
new model
{
name="1"
},
new model
{
name="1"
},
new model
{
name="1"
},
new model
{
name="1"
},
new model
{
name="1"
},
new model
{
name="1"
}
};
listPost.BindingContext = models;
}
I bind the this model to my listview. The screen view of the program is below;
You can find the project on my github just click here. You can ask your question on comments or ask me in the e-mail.