android – How to center image in FloatingActionButton behind transparent background?-ThrowExceptions

Exception or error:

I have a FloatingActionButton and I would like to make it transparent with a centered icon.

I added a style:

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

which works so far. THe FAB got transparent. Then I added the 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>

but as you can see on the screenshot below it is not well aligned.
How can I correct that?
screenshot

How to solve:

Image is positioned properly but the shadow in background no. If you press the button then it is even worse.

transparent floating action button over oragne background

To minimaze this effect you can change elevation and pressedTranslationZ

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

And you will get:

effect after changing elevation and pressedTranslationZ

###

Use this attribute:
fab:fabCustomSize="100dp"
make this equal to height and width of your fab. This helped me.This was my code.

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

Another way could be using android:foreground attribute instead of src and then setting android:foreground_gravity to center.

###

Just Write in your .Xml, inside your Fab

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

It will work fine!!

###

Add this property , image will be centered automatically

app:fabSize="normal"

###

Hi, this works for me:

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

add this line app:fabCustomSize="@dimen/my_dimension" and set the same value for these:

android:layout_width="@dimen/my_dimension"

android:layout_height="@dimen/my_dimension"

###

Make sure your back image/drawable is square in shape and this layout config worked for me
enter image description here

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

if you use

 app:backgroundTint="#200f"

The fab background tint color will look like the background thus will look a lot more transparent ..enter image description here

###

layout 2 files: such as
content_main.xml file:

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

and

activity_main.xml file

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

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

Best of luck!

###

Try to use below code.Hope it will help you. This code is working fine with me.

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

###

CoordinatorLayout is like a FrameLayout,So try below one.

app:layout_anchorGravity="bottom|center"

Hope this will help.

Leave a Reply

Your email address will not be published. Required fields are marked *