tab studio for component bar android material-design android-elevation

for - tabs android studio material design



Material TabLayout elevaciĆ³n no funciona (6)

Deberá usar CoordinatorLayout como un diseño de contenedor para su actividad y luego colocar su TabLayout justo debajo de AppBarLayout. De acuerdo con las especificaciones de Material Design que debes usar

android:elevation="4dp"

Eleve y haga que su TabLayout sea parte de AppBarLayout. También tenga en cuenta que la elevación solo será visible en v21 (5.0) o superior.

Por alguna razón, el atributo de elevación no parece estar funcionando en el nuevo TabLayout en la biblioteca de soporte de diseño de materiales. ¿Algunas 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>

conectado de esta manera en un fragmento padre:

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

imagen:

La actividad tiene una barra de herramientas, pero está fuera del fragmento y no debería afectar la capacidad del tablayout para tener una sombra:

xml actividad relevante:

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


Mantener el tablayout dentro de appbarLayout. Funcionará


No es necesario usar un Fragment . Un diseño de actividad es suficiente. Me gusta:

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

Mientras tanto, la elevation es útil en Lollipop. Si quieres ser compatible con versiones anteriores, es mejor que uses la app:elevation . Si la app:elevation no funciona, es mejor que agregues una sombra debajo de TabLayout manualmente, como 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>


Para hacer el show de sombras, debe establecer un fondo en su TabLayout. Puede ser del mismo color que el fondo de la ventana (siempre que sea un color sólido sin alfa).

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


Se supone que debes usar la TabLayout ToolBar con TabLayout . Luego puedes colocarlos dentro de un AppBarLayout y obtener una sombra. Esto solo funciona en 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>

Ver http://inthecheesefactory.com/blog/android-design-support-library-codelab/en


Todas las respuestas anteriores no funcionaron para mí, así que descubrí esto:

app:tabIndicatorHeight="4dp" app:tabIndicatorColor="@color/colorAccent"

entonces esta bien!