如何将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

使用此属性: fab:fabCustomSize="100dp" 使其等于fab的高度和宽度.这对我有帮助.这是我的代码.

<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

嗨，这对我有用：

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"

Answer 3

只需在您的 Fab 中写入您的 .Xml

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

它会工作得很好！！

Answer 4

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

为了最小化这种效果，你可以改变elevation和pressedTranslationZ

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

你会得到：