App bars · Mobile app

App bars in Mobile app: 7 designs — Detail Page Bar · Greeting Bar with Account · Immersive Transparent Bar · Large Title Bar

RTL VerifiedLTR Verified Mobile app

Back, title and action — the title appears once the heading scrolls away

Intermediate

Code Prompt

RTL VerifiedLTR Verified Mobile app

The greeting follows the clock, and the balance can be hidden

Intermediate

Code Prompt

RTL VerifiedLTR Verified Mobile app

Transparent over the cover, gaining a surface once it scrolls past

Advanced

Code Prompt

RTL VerifiedLTR Verified Mobile app

The large title collapses into a compact one on scroll

Advanced

Code Prompt

RTL VerifiedLTR Verified Mobile app

Progress computed from the scrollable height, not from scroll position alone

Intermediate

Code Prompt

RTL VerifiedLTR Verified Mobile app

Search lives in the bar, with a cancel button that appears on focus

Intermediate

Code Prompt

RTL VerifiedLTR Verified Mobile app

A segment that swaps content and recomputes the visible total

Advanced

Code Prompt

Designs