BottomAppBarImplementation

An example of implementing BottomAppBar: Material Components for Android

Generate Convert Improve

Install / Use

/learn @ranger163/BottomAppBarImplementation

About this skill

Quality Score

0/100

README

BottomAppBarImplementation

An example of implementing BottomAppBar: Material Components for Android based on <a href="https://medium.com/material-design-in-action/implementing-bottomappbar-material-components-for-android-f490c4a01708">this article<a/> on meduim.

<h3 name="efd0" id="efd0" class="graf graf--h3 graf-after--figure"><strong class="markup--strong markup--h3-strong">BottomAppBar Attributes</strong></h3>

<blockquote name="36da" id="36da" class="graf graf--blockquote graf-after--figure"><strong class="markup--strong markup--blockquote-strong">backgroundTint </strong>is the attribute for setting BottomAppBar background color.</blockquote> <blockquote name="644e" id="644e" class="graf graf--blockquote graf-after--blockquote"><strong class="markup--strong markup--blockquote-strong">fabAlignmentMode </strong>attribute determines the position of the FAB either being at the center or at the end of BottomAppBar. Below screenshot shows FAB alignment when fabAlignmentMode is set to end.</blockquote>

<blockquote name="d7b2" id="d7b2" class="graf graf--blockquote graf-after--figure"><strong class="markup--strong markup--blockquote-strong">fabCradleDiameter </strong>specifies the diameter of the cradle containing the FAB.</blockquote>

<blockquote name="3424" id="3424" class="graf graf--blockquote graf-after--figure"><strong class="markup--strong markup--blockquote-strong">fabCradleRoundedCornerRadius </strong>specifies the radius of the corner curve at the meeting point of cradle and horizontal part of the BottomAppBar.</blockquote>

<blockquote name="5821" id="5821" class="graf graf--blockquote graf-after--figure"><strong class="markup--strong markup--blockquote-strong">fabCradleVerticalOffset </strong>specifies the offset of the cradle from the bottom.</blockquote>

<h3 name="efd0" id="efd0" class="graf graf--h3 graf-after--figure"><strong class="markup--strong markup--h3-strong">Menu and Navigation Drawer Control</strong></h3>

<h3 name="efd0" id="efd0" class="graf graf--h3 graf-after--figure"><strong class="markup--strong markup--h3-strong">FAB toggle example</strong></h3>

Related Skills

clearshot

Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.

openpencil

2.0k

The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.

HappyColorBlend

HappyColorBlendVibe Project Guidelines Project Overview HappyColorBlendVibe is a Figma plugin for color palette generation with advanced tint/shade blending capabilities. It allows designers to

Flyaro-waffle-app

Waffle Delight - Full Stack MERN Application Rules & Documentation Project Overview A comprehensive waffle delivery application built with MERN stack featuring premium UI/UX, admin management, a

ranger163

View profile

View on GitHub

GitHub Stars12

CategoryDesign

Updated4mo ago

Forks6

ranger163/BottomAppBarImplementation

Languages

Kotlin

Security Score

77/100

Audited on Dec 4, 2025

No findings