top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

Facebook Login
Site Registration

How to make a circle background of floating action button in android?

+3 votes
681 views

I want to make my FAB button look like a circle or any particular shape? how to achieve this?

posted Mar 3, 2016 by Shivam Kumar Pandey

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

2 Answers

0 votes

use app:borderWidth="0dp" something like

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    android:layout_marginRight="20dp"
    app:fabSize="normal"
    android:elevation="@dimen/fab_elevation"
    android:background="#000000"
    app:borderWidth="0dp"
    android:stateListAnimator="@animator/fab_anim"
    android:layout_gravity="center_horizontal"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true" />

Following thread will help http://stackoverflow.com/questions/31202622/floating-action-button-being-a-square

answer Mar 3, 2016 by Aastha Joshi
this ans tell me how to color FAB not how to make it circle even in thread too. Inside given link thread,I think they have used a circle like icon instead of making its border circle.
and what does stateListAnimator do ?
0 votes

go to res -> drawable right-click and create a new drawable resource and name it circle.xml. Now in the newly created file add the following code.

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

    <item android:top="8px">
        <layer-list>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#08000000"/>
                    <padding
                        android:bottom="3px"
                        android:left="3px"
                        android:right="3px"
                        android:top="3px"
                        />
                </shape>
            </item>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#09000000"/>
                    <padding
                        android:bottom="2px"
                        android:left="2px"
                        android:right="2px"
                        android:top="2px"
                        />
                </shape>
            </item>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#10000000"/>
                    <padding
                        android:bottom="2px"
                        android:left="2px"
                        android:right="2px"
                        android:top="2px"
                        />
                </shape>
            </item>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#11000000"/>
                    <padding
                        android:bottom="1px"
                        android:left="1px"
                        android:right="1px"
                        android:top="1px"
                        />
                </shape>
            </item>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#12000000"/>
                    <padding
                        android:bottom="1px"
                        android:left="1px"
                        android:right="1px"
                        android:top="1px"
                        />
                </shape>
            </item>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#13000000"/>
                    <padding
                        android:bottom="1px"
                        android:left="1px"
                        android:right="1px"
                        android:top="1px"
                        />
                </shape>
            </item>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#14000000"/>
                    <padding
                        android:bottom="1px"
                        android:left="1px"
                        android:right="1px"
                        android:top="1px"
                        />
                </shape>
            </item>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#15000000"/>
                    <padding
                        android:bottom="1px"
                        android:left="1px"
                        android:right="1px"
                        android:top="1px"
                        />
                </shape>
            </item>

        </layer-list>
    </item>

    <item >

        <ripple xmlns:android="http://schemas.android.com/apk/res/android"
            android:color="?android:colorControlHighlight">
            <item android:id="@android:id/mask">
                <shape android:shape="oval">
                    <solid android:color="#FFBB00" />
                </shape>
            </item>
            <item>
                <shape android:shape="oval">

                    <solid android:color="@color/ColorPrimary" />


                </shape>
            </item>
        </ripple>

    </item>


</layer-list>

xml drawable is we have created structure like this.

<layer-list>
      <Item>
                <layer-list>

                 <item> (Layer of shadow)
                 <item>
                 <item>
                 <item>
                   .....
                </layer-list>
       </Item>

         <Item>

                 <shape> (Oval shape)
                 </shape>

       </Item>

<layer-list>
answer Mar 11, 2016 by Ashish Kumar Khanna
Similar Questions
+2 votes

I have added a floating action button in my layout but using backgroundtilt, it doesn't change the color of background.

Here my code segment

   <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/AddNewButton"
        android:background="@drawable/add"
        android:layout_margin="15dp"
        app:rippleColor="@android:color/white"
        app:fabSize="normal"
        android:clickable="true"
        app:layout_anchor="@+id/HeaderSection"
        app:layout_anchorGravity="bottom|right|end"/>
+7 votes

Write a routine to draw a circle (x ** 2 + y ** 2 = r ** 2) without making use of any floating point computations at all ??

+1 vote

How to create an application like button savior that display a button or a group of buttons on the screen when we turn them on PERMANENTLY. I tried to found solution for it but i failed. Please provide the solution for it or any example

0 votes

I am newbie to the android, can someone share sample code for creating buttons and checkbox in Android. Any reference will also be helpful.

+1 vote

I am doing some changes in frameworks/base/, so i just wanted to know whether there is a faster process of building it. Currently what i follow is very slow i.e. I do

$ make -j4 installclean // which cleans *.img files from the /out folder
$ make -j4

and finally it creates all *.img. So apart from the above process, is there a way for a single line of change can be built fast ?

Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Bangalore-560102
Karnataka INDIA.
QUERY HOME
...