How to fullfill this UI in Xamarin forms?

Question

I want to fulfill this UI in Xamarin Forms. This is the screenshot of my UI.

So I have no clue how to do this UI in xamarin forms. I'm confused is it cardview or just a view in which I have to add all this images and labels. I need some suggestions for implementing this UI.

Answer 1

I used XFXCardview for this UI. And it seems to work pretty well. This is the GitHub link. So these are the changes I did in my code -

 <xfx:XfxCardView 
                        BackgroundColor="White"
                        CornerRadius="30" 
                    Elevation="20"
                 HeightRequest="150" IsClippedToBounds="True">
                    <Grid RowSpacing="0" >
                        <Grid ColumnSpacing="0">
                            <Grid.RowDefinitions >
                                <RowDefinition Height="2*"></RowDefinition>
                                <RowDefinition Height="*"></RowDefinition>

                                <RowDefinition Height="Auto"></RowDefinition>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Frame Margin="10,10,10,-20" Padding="-30" CornerRadius="10" Grid.RowSpan="3"  BackgroundColor="LightBlue"  IsClippedToBounds="True">
                                <Image Margin="-70,0,0,0"  Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"  BackgroundColor="AliceBlue"  Source="restaurantimage1.jpg"  />
                            </Frame>
                            <Label Grid.Row="0" Grid.Column="1" Margin="0,30,30,0"  HorizontalOptions="Start" Text="Premera restaurant" TextColor="Black" FontFamily="Bold,20"/>
                            <Image Grid.Row="0" Grid.Column="1" Margin="0,30,10,0" HorizontalOptions="End" Source="whitehearticon3.jpg"/>
                            <Label Grid.Row="1" Grid.Column="1" Margin="0,-20,40,0"  HorizontalTextAlignment="Start" Text="Avenue Road,256" TextColor="Blue"/>
                            <Label Grid.Row="2" Grid.Column="1" Margin="0,-40,40,0"  VerticalTextAlignment="Start" Text="Indian,Italy,Chinese Kitchen" TextColor="LightGray"/>

                            <Image Grid.Row="3" Grid.Column="1" Margin="0,-20,30,0" Source="whitestaricon1.png" WidthRequest="10" HeightRequest="10" BackgroundColor="Blue"/>
                            <Label Grid.Row="3" Grid.Column="1" Margin="0,-20,40,0" HorizontalTextAlignment="Center" Text="4,3"/>
                        </Grid>
                    </Grid>
                </xfx:XfxCardView>

Answer 2

You can create a "CardView" using the “Frame” layout available in Xamarin.Forms.

The code is as follows:

CardViewTemplate.xml:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App68.CardViewTemplate">
    <ContentView.Content>
        <Frame IsClippedToBounds="True"  
           HasShadow="True"  
           Margin="30"
           BorderColor="White"
           BackgroundColor="White" >
            <Frame.OutlineColor>
                <OnPlatform x:TypeArguments="Color"  
                    Android="Gray"  
                    iOS="Gray"/>
            </Frame.OutlineColor>
            <Frame.Margin>
                <OnPlatform x:TypeArguments="Thickness"  
                     Android="10"   
                     iOS="10"/>
            </Frame.Margin>
            <StackLayout Orientation="Horizontal">

                <Grid VerticalOptions="CenterAndExpand"  
                 Padding="0"  
                 HorizontalOptions="FillAndExpand"  
                 BackgroundColor="Transparent">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="{Binding PreviewImage}" />
                    <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding RestaurantName}" />
                    <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Address}"  />
                    <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding FoodTypes}" />
                    <Label Grid.Row="3" Grid.Column="1" Text="{Binding Rating}" />
                    <Label Grid.Row="3" Grid.Column="2" Text="{Binding Time}" />
                    <Label Grid.Row="3" Grid.Column="3" Text="{Binding Distance}" />
                   </Grid>
            </StackLayout>
        </Frame>
    </ContentView.Content>
</ContentView>

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App68"
             x:Class="App68.MainPage">

    <StackLayout Orientation="Vertical">
        <Label Text="CardView Demo in Xamarin Forms"  
               FontAttributes="Bold"  
               FontSize="Medium"  
               VerticalOptions="Start"  
               HorizontalTextAlignment="Center"  
               VerticalTextAlignment="Center"  
               BackgroundColor="Transparent"  
               HorizontalOptions="CenterAndExpand" />
        <ListView x:Name="listView"   
                  SelectedItem="{Binding SelcetedItem,Mode=TwoWay}"   
                  HasUnevenRows="True"  
                  ItemsSource="{Binding lstRestaurants}" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <local:CardViewTemplate/>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

</ContentPage>

Restaurant.cs

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;

namespace App68
{
    class Restaurant
    {
        public String PreviewImage { get; set; }
        public string RestaurantName { get; set; }
        public bool IsFavorite { get; set; }
        public string Address { get; set; }
        public string FoodTypes { get; set; }
        public Image RatingIcon { get; set; }
        public double Rating { get; set; }
        public Image TimeIcon { get; set; }
        public double Time { get; set; }
        public Image DistanceIcon { get; set; }
        public double Distance { get; set; }
    }
}

RestaurantViewModel.cs

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;

namespace App68
{
    class RestaurantViewModel
    {
        public IList<Restaurant> lstRestaurants { get; set; }
        public object SelectedItem { get; set; }
        public RestaurantViewModel()
        {
            lstRestaurants = new List<Restaurant>();
            GenerateCardModel();
        }

        private void GenerateCardModel()
        {
            var restaurant1 = new Restaurant()
            {
                PreviewImage = "Restaurant_1.jpg",
                RestaurantName = "Premera restaurant",
                IsFavorite = true,
                Address = "Avenue Road 256",
                FoodTypes = "India Italy Chinese kitchen",
                Rating = 4.3,
                Time = 150,
                Distance = 3
            };

            lstRestaurants.Add(restaurant1);

            var restaurant2 = new Restaurant()
            {
                PreviewImage = "Restaurant_2.jpg",
                RestaurantName = "Premera restaurant",
                IsFavorite = true,
                Address = "Avenue Road 256",
                FoodTypes = "India Italy Chinese kitchen",
                Rating = 4.3,
                Time = 150,
                Distance = 3
            };

            lstRestaurants.Add(restaurant2);
        }
    }
}

The effect is as the follows:

Answer 3

I assume that you will have several restaurants as some kind of search result and presumably the view will have to be scrollable if there are many results?

I would implement that with a ListView:

<ListView ItemsSource="{Binding Restaurants} HasUnevenRows="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell Height="100">
                <Grid>
                     <Grid.RowDefinitions>
                         <RowDefinition Height="*">
                         <RowDefinition Height="*">
                         <RowDefinition Height="*">
                         <RowDefinition Height="*">
                     </Grid.RowDefinitions>
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="100"/>
                         <ColumnDefinition Width="*"/>
                         <ColumnDefinition Width="*"/>
                         <ColumnDefinition Width="*"/>
                     </Grid.ColumnDefinitions>
                     <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="{Binding PreviewImage}" .... />
                     <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Title}" ... />
                     <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Address}" ... />     
                     <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding FoodTypes}" ... />    
                     <!-- Add implementations for Rating, Like-Button and other labels in according rows and columns -->                  
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

You would also need a Model class for your restaurant item which will contain all Data as I have sketched out within the {Binding XXX} tags. In your codebehind you have to create a List (or better an ObservableCollection ) and set that as the ListView's Itemssource.

Also you will probably need to add some effects or custom renderers for the visual touch-ups such as drop shadows, etc.