How can I make custom tabbed page?

Question

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

I think you can use

Xamarin.Forms.PancakeView

so you can define the corner you want to be rounded

Answer 2

Hello,

Welcome to our Microsoft Q&A platform!

In android, you can do like this:

1.please open file Tabbar.xml in folder Resource-> layout, just as the following screenshot:

2.Change the android:background="@drawable/shape_indicator_radius"

<?xml version="1.0" encoding="utf-8"?>  
<com.google.android.material.tabs.TabLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:app="http://schemas.android.com/apk/res-auto"  
    android:id="@+id/sliding_tabs"  
    android:layout_width="match_parent"  
    android:layout_height="wrap_content"  
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"  
    android:background="@drawable/shape_indicator_radius"  
    app:tabIndicatorColor="@android:color/white"  
    app:tabGravity="fill"  
    app:tabMode="fixed" />  

3.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"  >  
<!--add the Radius-->  
<corners android:bottomRightRadius="20dp" android:bottomLeftRadius="20dp"/>  
<!--set the Tabbed bar color-->  
<solid  
     android:color="@color/testcolor"/>  
 </shape>  

4.Remember to check if you have added the following code in MainActivity.cs

TabLayoutResource = Resource.Layout.Tabbar;  

The result is:

Note: If you want to show the tabbedButton in the bottom, you can change the style of shape_indicator_radius as you want.

Best Regards,

Jessie Zhang

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.