Skip to content

Navigation bar to make your screens be more attractive with a lot of customization tools

License

Notifications You must be signed in to change notification settings

kartollika/Island-NavigationBar

Repository files navigation

Island-NavigationBar

License: MIT

Samples

IslandBar from menu IslandBar from XML IslandBar with stroke tabs
Inflated from menu Inflated from XML Inflated from XML with stroke tabs

Minimal requirements and features

  • Supports API >= 17
  • Highly customizable
  • Easy to integrate
  • Supports initializing via both the XML and inflating from menu.xml

Instalation

  • Add this line into your project's build.gradle file
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
  • After that, add the dependency in app/build.gradle file
dependencies {
    implementation 'com.github.kartollika:Island-NavigationBar:v1.0.0'
}

Usage

Attention! Unfortunately, you can not create IslandNavigationBar by your own using code only, so you should firstly add IslandNavigationBar to your layout.xml

Initialize bar

<com.kartollika.views.islandnavigationbar.IslandNavigationBarView
        android:id="@+id/navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

Customizing

Attribute Description
barDistribution Distribution of navigation bar items. Available values: spread, packed, spread_inside, so they are equals to the same mode in Constraint layout chains
barMenu Optional, if you want to inflate your bar using menu.xml
barSelectedTab Initial selected tab
barToggleInterpolator If you want to see other animation of changing items, you should override this attribute. AccelerateDecelerateInterpolator is using by default
barTabToggleDuration Duration of toggling tabs

Note: you can change this parameters both via XML and code

All methods are listed in IslandNavigationBar interface:

Methods
fun inflateBarFromMenu(@MenuRes menuRes: Int)
fun setBarSelectedTab(position: Int)
fun setBarToggleTabsInterpolator(interpolator: Interpolator)
fun setBarTabsToggleDuration(duration: Int)
fun setBarTabsDistribution(chainMode: IslandNavigationBarView.ChainMode)
fun setOnTabActionListener(listener: IslandNavigationBarView.OnTabActionListener)

Example:

islandBar.apply { 
    setChainStyleMode(IslandNavigationBarView.ChainMode.PACKED)            
}

And now you are ready to add items to your bar!

Initialize tabs

  • Add items via Using XML:
   <com.kartollika.views.islandnavigationbar.IslandNavigationTabView
           android:id="@+id/tabProfile"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           app:tabBackground="@drawable/tab_person_background"
           app:tabIcon="@drawable/person_selector"
           app:tabTitle="Profile" />

   <com.kartollika.views.islandnavigationbar.IslandNavigationTabView
       android:id="@+id/tabFavorite"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       app:tabBackground="@drawable/tab_favorite_background"
       app:tabIcon="@drawable/favorite_selector"
       app:tabTitle="Favorite" />
       
   <!-- Add more child items here - max upto 5 -->
  • Or using menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/tab_home"
        android:icon="@drawable/home_selector"
        android:title="Home" />
    <item
        android:id="@+id/tab_alarm"
        android:icon="@drawable/alarm_selector"
        android:title="Alarm" />
        
    <!-- Add more child items here - max upto 5 -->

Now you can customize tabs by your own!

Attribute Description
tabTitle Title of tab
tabIcon Icon of tab. If you want to change tint dynamically - use selector for icon, where active state has state_selected="true"
tabBackground Background of tab. Use <transition> to make smooth animation of changing state. Otherwise, use usual drawable and so on
tabToggleDuration Duration of applying animations, such as text appearing and dissapearing, change background color, etc
tabTitleActiveColor Change color of title when active state
tabTitleInactiveColor Change color of title when inactive state
tabCustomPadding Change default padding by all directions. Default is 12dp

All methods are listed in IslandNavigationTab interface:

Methods
fun setTabTitle(title: String)
fun setTabIcon(drawable: Drawable?)
fun setTabToggleDuration(duration: Int)
fun setTabBackground(background: Drawable?)
fun setTabTitleActiveColor(color: Int)
fun setTabTitleInactiveColor(color: Int)
fun setTabTitleColorsStateList(colorStateList: ColorStateList)
fun setCustomInternalPadding(padding: Int)

Sample of customization

  • From code
with(islandBar) {
    getTabById(R.id.tab_home)?.let {
        it.setTabTitleActiveColor(Color.parseColor("#8122B4"))
        it.setTabBackground(
            ContextCompat.getDrawable(
                this@MenuIslandBarActivity,
                R.drawable.tab_home_background
            )
        )
        it.setTabToggleDuration(300)
    }
    getTabById(R.id.tab_person)?.let {
        it.setTabTitleActiveColor(Color.parseColor("#C90000"))
        it.setTabBackground(
            ContextCompat.getDrawable(
                this@MenuIslandBarActivity,
                R.drawable.tab_person_background
            )
        )
        it.setTabToggleDuration(300)
    }
}
  • Or using XML
<com.kartollika.views.islandnavigationbar.IslandNavigationTabView
    android:id="@+id/tabProfile"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:tabBackground="@drawable/tab_person_background"
    app:tabIcon="@drawable/person_selector"
    app:tabToggleDuration="200"
    app:tabTitleActiveColor="@color/colorPrimaryDark"
    app:tabTitle="Profile" />