Botones de diseño de materiales temáticos en Android con ejemplos

Material Design Components (MDC Android) ofrece a los diseñadores y desarrolladores una forma de implementar Material Design en su aplicación 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. 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 . Un botón es una interfaz de usuario que se utiliza para realizar alguna acción cuando se hace clic o se toca. En el artículo anterior Botones de diseño de materiales en Android con ejemplo, hemos discutido cuatro tipos de botones, botón contenido, botón con contorno, botón de texto y botón de alternar. Entonces , en este artículo, vamos a discutir otro tipo popular de botón, es decir , botones de diseño de material temático . Al final de este artículo, uno puede agregar fácilmente íconos a los botones de diseño de materiales y cambiar o anular el tema predeterminado de los botones de diseño de materiales. que crear

Botones de diseño de materiales temáticos

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 del diseño de materiales en el archivo Gradle del nivel de la aplicación

Invoque la siguiente línea de código en el campo de dependencias.

implementación ‘com.google.android.material:material:1.3.0-alpha02’

Si no puede ubicar el archivo Gradle de nivel de aplicación, consulte la siguiente imagen para obtenerlo en la vista Proyecto.

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 . A continuación se muestra el código para el archivo styles.xml .

<resources>
 
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.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 ubicar el archivo styles.xml , consulte la siguiente imagen.

Paso 4: Trabajando con activity_main.xml

En este caso, se invocan los típicos botones de diseño de 3 materiales. Esos son el botón contenido, el botón contorneado, el botón de texto. Para conocer el uso y cómo invocarlos, se puede leer el artículo Botones de diseño de materiales en Android con ejemplo . Invoque el siguiente código en el archivo activity_main.xml para implementar todos los tipos de botones de diseño de materiales. Se agregan comentarios dentro del código para comprender el código con más detalle.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
 
    <!--Contained Button-->
    <!--there is no style attribute for contained button-->
    <!--by default the button itself is a contained button-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="64dp"
        android:text="Contained Button" />
 
    <!--Outlined Button-->
    <!--need to carefully invoke the style attribute-->
    <Button
        style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="64dp"
        android:text="Outlined Button" />
 
    <!--Text Button-->
    <!--need to carefully invoke the style attribute-->
    <Button
        style="@style/Widget.MaterialComponents.Button.TextButton.Icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="64dp"
        android:text="Text Button" />
 
</LinearLayout>

Salida: ejecutar en el emulador

Pasos para Agregar Iconos a los Botones de Material Design

Paso 1: Importar íconos vectoriales a la carpeta dibujable

Para importar los iconos vectoriales a la carpeta dibujable , haga clic con el botón derecho en la carpeta dibujable > vaya a Nuevo > haga clic en Activo vectorial. Ahora seleccione el vector deseado de la ventana emergente. Se puede consultar la siguiente imagen para obtener una ventana emergente de selección de icono de vector.

Haga clic en el botón marcado en la imagen de abajo para seleccionar los iconos vectoriales deseados.

Paso 2: trabajar con el archivo activity_main.xml

Al agregar el atributo app:icon en cada uno de los botones y seleccionar el icono de vector deseado de la carpeta dibujable, se agregará el icono a los botones de diseño de materiales. Entonces, invoque el siguiente código.

<?xml version="1.0" encoding="utf-8"?><!--there is need to invoke the app namespace
                                          to add icons to material design button-->
<LinearLayout
    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:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
 
    <!--Contained Button-->
    <!--there is no style attribute for contained button-->
    <!--by default the button itself is a contained button-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="64dp"
        android:text="Contained Button"
        app:icon="@drawable/ic_add_black_24dp" />
 
    <!--Outlined Button-->
    <!--need to carefully invoke the style attribute-->
    <Button
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="64dp"
        android:text="Outlined Button"
        app:icon="@drawable/ic_add_black_24dp" />
 
    <!--Text Button-->
    <!--need to carefully invoke the style attribute-->
    <Button
        style="@style/Widget.MaterialComponents.Button.TextButton.Icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="64dp"
        android:text="Text Button"
        app:icon="@drawable/ic_add_black_24dp" />
 
</LinearLayout>

Salida: ejecutar en el emulador

Hay dos métodos para anular el tema de los botones de diseño de materiales:

Aquí los iconos son opcionales. Entonces, en este caso, el ícono ha sido eliminado. Sin embargo, el tema se puede anular con o sin el icono.

Método 1:

Este método de implementación afectará a otros componentes de materiales, así como a los botones de diseño de materiales. Invoque el siguiente código en el archivo styles.xml para anular el tema predeterminado de los botones de Material Design.

