--ADVERTISEMENT--

Recent Posts

More
Tweet Share Share Share Share Share

March 24, 2020
Android Native Super Toolbar on Steroids

Summary

  • Animate the toolbar elevation when scrolling
  • Center horizontal the toolbar title
  • Use light title font
Also, it has been written 100% in Kotlin. ❤️

Download

This library is available in jitpack, so you need to add this repository to your root build.gradle at the end of repositories:
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
Add the dependency:
dependencies {
    implementation 'com.github.andrefrsousa:SuperToolbar:1.2.0'
}

Sample Project

We have a sample project in Kotlin that demonstrates the lib usages here.

Usage

It is recommended to check the sample project to get a complete understanding of all the features offered by the library.
In order to show the toolbar elevation you just need to call:
fun setElevationVisibility(show: Boolean)
If what to have the same effect found in Google Messages app for example, you to add a scroll listener to your RecyclerView or ScrollView. Like this:
myRecyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        super.onScrolled(recyclerView, dx, dy)
        toolbar.setElevationVisibility(recyclerView.canScrollVertically(-1))
    }
})

Customization

You can costumize your toolber using the following attributes:
// The duration of the elevation animation. By default is 250 miliseconds.
<attr name="superToolbar_animationDuration" format="integer"/>

// If you want to show the toolbar elevation when created. By default is false.
<attr name="superToolbar_showElevationAtStart" format="boolean"/>

// Center the toolbar title. By default is false.
<attr name="superToolbar_centerTitle" format="boolean"/>

// Use a light font as the toolbar title. Default is false.
<attr name="superToolbar_useLightFont" format="boolean"/>
Download From GitHub

Download complete project source code from GitHub
Read more »
Tweet Share Share Share Share Share

March 17, 2020
Android Readable Material Design BottomBar.

Yet another material bottom bar library for Android


Usage

  • Create your tabs.xml under your res/xml/ folder
<?xml version="1.0" encoding="utf-8"?>
<tabs>
    <tab
        drawable="@drawable/ic_home_black_24dp"
        text="@string/home" />

    <tab
        drawable="@drawable/ic_search_black_24dp"
        text="@string/search" />

    <tab
        drawable="@drawable/ic_shopping_basket_black_24dp"
        text="@string/bag" />

    <tab
        drawable="@drawable/ic_favorite_black_24dp"
        text="@string/favorite" />

    <tab
        drawable="@drawable/ic_account_circle_black_24dp"
        text="@string/profile" />
</tabs>
  • Add bottom bar to your layout
<com.iammert.library.readablebottombar.ReadableBottomBar
    android:layout_width="match_parent"
    android:layout_height="56dp"
    app:rbb_tabs="@xml/tabs"/>
  • Add listener
bottomBar.setOnItemSelectListener( object :ReadableBottomBar.ItemSelectListener{
    override fun onItemSelected(index: Int) {
    }
})
  • Set index at runtime
bottomBar.selectItem(index)
  • Customize if you need
<com.iammert.library.readablebottombar.ReadableBottomBar
    android:layout_width="match_parent"
    android:layout_height="56dp"
    app:rbb_tabs="@xml/tabs"
    app:rbb_textColor=""
    app:rbb_indicatorHeight=""
    app:rbb_indicatorColor=""
    app:rbb_initialIndex=""
    app:rbb_backgroundColor=""
    app:rbb_textSize=""
    app:rbb_activeItemType="text or icon"/>

Setup

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

dependencies {
    implementation 'com.github.iammert:ReadableBottomBar:0.2'
}
Download From GitHub

Download complete project source code from GitHub
Read more »
Tweet Share Share Share Share Share

March 17, 2020
Android Clip Navigation Bar Widget

A navigation bar widget inspired on Google Bottom Navigation mixed with Chips component.

Usage

<!-- bottom_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_home"
        android:title="Home"
        app:cnb_iconColor="@color/home"/>
    <item
        android:id="@+id/activity"
        android:icon="@drawable/ic_activity"
        android:title="Activity"
        app:cnb_iconColor="@color/activity"/>
    <item
        android:id="@+id/favorites"
        android:icon="@drawable/ic_heart"
        android:title="Favorites"
        app:cnb_iconColor="@color/favorites" />
    <item
        android:id="@+id/settings"
        android:icon="@drawable/ic_settings"
        android:title="Settings"
        app:cnb_iconColor="@color/settings" />
</menu>

<!-- layout.xml -->
<com.ismaeldivita.chipnavigation.ChipNavigationBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@color/white"
    app:cnb_menuResource="@menu/bottom_menu" />

Vertical orientation

ChipNavigationBar supports a vertical orientation mode. This is very useful for tablets or devices with large screens.
Just add the attribute cnb_orientationMode to your xml:
<com.ismaeldivita.chipnavigation.ChipNavigationBar
    android:id="@+id/bottom_menu"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:cnb_menuResource="@menu/test"
    app:cnb_orientationMode="vertical" />
