Xamarin Forms GoogleAds Show Bottom Of Shell

Question

In this code , I have first created reportpage and about page.then i create a shell page and add this two page to tab bar . i have a Ad in reportpage .now i want to to carry Ad below my tabbar in shell,any ways show Ad below Shell

<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:d="http://xamarin.com/schemas/2014/forms/design"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       xmlns:local="clr-namespace:OZHealth.Views" xmlns:views1="clr-namespace:OZHealth.Models" xmlns:controls="clr-namespace:OZHealth.Controls"
       Title="OZHealth"
       x:Class="OZHealth.AppShell">
    <Shell.Resources>
        <ResourceDictionary>
            <Color x:Key="NavigationPrimary">#2196F3</Color>
            <Style x:Key="BaseStyle" TargetType="Element">
                <Setter Property="Shell.BackgroundColor" Value="{StaticResource NavigationPrimary}" />
                <Setter Property="Shell.ForegroundColor" Value="White" />
                <Setter Property="Shell.TitleColor" Value="White" />
                <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
                <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
                <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
                <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
                <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
                <Setter Property="Shell.TabBarTitleColor" Value="White"/>
            </Style>
            <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
        </ResourceDictionary>
    </Shell.Resources>
        <TabBar>
        <Tab Title="Browse" Icon="tab_feed.png">
            <ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
        </Tab>
        <Tab Title="Reports" Icon="tab_about.png">
            <ShellContent ContentTemplate="{DataTemplate local:ReportsPage}" />
        </Tab>
    </TabBar>
</shell>

this is my ReportPage.one of item in tabbar

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="OZHealth.Views.ReportsPage"
             xmlns:viewmodels="clr-namespace:OZHealth.ViewModels" xmlns:views="clr-namespace:OZHealth.Views" xmlns:views1="clr-namespace:OZHealth.Models" xmlns:controls="clr-namespace:OZHealth.Controls"
             Title="{Binding Title}">

    <ContentPage.BindingContext>
        <viewmodels:ReportsViewModel />
    </ContentPage.BindingContext>

    <ContentPage.Resources>
    </ContentPage.Resources>

    <StackLayout Orientation="Vertical" Padding="16,40,16,40" Spacing="10">
        <!--this is my chart-->
        <views:PieChartView />
        <!--this is my GoogleaAds-->
        <views1:AdMobView x:Name="AdView" >
        </views1:AdMobView>
    </StackLayout>
</ContentPage>

This is my Shell page

I want to carry Ad bottom of Shell or app like this

How Can I Carry Ad To Bottom Of Shell? I Cant Use NavBar In Shell

Answer 1

Based on my research, it cannot be achieved in the native Forms, we should achieve it by custom renderer for shell. Here is running GIF(If you want to do that, you should add the admob view in xamarin.android).

You should create a custom renderer like following code in shell.

[assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
namespace XFormsAdsWithShell.Droid
{
    public class MyShellRenderer : ShellRenderer
    {
        public MyShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellItemRenderer CreateShellItemRenderer(ShellItem shellItem)
        {
            return new ShellItemRenderer(this);
        }
    }
}

ShellItemRenderer.cs

    internal class ShellItemRenderer : Xamarin.Forms.Platform.Android.ShellItemRenderer
    {

        public ShellItemRenderer(IShellContext shellContext) : base(shellContext)
        {

        }
        BottomNavigationView _bottomView;
        FrameLayout _navigationArea;
        public override Android.Views.View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            Android.Views.View _outerLayout =  base.OnCreateView(inflater, container, savedInstanceState);

             _bottomView = _outerLayout.FindViewById<BottomNavigationView>(Resource.Id.bottomtab_tabbar);
            _bottomView.SetMinimumHeight(220);
             _navigationArea = _outerLayout.FindViewById<FrameLayout>(Resource.Id.bottomtab_navarea);

            return _outerLayout;
        }

    }

The important place is create a BottomTabLayout.xml(Please do not change anther name), Add following layout code.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:id="@+id/bottomtab.navarea"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="bottom"
            android:layout_weight="1" />

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottomtab.tabbar"
            android:theme="@style/Widget.Design.BottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </LinearLayout>

    <FrameLayout
        android:id="@+id/bottomtab.tabbar.container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|bottom" >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="20dp"   
            android:background="@android:color/holo_red_dark">

         <!--add your google AD here-->

         <TextView

          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="AD Area"
           />
        </LinearLayout >
    </FrameLayout>

</FrameLayout>

I have another way is achieve it like following gif.

By following code.

<TabBar>
        <Tab Title="Browse" Icon="tab_feed.png">
            <ShellContent Title="item" ContentTemplate="{DataTemplate local:ItemsPage}" />
            <ShellContent Title="page1" ContentTemplate="{DataTemplate local:Page1}" />
        </Tab>

    </TabBar>

I hope others could give a better solution.