How can I make custom tabbed page?(Rounded frame on the bottom)

Question

How can I make custom tabbed page? Sorry for a stupid question,but please help.Maybe someone now how to make custom tabbed page like this I don't know how to make this rounded frame at the bottom to customize the tabbed page

Answer 1

You can use Xamarin Community Toolkit available via NuGet. There you have examples, which might help with getting what you want. This is what I quickly got by looking at their example:

Use TabStripBackgroundView to get rounded frame, like here:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestTabbedCustom.MainPage"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit">

    <Grid>
        <xct:TabView
                TabStripPlacement="Bottom"
                TabStripHeight="60"
                TabIndicatorColor="Yellow"
                TabContentBackgroundColor="Yellow"
                IsTabTransitionEnabled ="True">
                <xct:TabView.TabStripBackgroundView>
                <BoxView
                        Color="Blue"
                        CornerRadius="36, 36, 0, 0"/>
                 </xct:TabView.TabStripBackgroundView>
            
            <xct:TabViewItem
                    Icon="icon.png"
                    Text="Tab 1"
                    TextColor="White"
                    TextColorSelected="Yellow"
                    FontSize="12">
                <Grid 
                        BackgroundColor="Gray">
                    <Label
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent1" />
                </Grid>
            </xct:TabViewItem>

            <xct:TabViewItem
                    Icon="icon.png"
                    Text="Tab 2"
                    TextColor="White"
                    TextColorSelected="Yellow"
                    FontSize="12">
                <Grid>
                    <Label    
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent2" />
                </Grid>
            </xct:TabViewItem>
        </xct:TabView>
    </Grid>

</ContentPage>

Answer 2

Android:

Add the shape_indicator_radius.xml in the drawable folder:

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"  >
  <corners android:bottomRightRadius="50dp" android:bottomLeftRadius="50dp"/>
  <solid
       android:color="@android:color/black"/>
</shape>

Set background in the Tabbar.xml:

<?xml version="1.0" encoding="utf-8"?>
 <android.support.design.widget.TabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" 
android:background="@drawable/shape_indicator_radius">

</android.support.design.widget.TabLayout>

In MainActivity, set the TabLayoutResource in OnCreate method.

 TabLayoutResource = Resource.Layout.Tabbar;

iOS:

You could do this with custom renderer.

[assembly:ExportRenderer(typeof(TabbedPage),typeof(MyCustomRenderer))]
namespace App4.iOS
{
    class MyCustomRenderer: TabbedRenderer
    {
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            this.TabBar.Layer.MasksToBounds = true;
            this.TabBar.Translucent = true;
            
            this.TabBar.BarStyle = UIBarStyle.Black;
            this.TabBar.Layer.CornerRadius = 50;
            this.TabBar.Layer.MaskedCorners = 
            CoreAnimation.CACornerMask.MaxXMinYCorner | 
            CoreAnimation.CACornerMask.MinXMinYCorner;
        }
    }
   
}