texto - Cómo crear un botón personalizado en Android usando estilos XML

estilos de botones en android studio

Question

Quiero hacer este tipo de colores de botón [mismo fondo y texto] usando estilos XML

es solo por un ejemplo, quiero escribir algunos otros textos, como: Acerca de mí

Todavía estoy usando el botón creado por el diseñador en Photoshop

    <ImageButton
        android:id="@+id/imageButton5"
        android:contentDescription="AboutUs"
        android:layout_width="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/view_pager"
        android:layout_centerHorizontal="true"
        android:background="@drawable/aboutus" />

Nota: Necesito este tipo de botón en todos los tamaños y formas

No quiero usar ninguna imagen en mi aplicación Android. Quiero usar solo XML.

Answer 1

¿Alguna vez has intentado crear la forma de fondo para cualquier botón?

Mira esto a continuación:

Debajo está la imagen separada de tu imagen de un botón.

Ahora, póngalo en su ImageButton para Android: src "fuente" así:

android:src="@drawable/twitter"

Ahora, simplemente crea la forma del ImageButton para tener un fondo de sombreado negro.

android:background="@drawable/button_shape"

y button_shape es el archivo xml en recurso dibujable:

    <?xml version="1.0" encoding="UTF-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke 
        android:width="1dp" 
        android:color="#505050"/>
    <corners 
        android:radius="7dp" />

    <padding 
        android:left="1dp"
        android:right="1dp"
        android:top="1dp"
        android:bottom="1dp"/>

    <solid android:color="#505050"/>

</shape>

Solo trata de implementarlo con esto. Es posible que deba cambiar el valor de color según su requisito.

Avísame si no funciona.

Answer 2

Copiado y pegado de una receta escrita por "Adrián Santalla" en androidcookbook.com: https://www.androidcookbook.com/Recipe.seam?recipeId=3307

1. Cree un archivo XML que represente los estados del botón

Cree un xml en drawable llamado ''button.xml'' para nombrar los estados de los botones:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="false"
        android:drawable="@drawable/button_disabled" />
    <item
     android:state_pressed="true"
     android:state_enabled="true"
        android:drawable="@drawable/button_pressed" />
    <item
     android:state_focused="true"
     android:state_enabled="true"
        android:drawable="@drawable/button_focused" />
    <item
     android:state_enabled="true"
        android:drawable="@drawable/button_enabled" />
</selector>

2. Crea un archivo XML que represente cada estado de botón

Crea un archivo xml para cada uno de los cuatro estados de botón. Todos ellos deben estar en la carpeta de dravable. Sigamos los nombres establecidos en el archivo button.xml.

button_enabled.xml:

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="#00CCFF"
        android:centerColor="#0000CC"
        android:endColor="#00CCFF"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp" />
</shape>

button_focused.xml:

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="#F7D358"
        android:centerColor="#DF7401"
        android:endColor="#F7D358"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp" />
</shape>

button_pressed.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="#0000CC"
        android:centerColor="#00CCFF"
        android:endColor="#0000CC"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp" />
</shape>

button_disabled.xml:

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="#F2F2F2"
        android:centerColor="#A4A4A4"
        android:endColor="#F2F2F2"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp" />
</shape>

3. Crea un archivo XML que represente el estilo del botón

Una vez que haya creado los archivos mencionados anteriormente, es hora de crear el estilo del botón de su aplicación. Ahora, necesita crear un nuevo archivo XML, llamado styles.xml (si aún no lo tiene) donde puede incluir más estilos personalizados, en el directorio de valores.

Este archivo contendrá el nuevo estilo de botón de su aplicación. Debe configurar sus nuevas funciones de estilo de botón. Tenga en cuenta que una de esas características, el fondo de su nuevo estilo, debe establecerse con una referencia al botón (button.xml) dibujable que se creó en el primer paso. Para referirse al nuevo estilo de botón usamos el atributo de nombre.

El siguiente ejemplo muestra el contenido del archivo styles.xml:

<resources>
    <style name="button" parent="@android:style/Widget.Button">
        <item name="android:gravity">center_vertical|center_horizontal</item>
        <item name="android:textColor">#FFFFFFFF</item>
        <item name="android:shadowColor">#FF000000</item>
        <item name="android:shadowDx">0</item>
        <item name="android:shadowDy">-1</item>
        <item name="android:shadowRadius">0.2</item>
        <item name="android:textSize">16dip</item>
        <item name="android:textStyle">bold</item>
        <item name="android:background">@drawable/button</item>
        <item name="android:focusable">true</item>
        <item name="android:clickable">true</item>
    </style>
</resources>

4. Crea un XML con tu propio tema de aplicación personalizado

Finalmente, debe sobrescribir el estilo de botón predeterminado de Android. Para eso, necesita crear un nuevo archivo XML, llamado themes.xml (si aún no lo tiene), en el directorio de valores y anular el estilo de botón predeterminado de Android.

El siguiente ejemplo muestra el contenido de themes.xml:

<resources>
    <style name="YourApplicationTheme" parent="android:style/Theme.NoTitleBar">
        <item name="android:buttonStyle">@style/button</item>
    </style>
</resources>

Espero que puedan tener la misma suerte que tuve con esto, cuando estaba buscando botones personalizados. Disfrutar.

Answer 3

Echa un vistazo a Styled Button , seguramente te ayudará. Hay muchos ejemplos, busque en INTERNET.

Ej .: estilo

<style name="Widget.Button" parent="android:Widget">
    <item name="android:background">@drawable/red_dot</item>
</style>

puedes usar tu selector en lugar de red_dot

punto rojo:

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

    <solid android:color="#f00"/>
    <size android:width="55dip"
        android:height="55dip"/>
</shape>

Botón:

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="49dp"
        style="@style/Widget.Button"
        android:text="Button" />

Answer 4

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

   <solid 
       android:color="#ffffffff"/>

   <size 
       android:width="@dimen/shape_circle_width"
        android:height="@dimen/shape_circle_height"/>
</shape>

1.añadir esto en su dibujo

2. establecer como fondo de su botón