Material Design 3

Material Design 3

Material Design 3 aka Material You aka Duarte’s new baby. Este nuevo diseño fue presentado junto a la versión 12 del sistema operativo y, al igual que los restyling anteriores de Material, también está disponible para web y Flutter.

Vamos a centrarnos en los cambios que trae para Android, sobre todo visuales, en algunos componentes:

  • Buttons
  • Cards
  • Chips
  • Dialogs
  • Navigation bar
  • Navigation drawer
  • Navigation rail (nuevo)
  • Top app bar
  • Widgets

Se supone que esta lista irá en aumento, aunque siendo sincero no me haría ilusiones en que estas novedades lleguen rápido a todos los elementos o incluso que haya cambios en algunos de los que si están actualizados.

Aquí comenté cómo crear el típico Hello World. Lo puedes ver aquí o ver cualquiera de los millones de tutoriales que hay buscando en Google.

Rubén, vendedor profesional

Vamos a empezar mirando los cambios de la Top app bar implementándolos en una aplicación que usaremos para ver el resto de componentes. Como base pillamos la Empty Activity […target lvl…]

Lo que más me ha llamado la atención (o en lo primero que me fijé al ver la documentación) es que ahora nos dan la posibilidad de centrar horizontalmente tanto el título como el subtítulo así que vamos a usarlo para este caso.

Se necesita la versión 1.5.0-alpha04 o superior de las dependencias material para probar estos cambios.

+info

Empecemos añadiendo el AppBarLayout y el MaterialToolbar al @layouts/activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?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
            android:id="@+id/topAppBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:title="@string/app_name"
            app:titleCentered="true"/>
 
    </com.google.android.material.appbar.AppBarLayout>
 
    <!-- Note: A RecyclerView can also be used -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
 
    </androidx.core.widget.NestedScrollView>
 
</androidx.coordinatorlayout.widget.CoordinatorLayout>

app:titleCentered y app:subtitleCentered (con true/false) son los atributos necesarios para centrar título y subtítulo. Vamos a crear el menú al que se hace referencia desde el MaterialToolbar con unos pocos elementos – @menu/top_app_bar.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
 
    <item
        android:id="@+id/edit"
        android:title="@string/edit"
        android:contentDescription="@string/content_description_search"
        app:showAsAction="ifRoom" />
 
    <item
        android:id="@+id/favorite"
        android:icon="@drawable/ic_favorite_24dp"
        android:title="@string/favorite"
        android:contentDescription="@string/content_description_favorite"
        app:showAsAction="ifRoom" />
 
    <item
        android:id="@+id/more"
        android:title="@string/more"
        android:contentDescription="@string/content_description_more"
        app:showAsAction="never" />
 
</menu>

Para que los iconos que mostremos en la toolbar tengan un color adecuado tenemos que añadir el atributo android:tint="?attr/colorControlNormal" en el código del vector de cada icono que vayamos a usar. Así también se van a adaptar automáticamente según el tema que tenga o vaya a configurar el usuario (daynight).

El último código que vamos a añadir es en MainActivity.kt con unas funciones para controlar los eventos OnClick tanto de los iconos y navegación.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
class MainActivity : AppCompatActivity() {
    private lateinit var topAppBar: MaterialToolbar
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        topAppBar.setNavigationOnClickListener {
            // Handle navigation icon press
        }
 
        topAppBar.setOnMenuItemClickListener { menuItem ->
            when (menuItem.itemId) {
                R.id.edit -> {
                    // Handle edit text press
                    true
                }
                R.id.favorite -> {
                    // Handle favorite icon press
                    true
                }
                R.id.more -> {
                    // Handle more item (inside overflow menu) press
                    true
                }
                else -> false
            }
        }
    }
}

El resultado de cómo queda la aplicación después de estos cambios es la que veis tras estas líneas. Podéis ver el código en GitHub, retoqué un poco los colores que vienen por defecto

Dejar un comentario

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