Press "Enter" to skip to content

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.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *