How to customize the TabLayout in android?

Question

Here's my current tab layout:

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/pager"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    />

which makes the screen looks like this:

I want the circle-navigation (I don't know the exact term for that) so, I'm attaching a picture:

As you can see, when I browse through the swipeable tabs in my screen, the circle number corresponding to the page I'm currently on should be focused (in my case, it should be dark grey, while others being light grey). You can see the circles at the bottom of the page.

I know I can make those circles part of the fragment and then make the respective circle focused, but then, with every swipe, the set of circles would also get swiped - which I don't want.

Is there a way to achieve that?

check this link for tablayout http://stackoverflow.com/a/17898875/2826147 — Amit Vaghela, Dec 28 '15 at 11:45
insted of that just use this https://github.com/PaoloRotolo/AppIntro — Dhaval Parmar, Dec 28 '15 at 11:50
Have you seen http://stackoverflow.com/questions/30892545/tablayout-with-icons ? — PPartisan, Dec 28 '15 at 12:17
@DhawalSodhaParmar, this looks cool. But is there a way to do it using only the libraries android officially provides? — Akeshwar Jha, Dec 29 '15 at 05:49
@Akeshwar: you have to customize tablayout or just grab code from appintro library. — Dhaval Parmar, Dec 29 '15 at 11:17

Jackson Chengalai · Answer 1 · 2015-12-28T12:05:31.320

-2

You can achieve this by using viewpager. Most common viewpager indicator is http://viewpagerindicator.com/ by Jakewharton. Its also compatible with the ViewPager from the Android Support Library

using with studio

Add this to your source repositories after you declare your plugins:

repositories {
    maven { url "http://dl.bintray.com/populov/maven" }
    mavenCentral()
}

And in the module's build.gradle file add the dependency

dependencies {
   // ...
   compile 'com.viewpagerindicator:library:2.4.1'
   // ...
}

edited Dec 28 '15 at 12:05

answered Dec 28 '15 at 11:52

Jackson Chengalai

3,907
1
24
39

This library is deprecated – galex Mar 05 '17 at 09:54

How to customize the TabLayout in android?

1 Answers1