Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (23)Angular  (39)ASP.NET  (47)ASP.NET Core  (53)ASP.NET MVC  (83)Azure  (27)Blazor  (49)DocIO  (18)Essential JS 2  (64)Essential Studio  (159)Flutter  (53)JavaScript  (134)Microsoft  (96)PDF  (48)React  (29)Succinctly series  (118)Syncfusion  (400)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (14)Windows Forms  (52)WPF  (92)Xamarin  (105)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (100)Chart  (40)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (31)Development  (234)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (14)Extensions  (7)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (24)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (140)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (2)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (15)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (4)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (17)UI  (62)Uncategorized  (68)Unix  (2)User interface  (49)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (7)Web  (99)What's new  (62)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Replicating a Drink and Food Menu UI in Xamarin.Forms

Replicating a Drink and Food Menu UI in Xamarin.Forms

Howdy! I will never stop saying how much I love building UI in Xamarin.Forms and for today’s post that’s exactly what we are going to do. This time we’ll be building a drink menu UI in Xamarin.Forms obtained from a Dribble design that you can see here.

First of all, it’s important to keep in mind some things that will help us to get our final design:

  • To create the rating bar, we will use the Syncfusion Xamarin Rating control.
  • Pay attention, step by step, to what the code is telling us. In each code block, you are going to find comments like: “You must add here what is explained in the next step.” This is a guide to how to better build our code.

How to start

Sometimes the most difficult decision is how to start. It’s probable that at some point in your life as a developer, you’ll hear people say things like, “I just don’t know how to start. I know how to use the layouts, but I don’t know how to apply them to a UI.”

Well, just for this and other similar reasons, it is important to be clear about the order in which we will do our development. In the long run, it saves us time, and helps us feel more secure and not get overwhelmed while developing an UI.

In the following image, we have an analysis of the design, dividing it into the order we will be explaining and developing it.

Drink and Food UI in Xamarin. Forms order of developmentLet’s start 

Before starting to develop the UI, we have to work with everything necessary to build the main structure of the project. Let’s do it now!

Main layout structure: This is the layout that will contain our design. In this case, we will use the DataGrid as a main layout. If you aren’t familiar with the DataGrid structure, you can refer to this article.

<!-- Main structure-->
<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,*" ColumnDefinitions="*,Auto">
   <!-- You must write here what is explained from the step number 1 -->
</Grid>

<script src="https://gist.github.com/LeomarisReyes/fb1dc3e2841aa162af143e05309d74ed.js"></script>

Color as a resource: In your App.xaml, let’s create a resource for the colors that we will be using in our design. It will help us have clean and organized code. If we want to change a color, we just have to do it in one resource!

<Application.Resources>
         <Color x:Key="Branding">#fe9a0f</Color>
         <Color x:Key="SecundaryBranding">#fddcbe</Color>
 </Application.Resources>

<script src="https://gist.github.com/LeomarisReyes/fd47d3ab274cbd1377f21a92935032f8.js"></script>

PancakeView: Add this NuGet package to all your projects.

NuGet Package for PancakeViewThen, add the following namespace in your XAML.

xmlns:PanCake="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"

<script src="https://gist.github.com/LeomarisReyes/547c6ed59469f70a492216acd8a16486.js"></script>

After implementing all the steps explained, let’s continue with the main picture!

How to render the drink UI

Follow the below steps to render the drink UI component in Xamarin.Forms:

Step 1: Main picture

Here, we just need to add an image. It must be perfectly square. You should not worry if it has rounded corners, for this we will use PancakeView.

Main PictureCode implementation

<!-- Main image-->
                <PanCake:PancakeView CornerRadius="0,0,70,0" Grid.Row="0" 
                 Grid.Column="0" Grid.ColumnSpan="2" IsClippedToBounds="true">
                       <Image Source="Dessert" VerticalOptions="Start" Aspect="AspectFill"  
                         HeightRequest="{OnPlatform Android='260', iOS='395'}"/> 
                </PanCake:PancakeView>
<!-- You must add here what is explained in the next step -->

<script src="https://gist.github.com/LeomarisReyes/e1183918b7969dd6a1f07b62a153d5fe.js"></script>

