Develop Reference

Put View inside ViewPager below TabLayout

I'm looking for a way to put a view in my ViewPager below the TabBar.
I don't want it to be inside each fragment, because obiouvsly it would scroll every time I change the current fragment; I need that view to be fixed there without animations.
This is what I have now putting the View inside my TabLayout [code + img]
<android.support.v4.view.ViewPager
android:id="#+id/mViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/mTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="#color/colorPrimary"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/colorAccent"
app:tabTextColor="#color/white">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:background="#drawable/background_accent_fading"
android:paddingBottom="5dp"
android:paddingEnd="5dp"
android:paddingTop="5dp"
android:text="RIPASSO"
android:textAlignment="textEnd"
android:textColor="#color/white"
android:textStyle="bold" />
</android.support.design.widget.TabLayout>
</android.support.v4.view.ViewPager>
This, instead, is what I'm looking for
As you can see, RIPASSO is below my tabs, but it is fixed there.
Is there a way of obtaining it? I didn' find anything

Your TabLayout mustn't be a child of your ViewPager.
<LinearLayout
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:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize"
style="#style/AppTabLayout"
app:tabTextAppearance="#style/AppTabTextAppearance"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:tabMode="fixed"
app:tabGravity="fill"/>
<!--here put your view, the one you want to appear in all pages.-->
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/popup_holder"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#android:color/white"/>
</FrameLayout>
</LinearLayout>

you can use the default android tabs, follow this :
Right click on app > New > Activity > Tabbed Activity.
and it will create everything for you.
if you want to change the color of the background color - underline color or text color.
you can do it in the XML or user
TabLayout tabLayout = binding.tabs;
tabLayout.setupWithViewPager(mViewPager);
tabLayout.setTabTextColors(getResources().getColor(R.color.white), getResources().getColor(R.color.white));

Android pager hides Tab layout if it's positioned on top of it

I know this seems like a repeated questions but I don't understand why I can't position Tablayout on top of my ViewPager.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<android.support.design.widget.TabLayout
android:id="#+id/tl_ads"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
app:tabBackground="#drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
app:tabMaxWidth="16dp"
app:tabPadding="2dp"/>
<android.support.v4.view.ViewPager
android:id="#+id/vp_ads"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:elevation="2dp"
android:translationZ="2dp"
tools:targetApi="lollipop"/>
</RelativeLayout>
Tablayout works just fine if I replace the RelativeLayout with Linearlayout except that's not what I want.

Try below may help you.
Error here : android:layout_alignParentBottom="true"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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.support.design.widget.TabLayout
android:id="#+id/tl_ads"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#9ad195"
android:minHeight="?attr/actionBarSize" />
<android.support.v4.view.ViewPager
android:id="#+id/vp_ads"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tl_ads"
android:background="#cccccc"
android:elevation="2dp"
android:translationZ="2dp"
tools:targetApi="lollipop" />

Try this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<android.support.v4.view.ViewPager
android:id="#+id/vp_ads"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:elevation="2dp"
android:translationZ="2dp"
tools:targetApi="lollipop"/>
<android.support.design.widget.TabLayout
android:id="#+id/tl_ads"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
app:tabBackground="#drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
app:tabMaxWidth="16dp"
app:tabPadding="2dp"/>
</RelativeLayout>
In a RelativeLayout, the widgets are added one on top of the other in the order in which they were declared. You had declared your tab layouts first and then declared the ViewPager. As a result of this, your tabs were being created but were being hidden by the ViewPager which occupied the entire RelativeLayout.

Material tab layout not displaying correctly

I am trying to make this login page.
Here is my code -
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<com.app.findmystay.View.MarqueeToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="112dp"
android:background="#color/color_primary"
android:elevation="4dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ToolBarStyle" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="64dp"
android:elevation="4dp"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="#color/color_accent"
app:tabIndicatorHeight="5dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#android:color/white"
app:tabTextAppearance="#style/TabText"
app:tabTextColor="#android:color/white" />
</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" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</RelativeLayout>
What I am getting is this -
How to align toolbar text with the back button?
How will the layout collapse on scrolling?

First try to enable show layout bounds in developer options in settings.
Check the layout of the title (Log in or sign up in your case).
If it's the layout problem, then set title programmatically by using
Toolbar toolbar = (Toolbar) findViewById(R.id.id_of_toolbar_from_layout);
toolbar.setTitle("Login or SignUp");
And then add toolbar to layout like
setSupportActionBar(toolbar);
Better try that first. and let me know if it does not works. :)

How to set android TabLayout in the bottom of the screen?

