Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change android design support library FAB Button border color?

I want to change fab button border color. border color is white, inside color is black or transparent

I'd like my button to look like this:

This is how it should look like

like image 641
Jiho Heo Avatar asked Oct 08 '15 03:10

Jiho Heo


People also ask

How do you change the color of your fab on Android?

To change background color of Floating Action Button in Kotlin Android, set the backgroundTint attribute (in layout file) or backgroundTintList property (in Kotlin file) of FAB with the required color.

How do you change the border color on a floating action button?

To change floating action button background color in Flutter, add a backgroundColor property to the FloatingActionButton widget. Inside the color property, assign the color of your choice.

What is a floating action button?

A floating action button (FAB) is a circular button that triggers the primary action in your app's UI. This page shows you how to add the FAB to your layout, customize some of its appearance, and respond to button taps.

What is floating action button in Flutter?

Each component in Flutter is called a widget, and FloatingActionButton is no exception. As the name suggests, this widget floats on top of other widgets on the screen. Usually, the FloatingActionButton widget is placed in the bottom-right corner of the screen and is circular in shape.


2 Answers

you can make circle without drawable

  <android.support.design.widget.FloatingActionButton
        android:id="@+id/bottom_navigation_fab"
        style="@style/fab_material"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:layout_gravity="bottom|center"
        app:borderWidth="3dp"
        android:backgroundTint="@color/mountain_meadow" // inner circle color
        android:layout_marginBottom="10dp"
        android:tint="@color/white"
        app:backgroundTint="@color/white" // border color
        app:srcCompat="@drawable/bottom_nav_star" />

output :
enter image description here

like image 126
saigopi.me Avatar answered Oct 12 '22 19:10

saigopi.me


fab.xml in drawable

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false" >
    <solid android:color="@android:color/transparent" />

    <stroke
        android:width="3dp"
        android:color="@android:color/white" />
</shape>

Floating Action Button in layout

<android.support.design.widget.FloatingActionButton
        android:id="@+id/buttton_float"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_action_social_notifications"
        android:background="@drawable/fab"
        android:layout_margin="@dimen/fab_margin"
        android:layout_gravity="bottom|right"
        app:fabSize="normal"
        app:backgroundTint="@android:color/white"
        app:rippleColor="@android:color/black"
        app:borderWidth="0dp"
        app:elevation="2dp"
        app:pressedTranslationZ="12dp"/>

Note : The custom design for your FAB is against the guidelines of Google Material Design for Floating Action Button

like image 24
Vipul Asri Avatar answered Oct 12 '22 21:10

Vipul Asri