Step 2: Corner icon

In this section, it’s important to detail the components that are needed:

  • Lower-left corner rounded (to obtain the lower left rounded corner, we will be using the PancakeView again)
  • Shopping cart icon
  • Cart counter

Corner iconCode implementation

<!-- Corner icon-->
  <!-- Corner left rounded wall-->
     <PanCake:PancakeView  Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"  
        Grid.RowSpan="2" HorizontalOptions="End" VerticalOptions="Start" 
         WidthRequest="85" CornerRadius="0,0,50,0" HeightRequest="120">
             <Button Grid.Row="0" ImageSource="ShoppingCart" 
               BackgroundColor="{StaticResource Branding}" />
     </PanCake:PancakeView>
  <!--Counter button-->
      <Button Grid.Row="0" Grid.Column="1" BackgroundColor="White" 
        HorizontalOptions="End" TranslationY="42" TranslationX="-19" 
        VerticalOptions="Start" TextColor="{StaticResource Branding}" FontSize="10" 
        Text="2" HeightRequest="20" WidthRequest="20" CornerRadius="10"/>
<!-- You must add here what is explained in the next step -->

<script src="https://gist.github.com/LeomarisReyes/0f24e30f3b25117303ab50ccd1a41a0a.js"></script>

Step 3: Main information

Main information
To replicate the main information, we need three components, which we will be developing one by one.

  • Title

Refer to the following code example to render the title for the drink item.

<!-- Main information-->
    <!--Dessert name-->
              <Label Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" 
               Text="Peanut Smoothie" Padding="35,20,0,0"  FontAttributes="Bold" 
               FontSize="29"/>
<!-- You must add here what is explained in the next step -->

<script src="https://gist.github.com/LeomarisReyes/6ed561c1f5a55eef4ded394dd5b9ea5b.js"></script>
  • Rounded button

To get the rounded button, you just have to add the WidthRequest and HeightRequest properties with the same value. Then, add the CornerRadius property with half of the value we added previously. You can read more information about this topic here.

<!--Rounded button-->
               <PanCake:PancakeView  Grid.Row="1" Grid.Column="1" 
               Grid.RowSpan="2" Padding="0,0,40,0">
                   <Button VerticalOptions="Center" ImageSource="Heart" 
                   HorizontalOptions="End" BackgroundColor="{StaticResource Branding}" 
                   WidthRequest="56" HeightRequest="56" CornerRadius="28"/>
               </PanCake:PancakeView>
<!-- You must add here what is explained in the next step -->

<script src="https://gist.github.com/LeomarisReyes/3b458417a0caa123fe42dbf4beab712d.js"></script>
  • Star component

To create this, we will be using the Syncfusion Xamarin Rating control.

Add the Syncfusion.Xamarin.SfRating NuGet package to all your projects. (You can read more information about it in the control documentation.)

NuGet Package for Syncfusion Xamarin Rating controlAdd the following namespace in your XAML.

xmlns:rating="clr-namespace:Syncfusion.SfRating.XForms;assembly=Syncfusion.SfRating.XForms"

<script src="https://gist.github.com/LeomarisReyes/8be59dbe544c774b3467ea2f6f009bb0.js"></script>

As an additional step on iOS, add the following line in your AppDelegate.cs file after the LoadApplication method.

Syncfusion.SfRating.XForms.iOS.SfRatingRenderer.Init();

<script src="https://gist.github.com/LeomarisReyes/f00dc200fa7222fae28c881b06a160c0.js"></script>

Note: You don’t need this for Android.

Then, do the code implementation.

  
<!--Star component-->
<rating:SfRating Grid.Column="0" Grid.Row="2" x:Name="sfRating"  ItemCount="5" Value="5" ReadOnly="true" ItemSize="25" HeightRequest="35" HorizontalOptions="StartAndExpand" Margin="30,0,0,0"/>
<Label Grid.Column="1" Grid.Row="2" Text="4.8" HorizontalOptions="Start" FontAttributes="Bold" TextColor="#fe9a0f" FontSize="18" Padding="20,0,0,0"/>
<!-- You must add here what is explained in the next step -->

