web-dev-qa-db-fra.com

Matériau TabLayout Altitude ne fonctionne pas

Pour une raison quelconque, l'attribut altitude ne semble pas fonctionner sur le nouveau TabLayout dans la bibliothèque de support de conception matérielle. Des idées? 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>

branché comme ceci dans un fragment parent:

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:relevant image

L'activité a une barre d'outils mais celle-ci se trouve en dehors du fragment et ne devrait pas affecter la capacité du tablayout à avoir une ombre:

activité pertinente 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
28
dabluck

Pour que l'ombre apparaisse, vous devez définir un arrière-plan sur votre TabLayout. Il peut s'agir de la même couleur que l'arrière-plan de votre fenêtre (à condition que ce soit une couleur unie sans 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" />
53
sorianiv

Vous êtes censé utiliser ToolBar avec TabLayout. Ensuite, vous pouvez les placer tous deux dans une variable AppBarLayout et obtenir une ombre. Cela ne fonctionne que sur 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>

Voir http://inthecheesefactory.com/blog/Android-design-support-library-codelab/fr

4
Binoy Babu

Vous devrez utiliser CoordinatorLayout en tant que présentation du conteneur pour votre activité, puis placez votre TabLayout juste en dessous de AppBarLayout . Selon les spécifications de Material Design que vous devez utiliser. 

Android:elevation="4dp"

Élévation et que TabLayout fasse partie d’AppBarLayout ..__ Notez également que l’altitude ne sera visible que sur la version 21 (5.0) ou supérieure.

1
Ivan V

Pas besoin d'utiliser une Fragment. Une mise en page d'activité suffit. Comme:

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

Pendant ce temps, elevation est utile sur Lollipop. Si vous voulez être compatible à l'envers, vous feriez mieux d'utiliser app:elevation. Si app:elevation ne fonctionne pas, vous feriez mieux d'ajouter une ombre en dessous de TabLayout manuellement, comme pour 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>
0
SilentKnight