<resources>
 
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
 
        <!--this item is to override the fontFamily of the material design buttons-->
        <item name="textAppearanceButton">@style/TextAppearance.App.Button</item>
 
        <!--this item is to override the cornerFamily and cornerSize of the material design buttons-->
        <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.App.SmallComponent</item>
 
    </style>
 
    <!--This overrides the fontFamily and textSize of material design buttons-->
    <style name="TextAppearance.App.Button" parent="TextAppearance.MaterialComponents.Button">
        <item name="fontFamily">sans-serif-black</item>
        <item name="android:fontFamily">sans-serif</item>
        <item name="android:textSize">18sp</item>
    </style>
 
    <!--This overrides the cornerFamily and cornerSize of the default material design button-->
    <style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">8dp</item>
    </style>
 
</resources>

Salida: ejecutar en el emulador

Se puede notar el cambio en el corte de esquina de 8dp , similar en todos los botones.

Nota: Al usar este método si la aplicación contiene el botón de acción flotante de diseño de material, el tema predeterminado de todos los botones de acción flotante anulados por los mismos atributos invocados en el código anterior.

Método 2:

Este método de anular el tema predeterminado del botón de diseño de material afectará a cada uno de los botones individuales. En este caso, se pueden anular diferentes atributos para Botón contenido, Botón con contorno y Botón de texto. Invoque el siguiente código en el archivo styles.xml .

<resources>
 
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
 
        <!--this item is invoked in app theme to override the contained material button-->
        <item name="materialButtonStyle">@style/myCustomContainedButton</item>
 
        <!--this item is invoked in app theme to override the outlined material button-->
        <item name="materialButtonOutlinedStyle">@style/myCustomOutlinedButton</item>
    </style>
    <!--Base application theme ends here-->
 
    <!--theming of contained button begins here-->
    <!--parent name is to be give carefully-->
    <style name="myCustomContainedButton" parent="Widget.MaterialComponents.Button">
        <!--these all styles are implemented outside, because to get all the overridden attributes easily-->
        <item name="shapeAppearance">@style/customContainedButtonTheme</item>
        <item name="android:textAppearance">@style/myCustomTextForMaterialButtons</item>
    </style>
    <!--overriding cornerSize and cornerFamily of the contained button-->
    <style name="customContainedButtonTheme">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">24dp</item>
    </style>
    <!--theming of contained button ends here-->
 
    <!--theming of outlined button begins here-->
    <!--parent name is to be give carefully-->
    <style name="myCustomOutlinedButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
        <!--these all styles are implemented outside, because to get all the overridden attributes easily-->
        <item name="shapeAppearance">@style/customOutlinedButtonTheme</item>
        <item name="android:textAppearance">@style/myCustomTextForMaterialButtons</item>
    </style>
    <!--overriding cornerSize and cornerFamily of the outlined button-->
    <style name="customOutlinedButtonTheme">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">12dp</item>
    </style>
    <!--theming of outlined button ends here-->
 
    <!--Font family and size of all the buttons in the entire application should be same-->
    <!--so this child is common for all the material buttons in entire application-->
    <style name="myCustomTextForMaterialButtons">
        <item name="fontFamily">sans-serif-condensed-medium</item>
        <item name="android:textSize">18sp</item>
        <item name="android:fontFamily">sans-serif</item>
    </style>
 
</resources>

Tenga en cuenta que aquí el tema predeterminado del botón de texto no se anula, porque no se ve muy afectado ya que no tiene borde ni color de fondo. Solo el color del texto y la fuente del texto se pueden cambiar en el propio archivo activity_main.xml . Después de anular el tema predeterminado de todos los botones, es necesario cambiar el atributo de estilo del botón de contorno en el archivo activity_main.xml . Esto debe cambiarse porque el botón delineado es una clase secundaria del botón de material, si no se invoca, el botón delineado heredará el estilo del botón contenido.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
 
    <!--Contained Button-->
    <!--there is no style attribute for contained button-->
    <!--by default the button itself is a contained button-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="64dp"
        android:text="Contained Button" />
 
    <!--Outlined Button-->
    <!--need to carefully invoke the style attribute-->
    <Button
        style="@style/myCustomOutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="64dp"
        android:text="Outlined Button" />
 
    <!--Text Button-->
    <!--need to carefully invoke the style attribute-->
    <Button
        style="@style/Widget.MaterialComponents.Button.TextButton.Icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="64dp"
        android:text="Text Button" />
 
</LinearLayout>

Salida: ejecutar en el emulador