'Android: Floating Action Button appears with transparent background

I've added FloatingActionButton to my application with a png icon ic_send. When I was testing using gingerbread device it keeps showing the button with no background color, but on lollipop its showing OK.

Here is my Activity code:

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

import butterknife.Bind;
import butterknife.ButterKnife;

public class MainActivity2 extends AppCompatActivity {
    @Bind(R.id.toolbar)Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        ButterKnife.bind(this);
        setSupportActionBar(toolbar);

    }
}

And here is my xml file:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        layout="@layout/toolbar" />

    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/dp10"
        android:background="@color/card"
        android:gravity="center"
        card_view:cardCornerRadius="5dp">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:padding="@dimen/dp5">

            <EditText
                android:id="@+id/main_edt_from"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/dp30"
                android:hint="@string/amount"
                android:inputType="numberDecimal" />
        </LinearLayout>

    </android.support.v7.widget.CardView>
</LinearLayout>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/btn_next"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/dp15"
    android:src="@drawable/ic_send"
    app:elevation="2dp"
    app:fabSize="normal"
    app:layout_anchor="@id/card"
    app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>

My build.gradle config is:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.1"

    defaultConfig {
        applicationId "com.kr.currencyconverter"
        minSdkVersion 10
        targetSdkVersion 23
        versionCode 4
        versionName "2.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.jakewharton:butterknife:7.0.1'
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:support-v4:23.0.1'
    compile 'com.android.support:design:23.0.1'
    compile 'com.google.android.gms:play-services:8.1.0'
    compile 'com.android.support:cardview-v7:23.0.1'
}

What I have tried is adding app:backgroundTint="@color/accent" to the FloatingActionButton but it didn't works.

Here is an image to show what I mean.. in testing I get a transparent button

android

Solution 1:^[1]

you must set

app:backgroundTint="@color/yourcolor"

Solution 2:^[2]

attach this icon here

"@dimen/dp15"

there seems to be background color present in this image.

Solution 3:^[3]

I had a similar issue with FloatingActionButton(FAB). In my case I was using fragments in Activity and I had FAB in my activity's layout file. So fragment renders on top of FAB. So I had to add fab.bringToFront(); in onPostResume() method in my activity to get it work.

@Override
protected void onPostResume() {
    super.onPostResume();
    fab.bringToFront(); // fab - reference of FloatingActionButton
}

Also, Check elevation of the layout should be smaller than FAB's elevation.

Solution 4:^[4]

remove app:elevation="2dp" on FloatingActionButton

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/btn_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/dp15"
        android:src="@drawable/ic_send"
        //app:elevation="2dp"
        app:fabSize="normal"
        app:layout_anchor="@id/card"
        app:layout_anchorGravity="bottom|right|end" />

Instead, Use given snippet

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/btn_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/dp15"
        android:src="@drawable/ic_send"
        app:fabSize="normal"
        app:layout_anchor="@id/card"
        app:layout_anchorGravity="bottom|right|end" />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Mohammad Hossein Gerami
Solution 2	Anirudh Sharma
Solution 3	Praveen Balaji
Solution 4	Kiran Maniya

'Android: Floating Action Button appears with transparent background

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]