Botones de diseño de materiales en Android con ejemplo

MDC Android Si le gusta la forma en que los elementos de la interfaz de usuario de los componentes de diseño de materiales de Google para Android que están diseñados por Google son bastante impresionantes, aquí hay algunos pasos que deben seguirse para obtenerlos, y uno de ellos es Componentes de diseño de materiales de Google (MDC) Botones . aBajo la categoría Botón, hay principalmente 4 tipos de botones en los componentes de diseño de materiales de Google:

1. Botón contenido
2. Botón contorneado
3. Botón de texto
4. Botón de activación

es un

¿Por qué botones MDC en Android?

Antes de implementar todos los tipos de botones, entendamos por qué elegir estos componentes materiales en lugar de los componentes incorporados ordinarios en Android. Por favor, consulte los siguientes puntos para entender esto.

1. La elección de estos componentes materiales ahorra tiempo y hace que la aplicación se parezca más a un diseño material y hace que las interacciones de los usuarios sean más sencillas para los desarrolladores.
2. Si tomamos los botones como ejemplo, necesitamos crear una ondulación como elemento raíz en custom_button.xml dentro del elemento de diseño y luego debemos establecer el fondo del botón como custom_button.xml , solo entonces creará el efecto dominó para el botón ordinario. Pero en los MDC de Google no es necesario crear el diseño de ondulación manual para los botones.
3. Y lo principal de los componentes de diseño de materiales de Google es que son de código abierto y gratuitos. Si desea contribuir con los MDC de Google, haga clic aquí .
4. Otra cosa genial acerca de los componentes de diseño de materiales de Google es que son compatibles con varias plataformas que incluyen Android , IOS , Flutter , aplicaciones web .
5. Si el usuario desea cambiar el tema de su sistema a Tema oscuro, los MDC de Google se adaptarán automáticamente y cambiarán su color y fondo para que coincida con el Tema oscuro. Pero en el caso de los widgets ordinarios, no se adaptarán al cambio de tema del sistema. Las diferencias entre el botón normal y el botón MDC de Google cuando el tema oscuro está habilitado se muestran a continuación:

Comportamiento normal del botón contenido bajo el tema oscuro.

Comportamiento del botón Google MDC bajo el tema oscuro. 

Acercarse

Paso 1: Crear un nuevo proyecto

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

Paso 2: agregue la 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.3.0-alpha02’

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.

Paso 3: Cambia el tema de la aplicación Base

Vaya a aplicación -> src -> principal -> res -> valores -> estilos.xml y cambie el tema base de la aplicación. MaterialComponents contiene varios estilos de tema de barra de acción, uno puede invocar cualquiera de los estilos de tema de barra de acción de MaterialComponents , excepto los estilos AppCompat .

Por qué es necesario cambiar el tema:

Discutamos por qué necesitamos cambiar el tema de la barra de acción al tema material de la aplicación para invocar todos los widgets de Google MDC en nuestra aplicación de Android:

1. Porque todos los componentes de diseño de materiales de Google se construyen y empaquetan dentro de MaterialTheme para Android.
2. Si está invocando el tema de la barra de acción de AppCompat, no terminará con el error, pero la aplicación se bloquea inmediatamente después de iniciarla. A continuación se muestra el código para el archivo styles.xml .

<resources>
  
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Customize your theme here -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
  
</resources>

Si no puede obtener las cosas en el paso mencionado anteriormente, puede consultar esta imagen.

Paso 4: Cambia los colores de la aplicación

Se puede cambiar la combinación de colores de la aplicación y es un paso opcional. Vaya a aplicación -> src -> principal -> res -> archivo colors.xml y elija su combinación de colores. 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#0f9d58</color>
    <color name="colorPrimaryDark">#006d2d</color>
    <color name="colorAccent">#55cf86</color>
</resources>

 Si no puede obtener las cosas en el paso mencionado anteriormente, puede consultar esta imagen. 

Paso 5: Agregar botones de Google MDC al archivo activity_main.xml

Ahora, en este archivo, vamos a diseñar el botón de material según los requisitos del usuario. Tenga en cuenta que para cada uno de los estilos de botón , el atributo «estilo» es diferente.

A. Estilo de botón 1: botón contenido

Los botones contenidos tienen un énfasis alto y se distinguen por el uso de elevación y relleno. Contienen acciones que son primarias para la aplicación. Tenga en cuenta que el botón contenido es el estilo predeterminado si el estilo no está configurado. A continuación se muestra el código XML para el botón contenido.

<?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"
    tools:context=".MainActivity"
    tools:ignore="ExtraText">
    
    <!-- Since this is the default type, you don't need to
         specify a style tag as long as you are using a 
         Material Components Theme -->
    <Button
        android:id="+id/contained_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Contained Button"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Interfaz de usuario de salida:

B. Estilo de botón 2: botón con contorno

Los botones resaltados son botones de énfasis medio. Contienen acciones que son importantes pero no son la acción principal en una aplicación. Estos se utilizan para dar más énfasis que los botones de texto debido al trazo. A continuación se muestra el código XML para el botón Contorneado.