... or programmatically call the method setMenuOrientation before inflate the menu:
menu.setMenuOrientation(MenuOrientation.VERTICAL)
menu.setMenuResource(R.menu.my_menu)
Note: The view exposes methods to expand and collapse the menu but we don't provide the implementation for the toggle button. Check the sample for a basic implementation.

Badges

The library supports badges on the menu items.
menu.showBadge(R.id.menu_home) 
menu.showBadge(R.id.menu_activity, 8)
menu.showBadge(R.id.menu_favorites, 88)
menu.showBadge(R.id.settings, 10000)

XML custom attributes

Menu xml custom attributes

attributedescriptiondefault
cnb_disabledColorcolor used for the disable stateR.attr.colorButtonNormal
cnb_unselectedColorcolor used for unselected state#696969
cnb_badgeColorcolor used for the badge#F44336
<menu
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cnb_disabledColor="#606060"
    app:cnb_unselectedColor="@color/my_unselected_color"
    app:cnb_badgeColor="@color/my_badge_color">
    ...

</menu>

MenuItem xml custom attributes

attributedescriptiondefault
android:ididrequired
android:enabledenabled statetrue
android:iconicon drawablerequired
android:titlelabel stringrequired
cnb_iconColorcolor used to tint the icon on selected stateR.attr.colorAccent
cnb_icontTintModePorterDuff.Mode to apply the color. Possible values: [src_over, src_in, src_atop, multiply, screen]null
cnb_textColorcolor used for the label on selected statesame color used for cnb_iconColor
cnb_backgroundColorcolor used for the chip backgroundsame color used for cnb_iconColor with 15% alpha
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/home"
        android:enabled="true"
        android:icon="@drawable/ic_home"
        android:title="@string/home"
        app:cnb_backgroundColor="@color/home_chip"
        app:cnb_iconColor="@color/home_icon"
        app:cnb_iconTintMode="src_in"
        app:cnb_textColor="@color/home_label" />

        ...

</menu>

ChipNavigationBar xml custom attributes

attributedescriptiondefault
cnb_menuResourcemenu resource fileoptional since you can set this programmatically
cnb_orientationModemenu orientation. Posisble values: [horizontal, vertical]horizontal
cnb_addBottomInsetproperty to enable the sum of the window insets on the current bottom padding, useful when you're using the translucent navigation barfalse
cnb_addTopInsetproperty to enable the sum of the window insets on the current bottom padding, useful when you're using the translucent status bar with the vertical modefalse
cnb_addLeftInsetproperty to enable the sum of the window insets on the current start padding, useful when you're using the translucent navigation bar with landscapefalse
cnb_addRightInsetproperty to enable the sum of the window insets on the current end padding, useful when you're using the translucent navigation bar with landscapefalse
cnb_minExpandedWidthminimum width for vertical menu when expanded0
<com.ismaeldivita.chipnavigation.ChipNavigationBar
    android:id="@+id/menu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cnb_menuResource="@menu/bottom_menu"
    app:cnb_orientationMode="horizontal"
    app:cnb_addBottomInset="false"
    app:cnb_addLeftInset="false"
    app:cnb_addRightInset="false"
    app:cnb_addTopInset="false"
    app:cnb_minExpandedWidth="150dp" />

Public API

methoddescription
setMenuResource(@MenuRes menuRes: Int)Inflate a menu from the specified XML resource
setMenuOrientation(menuOrientation: MenuOrientation)Set the menu orientation
setItemEnabled(id: Int, isEnabled: Boolean)Set the enabled state for the menu item with the provided [id]
setItemSelected(id: Int)Remove the selected state from the current item and set the selected state to true for the menu item with the [id]
setOnItemSelectedListener(listener: OnItemSelectedListener)Register a callback to be invoked when a menu item is selected
collapse()Collapse the menu items if orientationMode is VERTICAL otherwise, do nothing
expand()Expand the menu items if orientationMode is VERTICAL otherwise, do nothing
showBadge(id: Int)Display a numberless badge for the menu item with the [id]
showBadge(id: Int, count: Int)Display a countable badge with for the menu item with the [id]

Installation

Required

Gradle

Make sure that the repositories section includes JCenter
buildscript {
    ...
    repositories {
        jcenter()
        ...
    }
Add the library to the dependencies:
implementation 'com.ismaeldivita.chipnavigation:chip-navigation-bar:1.2.0'
Note: For projects without kotlin, you may need to add org.jetbrains.kotlin:kotlin-stdlib:$kotlinVersion to your dependencies since this is a Kotlin library.

 Download From GitHub

Download complete project source code from GitHub
Read more »
Subscribe to: Posts (Atom)
Powered by Blogger.