Design de botão do Android, botão personalizado, botão redondo, cor

Neste tutorial, personalizaremos os botões em nosso aplicativo Android. Se você não conhece os botões do Android, confira este tutorial antes de prosseguir. Estaremos definindo seletores e formas em nossos botões em xml.

Design de botão do Android

Um seletor é usado para definir um comportamento diferente para diferentes estados do Button. O que são estados desenháveis? Cada um dos seguintes eventos de uma visualização (Botão ou qualquer outro tipo de visualização) é um tipo de estado:

estado_pressionado
estado_selecionado
focado no estado
state_enabled

state_focused é quando você passa o mouse sobre o widget. Normalmente funciona apenas em emuladores. state_selected destina-se a selecionar a visualização. Não funciona com Botões. Funciona com botões de rádio. Normalmente, para um botão, existem apenas três estados importantes: normal, pressionado e ativado. Para cada um dos estados do seletor, podemos definir um drawable/cor/forma diferente em nosso botão. Vamos começar com a implementação de cada um deles em um novo projeto do Android Studio.

Estrutura do projeto de botão personalizado do Android

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@color/red"/>
    <item android:state_focused="true" android:drawable="@color/yellow"/>
    <item android:drawable="@color/green"/>
</selector>

No código acima, cada um dos estados é representado por uma tag de item. A tag seletora se comporta como uma instrução if - else if até certo ponto. Ele verifica todas as condições de cima para baixo. Sempre que a condição corresponder, ele define as coisas relevantes no botão e para de processar as tags do próximo item. A terceira tag de item é a padrão. É importante que o mantenhamos no final. Mantê-lo no topo não permitiria que as outras duas tags de item fossem executadas. Definimos o arquivo seletor drawable acima em nosso botão no activity_main.xml como:

<Button
            android:id="@+id/btnBgSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector"
            android:padding="8dp"
            android:text="Colored Selector" />

O seletor é definido no atributo background do botão.

Seletor para botão desativado

O seguinte seletor btn_bg_selector_disabled.xml é usado em um botão que não está ativado.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@color/yellow"/>
    <item android:state_pressed="true" android:drawable="@color/red"/>
    <item android:drawable="@color/green"/>
</selector>

Para que o seletor acima funcione, precisamos especificar android:enabled como false.

<Button
            android:id="@+id/btnBgSelectorDisabled"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector_disabled"
            android:enabled="false"
            android:padding="8dp"
            android:text="Color Selector Disabled" />

Seletor com Drawables Diferentes

Podemos definir uma imagem desenhável diferente a ser exibida com base no estado do botão. O código seletor que faz isso está presente no arquivo btn_drawable_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    
    <item android:drawable="@drawable/sad" android:state_pressed="true"/>
    <item android:drawable="@drawable/happy" android:state_focused="true"/>
    <item android:drawable="@drawable/happy"/>

</selector>

Observação: o estado focado não funciona em smartphones. Agora, as imagens desenháveis quando definidas como plano de fundo do botão podem ser esticadas se a largura/altura for maior que a do botão. Portanto, precisamos definir a largura/altura do botão de acordo com a imagem do drawable. Podemos fazer isso codificando em xml ou obtendo as dimensões desenháveis programaticamente e definindo-as sobre o botão. Por uma questão de conveniência, fizemos o primeiro aqui:

<Button
            android:id="@+id/btnDrawableSelector"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_margin="8dp"
            android:background="@drawable/btn_drawable_selector"
            android:padding="16dp" />

ImageButton é a View ideal para ser usada quando você precisa exibir um drawable apenas como fundo do botão, pois ele se ajusta adequadamente ao drawable. ImageButton vem com o atributo android:scale para redimensionar a imagem desenhável.

<ImageButton
            android:id="@+id/imgButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@color/green"
            android:padding="8dp"
            android:scaleType="center"
            android:src="@drawable/btn_drawable_selector" />

Cor do botão do Android

Podemos alterar a cor do texto no botão com base no estado do seletor. O seguinte código de btn_txt_selector.xml faz isso. Precisamos usar android:color aqui no lugar de android:drawable.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/red"/>
    <item android:state_focused="true" android:color="@color/yellow"/>
    <item android:color="@color/green"/>
</selector>

O botão no layout:

<Button
            android:id="@+id/btnTxtSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="Text Selector"
            android:textColor="@drawable/btn_txt_selector" />

Formas de botão do Android

