Uso de una barra de soporte para la distribución del teléfono y una barra de acción independiente para el diseño de la tableta

Hoy estaba pensando en una forma de mejorar el diseño de mi tableta, y encontré esta imagen

Una barra de herramientas predeterminada y una barra de herramientas independiente

Lo quería tan mal, ya que se ve increíble. Estoy buscando google por alrededor de una hora y no he encontrado ningún buen tutoriales. He encontrado este: v21 Material Design para Pre Lollipop .

Empecé a implementar esto de inmediato y todo lo que probé fue completamente equivocado. El theming para la barra de acción independiente debe ser el ThemeOverlay.AppCompat.ActionBar sin embargo en mi disposición del teléfono estoy ampliando el tema Theme.AppCompat.NoActionBar tema. (El tema está abajo)

Es simplemente no está claro lo que debo hacer para hacer algo como la imagen de arriba en las tabletas y mostrar la normal (personalizada) supportActionBar en los teléfonos sin estropear uno de ellos.

Aquí está mi estilo de AppTheme (que aplico a mi aplicación)

 <!-- Base application theme. --> <style name="AppTheme" parent="@style/Theme.AppCompat.NoActionBar"> <!-- your app branding color for the app bar --> <item name="colorPrimary">@color/primaryColor</item> <!-- darker variant for the status bar and contextual app bars --> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <!-- theme UI controls like checkboxes and text fields --> <item name="colorAccent">@color/colorAccent</item> </style>

Antes de preguntar, sí he encontrado esta pregunta en SO, pero no esto no es una pregunta duplicada. El mensaje que escribió Chris Banes tampoco me aclaró las cosas.

¿Es posible hacerlo sin destruir ambos diseños? Pensando en voz alta, la razón por la que elegir la barra de herramientas personalizada era porque había incluido una búsqueda personalizada, pero la había quitado. Hay otra vista en la barra de herramientas, pero creo que podría ser eliminado si es realmente necesario.

Este es el diseño de mi versión de teléfono.

 <?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" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/coordinatorLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:theme="@style/Theme.AppCompat.NoActionBar"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:animateLayoutChanges="true" android:orientation="vertical"> <include android:id="@+id/toolbar" layout="@layout/toolbar" app:layout_scrollFlags="scroll|enterAlways" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/toolbar" android:background="@color/primaryColor" android:minHeight="?attr/actionBarSize"/> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.DrawerLayout android:id="@+id/drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/appBarLayout" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" /> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/replaceFrameLayout" android:layout_width="match_parent" android:layout_height="match_parent"/> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/errorWarnings" android:visibility="gone" android:gravity="center" android:layout_gravity="center"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/errorIcon" android:tint="@color/fab_material_red_500" android:layout_centerVertical="true"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/errorDescription" android:layout_below="@+id/errorIcon"/> </RelativeLayout> <com.tim.koers.wallpapers.UI.FilterButton android:id="@+id/filterButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|bottom" android:layout_margin="16dp" android:clickable="true" android:src="@drawable/ic_menu_filter" android:elevation="6dp" android:tint="@color/fab_material_white" android:visibility="gone"/> </FrameLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:menu="@menu/drawer"/> </android.support.v4.widget.DrawerLayout> </android.support.design.widget.CoordinatorLayout>

Aquí está mi diseño de tableta:

 <?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" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/coordinatorLayout" android:layout_width="match_parent" android:layout_height="match_parent" > <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.widget.DrawerLayout android:id="@+id/drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:animateLayoutChanges="true" android:orientation="vertical" android:background="@android:color/white" android:layout_marginEnd="64dp" android:layout_marginStart="64dp" android:layout_marginTop="56dp"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- This is the secondary toolbar, 72dp also according to specs --> <include android:id="@+id/toolbar" layout="@layout/toolbar" app:layout_scrollFlags="scroll|enterAlways" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/toolbar" android:background="@color/primaryColor" android:minHeight="?attr/actionBarSize"/> </RelativeLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="56dp" android:layout_marginEnd="64dp" android:layout_marginStart="64dp" tools:context=".MainActivity" /> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/replaceFrameLayout" android:layout_width="match_parent" android:layout_height="match_parent"/> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/errorWarnings" android:visibility="gone" android:gravity="center" android:layout_gravity="center"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/errorIcon" android:tint="@color/fab_material_red_500" android:layout_centerVertical="true"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/errorDescription" android:layout_below="@+id/errorIcon"/> </RelativeLayout> <com.tim.koers.wallpapers.UI.FilterButton android:id="@+id/filterButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|bottom" android:layout_margin="16dp" android:clickable="true" android:src="@drawable/ic_menu_filter" android:elevation="6dp" android:tint="@color/fab_material_white" android:visibility="gone"/> </FrameLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:menu="@menu/drawer"/> </android.support.v4.widget.DrawerLayout> </FrameLayout> </android.support.design.widget.CoordinatorLayout>

Encontré un artículo que implementa este diseño.

Crear una barra de herramientas de la tarjeta (Barra de herramientas anidada) en Android

