Android: Floating Action Button appears with transparent background

flutter floating action button transparent background
floating action button remove background
android floating action button background color
how to set transparent background in android layout
floating action button with text android
draggable floating button android github
android button transparent background without border
floating action button style android

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

you must set

app:backgroundTint="@color/yourcolor"

Remove background colour from FloatingActionButton, so final FloatingActionButton looks like following : android:background="@null" app:backgroundTint="@android:color/transparent"  Home » Android » xml – Android Floating Action Button Semi Transparent Background Color xml – Android Floating Action Button Semi Transparent Background Color Posted by: admin May 10, 2020 Leave a comment

attach this icon here

"@dimen/dp15"

there seems to be background color present in this image.

Android: Floating Action Button appears with transparent background, Unable to make FloatingActionButton background color transparent. Android toolchain - develop for Android devices (Android SDK 27.0.3) Using a background color with some alpha (e.g. #99fe0038) when the shadow is set to true reveals two circles: one for the floating action button and another inside (cf. image below). The latter is probably caused by the shape of the draw

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.

Unable to make FloatingActionButton background color transparent , Inconsistent view when a transparent background color is used #18 one for the floating action button and another inside (cf. image below). Updated: Jan 24, 2020. “Android Notes 42: How to change Floating Action Button’s (FAB) Properties” is published by Kuray Ogun in FreakyCoder Software Blog.

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

zendesk/android-floating-action-button, Android, Available. iOS, Available Four quadrants each showing a different type of button. 1. Toggle buttons group a set of actions using layout and spacing. They're An extended floating action button for the highest emphasis 2. Its container is transparent and until the button is interacted with, a color isn't visible. Add a Floating Action Button A floating action button (FAB) is a circular button that triggers the primary action in your app's UI. This page shows you how to add the FAB to your layout, customize some of its appearance, and respond to button taps.

Floating Action Button with transparent background, Floating action buttons · List "Text button with purple text 'Text button' over a white background." The following example shows a text button with an icon. A text button has a text label, a transparent container and an optional icon. buttons. They contain actions that are important, but aren't the primary action in an app. Floating Action Button displays the most important function in an application. It is a circular button. For example, it is used in Twitter for tweets and Gmail for sending emails, etc.

Buttons, 1" layout margin Top="16dp" padding Left-"G dimen/activity horizontal margin" padding elevation="Odp" android: background="Gandroid: color/transparent" app: theme="G style/Theme Overlay. Floating Action Button android: id="3-id/​fab" android: layout width="wrap content" android: Listing 8.21 shows the activity. Floating action buttons. A floating action button (FAB) represents the primary action of a screen. Contents. Using FABs; Regular FABs; Mini FABs; Extended FABs; Theming FABs; Using FABs. A FAB performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its

Buttons - Material Components for Android, FloatingActionButton extends the ImageView class. This is evident from the android:src attribute defined. In the above xml layout elevation attribute is used to cast a shadow over the button and pressedTranslationZ causes the shadow to grow when pressed. A FloatingActionButton is placed within a CoordinatorLayout.

Comments
  • Please try giving some back ground color to Floating Action Button in XML to avoid transparency.
  • @dex I've added app:backgroundTint="@color/accent" but it didn't works
  • give android:alpha="1.0f" for fab and check
  • @Jolson it didn't work
  • @KhalilRumman try some other color, will it be visible ? and please add color to floating XML.
  • i think Tint cannot be applicable to version lesser than Lollipop
  • can you explian? I've did this already android:layout_margin="@dimen/dp15" android:src="@drawable/ic_send"
  • I meant, the image android:src="@drawable/ic_send", check whether it has background color.
  • can you try setting ic_send as button background
  • actually it is PNG without background. I reported to Google and it was a bug in support library 23.0.1 and now should be fixed in 23.1
  • Good to know. Thank you
  • it was a bug in support Library 23.0.1 and it was fixed from Google and now it works fine. Thank you :)
  • Thanks for posting your code, but can you please add an explanation of why and how it works to your post?
  • elevation is how we setup our layer on layout. FloatingButtonAction has default value for elevation = 6dp. so if you set elevation = 2dp, background will appear on background of your layout. minimum elevation for FloatingButtonAction is 6dp to show up on top layer of layout. Correct me if I'm wrong