Trying to use the new support design library. In my layout I want the ToolBar to stay at the top of the screen, but have the TabLayout go off the screen when the user scrolls down. But it looks like the ViewPager goes underneath the AppBarLayout. I used this blog post for reference
https://medium.com/ribot-labs/exploring-the-new-android-design-support-library-b7cda56d2c32
This is the layout, within the ViewPager holds Fragments that consist of recycler views
<?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"
android:background="#color/material_grey50"
android:clickable="true">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tabLayout" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_list"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar_list"
android:background="?attr/colorPrimary"
android:scrollbars="horizontal"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:tabGravity="center" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_post"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:elevation="3dp"
android:src="#drawable/ic_videocam_white_36dp"
app:backgroundTint="#color/accent"
app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>
Don't forget to set this in the viewpager:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
Related
I want to create a second toolbar with all the menu items directing to different activities instead of creating a viewpager with different fragments. I tried to look for example online but all the examples I found are related to viewpager with fragments or collapsing toolbar. Is it possible to have a "swipeable" toolbar so that all menu items can be displayed instead of putting some of the items on overflow button? The layout I have right now is as follows. Thank you so much.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.ken.android_gam24.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/main_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<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/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/main_bar_layout"
android:orientation="horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.Toolbar
android:id="#+id/supportToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/colorAccent"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include
android:id="#+id/include2"
layout="#layout/content_main"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="159dp"
android:layout_marginEnd="159dp" />
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
You can nest a HorizontalScrollview inside your Toolbar layout:
<android.support.v7.widget.Toolbar
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Buttons -->
</LinearLayout>
</HorizontalScrollView>
</android.support.v7.widget.Toolbar>
I am thinking of using navigationview. The example of its implementation is in this link.
Or you can use the one suggested by mrsegev: use HorizontalScrollview in your Toolbar as it is also a view group.
Now, my statuses are.
Toolbar, ImageView, NestedScrollView, TabLayout and (NestedScrollView and RecyclerView in) ViewPager with PagerFragmentAdapter in Coordinator Layout
I want to scroll smoothly in this Activty, with CoordinatorLayout.Behaviors.
I think that should have 3 Behaviors with NestedScrollingChild, HeaderBehavior of First NestedScrollView and TabLayoutBehavior of TabLayout and ViewPagerBehavior of ViewPager (with NestedScrollView and RecyclerView).
I don't know what how can manage their NestedScrolling.
Please give me some advices or solutions.
Thanks :)
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?android:attr/actionBarSize"
app:contentInsetEnd="0px"
app:contentInsetStart="0px">
<!-- Toolbar Layout Here -->
</android.support.v7.widget.Toolbar>
<ImageView
android:id="#+id/iv_top_photo"
android:layout_width="match_parent"
android:layout_height="450dp"
android:scaleType="centerCrop" />
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior=".HeaderBehavior">
<LinearLayout
android:id="#+id/header_content_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="vertical">
<!-- Header Layout Here -->
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFF"
android:minHeight="?android:attr/actionBarSize"
app:layout_behavior=".TabLayoutBehavior"
app:tabIndicatorColor="#color/colorPrimary"
app:tabIndicatorHeight="3dp"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabTextColor="#000" />
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:overScrollMode="never"
app:layout_behavior=".ViewPagerBehavior" />
</android.support.design.widget.CoordinatorLayout>
I am setting the CircularPagerIndicator underneath ViewPager using CoordinatorLayout but it is not displaying. Below is the 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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="mypackage.HomeActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<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/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="#dimen/view_pager_padding"
android:paddingLeft="#dimen/view_pager_padding"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<mypackage.CirclePageIndicator
android:id="#+id/indicator"
android:clickable="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:radius="5dp"
app:fillColor="#FF888888"
app:pageColor="#88FF0000"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
Below method is called my Activity from onCreate Method
private void displayCarts(){
mSectionPagerAdapter = new SectionPagerAdapter(getSupportFragmentManager(), mCartCount, cartMap);
mViewPager = (ViewPager) findViewById(R.id.container);
mViewPager.setAdapter(mSectionPagerAdapter);
mCartCountIndicator = (CirclePageIndicator) findViewById(R.id.indicator);
mCartCountIndicator.setViewPager(mViewPager);
}
Not Sure what's going wrong.
I followed the suggestion from this link : Android CirclePageIndicator not working
but adding an extra Relative or linear layout within coordinator layout jusr to show CircularPagerIndicator does not fit my need. Any suggestions?
In a CoordinatorLayout, the actual scrollable view expands under the screen so on scroll it will shift up as toolbar hides. Anything below that won't be visible. You can try android:layout_gravity="bottom|center_horizontal" to place it at bottom of screen
<application.payrange.com.payrage.ui.CirclePageIndicator
android:id="#+id/indicator"
android:clickable="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="bottom|center_horizontal"
app:radius="5dp"
app:fillColor="#FF888888"
app:pageColor="#88FF0000" />
Moreover you can place this inside a container an give it a background color to make it look better. Also you can use Behavior to give it scroll effect just like Toolbar
well, for now I am falling back to adding linearlayout for View Pager and PagerIndicator. I added topmargin to the Linearlayout to display the whole view pager. Not the best possible solution , but will do the trick for now.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="mypackage.HomeActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<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/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<LinearLayout android:layout_width="match_parent"
android:orientation="vertical" android:layout_gravity="center_horizontal"
android:layout_height="match_parent"
android:layout_marginTop="70dp">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:paddingRight="#dimen/view_pager_padding"
android:paddingLeft="#dimen/view_pager_padding"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<mypackage.CirclePageIndicator
android:id="#+id/indicator"
android:clickable="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:radius="5dp"
app:fillColor="#color/default_circle_indicator_stroke_color"
app:pageColor="#color/circlepageindicator_fill_color"
android:layout_margin="#dimen/fab_margin"/>
</LinearLayout>>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
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" />
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" />