android - studio - navigation drawer personalizado

Cajón de navegación debajo de la barra de herramientas

Question

Estoy tratando de abrir el cajón de navegación debajo de la barra de herramientas.

<android.support.v4.widget.DrawerLayout
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:id="@+id/drawer_layout"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "wrap_content">
<include layout="@layout/toolbar"
android:id="@+id/toolbar"/>
<FrameLayout
android:layout_below="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background_color"/>
</RelativeLayout>
<ListView
android:id="@+id/drawer"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_below="@+id/toolbar"
android:layout_marginTop="56dp"
android:layout_gravity="start">
</ListView>
</android.support.v4.widget.DrawerLayout>

¿Cómo vuelvo a formatear el xml para que la barra de navegación se abra debajo de la barra de herramientas?

Answer 1

Debería mover DrawerLayout como principal superior y mover la Toolbar de Toolbar fuera del DrawerLayout contenido de DrawerLayout . En resumen, esto se ve así:

RelativeLayout
----Toolbar
----DrawerLayout
---ContentView
---DrawerList

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/top_parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/toolbar">
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background_color" />
<ListView
android:id="@+id/drawer"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_below="@+id/toolbar"
android:layout_gravity="start"
android:layout_marginTop="56dp" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>

Sin embargo, las directrices de diseño de materiales indican que Navigation Drawer debe estar encima de la Toolbar .

Answer 2

Puede agregar layout_marginTop como este,

<android.support.design.widget.NavigationView
android:layout_marginTop="@dimen/abc_action_bar_default_height_material"
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />

pero el cajón aparecerá como la capa superior de la barra de herramientas.

Aquí hay otra forma Choppy para agregarlo debajo de la barra de herramientas.

podría no ser el mejor pero funciona!

el resultado final se verá así

Si crea un proyecto como un proyecto de Cajón de navegación ( Navigation Drawer Activity ), le dará cuatro archivos XML en la creación en su carpeta de layout

• app_bar_main
• content_main
• navigatin_main

• activity_main

cómo estos xmls están vinculados? la mayoría de las veces veo que se usa include tag

Tu actividad está vinculada con activity_main

• activity_main tiene app_bar_main y navigation_view (cajón)
• app_bar_main tiene la toolbar y content_main por defecto

ahora vamos a eliminar activity_main y establecer su contenido directamente en la barra de aplicaciones principal y usarlo como el diseño principal de Activity.

Para agregar el cajón en la barra de herramientas, agréguelo en android.support.design.widget.AppBarLayout porque contiene la barra de herramientas y debe estar en la parte superior.

aquí hay un ejemplo de app_bar_main.XML

 <?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="none.navhead.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
//------ taken from activity_main
// content main
<include layout="@layout/content_main" />
// you need this padding
<android.support.v4.widget.DrawerLayout
android:paddingTop="?attr/actionBarSize"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="start">
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>

ps puede configurar app_bar_main.XML para establecerContentView de su actividad, solo juegue hay muchas maneras;)

Answer 3

Si está utilizando una barra de herramientas personalizada, utilice el diseño del cajón de esta manera.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The toolbar -->
<android.support.v7.widget.Toolbar
android:id="@+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/my_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- drawer view -->
<LinearLayout
android:layout_width="304dp"
android:layout_height="match_parent"
android:layout_gravity="left|start">
....
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>

y si no está utilizando una barra de herramientas personalizada, entonces debe establecer el margen superior en el diseño del cajón.

android:layout_marginTop ="?android:attr/actionBarSize"

Answer 4

Simplemente deberías agregar

android:layout_marginTop="@dimen/abc_action_bar_default_height_material"

a su diseño que está utilizando como cajón.

Esto ajustará automáticamente el cajón de navegación debajo de la barra de herramientas y también admite diferentes tamaños de pantalla.

Answer 5

Una solución fácil y buena está configurada fitsSystemWindows=false para

android.support.v4.widget.DrawerLayout

que tiene id como

android:id="@+id/drawer_layout"

Y para navigationView establece layout_marginTop como ?attr/actionBarSize que obtendría el tamaño de la barra de acciones y lo establecería como margen

Aquí está el código completo de activity_main.xml que tiene ambos cambios listados arriba.

Answer 6

este es mi diseño y mi trabajo perfecto: activity_main:

<?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:layout_width="match_parent"
android:layout_height="match_parent">
<!-- AppBarLayout should be here -->
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<!-- add app:layout_behavior="@string/appbar_scrolling_view_behavior" -->
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:openDrawer="start">
<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>

app_bar_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activty.MainActivity">
<include layout="@layout/content_main"/>
</FrameLayout>

resultado: Abajo barra de herramientas

Answer 7

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
tools:openDrawer="start">
<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:layout_marginTop="?attr/actionBarSize"
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="false"
app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>