Android: borde para botón

Respuestas:

431

Paso 1: Crear un archivo llamado: my_button_bg.xml

Paso 2: coloque este archivo en res / drawables.xml

Paso 3: inserte el siguiente código

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <gradient android:startColor="#FFFFFF" 
    android:endColor="#00FF00"
    android:angle="270" />
  <corners android:radius="3dp" />
  <stroke android:width="5px" android:color="#000000" />
</shape>

Paso 4: Use el código "android: background =" @ drawable / my_button_bg "donde sea necesario, por ejemplo, a continuación:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Your Text"
    android:background="@drawable/my_button_bg"
    />
pedante
fuente
1
gracias. + 1 por esto. Después de guardarlo en una carpeta dibujable como un archivo xml. ¿Cómo podemos usarlo?
Android Killer
1
@AndroidPower puedes usarlo con R.drawable.FILE_NAME
slayton
2
¿A dónde va este código, en el código .axml para el marcado del botón? ¿Va en un archivo de tipo styles.xml?
theJerm
Usé solo el trazo (y lo hice blanco) para delinear un Botón con blanco. Funciona muy bien con 4.4 pero en 4.0.3 el botón se pone negro, ¿alguna idea de por qué?
Kibi
1
@ Kibi, lo siento, alguien editó mi respuesta y te dio un consejo incorrecto. Lo he cambiado, pero me sorprende que alguien pueda editar una respuesta aceptada y cambiar la utilidad.
Pedantic
57

Android Official Solution

Desde que se introdujo Android Design Support v28 , es fácil crear un botón con borde usando MaterialButton. Esta clase proporciona estilos de material actualizados para el botón en el constructor. Usando app:strokeColory app:strokeWidthpuede crear un borde personalizado de la siguiente manera:


1. Cuando usas androidx:

build.gradle

dependencies {
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'com.google.android.material:material:1.0.0'
}

• Botón con borde:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MATERIAL BUTTON"
    android:textSize="15sp"
    app:strokeColor="@color/green"
    app:strokeWidth="2dp" />

• Botón con borde sin relleno:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="UNFILLED MATERIAL BUTTON"
    android:textColor="@color/green"
    android:textSize="15sp"
    app:backgroundTint="@android:color/transparent"
    app:cornerRadius="8dp"
    app:rippleColor="#33AAAAAA"
    app:strokeColor="@color/green"
    app:strokeWidth="2dp" />



2. Cuando usas appcompat:

build.gradle

dependencies {
    implementation 'com.android.support:design:28.0.0'
}

style.xml

Asegúrese de que el tema de su aplicación herede en Theme.MaterialComponentslugar de Theme.AppCompat.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
</style>

• Botón con borde:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MATERIAL BUTTON"
    android:textSize="15sp"
    app:strokeColor="@color/green"
    app:strokeWidth="2dp" />

• Botón con borde sin relleno:

<android.support.design.button.MaterialButton
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="UNFILLED MATERIAL BUTTON"
    android:textColor="@color/green"
    android:textSize="15sp"
    app:backgroundTint="@android:color/transparent"
    app:cornerRadius="8dp"
    app:rippleColor="#33AAAAAA"
    app:strokeColor="@color/green"
    app:strokeWidth="2dp" />



Resultado visual

ingrese la descripción de la imagen aquí

aminografía
fuente
Veo que tienes textColor y textSize declarado en tu botón XML. ¿Qué sugiere si alguien ya tiene un estilo definido para textColor y textSize y ahora quiere agregar el style="@style/Widget.AppCompat.Button.Borderless"?
Alguien en alguna parte
Lo tengo resuelto, vea developer.android.com/guide/topics/ui/look-and-feel/…
Someone Somewhere
Como mencionó, es posible definir un estilo que herede del estilo sin bordes, luego agregar atributos preferidos de acuerdo con el estilo base.
aminografía
Ligeramente OT, pero ¿cuál es el cuarto icono interesante en la barra de acción en la parte inferior del GIF? (También parece que el GIF fue tomado de un dispositivo real, genial)
i336_
1
Tal vez me equivoque, pero para mí en el • Botón de borde sin rellenar, tuve que cambiar, app: backgroundTint = "@ color / transparent" a app: backgroundTint = "@ android: color / transparent"
xarly
37

Crea un button_border.xmlarchivo en tu carpeta dibujable.

res / drawable / button_border.xml

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

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

    <stroke
        android:width="3dp"
        android:color="#FFFF4917" />

</shape>

Y agregue el botón a su diseño de actividad XML y establezca el fondo android:background="@drawable/button_border".

        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/button_border"
                android:text="Button Border" />
Karina Sen
fuente
19

crear drawable / button_green.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <gradient
    android:startColor="#003000"
    android:centerColor="#006000"
    android:endColor="#003000"
    android:angle="270" />
  <corners android:radius="5dp" />
  <stroke android:width="2px" android:color="#007000" />
</shape>

y señalarlo como @drawable/button_green:

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@drawable/button_green"
        android:text="Button" />
vitperov
fuente
8

Si su botón no requiere un fondo transparente, puede crear una ilusión de un borde utilizando un Diseño de marco. Simplemente ajuste el atributo "relleno" de FrameLayout para cambiar el grosor del borde.

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="1sp"
        android:background="#000000">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Your text goes here"
            android:background="@color/white"
            android:textColor="@color/black"
            android:padding="10sp"
            />
</FrameLayout>

No estoy seguro de si los archivos xml de forma tienen colores de borde editables dinámicamente. Pero sí sé que con esta solución, puede cambiar dinámicamente el color del borde configurando el fondo FrameLayout.

Rock Lee
fuente
6

En su diseño XML:

<Button
    android:id="@+id/cancelskill"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="25dp"
    android:layout_weight="1"
    android:background="@drawable/button_border"
    android:padding="10dp"
    android:text="Cancel"
    android:textAllCaps="false"
    android:textColor="#ffffff"
    android:textSize="20dp" />

En la carpeta dibujable, cree un archivo para el estilo de borde del botón:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <stroke
        android:width="1dp"
        android:color="#f43f10" />
</shape>

Y en tu actividad:

    GradientDrawable gd1 = new GradientDrawable();
    gd1.setColor(0xFFF43F10); // Changes this drawbale to use a single color instead of a gradient
    gd1.setCornerRadius(5);
    gd1.setStroke(1, 0xFFF43F10);

    cancelskill.setBackgroundDrawable(gd1);

    cancelskill.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            cancelskill.setBackgroundColor(Color.parseColor("#ffffff"));
            cancelskill.setTextColor(Color.parseColor("#f43f10"));

            GradientDrawable gd = new GradientDrawable();

            gd.setColor(0xFFFFFFFF); // Changes this drawbale to use a single color instead of a gradient
            gd.setCornerRadius(5);
            gd.setStroke(1, 0xFFF43F10);
            cancelskill.setBackgroundDrawable(gd);

            finish();
        }
    });
Raseem Ayatt
fuente
5

Sé que es aproximadamente un año tarde, pero también puede crear una imagen de 9 rutas. Hay una herramienta que viene con el SDK de Android que ayuda a crear dicha imagen. Consulte este enlace: http://developer.android.com/tools/help/draw9patch .html

PD: la imagen también se puede escalar infinitamente

himura
fuente