Android浮动操作按钮周围的额外填充

Question

我正在尝试制作Android的个人资料页面。 我使用浮动操作按钮显示用户图片。

最初，我想显示默认图片。

我的xml代码如下：

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

我的问题是为什么FAB周围有一些额外的空间。我能否去掉这个空间/填充？ 编辑： 以下是我的完整XML代码：

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

- Adarsh Raj

---

你可以像这样设置边距：android:layout_marginEnd="7dp" android:layout_marginBottom="10dp" - kgandroid

Answer 1

您可能想将scaleType属性更改为center。例如，

android:scaleType="center"

- AbiDoll

Answer 2

如果您希望消除额外的填充空间，可以将图标大小调整为更大。这样，您就可以将图标设置为浮动操作按钮的大小。

    app:maxImageSize="40dp"

或者您可以按照自己的要求设定大小。

- Mars

Answer 3

由于您使用了相反的app:fabSize="normal"，请更改为app:fabSize="mini"

- nzackoya

---

谢谢，这正是我需要的完美解决方案。此外，最好还要提到app：fabCustomSize =“your custom fab size”属性。 - SATYAJEET RANJAN

Answer 4

试试这个：

app:borderWidth="0dp"

你也可以使用高程来移除阴影

app:elevation="6dp"

看看这个链接。

如果不起作用，那么尝试像这样管理轮廓阴影：

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

- Sagar Chavada

---

嘿@sagar，谢谢回复，但是那并没有帮助！ - Adarsh Raj

我也在安卓5.1.1上进行了测试。结果相同 :| - Adarsh Raj

请确保您使用的是设计依赖的最新版本。 - Sagar Chavada

Answer 5

在布局文件中，将属性elevation设置为0。因为它采用默认高程。

 app:elevation="0dp"

现在在活动检查API级别大于21并且需要时设置高程。

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

- Vikram

Answer 6

我认为这是边距而不是内边距。尝试以编程方式实现：

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

或者尝试将FloatingActionButton放入CoordinatorLayout中，像下面的示例一样：

<?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>

- Huy

---

嗨@Huy，尝试以实用的方式解决它，但没有帮助。而且FAB在一个坐标布局内。 - Adarsh Raj

请发布您的完整XML和尺寸值 :) - Huy

你尝试过使用 android:scaleType="center" 吗？将布局的宽度和高度设置为 wrap_content，并添加 fabsize 属性。 - Huy