¿Cómo alinear el cajón de navegación y sus elementos hacia la izquierda o la derecha de la pantalla en Android?

El cajón de navegación es un diseño que se puede ver en ciertas aplicaciones, que consta de algunos accesos directos de otras actividades (intentos). Este cajón generalmente se puede ver en el borde izquierdo de la pantalla, que es el predeterminado. Un botón para acceder al cajón de navegación se proporciona de forma predeterminada en la barra de acción. 

Example of Google Drive Navigation Drawer.

Así que ahora la pregunta es por qué es necesario alinear el Cajón de Navegación y sus elementos hacia la izquierda o la derecha de la pantalla . Es necesario porque una pantalla puede representar varios diseños a la vez. Para mantener todos estos elementos fijos en las posiciones y tamaños deseados, todas y cada una de las entidades de estos elementos deben inicializarse. Aunque no es necesario iniciar estas entidades en aplicaciones que representan un solo diseño, siempre es una mejor práctica iniciar todas las entidades. En vista de generar diferentes estilos para una aplicación, se quisiera implementar un cajón hacia la derecha de la pantalla con elementos alineados hacia la izquierda y otras posibles versiones. A través de este artículo, queremos extender la implementación de un Cajón de Navegación y alinearlo y sus elementos respectivamente.

Acercarse

Paso 1: crear un nuevo proyecto

Cree una actividad del cajón de navegación en Android Studio. Cómo crear/iniciar un nuevo proyecto en Android Studio Al hacer clic en Finalizar, el proyecto se compila y puede demorar uno o dos minutos.

Paso 2: trabajar con el archivo activity_main.xml

Cuando la configuración esté lista, vaya al archivo activity_main.xml , que representa la interfaz de usuario del proyecto. A continuación se muestra el código del archivo activity_main.xml para diferentes casos. Tenga en cuenta que vamos a modificar solo el archivo activity_main.xml en cada caso.

Alinee el cajón de navegación hacia la izquierda de la pantalla:

PD: «ltr» significa de izquierda a derecha.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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="true"
                                             
    android:layoutDirection="ltr"
  
    tools:openDrawer="start"><!--set layoutDirection to 'ltr'-->
  
    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
  
    <com.google.android.material.navigation.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" />
      
</androidx.drawerlayout.widget.DrawerLayout>

Salida: ejecutar en el emulador

Alinee el cajón de navegación hacia la derecha de la pantalla:

El enfoque es bastante similar al anterior. Los cambios se realizan solo dentro del diseño del cajón.

PD: «rtl» significa de derecha a izquierda

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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="true"
                                             
    android:layoutDirection="rtl"
  
    tools:openDrawer="start"><!--set layoutDirection to 'rtl', 
                                 else by default is left:-->
  
    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
  
    <com.google.android.material.navigation.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" />
      
</androidx.drawerlayout.widget.DrawerLayout>

Salida: ejecutar en el emulador

 

Alinee los elementos del cajón de navegación hacia la izquierda del cajón (por defecto):

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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="true"
    tools:openDrawer="start">
  
    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
  
    <com.google.android.material.navigation.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:layoutDirection="ltr"/><!--set layoutDirection to 'ltr'-->
      
</androidx.drawerlayout.widget.DrawerLayout>

Salida: ejecutar en el emulador

Alinee los elementos del cajón de navegación hacia la derecha del cajón:

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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="true"
    tools:openDrawer="start">
  
    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
  
    <com.google.android.material.navigation.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:layoutDirection="rtl"/><!--set layoutDirection to 'rtl',
                                           else by default is left-->
  
</androidx.drawerlayout.widget.DrawerLayout>

Salida: ejecutar en el emulador

Publicación traducida automáticamente

Artículo escrito por aashaypawar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *