问题
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>
回答1:
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" />
回答2:
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
回答3:
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.
回答4:
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>
回答5:
All answers above didn't work for me ,so i found out this:
app:tabIndicatorHeight="4dp"
app:tabIndicatorColor="@color/colorAccent"
then allright!
来源：https://stackoverflow.com/questions/31151180/material-tablayout-elevation-not-working