theme studio para gama combinacion colores color codigos codigo celular black android button border material-design

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



material android (3)

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.

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?


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"


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.