question

Masha0307-7348 avatar image
0 Votes"
Masha0307-7348 asked JessieZhang-2116 commented

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
106104-image.png



I don't know how to make this rounded frame at the bottom to customize the tabbed page

dotnet-xamarin
image.png (13.3 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @Masha0307-7348 , I have not heard from you for a couple of days. Please let me know if there is anything that I can help here.

0 Votes 0 ·
alessandrocaliaro avatar image
0 Votes"
alessandrocaliaro answered

I think you can use

Xamarin.Forms.PancakeView

so you can define the corner you want to be rounded


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JessieZhang-2116 avatar image
0 Votes"
JessieZhang-2116 answered JessieZhang-2116 edited

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:

106509-image.png



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:

106553-image.png

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.



image.png (17.7 KiB)
image.png (18.6 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.