Custom TabLayout Indicator - Android

Question

I have been trying to make a custom TabLayout indicator like Google Drive's one but didn't figure it out. I tried the following article:

https://medium.com/@adrianespi94/apply-new-google-style-to-your-android-material-tabs-4d498c993c51

It works fine, but not as good as the one in the GIF below.

Thanks in advance.

Answer 1

There's two thing like this.

1. works by clicking on tab.

2. works by horizontal scrolling and clicking on tab also.

I don't know what you want actually. cause, the link you gave that is no 1 . which is TabHost . I am adding source code for both.

ViewPagerAdapter :

public class ViewPagerAdapter extends FragmentPagerAdapter {

private final List<Fragment> fragmentList=new ArrayList<>();
private final List<String> fragmentListTitles=new ArrayList<>();


public ViewPagerAdapter(FragmentManager fm) {
    super(fm);
}

@Override
public Fragment getItem(int position) {
    return fragmentList.get(position);
}

@Override
public int getCount() {
    return fragmentListTitles.size();
}


//return page title
@Override
public CharSequence getPageTitle(int position) {
    return fragmentListTitles.get(position);
}

public void AddFragment(Fragment fragment,String title)
{
    fragmentList.add(fragment);
    fragmentListTitles.add(title);
}
}

MainActivity :

private TabLayout tabLayout;
private AppBarLayout appBarLayout;
private ViewPager viewPager;

tabLayout=(TabLayout)findViewById(R.id.tablayout);
    viewPager=(ViewPager)findViewById(R.id.viewpager);


    //create viewpageradaper class object
    ViewPagerAdapter adapter=new ViewPagerAdapter(getSupportFragmentManager());
    //adding fragments using adapter object
    adapter.AddFragment(new FreeFireFragment(), "Free Fire");
    adapter.AddFragment(new PubgFragment(), "Pubg");
    adapter.AddFragment(new CallOfDutyFragment(), "Call of Duty");

    //set adapter into viewpager
    viewPager.setAdapter(adapter);

    //set viewpager into tablayout
    tabLayout.setupWithViewPager(viewPager);

If you want to add icon:

//for set icon into tab items
final int[] ICONS = new int[]{
        R.drawable.ff,
        R.drawable.pubg,
        R.drawable.cod
};
//enter the following source code below the MainActivity source code
//set icon to tab items
    tabLayout.getTabAt(0).setIcon(ICONS[0]);
    tabLayout.getTabAt(1).setIcon(ICONS[1]);
    tabLayout.getTabAt(2).setIcon(ICONS[2]);

activity_home.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">


<com.google.android.material.tabs.TabLayout
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    app:tabBackground="@color/homeColor"
    app:tabGravity="fill"
    app:tabIndicatorColor="@color/tabIndicator"
    app:tabMode="fixed"
    app:tabSelectedTextColor="@color/tabIndicator"
    app:tabTextColor="@color/tabTextColor">

</com.google.android.material.tabs.TabLayout>

<androidx.viewpager.widget.ViewPager
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/viewpager">

</androidx.viewpager.widget.ViewPager>



</LinearLayout>

Above source code works as no 2.

Now, no 1:

Layout :

<TabHost
    android:id="@+id/tab_host"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@id/rl_">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:id="@+id/Filters"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <include
                    layout="@layout/filters_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/Adjustments"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <include
                    layout="@layout/adjustment_layout"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />
            </LinearLayout>

        </FrameLayout>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#40cccccc" />

    </LinearLayout>
</TabHost>

MainActivity

//setup tabHost
    TabHost tabHost = findViewById(R.id.tab_host);
    tabHost.setup();

    //set item 1 in tabhost
    TabHost.TabSpec  Filters= tabHost.newTabSpec("Filters");
    Filters.setContent(R.id.Filters);
    Filters.setIndicator("Filters");
    tabHost.addTab(Filters);

    //set item 2 in tabhost
    TabHost.TabSpec Adjustments= tabHost.newTabSpec("Adjustments");
    Adjustments.setContent(R.id.Adjustments);
    Adjustments.setIndicator("Adjustments");
    tabHost.addTab(Adjustments);

Answer 2

I made the solution by myself, it seems like the solution can be done easily without libraries or any spaghetti code.

First, you need to an XML file for tab indicator:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp" />
    <size android:height="3dp" />
    <solid android:color="@color/selectedColor" />
</shape>

Then make a Selector to change the indicator color based on your selection:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/selectedColor" android:state_selected="true" />
    <item android:color="@color/notSelectedColor" />
</selector>

Finally in your TabLayout, add these lines:

 <com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="fill"
    app:tabIconTint="@drawable/tab_selector_color"  //for selection
    app:tabIndicator="@drawable/tab_indicator"      //for rounded corners
    app:tabIndicatorAnimationMode="elastic"         //for that elastic swiping effect
    app:tabIndicatorColor="@color/selectedColor"
    app:tabIndicatorFullWidth="false"
    app:tabInlineLabel="true"
    app:tabSelectedTextColor="@color/selectedColor"
    app:tabTextColor="@color/notSelectedColor"/>