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.

Text inside tabs of a TabLayout is not centered

I am using a TabLayout. I want full screen width to be filled by TabLayout, so I added app:tabGravity="fill". My problem is that now tab text is not centered. Here is a screenshot:
The code of TabLayout is as follows:
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabTextColor="#d3d3d3"
app:tabSelectedTextColor="#ffffff"
app:tabIndicatorColor="#ff00ff"
android:minHeight="?attr/actionBarSize"
/>
I have seen many questions but none of them solves my problem. Any help is highly appreciated. For details I want to tell that I am trying this example. Device is running on Android 2.3.6 (API 10). Screen is 320x240.

just do like this:-
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:tabGravity="fill"

Use this for adjusting the text:
android:gravity="center" OR android:textAlignment="center"
you should create a custom tab .. you are using these attributes for tabLayout which will not work ... the example link you provided above uses a file named custom_tab.xml . Use that for defining your textView and put these attributes inside it.

Add this to xml layout android:gravity="center"
you can refer this for more details
http://joshclemm.com/blog/?p=136

In default the text should be center if you do not overrided with another not centered style.
any way if you sure Gravity="center" is not working, you can also put your custom layout as tab background. so you create a relative layout that has a textView in center of it. ( in this way you are free to put wanted layout as tab items) so feel free.
TabLayout tabLayout = (TabLayout)findViewById(R.id.tab_layout);
tabLayout.getTabAt(postion).setCustomView(resourceId);
hope helpful .

Oddly, the preview in Android Studio shows the tab labels centered, but on the device they are left-aligned.
As other answer have suggested, using a custom view is a good way to gain control over the layout.
Create a layout file layout/view_tab_label.xml with a TextView with id #android:id/text1, so you can still specify the tab text inside the TabItem:
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/tab_label"
android:gravity="center"/>
Reference this layout from the tab item (android:layout attribute in each TabItem):
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tabIndicatorColor="#color/selected_tab"
app:tabBackground="#color/tab_background">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout="#layout/view_tab_label"
android:text="#string/tab_1_title" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout="#layout/view_tab_label"
android:text="#string/tab_2_title" />
</android.support.design.widget.TabLayout>
Create a color resource file color/tab_label.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/selected_tab" android:state_selected="true"/>
<item android:color="#color/unselected_tab" android:state_selected="false"/>
</selector>

My problem was that TextView wasn't centered inside layout. Not Text itself
So. In TextView.
android:layout_gravity="center"

Single tab in TabLayout is not covering the entire width

I have created a view pager with TabLayout. Now the issue is if I have 2 or more tabs then everything is fine. But if I am having only one tab then it is not covering the entire screen width. PFA the xml layout
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed"
style="#style/TabLayout"
android:fillViewport="true"
android:layout_below="#id/ssrToolbar"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/sliding_tabs"
android:layout_above="#+id/llButtonLayout"
android:background="#android:color/white" />
Also here are the two images

If someones still interested you should add this property for TabLayout in xml app:tabMaxWidth="big_number", for big_number i chose 2000dp. If you are not assigning any value default implementation subtracts widths measured specifications size with TAB_MIN_WIDTH_MARGIN value.

ViewPager with ImageView before tab

I want to create an activity where there's an image view and a view pager right after. I have try some stuff, but the tabs of the viewpager always appear at the top of the screen.
In order what I would like to have:
Action Bar
Image view (here the M)
Tab
Content of the tab (Fragment)
Here's the closest I have got.
Here's my code. (I'm pretty sur I overkilled it, but I was trying stuff)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/profile_image_linear_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<ImageView
android:id="#+id/profile_image_view"
android:layout_width="fill_parent"
android:layout_height="200dp" />
</LinearLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#+id/profile_image_linear_layout">
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="match_parent"
tools:context="madduck.ioweyou.ProfileActivity" />
</FrameLayout>
</RelativeLayout>
Thanks in advance !

Use a TabLayout instead of the ActionBar tabs.
https://developer.android.com/reference/android/support/design/widget/TabLayout.html

For this to work you'd need to use the Android Toolbar (which is really just another View with some half-baked additions).
have a layout like this in your activity: (pseudo code)
<TOOLBAR>
<IMAGEVIEW>
<VIEWPAGER WITH TABS>
You'll want to declare your Theme/Styles to make sure your activity contains no action bar (since you will be replacing it with the Toolbar). Also some versions of Android used to crash if you tried to add a Toolbar when there was an ActionBar. Not sure if this was fixed.

CoordinatorLayout overlapping

Have a look at the following layout. You will see, that the floating button is too far to the bottom. This is because the Toolbar and the Tabs are shown and the height of the ViewPager is wrong. So somehow I'm doing something wrong with the layout_height. But how can I fix that?
Remark: The ViewPager is the main content and it contains a fragment with a ListView and a Google Map V2 in the second tab.
That's the layout XML:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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" />
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager_list_views"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="fill_parent">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
Here's the layout for the fragment in the first tab (the list):
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/preview_list"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:orientation="vertical" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/action_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="#mipmap/ic_add_white_48dp" />
</android.support.design.widget.CoordinatorLayout>
Just to make sure; it's not a problem with the FAB. See this picture. It's a similar layout. A CoordinatorLayout with a ToolBar and a ViewPager which swipes through all detail-entries (therefore no tabs are needed). And again, the inner view seems to be too long (the same height as the ToolBar).

You should use android.support.v7.widget.RecyclerView and not ListView
Although you are already using android.support.v7.widget.RecyclerView be 100% sure that you have declard compile 'com.android.support:recyclerview-v7:23.0.0' in your build.gradle dependencies. I encountered the same issue where the viewpager overlaps the system buttons. I fixed it by simply adding this dependency.

Anything you what to be "coordinate" need to be direct child of CoordinatorLayout, Including the AppBar, RecyclerView (ListView in API21+ or other view support nested scroll is OK), or FAB, etc.
The reason why your FAB is offset out of screen, is that:
ViewPager has a #string/appbar_scrolling_view_behavior, the implement of this behavior will offset view when you scroll.
you put FAB inside ViewPager.
So when the offset of ViewPager changed, anything inside ViewPager will offset together (extra CoordinatorLayout has no help to change offset).
To fix this, don't use CoordinatorLayout outside ViewPager.
Or:
Put your FAB out of ViewPager so it won't scroll with ViewPager.
If the FAB only work with some of your page, hide() it when need.
BTW, there is very good App, Cheesesquare Sample, to demo the design library.