android - Gaveta de navegação abaixo da barra de ferramentas




navigation-drawer android-toolbar (5)

Estou tentando abrir a gaveta de navegação abaixo da barra de ferramentas.

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

Como reformato o xml para que a barra de navegação seja aberta abaixo da barra de ferramentas?


Se você estiver usando a barra de ferramentas personalizada, use o layout da gaveta dessa maneira.

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

e se você não estiver usando a barra de ferramentas personalizada, precisará definir a margem superior para o layout da gaveta.

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

Uma solução Fácil e Bom é definida fitsSystemWindows=false para

android.support.v4.widget.DrawerLayout

que tem id como

android:id="@+id/drawer_layout"

E para navigationView defina layout_marginTop como ?attr/actionBarSize layout_marginTop ?attr/actionBarSize que obteria o tamanho da barra de ação e o definiria como margem

Aqui está o código completo de activity_main.xml que possui as duas alterações listadas acima.


Você deve simplesmente adicionar

android:layout_marginTop="@dimen/abc_action_bar_default_height_material"

ao seu layout que você está usando como gaveta.

Isso ajustará automaticamente a gaveta de navegação abaixo da barra de ferramentas e também suporta diferentes tamanhos de tela.


Você pode adicionar layout_marginTop assim,

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

mas a gaveta aparecerá como a camada superior da barra de ferramentas.

Aqui está outra maneira Choppy de adicioná-lo abaixo à barra de ferramentas !!!

pode não ser o melhor, mas funciona!

resultado final será assim

Se você criar um projeto como um projeto da Gaveta de Navegação ( Navigation Drawer Activity ), ele fornecerá quatro arquivos XML na criação na pasta de layout

  • app_bar_main
  • content_main
  • navigatin_main
  • activity_main

como esses xmls estão vinculados? principalmente eu vejo include tag é usada

Sua atividade está vinculada a activity_main

  • activity_main possui app_bar_main e navigation_view (gaveta)
  • app_bar_main possui a toolbar e content_main por padrão

agora vamos remover activity_main e definir seu conteúdo diretamente para a barra de aplicativos principal e usá-lo como o layout principal de Activity.

Para adicionar a gaveta na barra de ferramentas, adicione-a em android.support.design.widget.AppBarLayout pois contém a barra de ferramentas e ela deve estar na parte superior.

Aqui está um exemplo 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, você pode definir app_bar_main.XML para setContentView de sua atividade, basta brincar de várias maneiras;)


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






android-toolbar