Barra superior de la aplicación Material Design Component en Android

Material Design Components (MDC Android) ofrece a los diseñadores y desarrolladores una forma de implementar Material Design en sus aplicaciones de Android. Desarrollados por un equipo central de ingenieros y diseñadores de UX en Google, estos componentes permiten un flujo de trabajo de desarrollo confiable para crear aplicaciones de Android atractivas y funcionales. El diseño de materiales en Android es una de las características clave que atrae y atrae al cliente hacia la aplicación. Este es un tipo especial de diseño, que está guiado por Google. Entonces, en este artículo, se ha demostrado cómo usar la barra superior de aplicaciones del componente Material Design. Eche un vistazo a la siguiente imagen para obtener una descripción general de 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.

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.

¿Por qué se utiliza la barra superior de aplicaciones?

La barra superior de la aplicación aparece encima de cada actividad de la aplicación y desaparece cuando se desplaza. La barra superior de la aplicación muestra el título de la actividad y las acciones principales seleccionadas que se realizarán en la actividad en particular o en la pantalla de la aplicación. También se puede usar para marcas, títulos de pantalla, navegación y acciones.

Anatomía de la barra de acción superior

En la anatomía anterior de Material Design, el icono de navegación de la barra superior de la aplicación, el título, el menú de acción y el menú de desbordamiento son opcionales.

Pasos para implementar la barra de aplicaciones superior de MDC en Android

Paso 1: creación de elementos de menú para la barra superior de aplicaciones

Crear una carpeta de recursos de menú dentro de la carpeta res invoca el siguiente código dentro del archivo top_app_bar_menu.xml :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
  
    <item
        android:id="@+id/favorite"
        android:icon="@drawable/ic_favorite"
        android:title="Favourites"
        app:showAsAction="ifRoom" />
  
    <item
        android:id="@+id/search"
        android:icon="@drawable/ic_search"
        android:title="Search"
        app:showAsAction="ifRoom" />
  
    <item
        android:id="@+id/more"
        android:icon="@drawable/ic_more"
        android:title="More Options"
        app:showAsAction="never" />
  
</menu>

Paso 2: trabajar con el archivo activity_main.xml

El diseño principal de la aplicación contiene solo la barra superior. En primer lugar, AppBarLayout debe anidarse dentro del diseño del coordinador y, dentro de AppBarLayout, debe invocarse MaterialToolbar. Y el tamaño de MaterialToolbar debe ser del tamaño de actionBarSize. Para implementar lo mismo, invoque el siguiente código dentro del archivo activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
    tools:context=".MainActivity">
  
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
  
        <com.google.android.material.appbar.MaterialToolbar
            style="@style/Widget.MaterialComponents.Toolbar.Primary"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:menu="@menu/top_app_bar_menu"
            app:navigationIcon="@drawable/ic_menu"
            app:title="GeeksforGeeks" />
  
    </com.google.android.material.appbar.AppBarLayout>
  
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Interfaz de usuario de salida:

Paso 3: trabajar con el archivo MainActivity.kt

En el archivo MainActivity.kt , se asigna un simple detector de clics en un elemento de menú a la instancia de la barra de herramientas de material. Para implementar lo mismo, invoque el siguiente código. Sin embargo, también se puede implementar el cajón de navegación para la barra de herramientas, consulte Cajón de navegación en Android .

import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.appbar.MaterialToolbar
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // create instance of the material toolbar
        val materialToolbar: MaterialToolbar = findViewById(R.id.material_toolbar)
  
        // assign the on menu item click listener
        materialToolbar.setOnMenuItemClickListener {
            when (it.itemId) {
                R.id.favorite -> {
                    Toast.makeText(this, "Favorites Clicked", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.search -> {
                    Toast.makeText(this, "Favorites Clicked", Toast.LENGTH_SHORT).show()
                    true
                }
                else -> false
            }
        }
    }
}

Producción: