CODEWITHSUNDEEP
androidandroid-layoutfloating-action-button
Adarsh Raj
Adarsh Raj

Reputation: 193

Extra padding around Floating Action Button Android

enter image description here

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" />

Upvotes: 6

Views: 5919

Answers (6)

Mars
Mars

Reputation: 4307

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.

Upvotes: 2

nzackoya
nzackoya

Reputation: 356

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

Upvotes: 1

Vikram
Vikram

Reputation: 1092

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

Upvotes: 1

Sagar Chavada
Sagar Chavada

Reputation: 5269

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

Upvotes: 1

AbiDoll
AbiDoll

Reputation: 106

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

android:scaleType="center"

Upvotes: 6

SGX
SGX

Reputation: 3353

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>

Upvotes: 0

Related Questions