android - redondeados - Esquinas redondeadas en botón de material

diseño de botones android studio

Question

Sigo las sugerencias de preguntas como this para crear un estilo de botón como el sugerido en Material Design.

Sin embargo, necesito cambiar el radio de la esquina y no he podido hacerlo heredando el estilo Widget.AppCompat.Button.Colored y configurando el parámetro de radio.

¿Cómo puedo tener el mismo estilo pero con esquinas redondeadas?

Answer 1

Además, otra forma sencilla es envolverlo alrededor de cardView. Recuerde configurar el ancho y el ancho de la disposición de cardView en wrap_content, además de todo el margen necesario que necesitará el botón debe aplicarse a cardView.

<android.support.v7.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:cardCornerRadius="8dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginBottom="40dp"
            app:elevation="10dp">

            <android.support.v7.widget.AppCompatButton
                android:id="@+id/login_twitter"
                android:tag="login_twitter"
                android:layout_width="300dp"
                android:layout_height="60dp"
                android:paddingLeft="10dp"
           android:foreground="?attr/selectableItemBackgroundBorderless"
                android:textColor="@color/blue_grey_ligthen_5"
                android:drawableLeft="@drawable/twitter"
                android:background="@color/twitter"
                android:text="@string/login_with_twitter" />
        </android.support.v7.widget.CardView>

Answer 2

Con la nueva versión 28.0.0-alpha1 de la Biblioteca de soporte , la Biblioteca de diseño ahora contiene el Material Button .

Puede agregar este botón a nuestro archivo de diseño con:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="XXXXX"
    android:textSize="18sp"
    android:backgroundTint="@color/colorPrimary"
    app:icon="@drawable/ic_android_white_24dp" />

Puedes establecer el radio de la esquina con este atributo:

• app:cornerRadius : se utiliza para definir el radio utilizado para las esquinas del botón

Actualmente para usarlo tienes que usar Android Studio 3.1 o superior y:

android {
    compileSdkVersion ''android-P''

    defaultConfig {
        targetSdkVersion ''P''
    }
    ...
}
dependencies {
  implementation ''com.android.support:design:28.0.0-alpha1''
}

También puede utilizar los nuevos componentes de material para Android .
En este caso puede utilizar en su archivo de diseño:

<com.google.android.material.button.MaterialButton
    android:id="@+id/material_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="XXXXX"
    app:cornerRadius=".."/>

Actualmente tienes que usar Android Studio 3.2 y:

android {
    compileSdkVersion ''android-P''

    defaultConfig {
        targetSdkVersion ''P''
    }
    ...
}
dependencies {
  implementation ''com.google.android.material:material:1.0.0-alpha1''
}

El documento oficial está here y todas las especificaciones de Android here .

Answer 3

Necesitas heredar ese estilo.

Agregue en su styles.xml:

 <style name="AppTheme.RoundedCornerMaterialButton" parent="Widget.AppCompat.Button.Colored">
        <item name="android:background">@drawable/rounded_shape</item>
 </style>

Añadir archivo drawable / rounded_shape.xml:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"   >

    <solid
        android:color="@color/colorAccent" >
    </solid>

    <corners
        android:radius="11dp"   >
    </corners>

</shape>

Y finalmente en su diseño:

 <Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Test Text"
       style="@style/AppTheme.RoundedCornerMaterialButton"/>

Edición: respuesta actualizada para usar el color del tema en lugar de uno codificado.

Answer 4

Te diré mi solución exacta para esto. Dentro de las etiquetas de selección, puede poner elementos (funcionalidad de los botones)

El segundo elemento de la etiqueta selectora tiene el comportamiento opuesto. Puede agregar tanto como selector (comportamiento del botón) AGREGAR ESTE XML DIBUJO COMO UN ANTECEDENTES DEL BOTÓN android: background = "@ drawable / this xml"

    <?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#ffffff"> <!-- this is the ripple color(first touch color changes into this color) -->
    <item>
        <selector> 
            <item android:state_enabled="true">
                <shape xmlns:android="http://schemas.android.com/apk/res/android"
                    android:shape="rectangle">
                    <!-- default button color -->

                    <solid android:color="@color/colorPrimary"></solid>

                    <corners android:radius="151dp"></corners>

                </shape>
            </item>
            <item>
                <shape xmlns:android="http://schemas.android.com/apk/res/android"
                    android:shape="rectangle">
                    <!-- button disabled color opposite behaviour -->
                    <solid android:color="#e9d204"></solid>

                    <corners android:radius="151dp"></corners>

                </shape>
            </item>
        </selector>
    </item>
    <item>
        <selector>
            <item android:state_pressed="true">
                <shape xmlns:android="http://schemas.android.com/apk/res/android"
                    android:shape="rectangle">
                    <!-- button first touch of your finger color -->
                    <solid android:color="#1989fa"></solid>

                    <corners android:radius="151dp"></corners>

                </shape>
            </item>
        </selector>
    </item>
    <item>
        <selector>
            <item android:state_hovered="true">
                <shape xmlns:android="http://schemas.android.com/apk/res/android"
                    android:shape="rectangle">
                    <!-- hovered with a note pencil -->
                    <solid android:color="#4affffff"></solid>

                    <corners android:radius="151dp"></corners>

                </shape>
            </item>
        </selector>
    </item>

</ripple>

Answer 5

Botón de material redondeado con efecto Ripple.

Crear un archivo en la carpeta dibujable ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:attr/colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
            <corners android:radius="20dp" />
        </shape>
    </item>
    <item android:drawable="@drawable/rounded_shape" />
</ripple>

Crea un archivo en la carpeta dibujable rounded_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"   >
    <solid
        android:color="@color/colorPrimary" >
    </solid>
    <corners
        android:radius="20dp"   >
    </corners>
</shape>

Y en tu botón:

<Button
android:id="@+id/button1"
android:background="@drawable/ripple"
android:text="Login"/>