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

使用此属性： fab:fabCustomSize="100dp" 使它等于晶圆厂的高度和宽度。这对我有所帮助。这是我的代码。

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

图像定位正确但背景中的阴影没有。如果按下按钮则更糟糕。

要将此效果最小化，您可以更改elevation和pressedTranslationZ

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

你会得到：

Answer 3

确保您的背面图像/可绘制的形状为方形，此布局配置适合我

<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

只需在Fab内的.Xml中写入

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

它将正常工作！

Answer 5

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

app:layout_anchorGravity="bottom|center"

希望这会有所帮助。

Answer 6

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

尝试使用下面的代码。希望它会对你有所帮助。这段代码对我很好。

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

添加此属性，图像将自动居中

app:fabSize="normal"

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中的图像置于透明背景后面？

9 个答案: