Botão círculo personalizado


187

Quero criar um botão personalizado e preciso que ele seja um círculo. Como posso criar um botão de círculo? Eu não acho que isso seja possível com o draw9patch.

Também não sei como fazer botão personalizado!

Você tem alguma sugestão?


você precisa estender a classe de botão e substituir o método onDraw.
Ashwin N Bhanushali 27/03

2
mas o problema está aqui se eu estender isso, e o usuário tocar fora do círculo, o Onlcick será chamado, como resolver isso.
Ata

por que você não define uma imagem de forma redonda como plano de fundo para o seu botão?
MKJParekh

Eu fiz o OnDrawn simples, ele é exibido no modo Design, mas quando eu quero executar o aplicativo, isso ocorre ao carregar: android.view.InflateException: Linha de arquivo XML binário # 52: Erro ao inflar a classe com.inaros.magicbox._customButtonPlay
Ata

Respostas:


346

Use xml drawable assim:

Salve o seguinte conteúdo como round_button.xmlna drawablepasta

<?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>

Efeito material do Android: emboraFloatingActionButton é uma opção melhor, Se você quiser fazê-lo usando seletor de xml, crie uma pasta drawable-v21em rese salvar outro round_button.xmllá com seguinte xml

<?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>

E defina-o como plano de fundo Buttonem xml como este:

<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. Se você deseja que ele mostre todos esses estados (ativado, desativado, realçado etc.), você usará o seletor como descrito aqui .
  2. Você deve manter os dois arquivos para tornar o drawable compatível com versões anteriores. Caso contrário, você enfrentará exceções estranhas na versão anterior do Android.

Por pasta drawable, você pretende abrir uma pasta chamada 'drawable' ou salvá-la em drawable-mdpi, hdpi, etc ...?
Jjang

@Jjang não, você só precisa salvá-lo para 'drawable' pasta, qualquer recurso xml para drawable é normalmente salvo em 'drawable', não em mdpi, hdpi etc.
Adil Soomro

K THX, eu não tinha pasta drawable até agora (somente mdpi, hdpi ... e -v21) :)
Jjang

PS Como dar ao botão uma cor padrão de ondulação? Como o cinza que está colorindo todos os botões do aplicativo por padrão.
Jjang

@AdilSoomro eu preciso seus pls endereço de email ou correio me adilm717@gmail.com , Adil de pak
Adiii

67

Markushi escreveu um widget de botão de círculo com efeitos surpreendentes. Clique aqui !

insira a descrição da imagem aqui


Como usar isso com uma imagem não circular?
TomSoft

3
Apenas um alerta: a biblioteca vinculada nesta resposta agora está obsoleta. O autor (Markushi) recomenda o uso de um botão de ação flutuante .
Restabeleça Monica

@ABoschman Podemos colocar texto no widget de botão de círculo? Ou apenas para drawables
Ruchir Baronia 26/03

@RuchirBaronia Eu acho que você realmente deve considerar o FAB do Android. Quanta prosa você quer colocar dentro de um pequeno botão redondo? Parece feito para ícones. Confira: google.com/design/spec/components/…
Restabeleça Monica

@ABoschman Ei, mas eu realmente gosto do efeito deste botão nesta biblioteca. Existe alguma maneira?
Ruchir Baronia 26/03


12

Com a biblioteca oficial de componentes de material, você pode usar a MaterialButtonaplicação de um 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"
            />

Atualmente, o app:iconPadding="0dp", android:insetLeft, android:insetTop, android:insetRight, android:insetBottomatributos são necessários para centralizar o ícone no botão evitando espaço estofamento extra.

Use o app:shapeAppearanceOverlayatributo para obter cantos arredondados. Nesse caso, você terá um círculo.

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

O resultado final:

insira a descrição da imagem aqui


1
Obrigado @ Gabriele Mariotti. Vale ressaltar a necessidade de app:iconPadding="0dp"garantir que o ícone esteja centralizado. Eu queimei um monte de tempo tentando no centro até encontrar isso. Parece uma supervisão desse aplicativo: iconGravity está faltando um valor "central".
scottyab 03/04

1
Obrigado @Gabriele Mariotti. Funciona bem para mim!
Androidz

2

se você quiser usar VectorDrawable e 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>

plano de fundo do 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 um botão com aparência da FAB, este estilo é 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:

insira a descrição da imagem aqui

Se você alterar o tamanho, tenha cuidado para usar metade do tamanho do botão como app:cornerRadius.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.