Podemos definir formas personalizadas em nosso botão usando a tag xml <shape>. Esses arquivos xml também são criados na pasta desenhável. shape pode ser usado dentro de seletores. A forma pode ser definida como retângulo(padrão), oval, anel, linha. As tags mais usadas dentro da tag shape são:

- Definindo as cores inicial e final do gradiente junto com o tipo (raio, linear, varredura)
- Configurando a cor e a largura da borda
- Definindo a cor sólida no botão
- Definição do raio

Botão de canto redondo do Android

O código xml para o arquivo btn_shape_round.xml é fornecido abaixo:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
    android:padding="16dp"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="@android:color/black" />
    <corners android:radius="10dp" />
</shape>

Assim como os seletores, podemos definir isso na tag android:background no botão em nosso layout xml.

Forma de botão do Android com gradiente

No arquivo btn_shape_gradient.xml a seguir, definimos o gradiente como radial. Devemos definir o atributo gradient_radius também.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:endColor="@color/green"
        android:gradientRadius="30dp"
        android:type="radial"
        android:startColor="@color/yellow" />

    <corners android:radius="@dimen/btn_corner_radius" />

    <stroke
        android:width="4dp"
        android:color="@android:color/black" />

</shape>

Forma de botão do Android e seletor juntos

O btn_selector_shape.xml contém o seletor. Cada um dos itens tem uma forma especificada.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">

        <shape android:shape="oval">
            <gradient android:angle="135" android:endColor="@color/jd_red" android:startColor="@color/green" />
            <corners android:radius="20dp" />
            <stroke android:width="2dp" android:color="@android:color/black" />
        </shape>

    </item>

    <item>
        <shape android:shape="rectangle">
            <gradient android:angle="225" android:endColor="@color/green" android:startColor="@color/jd_red" />
            <corners android:radius="@dimen/btn_corner_radius" />
            <stroke android:width="4dp" android:color="@android:color/black" />
        </shape>

    </item>
</selector>

Defina isso no botão e a forma mudará de retângulo para oval quando o botão for clicado. Um gradiente linear deve ter o ângulo especificado em múltiplos de 45, caso contrário, ele falhará. Definir a forma do botão como cápsula btn_shape_capsule.xml é onde definimos a forma dentro dos seletores como uma cápsula.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape android:shape="rectangle">

            <solid android:color="@color/colorAccent" />
            <corners android:radius="10dp" />

        </shape>

    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/yellow" />
            <corners android:radius="10dp" />
        </shape>

    </item>

</selector>

O código para a classe MainActivity.java que hospeda todos os exemplos de botão acima é fornecido abaixo.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:weightSum="2">


    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Selectors"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:textStyle="bold|italic" />


        <Button
            android:id="@+id/btnBgSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector"
            android:padding="8dp"
            android:text="Colored Selector" />

        <Button
            android:id="@+id/btnBgSelectorDisabled"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector_disabled"
            android:enabled="false"
            android:padding="8dp"
            android:text="Color Selector Disabled" />

        <Button
            android:id="@+id/btnDrawableSelector"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_margin="8dp"
            android:background="@drawable/btn_drawable_selector"
            android:padding="16dp" />

        <ImageButton
            android:id="@+id/imgButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@color/green"
            android:padding="8dp"
            android:scaleType="center"
            android:src="@drawable/btn_drawable_selector" />

        <Button
            android:id="@+id/btnTxtSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="Text Selector"
            android:textColor="@drawable/btn_txt_selector" />


    </LinearLayout>


    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Shapes+Selectors"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:textStyle="bold|italic" />

        <Button
            android:id="@+id/btnRoundShape"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_shape_round"
            android:padding="8dp"
            android:text="ROUND SHAPE" />

        <Button
            android:id="@+id/btnBgShape"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/btn_shape_gradient"
            android:padding="8dp"
            android:text="SHAPE WITH GRADIENT" />


        <Button
            android:id="@+id/btnSelectorShape"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_selector_shape"
            android:padding="8dp"
            android:text="SELECTOR SHAPE" />


        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_shape_gradient"
            android:padding="8dp"
            android:scaleType="center"
            android:src="@drawable/btn_drawable_selector" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_shape_capsule"
            android:padding="8dp"
            android:text="Text Selector"
            android:textColor="@drawable/btn_txt_selector" />


    </LinearLayout>


</LinearLayout>

Saída de aplicativo de design de botão personalizado do Android

Baixe o projeto de design de botões do Android

Design de botão do Android, botão personalizado, botão redondo, cor