i want to add badge to tab in my app as in iPhone.
Screen shot of badge used in iPhone is in the following link:
i have done some image like badge in android app ,its screen shot is in the following link:
this is not the exactly badge i want, i want badge on tab like in iPhone
can anybody suggest me to add badge to tab in android? Please help me.
thanks in advance.
This is possible by using the Android ViewBadger. Check This
This is an example of How to add a badge in tab
chat_tab.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="64dip"
android:layout_weight="1"
android:layout_marginLeft="-3dip"
android:layout_marginRight="-3dip"
android:orientation="vertical"
android:background="@drawable/tab_indicator" >
<ImageView
android:id="@+id/chat_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/chat_icon"
android:layout_centerHorizontal="true"/>
<TextView
android:id="@+id/new_notifications"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/chat_icon"
android:layout_toRightOf="@+id/chat_icon"
android:layout_marginLeft="-8dp"
android:layout_marginTop="0dp"
android:paddingTop="2dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingBottom="2dp"
android:textSize="8sp"
android:textStyle="bold"
android:textColor="@android:color/primary_text_dark"
android:background="@drawable/badge"
android:visibility="gone"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/chat"
style="@android:attr/tabWidgetStyle"
android:textColor="@android:color/tab_indicator_text"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
This is badge.xml (red circle for notifications background),TextView id:new_notifications background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<stroke android:width="2dp" android:color="#FFFFFF" />
<corners android:radius="10dp"/>
<padding android:left="2dp" />
<solid android:color="#ff2233"/>
</shape>
Then in the code you can simply do
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View chatTab = inflater.inflate(R.layout.chat_tab, null);
tvNewNotifications = (TextView) chatTab.findViewById(R.id.new_notifications);
intent = new Intent().setClass(MainTab.this, Chat.class);
tabSpec = tabHost
.newTabSpec("chat")
.setIndicator(chatTab)
.setContent(intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP));
As you can see my Relative Layout has a background @drawable/tab_indicator the tab indicator.xml is the framework's standard drawable of the tab,which i got from the sdk,i suggest you should also get it from the folder of the api in sdk as you also need to copy some images from the drawable folders,you can find it
your_sdk_drive:\sdk\platforms\android-8
I also looked for a solution for this in the android sdk and found none so i went and wrote a custom TabWidget for it.
The short version:
More info can be found here, including the source code for an example android project:
Enjoy!
After tweaking around with a few other solutions I came up with something simple and hope this would help someone.
create a custom tab layout tab_badge.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent">
<TextView
android:id="@+id/tab_badge"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/badge_background"
android:gravity="center"
android:layout_centerVertical="true"
android:textColor="@color/colorWhite"
android:textSize="20sp"
android:textStyle="bold"/>
<TextView
android:id="@+id/tab_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="16sp"
android:textColor="@color/colorWhite"
android:text="test"
android:textStyle="bold"
android:gravity="center"
android:textAppearance="@style/Widget.AppCompat.Light.ActionBar.TabText"
android:layout_toRightOf="@+id/tab_badge"/>
</RelativeLayout>
badge_background.xml is an oval drawable filled with the color you want for the badge
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<solid android:color="@color/colormaterialred500" />
</shape>
Extend textview to get myBadgeView class:
public class myBadgeView extends TextView {
private View target;
public myBadgeView(Context context, View target) {
super(context);
init(context, target);
}
private void init(Context context, View target) {
this.target = target;
}
public void updateTabBadge(int badgeNumber) {
if (badgeNumber > 0) {
target.setVisibility(View.VISIBLE);
((TextView) target).setText(Integer.toString(badgeNumber));
}
else {
target.setVisibility(View.GONE);
}
}
}
In your activity declare the tablayout as follows:
tabLayout = (TabLayout) findViewById(R.id.tab_layout);
TabLayout.Tab tab1 = tabLayout.newTab();
tab1.setCustomView(R.layout.tab_badge);
TextView tab_text_1 = (TextView) tab1.getCustomView().findViewById(R.id.tab_text);
tab_text_1.setText("Tab1");
tabLayout.addTab(tab1);
badge1 = new myBadgeView(this, tab1.getCustomView().findViewById(R.id.tab_badge)); tab1.getCustomView().findViewById(R.id.tab_badge);
//set the badge for the tab
badge1.updateTabBadge(badge_value_1);
You want to re-draw image of tab have look on this answer Updating Android Tab Icons
