android - studio - Botón de diseño de material con borde

material android

Question

Sé cómo hacer que el botón Diseño de materiales con relleno de color:

style="@style/Widget.AppCompat.Button.Colored"

Y botón transparente sin bordes:

style="@style/Widget.AppCompat.Button.Borderless.Colored"

Sin embargo, ¿hay alguna manera de hacer que el diseño de material quede delimitado (transparente por dentro)? Algo como abajo?

Answer 1

Así es como hago los botones solo con un borde y el efecto dominó en Lollipop y arriba. Al igual que los botones de AppCompat, tienen un efecto de retroceso en las API más bajas (si necesita ondas en las API inferiores, debe usar una biblioteca externa). Uso FrameLayout porque es barato. El color del texto y el borde es negro, pero puede cambiarlo por uno personalizado:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="20dp"
    android:background="@drawable/background_button_ghost">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:selectableItemBackground"
        android:gravity="center"
        android:padding="14dp"
        android:textSize="16sp"
        android:textAllCaps="true"
        android:textStyle="bold"
        android:textColor="@android:color/black"
        android:text="Text"/>
</FrameLayout>

drawable / background_button_ghost.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2dp"
        android:color="@android:color/black"/>
    <solid android:color="@color/transparent"/>
</shape>

Si me he perdido algo, por favor deje un comentario y actualizaré la respuesta.

Answer 2

Simplemente puedes usar este código. Se ve tan bueno.

           <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ffffff"
                android:orientation="vertical">

                <android.support.v7.widget.AppCompatButton
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:backgroundTint="#F48025"
                    android:text="login"
                    android:textColor="@color/colorWhite" />

            </LinearLayout>

Aquí el color del borde es:

android:background="#ffffff"

Y el color de fondo es:

android:backgroundTint="#F48025"

Answer 3

He aquí cómo hacerlo correctamente.

Lo que debes hacer es

1 - Crear forma dibujable con trazo
2 - Crear ondulación dibujable
3 - Crear selector dibujable por menos de v21
4 - Crea un nuevo estilo para el botón con borde
5 - Aplicar estilo en el botón

1 - Crear forma con trazo btn_outline.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke
        android:width="2dp"
        android:color="@color/colorAccent">
    </stroke>
    <solid android:color="@color/colorTransparent"/>
    <corners
        android:radius="5dp">
    </corners>

</shape>

2 - Crear ondulación drawable-v21/bg_btn_outline.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/colorOverlay">
    <item>
        <shape>
            <stroke
                android:width="2dp"
                android:color="@color/colorAccent"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>
    <item android:id="@android:id/mask">
        <shape>
            <stroke
                android:width="2dp"
                android:color="@color/colorAccent"/>
            <solid android:color="@android:color/white"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>

</ripple>

android:id="@android:id/mask" es necesario para tener retroalimentación táctil en el botón. La capa que está marcada como máscara no está visible en la pantalla, solo es para comentarios táctiles.

3 - Crear selector dibujable por menos de v21 drawable/bg_btn_outline.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/btn_outline" android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorOverlay"/>
        </shape>
    </item>
    <item android:drawable="@drawable/btn_outline" android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorOverlay"/>
        </shape>
    </item>

    <item android:drawable="@drawable/btn_outline"/>

</selector>

4 - Crear un nuevo estilo para el botón con borde Todos los recursos que se necesitan para crear el estilo se muestran arriba, así es como se verá tu estilo

<style name="ButtonBorder" parent="Widget.AppCompat.Button.Colored"/>

<style name="ButtonBorder.Accent">
        <item name="android:background">@drawable/bg_btn_outline</item>
        <item name="android:textColor">@color/colorAccent</item>
        <item name="android:textAllCaps">false</item>
        <item name="android:textSize">16sp</item>
        <item name="android:singleLine">true</item>
    </style>

4 - Aplicar estilo en el botón

<Button
   style="@style/ButtonBorder.Accent"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"/>

Eso es practicamente todo. Aquí hay una muestra de cómo se ven los botones ahora.