Android TabLayout Tabs with rounded corners 2020 Tutorial #1

 

 Tab-layout Tabs with rounded corners

  Hello, This is my first ever post or programming related post in this blog. So any mistake don't be harsh. :)

   In this tutorial I'll share my Android Studio post related to the Tab Layout with rounded corners. Demo of the Tablayout will be available below.

Demo

   So let me take you through the thought process that went into creating the effect:

• First we create a Tab-layout which  has background with rounded corners and color
• Tabs have two states: selected and unselected.
• Selected tab background is filled with color with round corners.
• Unselected tab background is just transparent.

   Now Lets Start's Coding.

1. Library 

   Add TabLayout library from Google to your app’s build.gradle:
   
   
   If you are using AndroidX then Implement.

// ANDROIDX Library
implementation 'com.google.android.material:material:1.1.0'

    If you are using Old Library
  

// Using Old Library
 implementation 'com.android.support:design:28.0.0'

• TabLayout background

  Now first of all we'll create a background with rounded corners. Create new Drawable of  tab_background.xml
    

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<corners

android:radius="18dp"/>

<!-- TabLayout background color -->

<solid android:color="@color/colorPrimaryDark"/>

</shape>

<?xml version="1.0" encoding="utf-8"?>

• Seleted Tab Background

  Now let's create a selected tab background... Create a new Drawable file of  tab_selected_bg.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="18dp"/>

<!-- color of the selected tab -->

<solid

android:color="#fff"/>

</shape>

• Unselected Tab Background.

  As our Tab Background do everything for the selection, So we'll create a transparnet Unselected background.. Create a new Drawable of  unselected_tab_bg.xml .
  
  

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

android:shape="rectangle">

<!-- unselected tab background -->

<solid

android:color="@android:color/transparent" />

</shape>

• Tab Selector.

  This component select the Tab-layout which background is use for current tab. So Create a tab_selector.xml  drawable file.
   

<?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/tab_selected_bg"

android:state_selected="true"/>

<!-- drawable for unselected tab -->

<item

android:drawable="@drawable/tab_background"

android:state_selected="false"/>

</selector>

• How to use it TabLayout.

  <com.google.android.material.tabs.TabLayout
                    android:id="@+id/product_tab"
                    android:layout_width="match_parent"
                    android:layout_height="36dp"
                    android:elevation="2dp"
                    android:background="@drawable/tab_bg"
                    app:tabMode="auto"
                    android:layout_marginStart="10dp"
                    android:layout_marginEnd="10dp"
                    app:tabGravity="fill"
                    android:layout_gravity="center"
                    app:tabBackground="@drawable/tab_selector1"
                    app:tabSelectedTextColor="@color/colorPrimaryDark"
                    app:tabPaddingStart="16dp"
                    app:tabPaddingEnd="16dp"
                    app:tabIndicatorHeight="0dp"
                    app:tabRippleColor="@null"
                    app:tabTextAppearance="@style/TabTextAppearance"/>

• Additional Code for Text

  Put given below code is style.xml for text apperaence.
   

<style name="TabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">#fff</item>
    <item name="android:textStyle">bold</item>
</style>

DEMO VIDEO:

That's it. find any difficulty in implementation Contact me below or Facebook. I'll help you
Thank you