Replicating a Drink and Food Menu UI in Xamarin.Forms
Tags: android, ios, xamarin, csharp
Published: 2020-08-26 12:06:55

---
title: Replicating a Drink and Food Menu UI in Xamarin.Forms
published: true
date: 2020-08-26 11:00:50 UTC
tags: android, ios, xamarin, csharp
canonical_url: https://www.syncfusion.com/blogs/post/replicating-a-drink-and-food-menu-ui-in-xamarin-forms.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Replicating-a-Drink-and-Food-Menu-UI-in-Xamarin.Forms_-672x372.jpg
---

[![Replicating a Drink and Food Menu UI in Xamarin.Forms](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Replicating-a-Drink-and-Food-Menu-UI-in-Xamarin.Forms_-672x372.jpg)](https://www.syncfusion.com/blogs/post/replicating-a-drink-and-food-menu-ui-in-xamarin-forms.aspx)

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](https://dribbble.com/shots/7171351-Food-Drink-Menu-DailyUI-043/attachments/173424?mode=media).

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](https://www.syncfusion.com/xamarin-ui-controls/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 development](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Drink-and-Food-Menu-UI-development-order.png)Let’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](https://askxammy.com/working-with-gridlayout-in-xamarin-forms/).

```html
<!-- 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!

```html
<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 PancakeView](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/NuGet-Package-for-PancakeView.png)Then, add the following namespace in your XAML.

```html
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](https://github.com/sthewissen/Xamarin.Forms.PancakeView).

**![Main Picture](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Main-Picture.png)Code implementation**

```html
<!-- 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 icon](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Corner-icon.png)Code implementation**

```html
<!-- 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](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Main-information.png)  
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.

```html
<!-- 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](https://askxammy.com/easy-way-to-create-circle-buttons-in-xamarin-forms/).

```html
<!--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](https://help.syncfusion.com/xamarin/rating/getting-started).)

![NuGet Package for Syncfusion Xamarin Rating control](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/NuGet-Package-for-Syncfusion-Xamarin-Rating-control.png)Add the following namespace in your XAML.

```html
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.

```html
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.

```html
<!--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.

**![Description](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Description.png)Code implementation**

```html
<!-- 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](https://askxammy.com/make-your-life-simpler-with-the-collectionviews-layouts-%F0%9F%98%8E/).

![Menu](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Menu.png)In 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**

```html
<!-- 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](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Cart-information.png)

**Code implementation**

```html
<!-- 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.

![Output](https://www.syncfusion.com/blogs/wp-content/uploads/2020/08/Output-3.png)And our UI is done!

**Reference:**

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

[**https://github.com/SyncfusionExamples/FoodDrinkUIApp**](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](https://www.syncfusion.com/xamarin-ui-controls) 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 forum](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms). We are always happy to assist you!