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.