Android实现图标右上角红色小圆球提示气泡(不需要导入第三方）

首先 先看 原型图



相信大家都熟悉，在Android开发微信、QQ、短消息、应用商店等应用时，会考虑在图标右上角红色小圆球提示气泡再加上未读信息的数量，在应用商店上加上可以升级的应用数量，这样不占太大空间还能达到提示的目的。

实现该功能可以重写View的onDraw完成该功能，也可以写布局文件完成该功能。现在使用布局文件完成。暂时先简单写一个TextView右上角的提示小红球，也可以根据需要写一个ImageView右上角的小红球提示

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<TextView
android:padding="2dip"
android:layout_width="match_parent"
android:layout_height="50dip"

android:gravity="center"
android:text="呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵" />

<FrameLayout
android:padding="1dip"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<TextView
android:layout_width="20dip"
android:layout_height="20dip"
android:layout_gravity="right"
android:background="@drawable/tips_textview_bg"
android:gravity="center"
android:text="9"
android:textSize="15dip"
android:textStyle="bold"
android:textColor="@android:color/white" />
</FrameLayout>

</FrameLayout>

依赖的tips_textview_bg.xml文件

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android= "http://schemas.android.com/apk/res/android" android:shape= "oval" android:useLevel= "false" > <solid android:color= "#FF0000" /> </shape>
上面是通过FrameLayout来完成布局的，当然，也可以使用RelativityLayout的可以叠层布局实现。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffffff"
android:layout_marginTop="15dp"
>
<ImageView
android:id="@+id/ItemImage"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:padding="4dp"/>

<TextView
android:id="@+id/ItemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/ItemImage"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"/>

<TextView
android:id="@+id/item_tips"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignRight="@id/ItemImage"
android:background="@drawable/tips_textview_bg"
android:gravity="center"
android:layout_marginTop="15dp"
android:layout_marginRight="10dp"
android:focusable="false"
android:text="3"
android:textColor="#ffffff"
android:textSize="15sp" />
</RelativeLayout>

注意：为了让红色的TextView可以显示在ImageView右上角，所以必须把TextView定义在ImageView下面。

为了方便，我同样的依赖的tips_textview_bg.xml文件

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android= "http://schemas.android.com/apk/res/android"
android:shape= "oval"
android:useLevel= "false" >

<solid android:color= "#FF0000" />

</shape>