Puede implementarlo en el diseño de la tableta.

Se compone de una barra de herramientas de altura extendida (azul) y un CardView con título y menú regular.

La estructura básica:

 <FrameLayout> <!-- Extended Toolbar holding Drawer icon --> <android.support.v7.widget.Toolbar /> <android.support.v7.widget.CardView> <LinearLayout> <!-- Card Toolbar --> <android.support.v7.widget.Toolbar /> <!-- Divider --> <View /> </LinearLayout> </android.support.v7.widget.CardView> </FrameLayout>

Step1 doble la altura de la barra de herramientas

Paso2 configurar `CardView` como la barra de herramientas secundaria

Código Java step3

Barra de herramientas de origen: conjunto Icono de navegación
CardView herramientas de CardView : menú y título

Ver más

Android 5.0 – Cómo implementar este diseño de tableta desde las directrices de diseño de materiales
Buscando en Google esta imagen

Después de muchas horas de probar cosas que he llegado con el siguiente código:

Para su diseño de teléfono, use esto como base:

 <?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" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/coordinatorLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:theme="@style/Theme.AppCompat.NoActionBar"> <android.support.v4.widget.DrawerLayout android:id="@+id/drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:animateLayoutChanges="true" android:orientation="vertical"> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:background="@color/primaryColor" android:minHeight="?attr/actionBarSize" style="@style/tabsWidgetIndicatorColors" android:theme="@style/Theme.AppCompat.NoActionBar"> </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/toolbar" android:background="@color/primaryColor" android:minHeight="?attr/actionBarSize"/> </android.support.design.widget.AppBarLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Put your content here --> </FrameLayout> </RelativeLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:menu="@menu/drawer"/> </android.support.v4.widget.DrawerLayout> </android.support.design.widget.CoordinatorLayout>

Para el diseño de la tableta, usa esto como base:

 <?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" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/coordinatorLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:theme="@style/Theme.AppCompat" > <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.widget.DrawerLayout android:id="@+id/drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" android:fitsSystemWindows="true"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="128dp" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/primaryColor" android:minHeight="?attr/actionBarSize" android:id="@+id/actionToolbar" /> <View android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/primaryColor" android:minHeight="?attr/actionBarSize" /> </LinearLayout> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:animateLayoutChanges="true" android:orientation="vertical" android:layout_marginEnd="64dp" android:layout_marginStart="64dp" android:layout_marginTop="56dp"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- This is the secondary toolbar, 72dp also according to specs --> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:background="@color/colorSecondary" android:theme="@style/ThemeOverlay.AppCompat.ActionBar" android:minHeight="72dp" style="@style/tabsWidgetIndicatorColors" > <!--android:background="?attr/colorPrimary"--> </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/toolbar" android:background="@color/colorSecondary" android:minHeight="?attr/actionBarSize"/> <!--android:background="?attr/colorPrimary"--> </RelativeLayout> </android.support.design.widget.AppBarLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!-- your content here--> </FrameLayout> </RelativeLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:menu="@menu/drawer"/> </android.support.v4.widget.DrawerLayout> </FrameLayout> </android.support.design.widget.CoordinatorLayout>

En el código principal use findViewById para encontrar la barra de herramientas con id @ + id / toolbar y @ + id / actionBar.

Si está en un diseño de tableta, ambas barras de herramientas no deben ser nulas. En un teléfono, la barra de acción es nula. Compruebe que, y si no es nulo, tendrá que establecer la barra de apoyo a la barra de herramientas con el id @ + id / actionBar, y tendrá que inflar el menú de la barra de herramientas con el id @ + id / toolbar. Mientras ejecuta la comprobación de la tableta / teléfono, haga que un nuevo booleano privado sea accesible a su clase llamada isInflateMenuEnabled. Si la barra de herramientas @ + id / actionBar no es nula, isInflateMenuEnabled debe ser falsa.

Para resumir las cosas, este es el código:

 public class MainActivity extends AppCompatActivity implements Toolbar.OnMenuItemClickListener{ private boolean isInflateMenuEnabled = true; private Toolbar mToolbar; @Override protected void onCreate(Bundle savedInstanceState) { setContentView(R.layout.activity_main); //Check if it is a tablet or phone mToolbar = (Toolbar) findViewById(R.id.toolbar); Toolbar actionToolbar = (Toolbar)findViewById(R.id.actionToolbar); if(actionToolbar != null){ isInflateMenuEnabled= false; setSupportActionBar(actionToolbar); actionToolbar.setTitle(""); mToolbar.inflateMenu(R.menu.menu_main); mToolbar.setOnMenuItemClickListener(this); }else{ mToolbar.inflateMenu(R.menu.menu_main); // Inflate the menu because there will be no menu inflated automatically anymore. mToolbar.setOnMenuItemClickListener(this); setSupportActionBar(mToolbar); } mToolbar.setTitle(getString(R.string.title)); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return isInflateMenuEnabled; } @Override public boolean onOptionsItemSelected(final MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. // This will be working with your menu clicks } }