I am trying to implement the tablayout as the following design-
I could design as this-
Could anyone please help me to achieve the following points?
Code: MainActvity.xml
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab"
android:layout_width="440sp"
android:layout_height="64sp"
android:layout_marginTop="100dp"
android:layout_marginBottom="101dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="@drawable/backGroundWithWhiteBorder"
style="@style/customTabLayout"
app:tabBackground="@drawable/tab_color_selector" />
tab_color_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@color/tiffany_blue" />
<item android:drawable="@color/transparent" />
</selector>
backGroundWithWhiteBorder.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="376dp"
android:height="64dp"
android:viewportWidth="376"
android:viewportHeight="64">
<path
android:strokeWidth="1"
android:fillColor="#00000000"
android:strokeColor="#fff"/>
</vector>
Style.xml
<style name="customTabLayout" parent="Widget.Design.TabLayout">
<item name="tabTextAppearance">@style/TabText</item>
</style>
<style name="TabText" parent="@android:style/TextAppearance.Widget.TabWidget">
<item name="android:textAllCaps">false</item>
<item name="android:textSize">30sp</item>
<item name="android:textAlignment">center</item>
</style>
You can achieve this kind of TabLayout
with a MaterialCardView
as the parent and the TabLayout
as the child of it. To draw the outer rectangle section you can simply use the properties app:strokeWidth
and app:strokeColor
to draw the border and you can move the TabLayout
inside the MaterialCardView
using the android:layout_margin
property.
Example:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/black">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:cardBackgroundColor="@android:color/black"
app:cardCornerRadius="0dp"
app:strokeWidth="1dp"
app:strokeColor="@android:color/white">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:backgroundTint="@android:color/transparent"
android:layout_margin="5dp"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabMaxWidth="0dp"
app:tabIndicatorColor="@android:color/transparent"
app:tabIndicatorHeight="0dp"
app:tabRippleColor="@android:color/transparent"
app:tabTextColor="@android:color/darker_gray"
app:tabSelectedTextColor="@android:color/white"
app:tabBackground="@drawable/tabs_selector"
app:tabTextAppearance="@style/CustomTabTextAppearance">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="All" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Favourites" />
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
where @drawable/tabs_selector
is the drawable tabBackground selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<shape android:shape="rectangle">
<solid android:color="#5F9EA0" />
<corners android:radius="0dp" />
</shape>
</item>
<item android:state_selected="false">
<shape android:shape="rectangle">
<solid android:color="@android:color/transparent" />
<corners android:radius="0dp" />
</shape>
</item>
</selector>
and @style/CustomTabTextAppearance
is used to set a custom Tab Text Appearance:
<style name="CustomTabTextAppearance" parent="TextAppearance.MaterialComponents.Button">
<item name="android:textAllCaps">false</item>
<item name="android:textSize">14sp</item>
</style>
Result: