1
resposta

Alterar meu fab

Boa Noite! Como eu faço para alterar a cor do meu fab para verde e deixar ele redondo ?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade ! )

1 resposta

Para alterar a cor do seu FAB (Floating Action Button) para verde e torná-lo redondo em um aplicativo Android, você precisará fazer algumas modificações no código XML do layout do seu botão. Vou guiá-lo através dos passos básicos para realizar essas alterações.

  1. Alterar a Cor do FAB para Verde: Abra o arquivo XML do layout onde o FAB está definido. Geralmente, esse arquivo estará localizado em res/layout/ e terá um nome como activity_main.xml ou algo similar. Localize o código referente ao seu FAB e adicione a propriedade app:backgroundTint para definir a cor. Veja um exemplo:

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:backgroundTint="@android:color/holo_green_light"
        app:layout_anchor="@id/bottomAppBar" />
    

    Neste exemplo, @android:color/holo_green_light define a cor verde. Você pode substituir isso por qualquer outra cor que desejar.

  2. Tornar o FAB Redondo: Adicione a propriedade app:shapeAppearanceOverlay para personalizar a aparência do botão. Veja um exemplo:

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:backgroundTint="@android:color/holo_green_light"
        app:layout_anchor="@id/bottomAppBar"
        app:shapeAppearanceOverlay="@style/RoundedShape" />
    

    Em seguida, crie um estilo (ou use um já existente) para tornar o FAB redondo. Adicione isso ao seu arquivo res/values/styles.xml:

    <style name="RoundedShape">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item> <!-- Ajuste o valor conforme necessário -->
    </style>
    

    A propriedade cornerFamily define o tipo de cantos, e cornerSize especifica o raio dos cantos. Ajuste o valor de cornerSize conforme necessário para obter a aparência desejada.

Depois de fazer essas alterações, seu FAB deve ter a cor verde e ser redondo.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software