Personalización del riel de navegación de materiales en Android

En el artículo, Material Design Component Navigation Rail en Android , se analiza cómo implementar uno de los componentes de navegación que es Navigation Rail, especialmente para las pantallas más grandes, como computadoras de escritorio o tabletas. Entonces, en este artículo, se continuó con la personalización del riel de navegación en Android. Eche un vistazo a la siguiente imagen para obtener una descripción general de toda la discusión.

Crear un proyecto de actividad vacío

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio .

Agregar dependencia requerida

Incluya la dependencia de componentes de diseño de materiales de Google en el archivo build.gradle . Después de agregar las dependencias, no olvide hacer clic en el botón «Sincronizar ahora» presente en la esquina superior derecha. Tenga en cuenta que el riel de navegación se introdujo en la última versión de la versión de componentes de diseño de materiales que es 1.4.0 y superior.

implementación ‘com.google.android.material:material:1.4.0’

Tenga en cuenta que mientras sincroniza su proyecto, debe estar conectado a la red y asegurarse de agregar la dependencia al archivo Gradle de nivel de aplicación como se muestra a continuación. Tenga en cuenta que el diseño seguirá siendo el mismo que en el artículo anterior.

Las personalizaciones esenciales ahora se discuten una por una

Las etiquetas de los iconos son opcionales.

Hay cuatro modos de etiquetas para cada uno de los iconos. Esos son:

seleccionado -> Las etiquetas se muestran solo para los elementos seleccionados en el riel de navegación.

etiquetados -> Las etiquetas se muestran para todos los elementos.

sin etiqueta -> Todas las etiquetas están ocultas, aunque el elemento esté seleccionado.

auto -> Las etiquetas se comportan como «etiquetadas» cuando hay 3 o menos de 3 elementos y «seleccionadas» cuando hay 4 elementos o más.

Para incluir estos valores en XML hay un atributo para el riel de navegación que es:

app:labelVisibilityMode=”valor”

Eche un vistazo al siguiente ejemplo y salida:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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:clipToPadding="false"
    tools:context=".MainActivity">
  
    <com.google.android.material.navigationrail.NavigationRailView
        android:id="@+id/navigationRail"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:headerLayout="@layout/navigation_rail_fab"
        app:labelVisibilityMode="unlabeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:menu="@menu/navigation_rail_menu" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Interfaz de usuario de salida:

Agregar etiquetas para íconos

También hay una insignia para artículos en el riel de navegación. Por ejemplo, cada vez que aumenta la nueva notificación o el recuento del contenido dentro del fragmento en particular, solo se puede informar al usuario aumentando el recuento de la insignia o simplemente una insignia de punto. Echa un vistazo al siguiente ejemplo para hacerte una idea. aplicación > res > diseño > actividad_principal.xml actividad_principal.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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:clipToPadding="false"
    tools:context=".MainActivity">
  
    <com.google.android.material.navigationrail.NavigationRailView
        android:id="@+id/navigationRail"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:headerLayout="@layout/navigation_rail_fab"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:menu="@menu/navigation_rail_menu" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt 

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.navigationrail.NavigationRailView
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // instance of navigation rail
        val navigationRail: NavigationRailView = findViewById(R.id.navigationRail)
  
        // instance of navigation rail badge
        val badge = navigationRail.getOrCreateBadge(R.id.images)
        badge.isVisible = true
        badge.number = 99
    }
}

Interfaz de usuario de salida:

La mejor práctica para agregar insignias para los íconos es, si es necesario ocultar temporalmente la insignia hasta que se reciba la próxima notificación, entonces, en este caso, cambiar la visibilidad de BadgeDrawable de la siguiente manera:

val badgeDrawable = navigationRail.getBadge(R.id.images)
if (badgeDrawable != null) {
    badgeDrawable.isVisible = false
    badgeDrawable.clearNumber()
}

Cambio de la elevación del contenedor del riel de navegación

Hay elevación de atributo. Este atributo solo afecta al contenedor del Riel de Navegación. El atributo es:

aplicación: elevación = «valor_en_dp»

Echa un vistazo al siguiente ejemplo y su salida:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:clipToPadding="false"
    tools:context=".MainActivity">
  
    <com.google.android.material.navigationrail.NavigationRailView
        android:id="@+id/navigationRail"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:elevation="18dp"
        app:headerLayout="@layout/navigation_rail_fab"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:menu="@menu/navigation_rail_menu" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Interfaz de usuario de salida:

Cambiar el color del contenedor del riel de navegación

Hay un atributo XML para el riel de navegación para cambiar el estilo o el color del riel de navegación que es:

style=”@style/Widget.MaterialComponents.NavigationRailView.Colored.Compact”

Tenga en cuenta que, al incluir esto, el tamaño del riel de navegación se vuelve compacto y se recomienda eliminar el botón de acción flotante eliminando el atributo de diseño del encabezado en el riel de navegación. Echa un vistazo al siguiente ejemplo para hacerte una idea.

Cambiando el TextAppearance de las etiquetas

La apariencia de texto predeterminada de las etiquetas es Título en el sistema Tipo de diseño de material, por lo que debe anularse con la fuente personalizada. Entonces, en el archivo themes.xml, invoque el estilo personalizado para el sistema de tipo Caption.

<style name="TextAppearance.MdcTypographyStyles.Caption" parent="TextAppearance.MaterialComponents.Caption">
    <item name="fontFamily">@font/poppins_regular</item>
    <item name="android:fontFamily">@font/poppins_regular</item>
    <item name="android:textSize">12sp</item>
</style>

Ahora incluya TextAppearance.MdcTypographyStyles.Caption en los atributos bajo el riel de navegación:

app:itemTextAppearanceActive=”@style/TextAppearance.MdcTypographyStyles.Caption”

app:itemTextAppearanceInactive=”@style/TextAppearance.MdcTypographyStyles.Caption”

Interfaz de usuario de salida:

Algunos otros atributos del contenedor de riel de navegación son:

Algunos otros atributos de los elementos del riel de navegación son:

Algunos otros atributos del ícono de los elementos del riel de navegación son:

Algunos otros atributos de las etiquetas de texto de los elementos del riel de navegación son: