How to display an indicator bubble on top of the image?

Question

I have a string value (e.g., numbers 1, 2, 3, ...) and I have to display the ones that are in the upper right corner of my ImageView.
How can i do this in android?
I added the image below, in which I show the arrows: do I want something like this to appear on top of my ImageView?

Please can someone help me?

Answer 1

try this: create layout.xml

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/main_widget" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="20dip" android:focusable="true" > <ImageView android:id="@+id/icon" android:layout_width="60dip" android:layout_height="60dip" android:layout_marginTop="8dp" android:background="@drawable/logo" android:contentDescription="image" android:scaleType="center" /> <TextView android:id="@+id/txt_count" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="-10dip" android:layout_toRightOf="@+id/icon" android:background="@drawable/badge_count2" android:contentDescription="badge" android:gravity="center" android:text="1" android:textColor="@color/White" android:textStyle="bold" android:visibility="visible" /> </RelativeLayout> 

And create drawable\badge_count2.xml for the rectangle

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <solid android:color="@color/red" > </solid> <stroke android:width="2dp" android:color="#FFFFFF" > </stroke> <padding android:bottom="2dp" android:left="7dp" android:right="7dp" android:top="3dp" /> <corners android:radius="10dp" > </corners> 

And create the values\color.xml and add:

  <color name="red">#e50822</color> 

OutPut:

Update: try to create drawable\badge_count2.xml for the circle

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadius="0dp" android:shape="ring" android:thicknessRatio="1.9" android:useLevel="false" > <solid android:color="@color/red" /> <stroke android:width="2dp" android:color="#FFFFFF" /> </shape> 

Answer 2

To simplify and view a large number of views, you can use the View badger library. This library provides various styles and animations for these badgers. Here you can find the library and demo project here .