How can I prevent xamarin form ListView items overlapping? - xamarin

Question

I am currently working on a Xamarin project which displays some content requesting from an API. The requested content is a list of objects and they will be displayed in a list view. API call is working properly and provide responds as expected. When I display the respond in a list view it looks little messy.
This is my Xamarin form page code (Some contents are hard coded in order to make the UI consistent before further development):
<?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:helper="clr-namespace:WinningQuotes.Helper;assembly=WinningQuotes"
x:Class="WinningQuotes.Views.QuotesPage"
Title="Quotes">
<ContentPage.Content>
<StackLayout BackgroundColor="LightGray" Padding="0, 0, 0, 10">
<ListView x:Name="ListQuote" ItemTapped="ListQuote_OnItemTapped" SeparatorVisibility="None" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="LightGray" Padding="10, 10, 10, 0">
<Grid RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.25}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.75}"
BackgroundColor="#FFFFFF" ColumnSpacing="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" BackgroundColor="Brown" Padding="10">
<Label Text="Author" TextColor="#FFFFFF" FontSize="18" />
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Padding="10, 5, 10, 5" Orientation="Horizontal">
<Image Source="{helper:EmbededImage WinningQuotes.Resources.Images.Timeline.png}" Aspect="AspectFill" />
<StackLayout Margin="10, 0, 0, 0" HorizontalOptions="StartAndExpand">
<Label Text="{Binding quote_text}" TextColor="Brown" FontSize="18" />
</StackLayout>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="1" Padding="10, 5, 5, 5">
<Label Text="AUTHOR HITS" FontSize="10" TextColor="DarkGray" VerticalOptions="End" />
<Label Text="24" FontSize="18" TextColor="DarkGray" VerticalOptions="End" />
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="2" Padding="5">
<Label Text="QUOTES HITS" FontSize="10" TextColor="DarkGray" VerticalOptions="End" />
<Label Text="120" FontSize="18" TextColor="DarkGray" VerticalOptions="End" />
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="3" Padding="5, 5, 10, 5">
<Button Text="Quotes" VerticalOptions="FillAndExpand" HorizontalOptions="EndAndExpand" FontSize="10" FontAttributes="None" />
</StackLayout>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
When I run this on android emulator or real android device, it looks like this:
ListView element contents are overlapping and some unnecessary space below the brown box etc. How can I make this page look consistent?

Answer 1

You can use Spacing in StackLayout to seperate the childeren.
I believe changing default margin to this->Margin="10, 0, 0, 0" is the reason of overlapping. Try it this way. Hope it works.
<StackLayout Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Padding="10, 5, 10, 5" Orientation="Horizontal" Spacing="10">
<Image Source="{helper:EmbededImage WinningQuotes.Resources.Images.Timeline.png}" Aspect="AspectFill" />
<Label Text="{Binding quote_text}" TextColor="Brown" FontSize="18" />
</StackLayout>

Answer 2

This can somethings happen if you haven't defined a RowHeight or set HasUnevenRows
<ListView RowHeight="125">
<ListView HasUnevenRows="true">