如何在透明背景后面的 FloatingActionButton 中居中图像？

Question

我有一个 FloatingActionButton，我想用居中图标使它透明。

我添加了一个样式：

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

目前有效。 FAB 变得透明了。然后我添加了 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>

但是正如您在下面的屏幕截图中看到的那样，它没有很好地对齐。 我该如何纠正？

Answer 1

CoordinatorLayout 就像一个 FrameLayout，所以尝试下面的一个。

app:layout_anchorGravity="bottom|center"

希望这会有所帮助。

Answer 2

layout 2文件：如 content_main.xml 文件：

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

和

activity_main.xml 文件

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

最后 res/values/colors.xml 文件

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

祝你好运！

Answer 3

确保你的背部 image/drawable 是方形的，这个布局配置对我有用

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

如果您使用

 app:backgroundTint="#200f"

fab 背景色调颜色看起来像背景因此看起来更透明..

Answer 4

图像位置正确，但背景中没有阴影。如果你按下按钮，那就更糟了。

要尽量减少这种影响，您可以更改 elevation 和 pressedTranslationZ

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

你将获得：

Answer 5

尝试使用下面的code.Hope它会帮助你。这段代码对我来说工作正常。

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

Answer 6

使用这个属性： app:fabCustomSize="60dp" 使它等于您晶圆厂的高度和宽度。这对我有帮助。这是我的代码。

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

另一种方法是使用 android:foreground 属性代替 src，然后将 android:foreground_gravity 设置为居中。

Answer 7

添加这个属性，图片会自动居中

app:fabSize="normal"

Answer 8

只需在您的 Fab

中写入您的 .Xml

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

它会很好用！！

Answer 9

嗨，这对我有用：

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

添加这一行 app:fabCustomSize="@dimen/my_dimension" 并为这些设置相同的值：

android:layout_width="@dimen/my_dimension"

android:layout_height="@dimen/my_dimension"

如何在透明背景后面的 FloatingActionButton 中居中图像？

How to center image in FloatingActionButton behind transparent background?

transparency

android

android-layout

floating-action-button