Skip to content
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
buildSrc Drawer's shadow improvements Apr 17, 2019
demo
docs Better Dokka configuration with Docs Feb 23, 2019
gradle/wrapper
materialbottombar
navigation
.gitattributes
.gitignore
build.gradle.kts
gradle.properties Initial commit Jul 24, 2018
gradlew Gradlew permissions Aug 22, 2018
gradlew.bat Initial commit Jul 24, 2018
readme.md Updated readme Mar 13, 2019
settings.gradle.kts

readme.md

Material Bottom bar

Download MinSDK star this repo fork this repo

Material Bottom Bar is an Android library that let you implement a customized BottomAppBar and a bottom drawer with just few simple steps.

Dsl ready

Navigation Component ready

Demo application WhatsBook

Wiki

Full wiki here!

Setup

Add the library:

implementation "studio.forface.materialbottombar:materialbottombar:$version"

Add the optional navigation extension:

implementation "studio.forface.materialbottombar:materialbottombar-navigation:$version"

Getting started

Layout ( minimal )

First you need to use a MaterialBottomDrawerLayout as parent of MaterialBottomAppBar.

<studio.forface.materialbottombar.layout.MaterialBottomDrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawerLayout"   	    
    android:layout_width="match_parent"    
    android:layout_height="match_parent">
	
	<!-- Here it goes your content -->
    
    <studio.forface.materialbottombar.appbar.MaterialBottomAppBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"/>
	    
</studio.forface.materialbottombar.layout.MaterialBottomDrawerLayout>

More info about MaterialBottomDrawerLayout and MaterialBottomAppBar

Drawer ( minimal )

with DSL
drawerLayout.drawer = drawer {
    header {
        iconUrl = IMAGE_URL
        titleText = "My drawer"
    }
    body {
        onItemClick = { id, title -> /* do something */ }
        primaryItem( "Messages" ) {
            id = 1
            iconResource = R.drawable.ic_message_black_24dp
        }
        primaryItem( contactsSpannable ) {
            id = 2
            iconDrawable = contactsDrawable
        }
        divider()
        primaryItem( R.string.settings_drawer_title ) {
            id = 3
            iconBitmap = settingsBitmap
        }
    }
}

without DSL:

val header = MaterialDrawer.Header()
    .iconUrl( IMAGE_URL )
    .titleText( "My drawer" )
	    
val messages = PrimaryDrawerItem()
    .id( 1 )	
    .titeText( "messages" )
    .iconResource( R.drawable.ic_message_black_24dp )

val contacts = PrimaryDrawerItem()
    .id( 2 )
    .titleSpannable( contactsSpannable )
    .iconDrawable( contactsDrawable )

val settings = PrimaryDrawerItem()
    .id( 3 )
    .titleRes( R.string.settings_drawer_title )
    .iconBitmap( settingsBitmap )

val body = MaterialDrawer.Body()
    .itemClikListener { id, title -> /* do something */ }
    .items( listOf(
        messages,
        contacts,
        Divider(),
        settings
    ) ) 

drawerLayout.drawer = MaterialDrawer( header, body )

More info about Drawer and Panels

Android Navigation Components integration

with DSL ( constructor injected NavController )
navDrawer( navController ) {
    header { ... }
    body {
        primaryItem( "messages" ) {
            navDestinationId = myDestinationId
            navDestinationBundle = myBundle
        }
        primaryItem( "contacts" ) {
            navDestination( myDestinationId ) { mapOf( "arg1" to 15 ) }
        }
        secondaryItem( "favorites" ) {
            navDirections = myNavDirections
        }
    }
}
NavController can also be set later
navDrawer {
    ...
}
in the following ways:
  • myNavDrawer.navController = navController
  • myToolbar.setupWithNavController( navController, myNavDrawer, myNavPanel1, myNavPanel2 )
  • myMaterialBottomDrawerLayout.setupWithNavController( navController )
without DSL
val header = MaterialDrawer.Header()
    .iconUrl( IMAGE_URL )
    .titleText( "My drawer" )

val messages = PrimaryNavDrawerItem()
    .titeText( "messages" )
    .navDestination( myDestinationId )
    .navDestinationBundle( myBundle )
    
val contacts = PrimaryNavDrawerItem()
    .titeText( "contacts" )
    .navDestination( myDestinationId ) { mapOf( "arg1" to "hello" ) }

val body = MaterialNavPanel.Body()
    .itemClickListener { id, title -> /* do something */ }
    .items( listOf( messages, contacts ) )

drawerLayout.drawer = MaterialNavDrawer( header, body )

TIPS

The lib is built on 3 focal points:

  • Customization
  • Easiness
  • Compactness

The first two are pretty self-explanatory, while the third one means that you should be able to write your fully customized Drawer with the less lines of code as possible; in other word is suggested to use an approach like this:

with DSL:

drawer {
    header { ... }
    body {
        val myBadge = Badge {
            backgroundCornerRadiusDp = 999f // Round badge
            backgroundColorRes = R.color.color_badge_background
            contentColorRes = R.color.color_badge_content
        }
        allPrimary { 
            badgeItem = myBadge 
            titleSizeSp = 20f
            titleColor = Color.RED
        }
        primaryItem( "First" ) { badgeContentText = "1" " }
        primaryItem( "Second" ) { /* No badge content, so the badge will be hidden */ }
    }
}

withou DSL:

val myBadge = BadgeItem()
    .backgroundCornerRadiusDp( 999f ) // Round badge
    .backgroundColorRes( R.color.color_badge_background )
    .contentColorRes( R.color.color_badge_content )

class MyPrimaryDrawerItem() { init {
    badge( myBadge )
    titleSizeSp( 20f )
    titleColor( Color.RED )
} }

val firstItem = MyPrimaryDrawerItem()
    .titleText( "First")
    .badgeContentText( "1" )

val secondItem = MyPrimaryDraweItem()
    .titleText( "Second" )
    // No badge content, so the badge will be hidden.
You can’t perform that action at this time.