Como fazer um botão redondo?


Respostas:


265

Crie um arquivo xml nomeado roundedbutton.xmlna pasta drawable

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

Finalmente defina-o como fundo para o seu Buttoncomoandroid:background = "@drawable/roundedbutton"

Se você quiser torná-lo completamente arredondado, altere o raio e aceite algo que seja adequado para você.


Você precisa do sufixo .xml? Eu já vi um exemplo sem
Neil

@ Neil, você não precisa adicionar o sufixo xml, eu fiz isso com o objetivo de demonstração e entendimento claro do conceito, para que o leitor não tome o exemplo errado, a assistência automática do eclipse deve ajudá-lo a descobrir se é necessário .xml ou não, tenho o hábito de usar ctrl + space na minha máquina Windows para concluir automaticamente os comandos xml.
Arif Nadeem

2
Você não precisa de um símbolo '@' antes da palavra desenhar?
shim

Essa solução tem um resultado diferente do que apenas usar uma imagem redonda como plano de fundo?
Siavash 5/09

6
Além disso, por que não usar android: Forma = "oval"
Siavash

39

Se estiver usando o Android Studio, você pode simplesmente 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>

isso funciona bem para mim, espero que isso ajude alguém.


2
essa deve ser a resposta aceita, o uso de valores de cantos não vai além dos cantos arredondados, e essa pergunta é sobre um círculo. Graças Shaun para esta resposta
Don

12
Usar ringnão mostra nada. Melhor usar oval.
CopsOnRoad

31
  1. Crie um arquivo drawable / button_states.xml contendo:

    <?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. Use-o na tag button em qualquer arquivo de layout

    <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"
    />

está funcionando perfeitamente, obrigado. você pode me ajudar a desenhar retângulo do centro para fora de olhares círculo como um 'Q'
CLIFFORD PY

Funcionando bem, mas por que colocamos o raio em 1000dp? você pode explicar, por favor?
Jamshaid Kamran

O @JamshaidKamran 1000dp é um tamanho arbitrário que é grande o suficiente para girar o botão.
precisa saber é o seguinte

Existe um recurso de dimensão do Android que possamos usar em vez 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 -->

e adicione isso ao código do botão

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

5

Usou a forma como oval. Isso torna o botão oval

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

Defina isso em seus recursos de desenho XML e botão de uso e imagem simples com uma imagem redonda, usando seu desenho como plano de fundo.



3

use ImageButton vez de Button ....

e faça uma imagem redonda com fundo transparente


3

Se você deseja um botão circular com aparência da FAB e está usando a biblioteca oficial de componentes de material, pode fazê-lo facilmente desta maneira:

<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 do botão, tenha cuidado para usar metade do tamanho do botão como app:cornerRadius.


2

Para um botão redondo, crie uma 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" />

use-o como pano de fundo do link do seu botão




0

Você pode usar o FloatingActionButton do 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 os botões de imagem e faça o fundo como a imagem desejada.
  2. Crie as imagens no link do estúdio de ativos do 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 "

e baixe-o, extra-o, dentro da pasta mipmap-hdpi.

  1. copie a imagem da pasta mipmap-hdpi e cole-a na pasta drwable do seu projeto android.

  2. Agora defina o plano de fundo como essa imagem.

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.