Añadir diseño personalizado a ActionBar / Toolbar sin márgenes

Quiero crear una barra de herramientas de altura personalizada y funciona bien hasta que agregue contenido a ella. Entonces mi contenido se ajusta para estar entre la flecha trasera y los botones de la barra de acción.

¿Cómo puedo hacer que mi contenido tome todo el ancho para poder crear un diseño como a continuación? Supongo que el icono "+" necesita estar en un diseño padre de la barra de herramientas?

Los docs dicen:

La aplicación puede agregar vistas secundarias arbitrarias a la barra de herramientas. Aparecerán en esta posición dentro del diseño. Si Toolbar.LayoutParams de una vista secundaria indica un valor de gravedad de CENTER_HORIZONTAL, la vista intentará centrarse dentro del espacio disponible restante en la barra de herramientas después de que se hayan medido todos los demás elementos.

Pero no tengo la gravedad puesta en CENTER_HORIZONTAL … Disposición que quiero

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:iosched="http://schemas.android.com/apk/res-auto" iosched:theme="@style/ActionBarThemeOverlay" iosched:popupTheme="@style/ActionBarPopupThemeOverlay" android:id="@+id/toolbar_actionbar" android:background="@color/theme_primary" iosched:titleTextAppearance="@style/ActionBar.TitleText" iosched:contentInsetStart="16dp" iosched:contentInsetEnd="16dp" android:layout_width="match_parent" android:layout_height="128dp" > <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> ... My Content 

Actualmente mi disposición termina para arriba como esto al funcionar con el margen izquierdo fijado a 168:

Introduzca aquí la descripción de la imagendiseño

No estoy seguro si todavía necesitas ayuda con esto, pero tiene la mayoría de los votos para una pregunta sin respuesta, no sólo en la etiqueta android-5.0-lollipop , sino también en la etiqueta de la barra de herramientas de Android ahora mismo. Así que pensé en darle uno.

Este diseño es bastante fácil de lograr, especialmente con la nueva Biblioteca de Diseño de Soporte .

Implementación

La raíz de su jerarquía tendrá que ser CoordinatorLayout .

Según los documentos:

Los niños de un coordinador pueden tener un ancla. Este id de visualización debe corresponder a un descendiente arbitrario del CoordinatorLayout, pero no puede ser el propio anclado ni un descendiente del niño anclado. Esto puede usarse para colocar vistas flotantes en relación con otros paneles de contenido arbitrario.

Por lo tanto, vamos a utilizar esto para la posición de la FloatingActionButton donde tiene que ir.

El resto es bastante sencillo. Vamos a utilizar un LinearLayout vertical para posicionar la Toolbar , el contenedor de texto, el contenedor de ViewPager y, a continuación, un ViewPager . Por lo tanto, el diseño completo se ve así:

 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#181E80" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?attr/actionBarSize" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="48dp" android:paddingTop="8dp"> <ImageView android:id="@android:id/icon" android:layout_width="54dp" android:layout_height="54dp" android:layout_alignParentStart="true" android:layout_marginStart="16dp" android:importantForAccessibility="no" android:src="@drawable/logo" /> <TextView android:id="@android:id/text1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@android:id/icon" android:layout_marginStart="14dp" android:layout_toEndOf="@android:id/icon" android:text="Chelsea" android:textColor="@android:color/white" android:textSize="24sp" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignStart="@android:id/text1" android:layout_below="@android:id/text1" android:text="England - Premier League" android:textColor="@android:color/white" android:textSize="12sp" /> </RelativeLayout> <FrameLayout android:id="@+id/tab_container" android:layout_width="match_parent" android:layout_height="90dp" android:background="#272F93"> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" app:tabContentStart="70dp" app:tabGravity="center" app:tabIndicatorColor="#F1514A" app:tabMode="scrollable" app:tabSelectedTextColor="@android:color/white" app:tabTextColor="#99ffffff" /> </FrameLayout> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> <android.support.design.widget.FloatingActionButton android:layout_width="60dp" android:layout_height="60dp" android:layout_margin="16dp" android:src="@drawable/ic_star_white_24dp" app:backgroundTint="#F1514A" app:borderWidth="0dp" app:elevation="8dp" app:layout_anchor="@id/tab_container" app:layout_anchorGravity="top|right|end" /> </android.support.design.widget.CoordinatorLayout> 

No hay mucho más que añadir, la única otra cosa que menciono es cómo usar el TabLayout . Si estás usando un ViewPager como nosotros, probablemente llamarías a uno de los dos:

  • TabLayout.setTabsFromPagerAdapter
  • TabLayout.setupWithViewPager

Notas

Yo sólo tipo de eyeballed las dimensiones, tratando de igualar la imagen tanto como sea posible.

Resultados

Resultados

  • Barra de herramientas Android demasiado alta en modo horizontal
  • Cómo eliminar el relleno superior y inferior de android.support.v7.widget.Toolbar?
  • Barra de herramientas de soporte técnico de Android colorControlNormal color
  • Mostrar barra de herramientas después de oculto por desplazamiento en el botón de clic
  • ¿Cómo hacer que la barra Contextual ActionMode se superponga a la barra de herramientas appcompat-v7 pero no al cajón de navegación?
  • ¿Debemos reemplazar la barra de acción por ToolBar?
  • Efecto de ondulación en la barra de herramientas cortada
  • Establecer el título de la barra de herramientas
  • Alinear texto en el centro de la barra de herramientas
  • ¿Cómo puedo usar una barra de herramientas de altura extendida con la navegación de menús y las acciones centradas verticalmente?
  • Android El menú de acción personalizada de la barra de herramientas de diseño de material no está alineado correctamente
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.