Introduction

A simple way to "badge" any given Android view at runtime without having to cater for it in layout

Tutorial Video


Informations

Creator
jgilfelt
jgilfelt
Git URL:
Language
Java
Min SDK:
Android 1.6
License:
Apache Software License 2.0
Created At:
Sep 27, 2011
Last Updated:
Jan 17, 2018
Star:
2924
Fork:
1094
Watcher count:
233
Tags

Description

A simple way to "badge" any given Android view at runtime without having to cater for it in layout.

Demos  ListAdapter

Note: If your aim is to replicate the iOS icon and TabBar badge UI for notifications, consider using Android UI conventions such as the number field of the Notification class rather than this method.

Usage

Simple example:

View target = findViewById(R.id.target_view);
BadgeView badge = new BadgeView(this, target);
badge.setText("1");
badge.show();

This project contains a fully working example application. Refer to the DemoActivity class for more custom badge examples, including custom backgrounds and animations. BadgeView is a subclass of TextView so you can use all of TextView's methods to style the appearance of your badge.

To use ViewBadger in your own Android project, simply copy android-viewbadger.jar (available from this repository's package downloads) into your project's /libs directory and add it to the build path.

Current Limitations

  • Badging Action Bar items is currently not supported #2
  • Badging views inside RelativeLayout with dependencies may break alignment #1

Credits

Author: Jeff Gilfelt

The code in this project is licensed under the Apache Software License 2.0. 
Copyright (c) 2011 readyState Software Ltd.

Step by Step

Step 1: Add Jar library into your project

To know how to add Jar library please view our tutorial Video here: https://www.youtube.com/watch?v=sruKDHHzuZA&feature=youtu.be

 

Step 2: Add Any View you want to show the Badge inside your layout resource file:

<RelativeLayout
        android:id="@+id/rlBadgeViewComeHere"
        android:layout_width="match_parent"
        android:layout_below="@id/textView"
        android:layout_marginTop="10dp"
        android:layout_height="50dp" android:background="#009088"></RelativeLayout>

 

Step 3: In the Code behind, add these code to show the Badge View:

        RelativeLayout rlBadgeViewComeHere = (RelativeLayout) findViewById(R.id.rlBadgeViewComeHere);
        BadgeView badgeView = new BadgeView(this, rlBadgeViewComeHere);
        badgeView.setText("1");
        badgeView.setBadgeBackgroundColor(Color.BLUE);
        badgeView.setBadgePosition(BadgeView.POSITION_TOP_LEFT);

        badgeView.show();

 

Discussion