Ytukyg

I would like to show count badge in front of Floating Action Button in android. I used FrameLayout in order to achieve that. My code is here

   <FrameLayout

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_alignTop="@+id/send_button"

    android:layout_toLeftOf="@+id/send_button"

    android:layout_toStartOf="@+id/send_button"

    android:layout_gravity="end|bottom"

    android:id="@+id/frameLayout">



    <android.support.design.widget.FloatingActionButton

        xmlns:app="http://schemas.android.com/apk/res-auto"

        android:id="@+id/listen_button"

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        app:backgroundTint="#e3e3e3" />



   <TextView

        android:id="@+id/textOne"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="10"

        android:textColor="#FFF"

        android:textSize="10sp"

        android:textStyle="bold"

        android:background="@drawable/badge_circle"

        android:layout_gravity="right|bottom"

        android:layout_alignBottom="@+id/frameLayout"

        android:layout_toLeftOf="@+id/frameLayout"

        android:layout_toStartOf="@+id/frameLayout" />



</FrameLayout>

I get the count badge below the FAB, as shown below

I need the count badge to be in front of the FAB.

As suggested by Daniel, you should not add badges to Floating Action Buttons. However, if you really have to do it, try adding this property to your TextView:

android:elevation="7dp"

I used the CounterFab library to achieve this.

It is as simple as adding it to your XML layout file instead of the regular FloatingActionButton and calling counterFab.setCount(10); (See usage example here).

One can simply use TextView by giving custom style for floating.

        <TextView

                android:id="@+id/fabCounter"

                style="@style/Widget.Design.FloatingActionButton"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_alignParentEnd="true"

                android:layout_centerVertical="true"

                android:layout_marginEnd="10dp"

                android:padding="5dp"

                android:text="10"

                android:textColor="@android:color/black"

                android:textSize="14sp" />

For this problem solution is android:elevation="7dp". But you are looking for something like this then use bellow code:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

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

     <RelativeLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_alignParentRight="true"

            android:layout_alignParentBottom="true"

            android:layout_margin="@dimen/margin.2">

            <android.support.design.widget.FloatingActionButton

                android:id="@+id/fab_cart"

                android:layout_width="wrap_content"

                android:layout_height="match_parent"

                android:layout_alignParentRight="true"

                android:layout_margin="@dimen/margin.2"

                app:srcCompat="@drawable/ic_add_shopping_cart"

                app:backgroundTint="@color/colorPrimaryDark" />

            <TextView

                android:id="@+id/text_count"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:elevation="7dp"

                android:gravity="center"

                android:textColor="@color/white"

                android:layout_alignParentRight="true"

                android:textSize="@dimen/text.size.small"

                android:background="@drawable/bg_fab"

                tools:text="10" />

        </RelativeLayout>

</RelativeLayout>

Give it a Try :

<RelativeLayout

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_gravity="top|left"

    app:layout_anchor="@+id/containerpager"

    app:layout_anchorGravity="bottom|right">



    <android.support.design.widget.FloatingActionButton

        android:id="@+id/fab"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="end|bottom"

        android:layout_margin="@dimen/fab_margin"

        android:elevation="0dp"

        android:visibility="visible"

        app:backgroundTint="@color/colorPrimary"

        app:borderWidth="0dp"

        app:fabSize="normal"

        app:srcCompat="@drawable/ic_review_order" />



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:layout_alignParentTop="true"

        android:text="5"

        android:textColor="@color/white"

        android:textSize="22sp"

        android:visibility="visible" />

</RelativeLayout>

try this changes:

<FrameLayout

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="end|bottom"

        android:id="@+id/frameLayout">



        <android.support.design.widget.FloatingActionButton

            xmlns:app="http://schemas.android.com/apk/res-auto"

            android:id="@+id/listen_button"

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:src="@android:color/transparent"

            app:backgroundTint="#e3e3e3" />



       <TextView

            android:id="@+id/textOne"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="10"

            android:textColor="#FFF"

            android:textSize="10sp"

            android:textStyle="bold"

            android:background="@drawable/badge_circle"/>



    </FrameLayout>