浮动动作按钮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" />

Answer 1

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

android:scaleType="center"

Answer 2

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);
    }

Answer 3

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);

Answer 4

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>

Answer 5

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

Answer 6

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.