My question is how I can set the new android material design TabLayout to be in the bottom of the screen, kind of like Instagram's bottom toolbar.
If you have never seen Instagram's UI here is a screenshot of it :
. If there is a better way of approaching this, please feel free to post it here (with a code example if possible), I will greatly appreciate it.
Here is my code: activity_main.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:tabMode="fixed"
app:tabGravity="fill"/>
</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 have tried many methods and workarounds suggested by the Stack Overflow community, but none seems to work with this new implementation of tabs in android. I know this UI design does not follow android design guidelines, so please don't comment on it. This UI design is vital to my application's UX and I would appreciate getting an answer for it. Thank you!

I believe I have the best simple fix. Use a LinearLayout and set the height of the viewpager to be 0dp with a layout_weight="1". Make sure the LinearLayout has an orientation of vertical and that the viewpager comes before the TabLayout. Here is what mines looks like:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<include layout="#layout/toolbar" android:id="#+id/main_toolbar"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white"/>
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/blue"
/>
</LinearLayout>
And as a bonus, you should create your toolbar only once as toolbar.xml. So that way all you have to do is used the include tag. Makes your layout's more clean. Enjoy!
toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
Update 11.2.2016: For those of you who don't know how to inflate the toolbar, here is how. Make sure that your Activity extends AppCompatActivity so you can call setSupportActionBar() and getSupportActionBar().
Toolbar mToolbar = (Toolbar) findViewById(R.id.main_toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

I suggest to use androidx library as android support libraries may get deprecated soon.
We can actually add a tab layout to a viewpager. Below is the code snippet that I used in my project
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00a294"
android:layout_gravity="bottom" />
</androidx.viewpager.widget.ViewPager>
layout_gravity="bottom" is the syntax that puts the tab layout to the bottom

I had a same problem on Android Studio 2.2. This is what i did,
<?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:orientation="vertical"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:subtitleTextColor="#color/color_white"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="#string/call_log"
app:titleTextColor="#color/color_white"
/>
<RelativeLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/tabLayout" />
<android.support.design.widget.TabLayout
android:layout_alignParentBottom="true"
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"/>
</RelativeLayout>
</LinearLayout>

Better segregate both AppBarLayout and tabLayout like my code below. This way you can modify the tab bar and view pager properties independently.
<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"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<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"
android:layout_above="#+id/tabs"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

android:layout_alignParentBottom="true"
Add this setting in
android.support.design.widget.TabLayout

Top of the page LinearLayout settings and set android:gravity="bottom". Thats it. Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px"
android:gravity="bottom"> //Thats it.
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="45dp"
android:id="#+id/tabLayout1">
<android.support.design.widget.TabItem
android:icon="#drawable/home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabItem1" />
<android.support.design.widget.TabItem
android:icon="#drawable/mypage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabItem2" />
<android.support.design.widget.TabItem
android:icon="#drawable/friends"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabItem3" />
<android.support.design.widget.TabItem
android:icon="#drawable/messages"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabItem4" />
<android.support.design.widget.TabItem
android:icon="#drawable/settings"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabItem5" />
</android.support.design.widget.TabLayout>
</LinearLayout>

Replace Your TabLayout code with this
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:elevation="2dp" />

Fixed TabLayout and Content overlap AppBar

With the new Android Support Design library, there has come some cool features with regards to the AppBar.
I'm looking at implementing the same scroll effect as shown in the gif above. (Taken from Google Play Games -> My Games)
I've had a look at adding the following attribute to the nestedscrollview, placing the content above the appbar.
app:behavior_overlapTop
It works as expected when all the components inside appbar is set to scroll.
app:layout_scrollFlags="scroll"
If I want the TabLayout to be pinned at the top, the space below it will also be pinned. So it looks weird:
In short, is there any way to create the above using the new design library, or do I have to make it some other way?
Requested XML:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/content"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBar
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="164dp"
android:background="?attr/colorPrimary">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBar>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:behavior_overlapTop="32dp"/>
</android.support.design.widget.CoordinatorLayout>

Try this, Hope its work
Set app:layout_scrollFlags="scroll|enterAlways" in Toolbar
and android:scrollbars="horizontal" in TabLayout
As per my suggestion, you should remove this line app:layout_scrollFlags="scroll|enterAlways" in your TabLayout
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:app1="http://schemas.android.com/apk/res/com.samsung.ssc"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
tools:context="com.samsung.ssc.LMS.LMSListActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayoutLMSList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:scrollbars="horizontal">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpagerLMSList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabCreateNewLMS"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_gravity="right|bottom"
android:layout_margin="#dimen/margin_15"
android:onClick="onNewLeaveCreateClick"
android:src="#drawable/ems_pencil"
app1:rippleColor="#color/ems_status_sky_blue_color"
app:backgroundTint="#color/ems_status_yellow_color"
app:borderWidth="#dimen/margin_0"
app:elevation="#dimen/margin_5" />