Home / Questions / 139682
Accepted
Bruno Sosa Fast Tag
Asked: 2020-02-20 11:44:10 +0800 CST 2020-02-20 11:44:10 +0800 CST

ImageView with Notification Counter Android Java

  • 772

I would like to know if there is any control, library or if I have to do it by hand, to be able to implement a counter in an imageview, what I mean is, I need to replicate something like this

enter image description here

I mean the image with a red circle that says 1..2..3.., etc , Currently I have my RecyclerView

                <android.support.v7.widget.RecyclerView
                android:id="@+id/lstMovsWallet"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:divider="@color/background_dark_grey"
                android:layout_below="@+id/strLblTitleMovs"/>

with my custom adapter

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:color/white">


<TextView
    android:id="@+id/txtNumberPhoneBilling"
    android:layout_width="130dp"
    android:layout_height="wrap_content"
    android:text="1"
    android:ellipsize="end"
    android:maxLines="1"
    android:textSize="13dp"
    android:textColor="@color/black"
    android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
    android:id="@+id/txtDateBillingRef"
    android:layout_width="130dp"
    android:ellipsize="end"
    android:layout_height="wrap_content"
    android:layout_below="@+id/txtNumberPhoneBilling"
    android:text="2"
    android:textColor="@color/light_grey"
    android:layout_gravity="center_vertical"
    android:textSize="13dp"
    android:maxLines="1" />
<TextView
    android:textColor="@color/light_grey"
    android:id="@+id/txtDateBillingNotifications"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/txtNumberPhoneBilling"
    android:text="3"
    android:textSize="13dp" />
<TextView

    android:id="@+id/txtMountBillingNotifications"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@color/black"
    android:layout_below="@+id/txtNumberPhoneBilling"
    android:layout_toRightOf="@+id/txtDateBillingRef"
    android:text="4"
    android:textSize="16dp" />


<ImageView
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:id="@+id/IMGPerson"
    android:layout_marginLeft="20dp"
    android:layout_alignParentLeft="true"
    android:layout_centerInParent="true" />

<ImageView
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:id="@+id/btnCancelBillingNotifications"
    android:layout_marginRight="20dp"
    android:layout_alignParentRight="true"
    android:layout_centerInParent="true" />

As you can see I have an image on each side but now looking to put that image up there I could do it manually by adding an image and centering it but I would like to know if there is a more comforting way

java

1 Answers

  1. Best Answer

    You can do it by hand using for example a FrameLayoutand a pair of ImageView, one for the image and one for the badge (this is pretty much what you're doing).

    <FrameLayout
    android:layout_width="30dp" 
    android:layout_height=30dp">

    <ImageView
        android:id="@+id/IMGperson"
        ... />

    <ImageView
        android:id="@+id/btnCancelBillingNotifications"
        android:layout_gravity="top|end"
        ... />

</FrameLayout>

    Or you can use DrawableBadge

    • 3