1

I am newer in Android. I am doing android application. I have to do TabHost in android look like iPhone, I am sharing image. Please help me for layout.

I am trying so much but not get exactly solution.

enter image description here

user3315464
  • 85
  • 6
  • If you're asking someone to write an entire port of TabHost for you, that's too broad for a Stack Overflow question. Otherwise, it's unclear what the issues you've had with existing solutions are. – Ryan M May 12 '20 at 08:15

1 Answers1

3

You can apply the custom shape and selector for tab.

shape_tab_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- radius should be half of the desired TabLayout height -->
    <corners android:radius="15dp" />
    <solid android:color="@color/colorWhite"/>

</shape>

shape_tab_un_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- color of the selected tab -->
    <solid android:color="@android:color/transparent" />


</shape>

selector_tab.xml

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

    <!-- drawable for selected tab -->
    <item
        android:drawable="@drawable/shape_tab_selected"
        android:state_selected="true"/>

    <!-- drawable for unselected tab -->
    <item
        android:drawable="@drawable/shape_tab_unselected"
        android:state_selected="false"/>

</selector>

Add tab layout in your activity layout and set selector_tab as tabBackground.

<com.google.android.material.tabs.TabLayout 
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorGray"
app:tabGravity="fill"
app:tabBackground="@drawable/selector_tab"
app:tabIndicatorColor="@android:color/transparent"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabRippleColor="@null"
app:tabSelectedTextColor="@color/colorBlack"
app:tabTextColor="@color/colorBlack"  />

Customize other properties according to your need. You can find more about TabLayout here

That's all.

Happy Coding! :)

Jaymin
  • 2,879
  • 3
  • 19
  • 35
  • Thanks for your answer. I am looking Tabhost – user3315464 May 12 '20 at 07:42
  • You can use the tab layout as well. – Jaymin May 12 '20 at 07:44
  • @Jaymin I tried to apply your answer but it doesn't give me the expected result , for more details check my question https://stackoverflow.com/questions/70002616/how-to-make-tabs-items-padding-correctly hope if you can help :) – Amin Nov 17 '21 at 10:25