¿Cómo hacer un botón redondo?


Respuestas:


265

Cree un archivo xml nombrado roundedbutton.xmlen una carpeta dibujable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">
    <solid android:color="#eeffffff" />
    <corners android:bottomRightRadius="8dp"
        android:bottomLeftRadius="8dp"  
        android:topRightRadius="8dp"
        android:topLeftRadius="8dp"/>
</shape>

Establecer, finalmente, que como fondo a su Buttontanandroid:background = "@drawable/roundedbutton"

Si desea hacerlo completamente redondeado, modifique el radio y concuerde con algo que sea adecuado para usted.


¿Necesitas el sufijo .xml? He visto un ejemplo sin
— Neil

@Neil, no necesita agregar el sufijo xml, lo hice con el propósito de demostrar y comprender claramente el concepto para que el lector no tome el ejemplo incorrecto, la asistencia automática de eclipse debería ayudarlo a encontrar si se necesita .xml o no, tengo la costumbre de usar ctrl + espacio en mi máquina Windows para completar automáticamente los comandos xml.
— Arif Nadeem

2
¿No necesita un símbolo '@' antes de la palabra dibujable?
— cuña

¿Esta solución tiene un resultado diferente que simplemente usar una imagen redonda como fondo?
— Siavash

66
Además, ¿por qué no usar android: shape = "oval"
— Siavash

39

Si usa Android Studio, puede usar:

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring">
        <solid android:color="#FFFFFF"/>

    </shape>

Esto funciona bien para mí, espero que esto ayude a alguien.


2
esa debería ser la respuesta aceptada, el uso de valores de esquinas no va más allá de las esquinas redondeadas, y esta pregunta es sobre un círculo. Gracias Shaun por esta respuesta
— Don

12
Usar ringno muestra nada. Mejor de usar oval.
— CopsOnRoad

31
  1. Cree un archivo drawable / button_states.xml que contenga:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="false"> 
            <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#41ba7a" />
            <stroke
                android:width="2dip"
                android:color="#03ae3c" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
            </shape>
        </item>
        <item android:state_pressed="true"> 
            <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#3AA76D" />
            <stroke
                android:width="2dip"
                android:color="#03ae3c" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
            </shape>
        </item>
    </selector>
  2. Úselo en la etiqueta del botón en cualquier archivo de diseño

    <Button
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:background="@drawable/button_states"
        android:text="@string/btn_scan_qr"
        android:id="@+id/btn_scan_qr"
        android:textSize="15dp"
    />

funciona perfectamente, gracias. ¿Pueden ayudarme a dibujar un rectángulo desde el centro hacia el exterior del círculo? Parece una 'Q'
— CLIFFORD PY

Funciona bien, pero ¿por qué pusimos el radio a 1000dp? ¿Puede usted explicar por favor?
— Jamshaid Kamran

@JamshaidKamran 1000dp es un tamaño arbitrario que es lo suficientemente grande como para redondear el botón.
— rraallvv

¿Existe un recurso de dimensión de Android que podamos usar en lugar de 1000dp?
— rraallvv


6

<corners android:bottomRightRadius="180dip"
    android:bottomLeftRadius="180dip"
    android:topRightRadius="180dip"
    android:topLeftRadius="180dip"/>

<solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->

y agregue esto al código del botón

    android:layout_width="50dp"
    android:layout_height="50dp"

5

Usó la forma como ovalada. Esto hace que el botón sea ovalado

<item>
    <shape android:shape="oval" >
        <stroke
            android:height="1.0dip"
            android:width="1.0dip"
            android:color="#ffee82ee" />

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

        <corners
            android:bottomLeftRadius="12.0dip"
            android:bottomRightRadius="12.0dip"
            android:radius="12.0dip"
            android:topLeftRadius="12.0dip"
            android:topRightRadius="12.0dip" />
    </shape>
</item>


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

Establezca eso en sus recursos dibujables XML, y el botón de uso simple e imagen con una imagen redonda, usando su dibujo como fondo.



3

usar ImageButton lugar de Button ...

y hacer imagen redonda con fondo transparente


3

Si desea un botón circular de aspecto FAB y está utilizando la biblioteca oficial de componentes de material, puede hacerlo fácilmente de esta manera:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
    app:cornerRadius="28dp"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="1" />

Resultado:

ingrese la descripción de la imagen aquí

Si cambia el tamaño del botón, tenga cuidado de usar la mitad del tamaño del botón como app:cornerRadius.


2

Para un botón redondo, cree una forma:

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

<stroke
    android:width="8dp"
    android:color="#FFFFFF" />

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


<corners
    android:bottomLeftRadius="45dp"
    android:bottomRightRadius="45dp"
    android:topLeftRadius="45dp"
    android:topRightRadius="45dp" />

úsalo como fondo del enlace de tu botón




0

Puedes usar el FloatingActionButton de Google

XMl:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_dialog_email" />

Java:

  @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    FloatingActionButton bold = (FloatingActionButton) findViewById(R.id.fab);
    bold.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
        // Do Stuff
        }
    });
}

Gradle:

    compile 'com.android.support:design:23.4.0'

0
  1. Use los botones de imagen y cree el fondo como la imagen que desea.
  2. Cree las imágenes desde el enlace del estudio de activos de Android:

" https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=0&foreground.space.pad=0.25&foreColor=rgba(94%2C%20126%2C%20142% 2C% 200) & backColor = rgb (96% 2C% 20125% 2C% 20139) & crop = 1 & backgroundShape = circle & effects = none & name = ic_home "

y descargarlo, extraxtirlo, dentro de esa búsqueda de la carpeta mipmap-hdpi.

  1. copie la imagen de la carpeta mipmap-hdpi y péguela en la carpeta drwable de su proyecto de Android.

  2. Ahora configure el fondo como esa imagen.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.