Как центрировать изображение в FloatingActionButton за прозрачным фоном?

У меня есть FloatingActionButton, и я хотел бы сделать его прозрачным с иконкой в центре.

Я добавил стиль:

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

который работает до сих пор. ФАБ стал прозрачным. Затем я добавил 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>

но, как вы можете видеть на скриншоте ниже, он не очень хорошо выровнен. Как я могу это исправить?

Ответы

Ответ 1

Изображение позиционируется правильно, но тень в фоновом режиме отсутствует. Если вы нажмете кнопку, это еще хуже.

Чтобы минимизировать этот эффект, вы можете изменить elevation и pressedTranslationZ

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

И вы получите:

Ответ 2

Используйте этот атрибут: 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 в центр.

Ответ 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"

Цвет фона фонового цвета будет выглядеть так, как будто фон будет выглядеть намного прозрачнее.

Ответ 4

Добавьте это свойство, изображение будет центрировано автоматически

app:fabSize="normal"

Ответ 5

Просто напишите в своем .Xml, внутри вашего Fab

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

Это будет хорошо работать !!

Ответ 6

CoordinatorLayout похож на FrameLayout, поэтому попробуйте ниже одного.

app:layout_anchorGravity="bottom|center"

Надеюсь, это поможет.

Ответ 7

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 file

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

Удачи!

Ответ 8

Попробуйте использовать ниже код. Надеюсь, это поможет вам. Этот код работает отлично со мной.

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