Bottombar: Why should we handle business logic(setting badge visibility) in a UI component?

Created on 28 Jul 2016  路  3Comments  路  Source: roughike/BottomBar

BottomBar is a nice UI component, but I found it really hard to understand why the author @roughike designed the badge feature like that.

A badge' visibility has nothing to do with actions performed by user, such as switching tabs. But without doubt it's associated with business logics. For instance, there is a tab contains a list of chat messages, the badge should never be gone if the user didn't read the message.

But here by default, the badge will be gone when user selects it. Even if I force to disable the auto hide feature badge.setAutoHideOnSelection(false);, the badge will still be gone when the user leaves that tab(even if the user hasn't read that message).

Then I thought there might be other solutions to help me. So I found setAutoShowAfterUnSelection(autoShowAfterUnSelection). Sure it's easy to understand from its name. But why would I want to show a badge if it has been called hide()?

See? The badge's behaviors should only be concerned by business logic instead of 'hard code' it in the UI component.

Most helpful comment

@sirvon Sure.

Step 1. First I create a badge for unread message and hide it.

BottomBarBadge messageBadge = bottomBar.makeBadgeForTabAt(0, Color.RED, 0);
// I want the unread badge to be a red dot, instead of being a giant unread count badge
messageBadge.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 0);
// I want to keep the badge when I select the tab(if the badge is showing)
messageBadge.setAutoHideOnSelection(false);
// I don't want to show the badge when I leave a tab with a hidden badge
messageBadge.setAutoShowAfterUnSelection(false);
// After initiation, there is no unread messages so hide it
messageBadge.hide();

Now it ready to show this unread badge, but of course we need some tricks.

Step 2. Show or hide this unread badge

private void showOrHideBadge(int unreadMessageCount) {
    if (unreadMessageCount > 0) {
        // Keep the badge when you leave this tab if it is visible
        messageBadge.setAutoShowAfterUnSelection(true);
        messageBadge.show();
    } else {
        // Still, you don't wanna show the badge when you leave this tab
        messageBadge.setAutoShowAfterUnSelection(false);
        messageBadge.hide();
    }
}

All 3 comments

@ryanhoo So, what was your solution?
Can you elaborate if you were able to find a workaround?

thanks

@sirvon Sure.

Step 1. First I create a badge for unread message and hide it.

BottomBarBadge messageBadge = bottomBar.makeBadgeForTabAt(0, Color.RED, 0);
// I want the unread badge to be a red dot, instead of being a giant unread count badge
messageBadge.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 0);
// I want to keep the badge when I select the tab(if the badge is showing)
messageBadge.setAutoHideOnSelection(false);
// I don't want to show the badge when I leave a tab with a hidden badge
messageBadge.setAutoShowAfterUnSelection(false);
// After initiation, there is no unread messages so hide it
messageBadge.hide();

Now it ready to show this unread badge, but of course we need some tricks.

Step 2. Show or hide this unread badge

private void showOrHideBadge(int unreadMessageCount) {
    if (unreadMessageCount > 0) {
        // Keep the badge when you leave this tab if it is visible
        messageBadge.setAutoShowAfterUnSelection(true);
        messageBadge.show();
    } else {
        // Still, you don't wanna show the badge when you leave this tab
        messageBadge.setAutoShowAfterUnSelection(false);
        messageBadge.hide();
    }
}

In the newest versions, you can have the badge stay visible as long as you like. See the README.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alizarei95 picture alizarei95  路  4Comments

javiersantos picture javiersantos  路  5Comments

giautm picture giautm  路  4Comments

cmonfortep picture cmonfortep  路  5Comments

mag2007 picture mag2007  路  8Comments