For some reason the elevation attribute does not seem to be working on the new TabLayout in the material design support library. Any ideas?
XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="6dp" />
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
hooked up like this in a parent fragment:
ViewPager viewPager = (ViewPager) view.findViewById(R.id.view_pager);
TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
AppPagerAdapter appPagerAdapter = new AppPagerAdapter(getChildFragmentManager());
viewPager.setAdapter(appPagerAdapter);
tabLayout.setupWithViewPager(viewPager);
image:
The activity has a toolbar but this is outside of the fragment and should not affect the tablayout's ability to have a shadow:
relevant activity xml:
<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"
android:orientation="vertical"
tools:context="com.bluckapps.appinfomanager.ui.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
tools:ignore="UnusedAttribute" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
To make the shadow show, you have to set a background on your TabLayout. It can be the same color as your window background (as long as it's a solid color with no alpha).
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="6dp"
android:background="#color/white" />
You are supposed to use ToolBar with TabLayout. Then you can put them both inside an AppBarLayout and get a shadow. This only works on Lollipop+.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
style="#style/ToolBarStyle"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="#dimen/abc_action_bar_default_height_material"/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
See http://inthecheesefactory.com/blog/android-design-support-library-codelab/en
You'll need to use CoordinatorLayout as a container layout for your activity and then place your TabLayout right below AppBarLayout.
According to Material Design specs you should use
android:elevation="4dp"
elevation and make your TabLayout be a part of AppBarLayout.
Also note that elevation will only be visible on v21 (5.0) or higher.
No need to use a Fragment. An Activity layout is enough. Like:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/home_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/home_appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="2dp"
app:paddingEnd="0dp"
app:paddingStart="0dp">
<include layout="#layout/toolbar_appcompat"></include>
<android.support.design.widget.TabLayout
android:id="#+id/home_tab_layout"
style="#style/TabLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabContentStart="2dp"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="2dp"
app:tabMinWidth="24dp"
app:tabMode="fixed"
app:tabPadding="1dp"
app:tabSelectedTextColor="#android:color/tab_indicator_text"
app:tabTextColor="#android:color/darker_gray" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/home_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:paddingEnd="0dp"
app:paddingStart="0dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:src="#drawable/arrow_toggle"
app:borderWidth="1dp"
app:elevation="3dp"
app:fabSize="normal"
app:layout_anchor="#+id/home_coordinator_layout"
app:layout_anchorGravity="bottom|right|end"
app:pressedTranslationZ="2dp"
app:rippleColor="#color/swipe_refresh_color_scheme_green" />
</android.support.design.widget.CoordinatorLayout>
Meanwhile, elevation is useful on Lollipop. If you want to be compatible backwards, you'd better use app:elevation. If app:elevation doesn't work, you'd better add a shadow below TabLayout manually, just like android:background="#drawable/myrect":
<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>
All answers above didn't work for me ,so i found out this:
app:tabIndicatorHeight="4dp"
app:tabIndicatorColor="#color/colorAccent"
then allright!
Related
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>
Hi i need add shadow under my tab layout (like in skype).
My activity xml:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/splashGreenTop"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="0dp"
android:minHeight="?attr/actionBarSize" />
<FrameLayout
android:layout_width="match_parent"
android:layout_below="#+id/tab_layout"
android:id="#+id/tabContainer"
android:layout_height="match_parent" />
</RelativeLayout>
When i add android:elevation="10dp" to Tablayout, shadow was added bottom and top .. I need just bottom. See image...
How can i do this ?
Thanks in advance.
Just add elevation to your Tablayout (0dp - 25dp). Read the material design guidelines for more information about elevation.
android:elevation="10dp"
EDIT:
add it to both your tablayout and toolbar
<android.support.v7.widget.Toolbar xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/splashGreenTop"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:elevation="10dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:elevation="10dp"/>
This is a Great option to add shadow below Toolbar
Add a view below the tablayout of your desired layout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/splashGreenTop"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="0dp"
android:minHeight="?attr/actionBarSize" />
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_below="#+id/tab_layout"
android:background="#drawable/toolbar_dropshadow" />
<FrameLayout
android:layout_width="match_parent"
android:layout_below="#+id/tab_layout"
android:id="#+id/tabContainer"
android:layout_height="match_parent" />
</RelativeLayout>
then create a xml in drawable like this
#drawable/toolbar_dropshadow:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:startColor="#android:color/transparent"
android:endColor="#88333333"
android:angle="90"/>
</shape>
Change the startcolor and endcolor as u want to apply
You can add TabLayout as a child in AppBarLayout which has a shadow by default or you can specify the shadow depth by app:elevation="xdp"
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="xdp">
<android.support.v7.widget.Toolbar
...
/>
<android.support.design.widget.TabLayout
...
/>
</android.support.design.widget.AppBarLayout>
Try to add a simple View between TabLayout and Toolbar. Set background for that View as gradient which mimics shadow.
Shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#20000000"
android:endColor="#android:color/transparent"
android:angle="90">
</gradient>
</shape>
There is actually a quite simple solution:
Just put the Toolbar and the TabLayout inside of an AppBarLayout.
For example:
<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:theme="#style/ToolbarTheme"
app:titleTextAppearance="#style/ThemeOverlay.AppCompat.ActionBar"
android:background="#color/colorPrimary"/>
<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:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.AppBarLayout>
This works perfectly for me and it's the common way to combine the App-/Toolbar and the TabLayout.
Just add one line and it will work.
android:elevation="5dp"
See full code:
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayoutSave"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:elevation="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:tabIndicatorColor="#1d1d1f"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#1d1d1f"
app:tabTextColor="#888888" />
Add elevation into your Tablayout. Material Design
android:elevation="15dp"
Use app:elevation="0dp" to remove the shadow.
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" />
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"