Add new `Banner` component

[sfdexter]

trafficstars

https://material.io/go/design-banner

[joniruokamo]

When is this component coming out?

[KevinGiacomino]

Hey, not available yet ?

[ldjcmu]

Hi all,

Internally we're not seeing a lot of requests for this component versus using a Card. Can those of you that want to see the component as part of the library provide example use cases where a Card or Dialog with the information would not suffice?

[cesarferreira]

What about the animation?

I already made a version of this: https://github.com/cesarferreira/MaterialComponent.Banner

the only issue is a small repetition of the hidding animation (you can check the example)

[Ferdzz]

Here are a few reasons I feel it would be good to have an official component

• Standard animation between various applications using the component
• Standard styling & layout based on the official guidelines without having to implement them in a DIY style
• Faster implementation of the banner functionality through an existing API
• Stable & bug-free

Let me know what you think of these / if you think of more reasons

[tyczj]

Example use case (for me) would be to show the user that they dont have an internet connection currently. There isn't really a good way currently to communicate to the user about something critical such as internet, let alone other minor informational things that are not disruptive to using the app.

My use case is I have a RecyclerView that takes up the whole screen and I feel that this component could just slide unintrusively in with information. While internet is crucial to updating stuff its not crucial to using the app in the sense that they can continue using the app and things will update later

[XyrizTan]

I was able to achieve this effect using TransitionManager https://developer.android.com/training/transitions/

My xml goes like this (I'll omit the other attributes):

<LinearLayout android:id="@+id/rootContainer">
    <include layout="@layout/toolbar" />
    <androidx.cardview.widget.CardView android:id="@+id/banner" android:visibility="gone"/>
    <!--Other content-->
</LinearLayout>

rootContainer is the root/parent view, which in my case is a vertical LinearLayout banner is any view you want to show/hide

    private fun showNoConnectionBanner() {
        TransitionManager.beginDelayedTransition(rootContainer, BannerTransition())
        banner.visibility = View.VISIBLE
    }

    private fun hideNoConnectionBanner() {
        TransitionManager.beginDelayedTransition(rootContainer, BannerTransition())
        banner.visibility = View.GONE
    }

You can supply your own transition, what I made looks like this: BannerTransition.kt

class BannerTransition : TransitionSet() {
    init {
        init()
    }

    private fun init() {
        ordering = TransitionSet.ORDERING_TOGETHER

        addTransition(ChangeBounds())
            .addTransition(Slide(Gravity.TOP))
    }
}

[sergivonavi]

I've created a library according to the Material design Banners specs (almost).

You can check it here: https://github.com/sergivonavi/MaterialBanner

[joshuamking-driveclutch]

@ldjcmu Does the material-components-android project accept PR's for new components?

[charleston10]

People who created the separate component outside the material repository could create a direct pull request on lib Maintaining two repositories is kind of complicated to be honest Although the project was very good, congratulations

[0xGuybrush]

Internally we're not seeing a lot of requests for this component versus using a Card. Can those of you that want to see the component as part of the library provide example use cases where a Card or Dialog with the information would not suffice?

@ldjcmu could you elaborate on this a bit? Do you mean —

• that to implement the Banner design pattern we don't need a Banner Android component per se, and we can just use a card somehow?
• that the Banner pattern itself is unneeded as described on the Material Design site?

I think that there's a good use-case outlined for the Banner component on the material.io website, but I'd take guidance if something else should be preferred. (Part of the reason of looking into Material Design is to try and adopt established best practice so definitely not a UX expert).

As someone coming at this new, it's a bit confusing.

[ldjcmu]

I agree it's confusing. I meant to say that we're seeing people workaround it with components like cards and that it's not been coming up as one of the top requests over say, Sliders. We do accept PRs and are happy to take a look at one submitted, hopefully with a catalog demo and tests :)

I'll resurface to our new component product managers the request.

[0xGuybrush]

OK, thanks.

When you mention that people are working around it — is that:

• developers saying "I don't need a dedicated Banner component, I can implement it as a card with different styling" or
• the UX designers saying "actually, we're not using Banner as much as we thought, you really only need "Snackbars" and "Dialogs".

Sorry for banging the drum a bit, but the README says the repo is maintained jointly by "a core team of engineers and UX designers at Google", so just trying to find out which angle you're coming from when you say "we" or "internally" (design vs dev).

Don't mind if I need to roll my own (or use one of the ones linked above), but want to make sure I'm about to implement something that's soon to be considered deprecated. Presume that if you're open to taking PRs though it'd be fair to say that the Banner should be used, it's just not highest priority to have a turn-key implementation of?

Thanks Dave

[Ein6tein]

Yeah... Banner would be actually really helpful to have!

[nikiJava]

Hello!) Do you plan to release banners?

[EvgenyTerebenin]

Hi! I found custom view similar to banner in IOSched repository. Look at this https://github.com/google/iosched/blob/master/mobile/src/main/res/layout/item_codelabs_information_card.xml

[bpappin]

Hi all,

Internally we're not seeing a lot of requests for this component versus using a Card. Can those of you that want to see the component as part of the library provide example use cases where a Card or Dialog with the information would not suffice?

we really need the component as an option to really invest in it, and get the designers on board, but I can tell you that I want to use it as an in-app persistent notification. A little like a Snackbar that is persistent on a view, then the user needs to take action to activate the view.

[fanshtorm]

I need this component!

[skreenr]

My 2 Cents: Sure it makes all the sense to implement Banner, especially since it's up there in material.io The side effect of ignoring it is, you essentially dissing what UI design gurus preachin For consistency sake, it's got to be there and available to devs On the somewhat convoluted defense of not seeing much need - you may as well say people can implement any UI widgets they wish. Technically true, but, hey, there's got to be a better way , right?

Bottom line: Get it done, and get it over with!

[TWiStErRob]

I'll resurface to our new component product managers the request.

@ldjcmu a bump on this 4 years and 100 👍🏻 later.

By "internal" do you mean Google? Because IMO that doesn't really represent the ecosystem of app developers as a whole, see all the reactions on this issue.

As a sidenote I would like to call your and their attention to this awesome GitHub feature: https://github.com/material-components/material-components-android/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc

Re: "we're seeing people workaround", which means that there's need, but since it's not available, everyone rolls their own, because they have to.

[skreenr]

Google needs to stay consistent to project credible mobile-UX thought leadership. Material' as a whole is a good design philosophy, and as such it needs a backing in the form of working code Lacking in the code takes away from, discredits the idea How is not this simple thing clear?

[backslashV]

You can check it here: https://github.com/sergivonavi/MaterialBanner

build.gradle can't download it anymore! Failed to resolve: com.sergivonavi:materialbanner:1.2.0

[TWiStErRob]

@backslashV Because it's only in jcenter()... @sergivonavi could you publish to mavenCentral()?

[cyb3rko]

It looks like it isn't included in Material You (https://m3.material.io/components). As this is the new standard, I suppose to close this issue, right?

[hunterstich]

@cyb3rko,

You're right that this isn't a component that's been brought forward with Material You. If that changes in the future, we can re-open this or create a new issue that more specifically tracks a Material3 banner.