Develop Reference

Android - TabLayout inside a Fragment pin on top when scrolling up

I have tried the combination of AppBarLayout and CollapsingToolbarLayout, which doesn't work for this situation. It seems that it only works for a main activity layout. Is it possible to pin the tab layout when scrolling up when it comes to the tab layout which is inside Fragment C? Thanks for your help.
This is a Fragment consisting of Fragment A, Fragment B, Fragment C, Fragment C contains a view pager and tab layout.
Finally, I would like to pin the tab layout on top of the screen when scrolling up.

You can use StickyScrollView https://github.com/emilsjolander/StickyScrollViewItems
<com.kiwkard.views.StickyScrollView
android:id="#+id/sticky_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical"
android:tag="sticky-nonconstant">
<android.support.design.widget.TabLayout
android:id="#+id/tab_Layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:tabGravity="fill"
app:tabIndicatorHeight="3dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/white"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="#color/black_30"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager_event"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</com.kiwkard.views.StickyScrollView>
don't forget to give tag attribute in your layout which you want to be fixed, and you can go through to above mentioned link for more tags according to your requirement.

TabLayout gravity center is not working

I have a TabLayout, where I want the tabs to be displayed in the center of the screen.
Below is the XML for my TabLayout.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/white"
app:tabGravity="center"
app:tabIndicatorColor="#color/about_tab_selected"
app:tabIndicatorHeight="4dp"
app:tabMode="scrollable"
app:tabPaddingEnd="20dp"
app:tabPaddingStart="20dp"
app:tabSelectedTextColor="#color/about_tab_selected"
app:tabTextAppearance="#style/UGTabTextAppearance"
app:tabTextColor="#color/about_tab_unselected" />
However, my Tabs are still displayed to the left, and I'm unable to center them in the Activity.
What I'm getting is this:
What I really want is:
Can somebody please tell me what I'm doing wrong here? If you need additional information regarding the rest of the XML, please let me know.

Tab gravity only effects MODE_FIXED.
One possible solution is to set your layout_width to wrap_content and layout_gravity to center_horizontal

Ok, so the problem was with layout_width="match_parent"
When I changed that to layout_width="wrap_content", it solved my problem.
The final XML is:
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/white"
app:tabGravity="center"
app:tabIndicatorColor="#color/about_tab_selected"
app:tabIndicatorHeight="4dp"
app:tabMode="scrollable"
app:tabPaddingEnd="20dp"
app:tabPaddingStart="20dp"
app:tabSelectedTextColor="#color/about_tab_selected"
app:tabTextAppearance="#style/UGTabTextAppearance"
app:tabTextColor="#color/about_tab_unselected" />

Auto scroll when selected in TabView

I have a tab layout which it contains many tabs so I want to scroll between them.
I tried HorizontalScrollViewand it's ok but when I change layouts by scrolling between them the Tab layout doesn't scroll automatically to show the selected tab.
Can I fix this by just XML ?
here is my code :
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</HorizontalScrollView>

found the solution! just remove HorizontalScrollView and add this to the TabLayout :
app:tabMode="scrollable"

Programmatically hide / show android support design TabLayout inside AppBarLayout

I want to programmatically hide / show the TabLayout in my AppBarLayout. Simply setting visibility to VISIBLE and GONE is not enough, as I want to animate the changes and reclaim the space with my content while the tab retreats and leave the space once the tab is shown back.
Below is the relevant part of my layout XML -
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:tabMode="scrollable"
android:layout_marginStart="42dp"
android:layout_marginLeft="42dp"
style="#style/MainTabLayout">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>

As any ViewGroup subclass, AppBarLayout allows for automatic animations during the adding/removal of child views. You just need to add android:animateLayoutChanges="true" (default to false) in your layout file.
As for reclaiming the space content when the view is gone, all you have to do is use setVisibility(View.GONE) rather than setVisibility(View.INVISIBLE), because the latter holds the space for the invisible view.

How to change the current tab highlighter color in Android ViewPager?

Here is my layout inside ViewPager. I would like to change the color of the current tab highlighter which is below the text. Actually it is showing in black color. But I don't know whether it is a color by default or not. And also I have one more doubt. If I use PagerTitleStrip this tab highlighter doesn't appear. Is there a way to bring that with titlestrip?
Here is my layout:
<android.support.v4.view.PagerTabStrip android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#color/pager_titlestrip_bg"
android:textColor="#color/pager_titlestrip_text"
android:paddingTop="5dp"
android:paddingBottom="4dp" >
</android.support.v4.view.PagerTabStrip>

This just works.
PagerTabStrip pagerTabStrip = (PagerTabStrip) findViewById(R.id.pager_title_strip);
pagerTabStrip.setDrawFullUnderline(true);
pagerTabStrip.setTabIndicatorColor(Color.RED);
Thanks!

It can be done in both programmatically with jAVA or with XML
By XML
<android.support.design.widget.TabLayout
android:id="#+id/tabanim_tabs"
android:layout_width="match_parent"
app:tabIndicatorHeight="4dp"
app:tabIndicatorColor="#android:color/white"
android:layout_height="wrap_content" />
Or more simply you can solve this Code aswell
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
Similarly to change the Height
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));

This works in my project.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFF"
app:tabGravity="fill"
app:tabIndicatorColor="#color/text3"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/text3"
app:tabTextColor="#000" />