<?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"
    tools:context=".MainActivity"
    tools:ignore="ExtraText">
  
    <!--style attribute below is to be invoked for outlined button-->
    <Button
        android:id="@+id/outlined_button"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Outlined Button"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Interfaz de usuario de salida:

C. Estilo de botón 3: botón de texto

Los botones de texto generalmente se usan para acciones menos pronunciadas, incluidas las ubicadas en cuadros de diálogo y tarjetas. En las tarjetas, los botones de texto ayudan a mantener el énfasis en el contenido de la tarjeta. Por lo general, se utilizan para acciones menos importantes. A continuación se muestra el código XML para el botón Texto.

<?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"
    tools:context=".MainActivity"
    tools:ignore="ExtraText">
  
    <!--style attribute below is to be invoked for text button-->
    <Button
        android:id="@+id/text_button"
        style="@style/Widget.MaterialComponents.Button.TextButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text Button"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Interfaz de usuario de salida:

D. Estilo de botón 4: botón de alternar

Los botones de alternar agrupan un conjunto de acciones utilizando el diseño y el espaciado. Se usan con menos frecuencia que otros tipos de botones. Hay 2 tipos de botones de alternancia en los componentes de diseño de materiales de Google. 

• Botón de activación
• Botón de alternar con iconos

Antes de ir a la parte de diseño, realice una tarea previa para implementar estos dos botones. Como ahora, los estilos y los atributos como el relleno y el margen de los botones en el grupo de alternar deben cambiarse, por lo tanto, en la carpeta de valores, abra estilos.xml e invoque el siguiente código:

<resources>
  
    <!-- Base application theme -->
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
  
    <!--these attributes and styles are only effected for 
        the MaterialButtonToggleGroup widget-->
    <style name="Widget.App.Button.OutlinedButton.IconOnly" 
           parent="Widget.MaterialComponents.Button.OutlinedButton">
        <item name="iconPadding">0dp</item>
        <item name="android:insetTop">0dp</item>
        <item name="android:insetBottom">0dp</item>
        <item name="android:paddingLeft">12dp</item>
        <item name="android:paddingRight">12dp</item>
        <item name="android:minWidth">48dp</item>
        <item name="android:minHeight">48dp</item>
    </style>
  
</resources>

Botón de activación:

A continuación se muestra el código XML para el botón Alternar. 

<?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"
    tools:context=".MainActivity"
    tools:ignore="ExtraText">
  
    <!--attribution of google MDC toggle button is little 
        different from normal toggle button
        Instead of invoking ToggleButton you should invoke 
        com.google.android.material.button.MaterialButtonToggleGroup
        as you can see below-->
    <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
  
        <Button
            android:id="@+id/button1"
            style="?attr/materialButtonOutlinedStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 1" />
  
        <Button
            android:id="@+id/button2"
            style="?attr/materialButtonOutlinedStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 2" />
  
        <Button
            android:id="@+id/button3"
            style="?attr/materialButtonOutlinedStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 3" />
  
    </com.google.android.material.button.MaterialButtonToggleGroup>
  
</androidx.constraintlayout.widget.ConstraintLayout>

Interfaz de usuario de salida:

Botón de alternar con iconos:

Para implementar el botón de alternancia con íconos, solo importe los íconos en la carpeta dibujable . En este ejemplo, hemos importado los iconos format_black, format_italic, format_underline . Para importar los íconos, haga clic con el botón derecho en la carpeta dibujable, vaya a nuevo y seleccione Vector Asset como se muestra a continuación .

Después de hacer clic en Vector Asset, seleccione el icono que desea importar a la carpeta dibujable como se muestra a continuación.

Después de importar los íconos deseados, invoque el código en el archivo activity_main.xml . A continuación se muestra el código XML para el botón Alternar con iconos.

<?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"
    tools:context=".MainActivity"
    tools:ignore="ExtraText">
  
    <!--this implementation does not creates individual 
        toggle button it groups them together-->
    <com.google.android.material.button.MaterialButtonToggleGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
  
        <Button
            android:id="@+id/bold_button"
            style="@style/Widget.App.Button.OutlinedButton.IconOnly"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:icon="@drawable/ic_format_bold_black_24dp" />
  
        <Button
            android:id="@+id/italic_button"
            style="@style/Widget.App.Button.OutlinedButton.IconOnly"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:icon="@drawable/ic_format_underlined_black_24dp" />
  
        <Button
            android:id="@+id/underline_button"
            style="@style/Widget.App.Button.OutlinedButton.IconOnly"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:icon="@drawable/ic_format_italic_black_24dp" />
  
    </com.google.android.material.button.MaterialButtonToggleGroup>
  
</androidx.constraintlayout.widget.ConstraintLayout>

Interfaz de usuario de salida:

Para obtener más información y más componentes como el diálogo de alerta, SnackBars, etc., puede consultar la documentación oficial aquí . Para obtener más recursos y más temas y personalización, puede visitar y consultar esto .