Botón de círculo personalizado


187

Quiero crear un botón personalizado y necesito que sea un círculo. ¿Cómo puedo crear un botón circular? No creo que eso sea posible con draw9patch.

¡Tampoco sé cómo hacer un botón personalizado!

¿Tienes alguna sugerencia?


tienes que extender la clase del botón y anular el método onDraw.
Ashwin N Bhanushali

2
pero el problema está aquí si extiendo eso, y el usuario toca fuera de círculo, se llamará a Onlcick, cómo resolver esto.
Ata

¿Por qué no establece una imagen de forma redonda como fondo para su botón?
MKJParekh

Hice OnDrawn simple, se muestra en la vista Diseño, pero cuando quiero ejecutar la aplicación, se produce este problema al cargar: android.view.InflateException: línea de archivo XML binario # 52: Error al inflar la clase com.inaros.magicbox._customButtonPlay
Ata

Respuestas:


346

Use xml dibujable de esta manera:

Guarde los siguientes contenidos como round_button.xmlen la drawablecarpeta

<?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="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#c20586"/>
        </shape>
    </item>
</selector>

Android material Efecto: A pesar de que FloatingActionButtones una mejor opción, si usted quiere hacerlo utilizando el selector xml, crear una carpeta drawable-v21en resy salvar a otro round_button.xmlallí con XML siguiente

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

Y configúrelo como fondo de Buttonxml de esta manera:

<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />

Importante:

  1. Si desea que muestre todos estos estados (habilitado, deshabilitado, resaltado, etc.), usará el selector como se describe aquí .
  2. Debe conservar ambos archivos para que el dibujo sea compatible con versiones anteriores. De lo contrario, enfrentará raras excepciones en la versión anterior de Android.

Por carpeta dibujable quiere decir abrir una carpeta llamada 'dibujable', o guardarla en drawable-mdpi, hdpi, etc ...?
Jjang

@Jjang no, solo necesita guardarlo en la carpeta 'drawable', cualquier recurso xml para drawable generalmente se guarda en 'drawable', no en mdpi, hdpi, etc.
Adil Soomro

K thx, no tenía una carpeta dibujable hasta ahora (solo mdpi, hdpi ... y -v21) :)
Jjang

PD: ¿Cómo darle al botón un color ondulado predeterminado? Como el gris que colorea todos los botones de la aplicación de forma predeterminada.
Jjang

@AdilSoomro necesito su dirección de correo electrónico por favor o envíeme un correo electrónico adilm717@gmail.com , adil de pak
Adiii

67

Markushi escribió un widget de botón circular con efectos sorprendentes. Haga clic aqui !

ingrese la descripción de la imagen aquí


¿Cómo usar esto con una imagen no circular?
Tomsoft

3
Solo un aviso: la biblioteca vinculada en esta respuesta ahora está en desuso. El autor (Markushi) recomienda usar un botón de acción flotante en su lugar.
Vuelva a instalar Mónica

@ABoschman ¿Podemos poner texto en el widget del botón circular? O solo para
sorteos

@RuchirBaronia Creo que realmente deberías considerar el Android FAB. ¿Cuánta prosa quieres colocar dentro de un pequeño botón redondo? Parece hecho para iconos. Echa un vistazo a: google.com/design/spec/components/…
Reinstale Monica

@ABoschman Hola, pero realmente me gusta el efecto de este botón en esta biblioteca. ¿Hay alguna manera?
Ruchir Baronia


12

Con la biblioteca oficial de Componentes de material puede usar la MaterialButtonaplicación de un Widget.MaterialComponents.Button.Iconestilo.

Algo como:

   <com.google.android.material.button.MaterialButton
            android:layout_width="48dp"
            android:layout_height="48dp"
            style="@style/Widget.MaterialComponents.Button.Icon"
            app:icon="@drawable/ic_add"
            app:iconSize="24dp"
            app:iconPadding="0dp"
            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:insetBottom="0dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
            />

Actualmente, el app:iconPadding="0dp", android:insetLeft, android:insetTop, android:insetRight, android:insetBottomse necesitan atributos para centrar el icono en el botón evitando carnes de más espacio.

Usa el app:shapeAppearanceOverlayatributo para obtener esquinas redondeadas. En este caso tendrás un círculo.

  <style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

El resultado final:

ingrese la descripción de la imagen aquí


1
Gracias @Gabriele Mariotti. Vale la pena resaltar la necesidad de app:iconPadding="0dp"garantizar que el ícono esté centrado. Me quemé un montón de tiempo intentando centrarme hasta que encontré esto. Parece un descuido esa aplicación: iconGravity no tiene un valor "central".
scottyab

1
Gracias @Gabriele Mariotti. ¡Trabaja bien para mí!
Androidz

2

si quieres usar VectorDrawable y ConstraintLayout

<FrameLayout
            android:id="@+id/ok_button"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:background="@drawable/circle_button">
                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <ImageView
                        android:id="@+id/icon_of_button"
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:srcCompat="@drawable/ic_thumbs_up"/>
                    <TextView
                        android:id="@+id/text_of_button"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        app:layout_constraintTop_toBottomOf="@+id/icon_of_button"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        android:layout_marginTop="5dp"
                        android:textColor="@android:color/white"
                        android:text="ok"
                        />
                </android.support.constraint.ConstraintLayout>
            </FrameLayout>

fondo del círculo: circle_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
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>

2

Para un botón de aspecto FAB este estilo en MaterialButton:

<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, tenga cuidado de usar la mitad del tamaño del botón como app:cornerRadius.

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.