Press "Enter" to skip to content

Xamarin.Forms Youtube

Hello friends, Today i will try to make Youtube clone using the Xamarin.Forms. Youtube is the one of the most used video platform in the world and I think youtube has really good design. I will make the Youtube home screen design. If you want me to do any other app design please comment it. I will make the design with the parts.

Firstly, We have to use a tabbed page so i created a tabbed page which name is HomeTabbedPage and then add the children of this tabbed page. I also created a folder which name is HomeTabbedViews and add the children pages like Home Page, Discover Page…

namespace XamarinYoutube.Views
{
    public partial class HomeTabbedPage : TabbedPage
    {
        public HomeTabbedPage()
        {
            InitializeComponent();
            Children.Add(new HomePage());
            Children.Add(new DiscoverPage());
            Children.Add(new SubscriptionsPage());
            Children.Add(new InboxPage());
            Children.Add(new BookmarkPage());
        }
    }
}

After the adding page i made the title view for the screen. In the every tabbed page title Youtube use the same title view so for that i will made the design in the HomeTabbedPage.xaml. For the icons, I use FontAwesome and you can find on the internet and add the font awesome to your projects.

<NavigationPage.TitleView>
      <StackLayout Orientation="Horizontal">
          <Label Text="&#xf167;"
                 FontFamily="{StaticResource FontAwesomeBrands}"
                 TextColor="{StaticResource defaultRedColor}"
                 FontSize="24"
                 VerticalOptions="Center"
                 HorizontalOptions="Start"/>
          <Label VerticalOptions="Center"
                 HorizontalOptions="StartAndExpand"
                 FontAttributes="Bold"
                 TextColor="White"
                 Text="YouTube"/>
          <Label Text="&#xf26c;"
                 FontFamily="{StaticResource FontAwesomeSolid}"
                 TextColor="White"
                 Margin="10,0,10,0"
                 VerticalOptions="Center"
                 HorizontalOptions="End"/>
          <Label Text="&#xf03d;"
                 FontFamily="{StaticResource FontAwesomeSolid}"
                 TextColor="White"
                 Margin="10,0,10,0"
                 VerticalOptions="Center"
                 HorizontalOptions="End"/>
          <Label Text="&#xf002;"
                 FontFamily="{StaticResource FontAwesomeSolid}"
                 TextColor="White"
                 Margin="10,0,10,0"
                 VerticalOptions="Center"
                 HorizontalOptions="End"/>
          <ff:CachedImage Source="ebubekir.jpg"
                          WidthRequest="30"
                          HeightRequest="30"
                          VerticalOptions="Center"
                          HorizontalOptions="Center"
                          Margin="0,0,5,0">
              <ff:CachedImage.Transformations>
                  <ffTransformations:RoundedTransformation Radius="240"/>
              </ff:CachedImage.Transformations>
          </ff:CachedImage>
      </StackLayout>
  </NavigationPage.TitleView>

Now we can make the Home Page design. In the home page we can see the we just only need to use a ListView. I added a listview and then make the design and arrangements of the items using with the Grid. You can see the code below.

<ScrollView>
        <ListView ItemsSource="{Binding .}"
                  Margin="0,10,0,0"
                  BackgroundColor="Transparent"
                  x:Name="listYoutubeVideos"
                  HasUnevenRows="True"
                  VerticalScrollBarVisibility="Never"
                  ItemSelected="listYoutubeVideos_ItemSelected"
                  SeparatorVisibility="None"
                  VerticalOptions="Fill"
                  HorizontalOptions="Center">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Margin="0,5,0,5">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <ff:CachedImage Grid.Row="0"
                                            Source="{Binding VideoPicture}"
                                            Aspect="AspectFill"
                                            VerticalOptions="Fill"
                                            HorizontalOptions="Fill"/>
                                <Label Text="{Binding VideoTime}"
                                       BackgroundColor="Black"
                                       Grid.Row="0"
                                       Margin="15"
                                       VerticalOptions="End"
                                       HorizontalOptions="End"
                                       TextColor="White"
                                       FontSize="Small"/>                                
                            <Grid Grid.Row="1"
                                  VerticalOptions="Center"
                                  HorizontalOptions="Center"
                                  Margin="10,0,10,0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="8*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <!--Profile Picture-->
                                <ff:CachedImage Source="{Binding VideoProfilePicture}"
                                                VerticalOptions="Start"
                                                Grid.Column="0"
                                                WidthRequest="40"
                                                HeightRequest="40"
                                                Aspect="AspectFit">
                                    <ff:CachedImage.Transformations>
                                        <ffTransformations:RoundedTransformation Radius="240"/>
                                    </ff:CachedImage.Transformations>
                                </ff:CachedImage>
                                <!--Video Name and Details-->
                                <Grid Grid.Column="1">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Label Text="{Binding VideoTitle}"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Start"
                                           Grid.Row="0"
                                           FontSize="14"
                                           TextColor="White"/>
                                    <StackLayout Orientation="Horizontal"
                                                 Grid.Row="1">
                                        <Label TextColor="{StaticResource defaultGrayColor}"
                                               VerticalOptions="Center"
                                               HorizontalOptions="Start"
                                               LineBreakMode="TailTruncation"
                                               FontSize="Micro">
                                            <Label.FormattedText>
                                                <FormattedString>
                                                    <Span Text="{Binding VideoProfileName}"/>
                                                    <Span Text=" . "/>
                                                    <Span Text="{Binding VideoShownCount}"/>
                                                    <Span Text=" görüntülenme . "/>
                                                    <Span Text="{Binding VideoSharingDay}"/>
                                                </FormattedString>
                                            </Label.FormattedText>
                                        </Label>
                                    </StackLayout>
                                </Grid>
                                <Label Text="&#xf142;"
                                       FontFamily="{StaticResource FontAwesomeSolid}"
                                       VerticalOptions="Center"
                                       HorizontalOptions="End"
                                       TextColor="{StaticResource defaultGrayColor}"
                                       Grid.Column="2"/>
                            </Grid>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ScrollView>

For the binding, I added a YoutubeModel and created a List in the HomePage.cs.  Then, I bind the List to the my listview in the home page.

public class YoutubeModel
    {
        public string VideoPicture { get; set; }
        public string VideoProfilePicture { get; set; }
        public string VideoTitle { get; set; }
        public string VideoProfileName { get; set; }
        public string VideoShownCount { get; set; }
        public string VideoSharingDay { get; set; }
        public string VideoTime { get; set; }
    }

If you have any question please comment it or send me a mail.

Be First to Comment

Leave a Reply

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