¿Cómo hacer un botón redondo?

141

Estoy tratando de hacer un botón redondo, pero no sé cómo puedo hacerlo. Puedo hacer botones con esquinas redondeadas, pero ¿cómo puedo redondear un círculo? No es lo mismo. Por favor, dime, ¿es posible en Android? Gracias.

usuario1166635
fuente
1
tenga una buena explicación aquí stackoverflow.com/questions/9884202/custom-circle-button
Milon

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.

Arif Nadeem
fuente
¿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.

Shaun Jones
fuente
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"
    />
Mohit
fuente
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"
usuario4512768
fuente
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>

Rohit Goyal
fuente
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.

Giovanny Piñeros
fuente
3

usar ImageButton lugar de Button ...

y hacer imagen redonda con fondo transparente

MAC
fuente
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.

Roberto Leinardi
fuente
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

Naqash
fuente
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'
kalebora
fuente
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.

Naren
fuente