Extra padding around Floating Action Button Android

Question

I am trying to make a profile page in Android. I am using a floating action Button to display user picture.

Initially i want to display a default picture.

My xml code goes like this:

<android.support.design.widget.FloatingActionButton
    android:layout_height="100dp"
    android:layout_width="100dp"
    android:id="@+id/userIcon"
    app:fabSize="normal"
    android:src="@drawable/male_icon"
    app:pressedTranslationZ="12dp"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|center" />

My question is why there is some extra space around the FAB. Cant i remove that space/padding?

EDITED:

here is my full xml code::

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:background="@drawable/background"
        app:contentScrim="#2678AD"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

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

<android.support.design.widget.FloatingActionButton
    android:layout_height="100dp"
    android:layout_width="100dp"
    android:id="@+id/userIcon"
    app:fabSize="normal"
    android:src="@drawable/male_icon"
    app:pressedTranslationZ="12dp"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|center" />

you can give margins like:android:layout_marginEnd="7dp" android:layout_marginBottom="10dp" — kgandroid, Aug 04 '16 at 13:08

score 6 · Answer 1 · answered Aug 04 '16 at 13:21

6

u might want to change the scaletype attribute to center. Like,

android:scaleType="center"

answered Aug 04 '16 at 13:21

AbiDoll

106
5

score 2 · Answer 2 · answered Oct 23 '18 at 10:56

2

You can remove the extra padding by allowing your icon to be larger in size. This way you can set the icon to be the size of the floating action button.

    app:maxImageSize="40dp"

or whatever size you want to give it.

answered Oct 23 '18 at 10:56

Mars

4,197
11
39
63

score 1 · Answer 3 · edited May 23 '17 at 12:10

1

try this one:

app:borderWidth="0dp"

and you can also remove shadow using elevation

app:elevation="6dp"

see this link.

if its not working then try to manage outline shadow like this:

Button fab = (Button) rootView.findViewById(R.id.fabbutton);

    Outline mOutlineCircle;
    int shapeSize = getResources().getDimensionPixelSize(R.dimen.shape_size);
    mOutlineCircle = new Outline();
    mOutlineCircle.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);

    fab.setOutline(mOutlineCircle);
    fab.setClipToOutline(true);

edited May 23 '17 at 12:10

Community

1
1

answered Aug 04 '16 at 13:09

Sagar Chavada

5,169
7
40
67

Hey @sagar, Thanks for the reply but that didnt help! – Adarsh Raj Aug 04 '16 at 13:15
I tested on android 5.1.1 too. Same result :| – Adarsh Raj Aug 04 '16 at 13:23
and make sure you are using latest version of design dependency – Sagar Chavada Aug 04 '16 at 13:27

score 1 · Answer 4 · answered Nov 10 '16 at 05:58

In layout file set attribute elevation to 0. because it takes default elevation.

 app:elevation="0dp"

Now in activity check api level greater than 21 and set elevation if needed.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        fabBtn.setElevation(10.0f);
    }

score 1 · Answer 5 · answered May 18 '17 at 17:01

1

Because you are using opposite app:fabSize="normal" . Change to app:fabSize="mini"

answered May 18 '17 at 17:01

nzackoya

356
2
8

Thanks, it was perfect for my requirement. also it would be good to mention ```app:fabCustomSize="your custom fab size"``` attribute. – SATYAJEET RANJAN Nov 17 '20 at 12:41

score 0 · Answer 6 · answered Aug 04 '16 at 13:11

I think this is margin, not padding. Try to do it programmatically:

if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) floatingActionButton.getLayoutParams();
        params.setMargins(0, 0, 0, 0); 
        floatingActionButton.setLayoutParams(params);
    }

Or try to put FloatingActionButton into CoordinatorLayout, like an example below:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/bt_ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginRight="10dp"
        app:backgroundTint="@color/primary"
        app:borderWidth="0dp"
        app:fabSize="mini"/>
</android.support.design.widget.CoordinatorLayout>

Hey @Huy, Tried solving it pragmatically but didnt help. And the FAB is within a coordinate layout — Adarsh Raj, Aug 04 '16 at 13:18
Have you try to use `android:scaleType="center"`? set layout width and height to wrap_content and added the fabsize attribute. — xxx, Aug 04 '16 at 15:12

Extra padding around Floating Action Button Android

6 Answers6