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>

两种布局方式大家可以根据自己的需要选择，由于实现非常简单，效果图和Java代码我就不贴出来了，相信大家可以自己完成。

?