<script src="https://gist.github.com/LeomarisReyes/9fbd90f021bcc6590b1060d1e5f9c971.js"></script>

Step 4: Description

In this part, we are going to add a description label.

DescriptionCode implementation

 <!-- Description -->
<Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" FontSize="20" Margin="35,5,30,0" Text="Creamy peanut butter and frozen and dark chocolate with some cacao all mixed with frozen, berries, served with cherry on top." TextColor="Silver"/>
<!-- You must add here what is explained in the next step -->
             
<script src="https://gist.github.com/LeomarisReyes/cea59b3be011b8c4800070e9e29460a5.js"></script>

Step 5: Menu 

Now, we are going to use a control that I really love! CollectionView allows us to show a list of information in both vertical and horizontal modes. We are using the horizontal mode. If you want to know more about this control, you can refer to this Xamarin blog.

MenuIn this list, we can see the following three components:

  • A frame with rounded corners (we are using the SecondaryColor resource declared at the beginning of this article)
  • Menu icons
  • Menu title

Code implementation

<!-- Menu-->
<CollectionView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"
                                ItemsSource="{Binding menu}"
                                Margin="35,20,30,20"
                                HeightRequest="90"
                                VerticalOptions="FillAndExpand"
                                HorizontalScrollBarVisibility="Never" 
                                ItemsLayout="HorizontalList">
                             <CollectionView.ItemTemplate>
                                   <DataTemplate>
                                       <StackLayout Padding="0,0,15,0">
                                           <Frame HeightRequest="46" WidthRequest="35" 
                                            HasShadow="False" BackgroundColor="{StaticResource  
                                            SecundaryBranding}" CornerRadius="23">
                                               <Grid RowDefinitions="Auto,Auto" 
                                                VerticalOptions="StartAndExpand">
                                                    <Image Grid.Row="0" HeightRequest="{OnPlatform 
                                                      Android='16',iOS='30'}" Source="{Binding Icon}"/>
                                                    <Label Grid.Row="1" Text="{Binding Name}" 
                                                     FontSize="10" HorizontalTextAlignment="Center"/>
                                               </Grid>
                                           </Frame>
                                       </StackLayout>
                                   </DataTemplate>
                            </CollectionView.ItemTemplate>
                </CollectionView>
<!-- You must add here what is explained in the next step -->

<script src="https://gist.github.com/LeomarisReyes/8deea0dfab91a44099f576af37ce30b6.js"></script>

Step 6: Cart information

Finally, let’s build the cart information part. For this, we need to add a label with the price and an Add to cart button at the bottom.

Note: The Add to cart button has an upper left rounded corner. This is why you also see PancakeView in this code.

Cart information

Code implementation

 <!-- Cart information-->
 <!-- Price-->
 <Label Grid.Row="5" Grid.Column="0" Text="$12.00" Padding="45,0,0,25" FontSize="20" FontAttributes="Bold" VerticalOptions="End"/>
            <!--Add to Cart button-->
                <PanCake:PancakeView Grid.Row="5" Grid.Column="1" 
                 CornerRadius="50,0,0,0" IsClippedToBounds="true" HeightRequest="75" 
                 VerticalOptions="End">
                     <Button BackgroundColor="{StaticResource Branding}" 
                      TextColor="White" Text="Add to cart" FontSize="22"  
                      FontAttributes="Bold" WidthRequest="220"/>
                </PanCake:PancakeView> 

<script src="https://gist.github.com/LeomarisReyes/33feeab9939a7ca6f94c942abde5eb61.js"></script>

After executing these code examples, we will get output like in the following screenshots.

OutputAnd our UI is done!

Reference:

 To see the complete code structure, see this Github repository.

 https://github.com/SyncfusionExamples/FoodDrinkUIApp

Conclusion

I hope you have understood everything well and that you are encouraged to create one by yourself from scratch. Remember that the more you practice, the better you will develop!

See you next time! Thanks for reading!

Syncfusion Xamarin offers over 150 UI controls, from basic editors to powerful, advanced controls like DataGrid, Charts, ListView, and RTE. Try them out and leave your comments below.

You can also contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Comments (2)

Awesome work, thank you for sharing!

Good Job. Very helpful tips and tricks. Happy coding

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top