I am using TabLayout and a View Pager to show multiple tabs. I want to change the selected tab indicator. I have used app:tabIndicatorColorbut the colour is not changing. It shows a greenish colour. I have read that by default the tabIndicator colour is set tocolor/accent, however the greenish colour is not my accent colour.
My xml is as below:
<?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_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/primary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#color/primary_light"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
app:headerLayout="#layout/header_layout"
app:menu="#menu/menu_drawer"
/>
What am I missing?
Image here: http://imgur.com/uNcbviv
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabGravity="fill"
app:tabMode="fixed"
android:background="#color/material_blue_grey_800"
app:tabIndicatorColor="#color/orange"
app:tabSelectedTextColor="#color/orange"
app:tabTextColor="#color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
It can help You.
app:tabIndicatorColor="#color/orange" here is the line which change the color.
You can try the following customization for your TabLayout,
<android.support.design.widget.TabLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#id/pages_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="4dp"/>
This should solve the indicator color!
According to the source code of TabLayout, the tabTextColor must reference a selector color instead of a single color. This is the part in the source code where it uses getColorStateList:
if (a.hasValue(R.styleable.TabLayout_tabTextColor)) {
// If we have an explicit text color set, use it instead
mTabTextColors = a.getColorStateList(R.styleable.TabLayout_tabTextColor);
}
so you should define your colors in file like this for example res/color/your_colors.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:color=""#color/primary_light"/>
<item android:color="#0000ff"/>
</selector>
you can set color Programmatically like
tabLayout.setSelectedTabIndicatorColor(R.color.black);
Related
Below is a picture of my app UI (actionBar/toolBar + webView + tabs). As you can see, the AB/toolbar + tabs are transparent (black color hence no background) but it refuses to fold above my webView (EdgeScrollViewPager) in the background. I am setting the color to #null in both the toolbar and tabBar. I do not know what I do for logical errors in the code, ie why the actionBar/toolbar and tabBar do not lie on top of the dark blue background (webView).
app_bar_main.xml
<?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:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.MainActivity">
<include layout="#layout/toolbar" />
<com.ui.util.EdgeScrollViewPager
android:id="#+id/content_main_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="visible"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</com.ui.util.EdgeScrollViewPager>
<android.support.design.widget.TabLayout
android:id="#+id/content_main_tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextAppearance="#style/ML.Tab"
app:tabPadding="0dp"
app:tabIndicatorHeight="0dp"
app:tabIndicatorColor="#null"
android:visibility="visible"
android:background="#null"
app:background="#null">
</android.support.design.widget.TabLayout>
</LinearLayout>
toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
app:theme="#style/ML.Toolbar"
app:popupTheme="#style/ML.Toolbar.PopupTheme"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
>
<include layout="#layout/topbar_loading_indicator" />
</android.support.v7.widget.Toolbar>
style.xml
<style name="ML.Toolbar" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#null</item>
<item name="background">#null</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
Try this:
<?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"
tools:context="com.MainActivity">
<include layout="#layout/app_toolbar" />
<com.ui.util.EdgeScrollViewPager
android:id="#+id/content_main_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="visible"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</com.ui.util.EdgeScrollViewPager>
<android.support.design.widget.TabLayout
android:id="#+id/content_main_tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
android:background="#null"
android:visibility="visible"
app:background="#null"
app:tabGravity="fill"
app:tabIndicatorColor="#null"
app:tabIndicatorHeight="0dp"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabPadding="0dp"
app:tabTextAppearance="#style/ML.Tab">
</android.support.design.widget.TabLayout>
If you want to Float the views You can either use relative layout or frame layout.
There are two transparent vertical strips on both sides of my TabLayout. It looks like this:
It appeared after I removed android:theme="#style/AppTheme.ActionBar" from TabLayout, because it didn't show TabLayout indicator:
What might be the issue?
My layout:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="my.beeline.kz.ui.ScrollableController">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
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:theme="#style/AppTheme.ActionBar"
app:layout_collapseMode="none"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:titleMarginStart="#dimen/toolbar_title_margin"/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
app:tabMinWidth="120dp"
app:tabSelectedTextColor="#color/black"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="#color/gray_solid"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gray_very_light"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Update:
Solution was to remove android:background="#null" from AppBarLayout
This code worked for me I hope it worked for you :
<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.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" />
</android.support.design.widget.CoordinatorLayout>
Here I'm going to show you how to implement material design tabs in your android app.
1. Open build.gradle of app level and add design support library because TabLayout is a part of Android Design Support Library:
compile 'com.android.support:design:27.0.2'
2. Add Tab layout and View pager in you layout activity_main.xml or wherever you willing to add
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/app_bar" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?actionBarSize"
app:tabGravity="fill"
app:tabIndicatorColor="#color/white"
app:tabIndicatorHeight="4dp"
app:tabBackground="#color/colorPrimary"
app:tabMode="fixed">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
3. app_bar.xml for toolbar
<?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:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:gravity="center_vertical"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="#style/MyToolbarTheme"
app:title="#string/app_name"/>
4. style.xml
<style name="MyToolbarTheme"
parent="#style/ThemeOverlay.AppCompat.Dark">
<item name="colorControlNormal">#color/white</item>
<item name="titleTextColor">#color/white</item>
</style>
Some options to customize tabs appearance:
app:tabGravity=”fill” for Navigation tab gravity. Other is the centre for placing navigation tabs from centre
app:tabIndicatorColor=”#color/white” for an indicator in tabs. Here you can see the white indicator.
app:tabIndicatorHeight=”4dp” for indicator height.
app:tabMode=”fixed” for tab mode. Other is scrollable for many more tabs.
app:tabTextColor=”#color/semi_yellow” for unselected tab text color.
app:tabSelectedTextColor=”#color/yellow” for selected tab text color.
If you want to add icons to tab, you have to do is call setIcon() method of the tab. Create icon array and assign each one for each tab like this:
Tabs with the icon:
private int[] tabIcons = {
R.drawable.home,
R.drawable.notification,
R.drawable.star
};
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);
And the time of Result:
Without icon
Happy Coding!!!
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.
I have a 11 Fragment in the viewPager, and when tablayout want to show these 11 fragment name , their text not show correctly.
this is the screenshot of my problem :
and this is my activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/xmlDrawerLayoutRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activities.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v7.widget.Toolbar
android:id="#+id/xmlToolbarMain"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- navigation opener -->
<ImageButton
android:id="#+id/btnHomeToolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="?attr/colorPrimary"
android:paddingRight="10dp"
android:clickable="true"
android:src="#drawable/menu"/>
<!-- app name -->
<TextView
android:id="#+id/txttitleToolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title"
android:layout_gravity="right"
android:textColor="#ffffff"
android:textSize="16sp"
android:paddingRight="10dp"/>
<!-- search box-->
<ImageButton
android:id="#+id/btnSearchToolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:paddingLeft="10dp"
android:clickable="true"
android:src="#drawable/search"
android:background="?attr/colorPrimary"/>
</android.support.v7.widget.Toolbar>
<!-- Tablayout -->
<android.support.design.widget.TabLayout
android:id="#+id/xmlTabLayoutMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/xmlToolbarMain"
android:background="?attr/colorPrimary"
android:elevation="8dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<!-- ViewPager -->
<android.support.v4.view.ViewPager
android:id="#+id/xmlViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/xmlTabLayoutMain"/>
<!-- navigationDrawer -->
<!--<android.support.design.widget.NavigationView-->
<!--android:id="#+id/xmlNavigation"-->
<!--android:layout_width="198dp"-->
<!--android:layout_height="match_parent"-->
<!--android:layout_gravity="start"-->
<!--app:headerLayout="#layout/header_navigation_view"-->
<!--app:menu="#menu/nav_menu" />-->
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
and I set this on my tablayout in the MainActivity.java but still i have a problem :
appTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
try to use like that
<android.support.design.widget.TabLayout
android:id="#+id/xmlTabLayoutMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/xmlToolbarMain"
android:background="?attr/colorPrimary"
android:elevation="8dp"
app:tabMode="scrollable"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
also try to use if not working
app:tabGravity="fill"
tabMode will make your tab scrollable.So it should solve your problem.
You could create a custom style for your text and there define all the constraints like normal text view attributes. then just set tab text appearance to your custom style.
Your tab layout will be like -
<android.support.design.widget.TabLayout
android:id="#+id/tabs_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabTextAppearance="#style/MineCustomTabText"
app:tabMode="scrollable"
/>
And in your style.xml file define the style, like this -
<style name="MineCustomTabText" parent="TextAppearance.Design.Tab">
<item name="android:textSize">16sp</item>
<item name="android:maxLines">1</item>
</style>
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!