web-dev-qa-db-ja.com

Material TabLayoutの標高が機能しない

何らかの理由で、標高属性がマテリアルデザインサポートライブラリの新しいTabLayoutで機能していないようです。何か案は？ 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>

親フラグメントに次のように接続します：

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);

画像： relevant image

アクティビティにはツールバーがありますが、これはフラグメントの外にあり、タブレイアウトの影を付ける機能に影響を与えません。

関連するアクティビティ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>
androidmaterial-designandroid-elevation
33
dabluck

影を表示するには、TabLayoutに背景を設定する必要があります。ウィンドウの背景と同じ色にすることができます（アルファのない単色の場合）。

<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" />
63
sorianiv

ToolBarでTabLayoutを使用することになっています。その後、両方をAppBarLayout内に配置して、影を取得できます。これは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>

http://inthecheesefactory.com/blog/Android-design-support-library-codelab/en を参照してください

5
Binoy Babu

アクティビティのコンテナレイアウトとしてCoordinatorLayoutを使用し、AppLayoutのすぐ下にTabLayoutを配置する必要があります。マテリアルデザインの仕様に従って、使用する必要があります

Android:elevation="4dp"

昇格し、TabLayoutをAppBarLayoutの一部にします。また、標高はv21（5.0）以降でのみ表示されることに注意してください。

1
Ivan V

Fragmentを使用する必要はありません。アクティビティレイアウトで十分です。のような：

<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>

一方、elevationはLollipopでは便利です。後方互換性が必要な場合は、app:elevationを使用することをお勧めします。 app:elevationが機能しない場合は、Android:background="@drawable/myrect"と同様に、手動でTabLayoutの下に影を追加することをお勧めします。

<!-- 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>
0
SilentKnight