Jetpack Compose BottomDrawerScaffold (Material Bottom Drawer)

Overview

BottomDrawerScaffold

Current Compose Version: 1.0.2

Compose BottomDrawerScaffold which implements the Material Bottom Drawer

https://material.io/components/navigation-drawer#bottom-drawer

The Drawer stays visible in collapsed state to show header or quick access features.

Edge-To-Edge support

Lint Ktlint

CodeFactor Maven Central

Add to your project

Add actual BottomDrawerScaffold library:

dependencies {
    implementation 'de.charlex.compose:bottom-drawer-scaffold:1.0.0-rc01'
}

How does it work?

Use like any other Scaffold

BottomDrawerScaffold(
    modifier = Modifier
    topBar = {                  //Optional
        ...
    },
    bottomBar = {               //Optional
        ...
    },
    floatingActionButton = {    //Optional
        ...
    },
    isFloatingActionButtonDocked = true,
    floatingActionButtonPosition = FabPosition.End,
    																//Add drawerTopInset for Edge-To-Edge Suppport
    scaffoldState = rememberBottomDrawerScaffoldState(drawerTopInset = LocalWindowInsets.current.statusBars.top), 
    snackbarHost = {
        ...
    },
    drawerModifier = Modifier,
    drawerGesturesEnabled = true,
    drawerPeekHeight = 150.dp,
    drawerBackgroundColor = Color.Transparent,  //Transparent drawer for custom Drawer shape
    drawerElevation = 0.dp,
    drawerContent = {
        Surface(                    //To add Padding to Drawer
            modifier = Modifier
                .padding(
                    start = 10.dp,
                    end = 10.dp,
                    top = 10.dp
                ),
            shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
            elevation = 4.dp
        ) {
            ...
        }
    }
) {
    content()
}

Preview

BottomDrawerScaffold

That's it!

License

Copyright 2021 Alexander Karkossa

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
You might also like...
🛸Voyager is a pragmatic navigation library built for, and seamlessly integrated with, Jetpack Compose.
🛸Voyager is a pragmatic navigation library built for, and seamlessly integrated with, Jetpack Compose.

Voyager is a pragmatic navigation library built for, and seamlessly integrated with, Jetpack Compose.

A small navigation library for Android to ease the use of fragment transactions & handling backstack (also available for Jetpack Compose).
A small navigation library for Android to ease the use of fragment transactions & handling backstack (also available for Jetpack Compose).

A small navigation library for Android to ease the use of fragment transactions & handling backstack (also available for Jetpack Compose).

A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose
A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose

A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose

A small navigation library for Jetpack Compose with state saving, backstack and animations support.

A small navigation library for Jetpack Compose with state saving, backstack and animations support.

An efficient TabLayout implemented in Jetpack Compose 🚀
An efficient TabLayout implemented in Jetpack Compose 🚀

