DEV Community

Daniel Gomez
Daniel Gomez

Posted on

1

MaterialComponents, CoordinatorLayout, AppBarLayout, Toolbar and automatic elevation Spike

MaterialComponents, CoordinatorLayout, AppBarLayout, Toolbar and automatic elevation Spike

Here's an example of how to use themes to get automatic Toolbar elevation without extra code or custom listeners.

Use AppBarLayout
from MaterialComponents for it.

How to

  1. Your app style should use a MaterialCompoment style, like src/main/res/values/styles.xml.
  2. Setup you AppBarLayout:

    • Use any MaterialCompoments style for this component like: Widget.MaterialComponents.AppBarLayout.Surface.
    • Set app:liftOnScroll="true" to enable the automatic elevation based on scroll.
  3. Setup your scrolling view:

    • Set app:layout_behavior="@string/appbar_scrolling_view_behavior.

And that's all :)

Results

Alt Text

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay