CODEWITHSUNDEEP
androidxmlandroid-layoutfloating-action-button
coder
coder

Reputation: 322

White border for FloatingActionButton

I need to create a FAB with white border and filled with a solid color (blue or grey).

xml

<android.support.design.widget.FloatingActionButton
        android:id="@+id/myFab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>

enter image description here

I tried the accepted solution suggested in How to change android design support library FAB Button border color?. But did not work (did not add border).

Any help would be really appreciated.

Upvotes: 4

Views: 6350

Answers (4)

Arash
Arash

Reputation: 698

You can use foreground attribute therefore extra view and nested layouts won't needed:

<style name="bookingButton">
    <item name="android:src">@mipmap/fab_icon</item>
    <item name="android:layout_width">@dimen/fabDim</item>
    <item name="android:layout_height">@dimen/fabDim</item>
    <item name="android:layout_gravity">right|end|bottom</item>
    <item name="android:layout_margin">@dimen/fabMargin</item>
    <item name="android:scaleType">center</item>
    <item name="elevation">@dimen/fabElevation</item>
    <item name="pressedTranslationZ">@dimen/fabPressedTranslationZ</item>
    <item name="android:foreground">@drawable/circle_border</item>
    <item name="backgroundTint">@color/colorThird</item>
    <item name="borderWidth">@dimen/zero</item>
</style>

And circle_border.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="@color/transparent"/>
    <stroke android:width="@dimen/strokeSecond" android:color="@color/white" />
</shape>

Upvotes: 0

Lalit Fauzdar
Lalit Fauzdar

Reputation: 6363

You can create this programmatically as:

ImageButton iV = (ImageButton) findViewById(R.id.myFab);
    int strokeWidth = 5;
    int strokeColor = Color.parseColor("#03dc13");
    int fillColor = Color.parseColor("#ff0000");
    GradientDrawable gD = new GradientDrawable();
    gD.setColor(fillColor);
    gD.setShape(GradientDrawable.OVAL);
    gD.setStroke(strokeWidth, strokeColor);
    iV.setBackground(gD);

Change the colors as per your requirement.

Upvotes: 0

Sneha
Sneha

Reputation: 131

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rl_content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/circle_white_border"
        android:padding="3dp">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:elevation="0dp"
            app:elevation="0dp"
            app:fabSize="normal" />
    </LinearLayout>

</RelativeLayout>

background for the floating action button

in the drawable fab_border.xml

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

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

Upvotes: 6

Naveen Tamrakar
Naveen Tamrakar

Reputation: 3339

drawable circle_white_border.xml 

<?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/myFab"
        android:background="@drawable/circle_white_border"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>

Upvotes: 0

Related Questions