Scaffolding NavigationIcon | BottomAppBar | FloatingActionButton: Jetpack Compose - 25

Описание

In this tutorial, we dive deeper into enhancing the top app bar in Jetpack Compose, focusing on adding a navigation button and implementing scroll behavior to enhance user navigation and interface dynamism. We start by exploring how to insert a navigation icon on the app bar, facilitating user orientation by indicating a return path to previous screens, exemplified through a South Africa country info card use case. Additionally, we demonstrate how to make the top app bar responsive to scrolling, hiding itself for a cleaner look as the user scrolls through content. Beyond the top app bar, we extend our UI toolkit by introducing the bottom app bar and floating action button (FAB), key elements in Android app design for accessing primary actions and navigation. The tutorial covers the technical steps for integrating these components into an app, from adding icons and adjusting scroll behavior to setting up the FAB with the correct elevation and background. Perfect for developers looking to polish their Android UIs, this video provides practical insights into Jetpack Compose's capabilities for building sophisticated app layouts.

#AndroidDevelopment #JetpackCompose #UIEnhancements #NavigationButton #ScrollBehavior #FloatingActionButton #BottomAppBar #AppDesignTips

Chapters:
00:00 Intro
00:29 NavigationIcon intro
01:07 Scroll animation
01:32 BottomAppBar & Floating Action Bar
01:55 Demo of NavigationIcon
02:37 Demo of Scroll animation
04:02 Demo of BottomAppBar
05:02 Demo of FloatingActionButton
07:05 Extro

Follow me on Twitter: https://twitter.com/anilvdeshpande

Github link to the demo code - https://github.com/AnilDeshpande/CountryInfoApp/tree/live-coding