Information Update little red dot display-Use of the custom control badgeview

Currently, most information publishing applications have the following function: When background data updates, such as system messages or interactions between users, you are prompted to have new information by displaying a red dot on the control. In general, we can hide a red dot in the layout file. When we detect data updates, We can display the hidden red dot. However, this solution has some drawbacks. For example, it is inconvenient to use. You need to add a red dot layout on many interfaces, and it is not flexible to use.

This article introduces an open source third-party control, badgeview, to implement the same functions. It is very convenient and powerful to use.

First look at the interface

We can see that the effect is very good, all kinds of requirements can be met, and you can also add Custom Animation effects, instantly make your app grow taller!

The following describes how to use badgeview.

// View target = findviewbyid (R. id. default_target); badgeview badge = new badgeview (this, target); badge. settext ("1"); badge. show (); // set the position btnposition = (button) findviewbyid (R. id. position_target); badge1 = new badgeview (this, btnposition); badge1.settext ("12"); badge1.setbadgeposition (badgeview. position_bottom_left); btnposition. setonclicklistener (New onclicklistener () {@ overridepublic void onc Lick (view v) {badge1.toggle () ;}}); // set display text/font color/background color btncolour = (button) findviewbyid (R. id. colour_target); badge2 = new badgeview (this, btncolour); badge2.settext ("New! "); Badge2.settextcolor (color. blue); badge2.setbadgebackgroundcolor (color. yellow); badge2.settextsize (12); btncolour. setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view v) {badge2.toggle () ;}}); // default animation effect btnanim1 = (button) findviewbyid (R. id. anim1_target); badge3 = new badgeview (this, btnanim1); badge3.settext ("84"); btnanim1.setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view V) {badge3.toggle (true) ;}}); // User-Defined animation btnanim2 = (button) findviewbyid (R. id. anim2_target); badge4 = new badgeview (this, btnanim2); badge4.settext ("123"); badge4.setbadgeposition (badgeview. position_top_left); badge4.setbadgemargin (15); badge4.setbadgebackgroundcolor (color. parsecolor ("# a4c639"); btnanim2.setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view v) {// sets the animation to be moved to, and sets the interpolation device, translateanimation anim = new translateanimation (-100, 0, 0); anim. setinterpolator (New bounceinterpolator (); // sets the animation duration anim. setduration (1000); // set the exit animation translateanimation anim2 = new translateanimation (0,-100, 0, 0); anim2.setduration (500); badge4.toggle (anim, anim2) ;}}); // sets the custom background image btncustom = (button) findviewbyid (R. id. custom_target); badge5 = new badgeview (this, btncustom); badge5.settext ("37"); badge5.setbackgroundresource (R. drawable. badge_ifaux); badge5.settextsize (16); btncustom. setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view v) {badge5.toggle (true) ;}}); // display a red dot tabwidget tabs = (tabwidget) on the tab) findviewbyid (Android. r. id. tabs); btntab = (button) findviewbyid (R. id. tab_btn); badge7 = new badgeview (this, tabs, 2); badge7.settext ("5"); btntab. setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view v) {badge7.toggle () ;}}); // The badgebtnclick = (button) findviewbyid (R. id. click_target); badge6 = new badgeview (this, btnclick); badge6.settext ("Click me"); badge6.setbadgebackgroundcolor (color. blue); badge6.settextsize (16); // set the Click Event badge6.setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view v) {toast. maketext (demoactivity. this, "clicked badge", toast. length_short ). show () ;}}); btnclick. setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view v) {badge6.toggle () ;}}); // badgebtnincrement = (button) findviewbyid (R. id. increment_target); badge8 = new badgeview (this, btnincrement); badge8.settext ("0"); btnincrement. setonclicklistener (New onclicklistener () {@ overridepublic void onclick (view v) {If (badge8.isshown () {badge8.increment (1) ;}else {badge8.show ();}}});

The above code is used to achieve the first effect. below is the third implementation.

BadgeView badge;View target;// *** test linear layout container ***target = findViewById(R.id.linear_target);badge = new BadgeView(this, target);badge.setText("OK");badge.show();// *** test relative layout container ***target = findViewById(R.id.relative_target);badge = new BadgeView(this, target);badge.setText("OK");badge.show();// *** test frame layout container ***target = findViewById(R.id.frame_target);badge = new BadgeView(this, target);badge.setText("OK");badge.show();// *** test table layout container ***target = findViewById(R.id.table_target);badge = new BadgeView(this, target);badge.setText("OK");badge.show();// *** test linear layout ***target = findViewById(R.id.linear_group_target);badge = new BadgeView(this, target);badge.setText("OK");badge.show();// *** test relative layout ***target = findViewById(R.id.relative_group_target);badge = new BadgeView(this, target);badge.setText("OK");badge.show();// *** test frame layout ***target = findViewById(R.id.frame_group_target);badge = new BadgeView(this, target);badge.setText("OK");badge.show();// *** test table layout ***target = findViewById(R.id.tablerow_group_target);badge = new BadgeView(this, target);badge.setText("OK");badge.show();

In fact, they are all similar, and the usage is basically the same.

The download link is provided at the end. You can see it clearly ~

Click to download