How to center image in FloatingActionButton behind transparent background?

Question

I have a FloatingActionButton and I would like to make it transparent with a centered icon.

I added a style:

<style name="ButtonTransparent">
    <item name="colorAccent">@android:color/transparent</item>
</style>

which works so far. THe FAB got transparent. Then I added the FAB :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".activities.CameraActivity">
    <TextureView
        android:id="@+id/texture"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true">

        <ImageView
            android:id="@+id/iv_last_image"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_gravity="center_horizontal"
            android:layout_margin="10dp" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/btn_takepicture"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_gravity="center_horizontal"
            android:layout_margin="20dp"
            android:theme="@style/ButtonTransparent"
            android:src="@drawable/selector_vector_camera_light" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/btn_back"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_gravity="center_horizontal"
            android:layout_margin="20dp"
            android:theme="@style/ButtonTransparent"
            android:src="@drawable/selector_vector_go_back" />
    </LinearLayout>
</RelativeLayout>

but as you can see on the screenshot below it is not well aligned. How can I correct that?

Please post full *layout* code. And also it will be great if you show what is current output and what will be your desired output. — Jay Rathod, May 30 '17 at 08:21
sometimes, the icon may not come to center if you have set a custom width or height. make both wrap content and try. — Reejesh PK, Mar 12 '19 at 09:06

score 102 · Answer 1 · edited May 07 '21 at 20:10

102

Use this attribute: app:fabCustomSize="60dp" make this equal to height and width of your fab. This helped me. This was my code.

<com.google.android.material.floatingactionbutton.FloatingActionButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="60dp"
    android:layout_height="60dp"
    app:fabCustomSize="60dp"
    android:backgroundTint="@color/colorPrimary"
    android:src="@drawable/ic_insert_drive_file_24dp" />

Another way could be using android:foreground attribute instead of src and then setting android:foreground_gravity to center.

edited May 07 '21 at 20:10

kc_dev

578
1
6
21

answered Jul 22 '18 at 07:32

Aayush Singla

1,305
1
13
20

great answer was searching for this for a while! – Mike6679 Nov 20 '18 at 13:24
3

Starting android P (support lib 28) fabCustomSite should equals width/height in order to display centered image content – Kamen Stoykov Feb 27 '19 at 10:00
3

also add `app:maxImageSize="60dp"` to fill the image in the FAB – Pierre Aug 27 '19 at 06:02

score 11 · Answer 2 · answered Sep 19 '19 at 14:55

11

Just Write in your .Xml, inside your Fab

android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabCustomSize="your-size"
app:maxImageSize="your-size"

It will work fine!!

answered Sep 19 '19 at 14:55

Noman khanbhai

551
7
16

score 11 · Answer 3 · answered Dec 04 '19 at 18:45

Hi, this works for me:

android:layout_width="30dp"
android:layout_height="30dp"
app:fabCustomSize="30dp"

add this line app:fabCustomSize="@dimen/my_dimension" and set the same value for these:

android:layout_width="@dimen/my_dimension"

android:layout_height="@dimen/my_dimension"

score 8 · Accepted Answer · answered May 30 '17 at 10:00

Image is positioned properly but the shadow in background no. If you press the button then it is even worse.

To minimaze this effect you can change elevation and pressedTranslationZ

      app:elevation="1dp"
      app:borderWidth="0dp"
      app:pressedTranslationZ="1dp"

And you will get:

erluxman · Answer 5 · 2017-05-30T10:59:48.537

2

Make sure your back image/drawable is square in shape and this layout config worked for me

<android.support.design.widget.FloatingActionButton
        android:id="@+id/btn_back"
        android:layout_width="60dp"
        android:layout_height="60dp"
        app:backgroundTint="#0000"
        android:scaleType="fitXY"
        android:layout_gravity="center"
        android:layout_margin="20dp"
        android:src="@drawable/back_vector" />

if you use

 app:backgroundTint="#200f"

The fab background tint color will look like the background thus will look a lot more transparent ..

edited May 30 '17 at 10:59

answered May 30 '17 at 08:58

erluxman

18,155
20
92
126

he want with transparent background – Ali Ahsan May 30 '17 at 10:47
that is the shadow i think that comes with fab – erluxman May 30 '17 at 10:53
that is the shadow i think that comes with fab – erluxman May 30 '17 at 10:54
But one can make it look like transparent by selecting the bgtint color close to the background the fab will reside on with very less opacity for eg if the background is blue like mine then I can set the tint bg as #100f – erluxman May 30 '17 at 11:00

score 2 · Answer 6 · answered Jun 19 '19 at 21:10

2

Add this property , image will be centered automatically

app:fabSize="normal"

answered Jun 19 '19 at 21:10

arpit1714

543
6
8

1

I tried everything, this was the only setting that centered the button! – Roney Sampaio Jul 28 '19 at 22:53

score 0 · Answer 7 · answered May 30 '17 at 08:32

layout 2 files: such as content_main.xml file:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.testbd.com.myapplication.MainActivity"
    tools:showIn="@layout/activity_main">

</RelativeLayout>

and

activity_main.xml file

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"
    android:fitsSystemWindows="true"
    tools:context="com.testbd.com.myapplication.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:srcCompat="@android:drawable/ic_dialog_email"/>

</android.support.design.widget.CoordinatorLayout>

and finally res/values/colors.xml file

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#5a1f00</color>
</resources>

Best of luck!

score 0 · Answer 8 · answered May 30 '17 at 12:47

Try to use below code.Hope it will help you. This code is working fine with me.

<android.support.design.widget.FloatingActionButton
                android:id="@+id/floatingMap"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:layout_marginRight="@dimen/scale_15dp"
                android:layout_marginTop="@dimen/scale_130dp"
                android:elevation="@dimen/scale_5dp"
                android:src="@drawable/ic_directions"
                app:backgroundTint="@android:color/transparent" />

score -1 · Answer 9 · answered May 30 '17 at 08:29

-1

CoordinatorLayout is like a FrameLayout,So try below one.

app:layout_anchorGravity="bottom|center"

Hope this will help.

answered May 30 '17 at 08:29

Chandrahasan

1,991
24
26

How to center image in FloatingActionButton behind transparent background?

9 Answers9

Linked