How to change indicator of tablayout to top from b

Question

I want to change indicator of tablayout from bottom to top.

my code

activity_tab.xml

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"

    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"

        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        app:tabIndicatorColor="#000000"

        app:tabMode="scrollable"
        />
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

I want this result.

how to do

thx for ask me and sorry for bad english.

Answer 1

I have a different approach for doing that..

1. Set the tab indicator color same as the background color of the tab layout (So that you will not see the tab indicator at bottom)

2. Add a linear layout (horizontal) just above the tab layout containing views (same number as equal to number of tabs).

<LinearLayout android:layout_width="match_parent" android:layout_height="5dp" android:orientation="horizontal" android:background="@color/tab_bg" android:weightSum="3">

<View
    android:id="@+id/view1"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:elevation="10dp"
    android:background="@drawable/selector_tab_indicator_white"/>

<View
    android:id="@+id/view2"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:elevation="10dp"
    android:background="@drawable/selector_tab_indicator_blue"/>

<View
    android:id="@+id/view3"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:elevation="10dp"
    android:background="@drawable/selector_tab_indicator_blue"/>

</LinearLayout>

3. Now just programmatically adjust the view backgrounds.

   viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

   }
   
   @Override
   public void onPageSelected(int position) {
       setTitle(getPageTitle(position));
   
       switch(position){
   
           case 0:
               view1.setBackgroundResource( R.drawable.selector_tab_indicator_white );
               view2.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
               view3.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
               break;
   
           case 1:
               view1.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
               view2.setBackgroundResource( R.drawable.selector_tab_indicator_white );
               view3.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
               break;
   
           case 2:
               view1.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
               view2.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
               view3.setBackgroundResource( R.drawable.selector_tab_indicator_white );
               break;
   
           default:
               view1.setBackgroundResource( R.drawable.selector_tab_indicator_white );
               view2.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
               view3.setBackgroundResource( R.drawable.selector_tab_indicator_blue );
               break;
       }
   }
   
   @Override
   public void onPageScrollStateChanged(int state) {
   
   }
   

   });

Use these selectors for customising the views

selector_tab_indicator_white.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
<corners
    android:radius="50dp"/>
<stroke
    android:width="1dp"
    android:color="#c4c0c0" />
<solid
    android:color="#fafafa" />

selector_tab_indicator_blue.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
<corners
    android:radius="0dp"/>
<stroke
    android:width="1dp"
    android:color="@color/tab_bg" />
<solid
    android:color="@color/tab_bg" />

The Result:

Answer 2

It can't be done by xml attribute, but can be done via setting image in background of tab with filled colour at top and transparent at bottom.

 <android.support.design.widget.TabLayout
          ...
            app:tabBackground="@drawable/bg_tab"
            ...
 /> 

bg_tab.xml

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

cap.png

transparent at bottom

Answer 3

Don't use scale = -1 and things like that.

From XML you can use app:tabIndicatorGravity="top"

From code you can use setSelectedTabIndicatorGravity(INDICATOR_GRAVITY_TOP)