MagicTabLayout An efficient TabLayout library implemented in Jetpack Compose 🚀 Anatomy MagicTabLayout tabIndicatorColor (Optional, default value: blu

A lightweight library to help you navigate in compose with well typed functions.

TypedNavigation A lightweight library to help you navigate in compose with well typed functions. Installation: You can add this library to your projec

Navigation for compose multiplatform

Navigation for compose multiplatform

A simple, highly customizable compose navigation component for Android & Desktop platform.
A simple, highly customizable compose navigation component for Android & Desktop platform.

介绍 一个简单并提供高度扩展功能的 Compose 导航组件,同时支持 Android 和 Desktop 平台。 常用功能 使用 下载 // Android implementation("io.github.succlz123:compose-screen-android:0.0.1") //

Bottom-App-Bar-with-Bottom-Navigation-in-Jetpack-compose-Android - Bottom App Bar with Bottom Navigation in Jetpack compose
Bottom-App-Bar-with-Bottom-Navigation-in-Jetpack-compose-Android - Bottom App Bar with Bottom Navigation in Jetpack compose

Bottom-App-Bar-with-Bottom-Navigation-in-Jetpack-compose-Android This is simple

New style for app design simple bottom navigation with side navigation drawer UI made in Jetpack Compose.😉😎
New style for app design simple bottom navigation with side navigation drawer UI made in Jetpack Compose.😉😎

BottomNavWithSideDrawer New style for app design simple bottom navigtaion with side navigation drawer UI made in Jetpack Compose. 😉 😎 (Navigation Co

Bottom Navigation widget component inspired by the Google Material Design Guidelines at https://www.google.com/design/spec/components/bottom-navigation.html
Bottom Navigation widget component inspired by the Google Material Design Guidelines at https://www.google.com/design/spec/components/bottom-navigation.html

Material Bottom Navigation Library Lightweight Bottom Navigation library component inspired by the Google Material Design Guidelines at https://www.go

Simple bottom navigation with side navigation drawer using Jetpack navigation UI made in Kotlin
Simple bottom navigation with side navigation drawer using Jetpack navigation UI made in Kotlin

BottomNavWithSideNavApp simple bottom navigation with side navigation drawer usi

Navigation Drawer Bottom Navigation View
Navigation Drawer Bottom Navigation View

LIVE #019 - Toolbar, Navigation Drawer e BottomNavigationView com Navigation Com

Simple and lightweight UI library for user new experience, combining floating bottom navigation and bottom sheet behaviour. Simple and beautiful.
Simple and lightweight UI library for user new experience, combining floating bottom navigation and bottom sheet behaviour. Simple and beautiful.

Simple and lightweight UI library for user new experience, combining floating bottom navigation and bottom sheet behaviour. Simple and beautiful.

The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.
The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.

MaterialDrawer ... the flexible, easy to use, all in one drawer library for your Android project. What's included 🚀 • Setup 🛠️ • Migration Guide 🧬

Android drawer icon with material design animation
Android drawer icon with material design animation

LDrawer Android drawer icon with material design animation Note Basically same as appcompat_v7 version 21, you can use appcompat_v7 compile 'com.andro

Navigation Drawer Activity with material design style and simplified methods

MaterialNavigationDrawer Navigation Drawer Activity with material design style and simplified methods       It requires 10+ API and android support v7

A skeleton of google's appcompat android navigation drawer with material design.
A skeleton of google's appcompat android navigation drawer with material design.

Lollipop AppCompat Skeleton A skeleton of google's appcompat android navigation drawer with material design. Compatible to work on 4.0+ Based on Googl

Releases(1.1.0-beta02)
Owner
Alexander Karkossa
Alexander Karkossa
New style for app design simple bottom navigation with side navigation drawer UI made in Jetpack Compose.😉😎

BottomNavWithSideDrawer New style for app design simple bottom navigtaion with side navigation drawer UI made in Jetpack Compose. ?? ?? (Navigation Co

Arvind Meshram 5 Nov 24, 2022
Navigation Drawer Bottom Navigation View

LIVE #019 - Toolbar, Navigation Drawer e BottomNavigationView com Navigation Com

Kaique Ocanha 6 Jun 15, 2022
The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.

MaterialDrawer ... the flexible, easy to use, all in one drawer library for your Android project. What's included ?? • Setup ??️ • Migration Guide ??

Mike Penz 11.6k Nov 21, 2022
A simple & curved & material bottom navigation for Android written in Kotlin with ♥ .

A simple & curved & material bottom navigation for Android written in Kotlin with ♥ .

Hamidreza Etebarian 1.1k Nov 19, 2022
Implementing bottom navigation in jetpack compose

Compose-Bottom-Navigation Implementing bottom navigation in jetpack compose Add the Navigation dependency Open the app's build file, found at app/buil

Steve Chacha 5 Dec 26, 2021
A library that you can use for bottom navigation bar. Written with Jetpack Compose

FancyBottomNavigationBar A library that you can use for bottom navigation bar. W

Alperen Çevlik 3 Jul 27, 2022
CustomNavigationDrawer - Custom Navigation Drawer with compose

An easy sample to explore navigation component and navigation drawer from Jetpac

rafael altamirano 0 Jan 4, 2022
A flexible, easy to use, unique drawer library for your Android project.

Duo Navigation Drawer This Android library provides an easy way to create an alternative navigation drawer for android. Instead of a drawer that slide

PSD 1.1k Nov 17, 2022
BubbleTabBar is bottom navigation bar with customizable bubble like tabs

BubbleTabBar BubbleTabBar is bottom navigation bar with customizable bubble like tabs Usage <com.fxn.BubbleTabBar android:id="@+id/

Akshay sharma 570 Nov 21, 2022
Android multi-module navigation built on top of Jetpack Navigation Compose

MultiNavCompose Android library for multi-module navigation built on top of Jetpack Navigation Compose. The goal of this library is to simplify the se

Jeziel Lago 22 Nov 18, 2022