I've encountered a problem working with Xamarin Forms for Android. I've created a TabbedPage
with ContentPages for displaying different content. At the bottom, there is a navigational tab bar, which should have icons displayed. What is the way to center the tab bar icons or align the displayed content, so that the icon would be in the center? Currently, the text is below the horizontal centerline of the individual tab bar item while the icon is above it:
This project is for Android only
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
x:Class="RandomMovie.MainPage"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:windows="clr-namespace:Xamarin.Forms.PlatformConfiguration.WindowsSpecific;assembly=Xamarin.Forms.Core">
<ContentPage Padding="0,-15,0,0" IconImageSource="@drawable/search_icon.png">
<CollectionView ItemsSource="{Binding Watchlist}" Margin="0" >
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Margin="0" Padding="5,5,5,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Image Margin="0"
HeightRequest="300"
WidthRequest="170" Aspect="AspectFit"
VerticalOptions="End">
<Image.Source >
<UriImageSource
Uri="{Binding poster_path}"
CacheValidity="14"
CachingEnabled="true"
>
</UriImageSource>
</Image.Source>
</Image>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ContentPage>
<ContentPage Title="Search">
<ScrollView>
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
</ContentPage>
<ContentPage Title="Ratings">
</ContentPage>
There is no way to this from XAML code only.
To achieve this on Android you need to get access to the native BottomNavigationView and change
LabelVisibilityMode
toLabelVisibilityMode.LabelVisibilityUnlabeled
Here's how I did in one of my apps using a custom renderer for
TabbedPage
: