Merge pull request #33 from mayokunthefirst/navigation-component-dev

Add Support for Navigation Component

README.md

@@ -82,6 +82,104 @@ bottomBar.setOnItemReselectedListener(object: OnItemReselectedListener {
 })
 ```
 
+## **Use SmoothBottomBar with [Navigation Components](https://developer.android.com/guide/navigation/).**
+
+Coupled with the Navigation Component from the [Android Jetpack](https://developer.android.com/jetpack), SmoothBottomBar offers easier navigation within your application by designating navigation to the Navigation Component. This works best when using fragments, as the Navigation component helps to handle your fragment transactions.
+
+- Setup Navigation Component i.e. Add dependenccy to your project, create a Navigation Graph etc.
+- For each Fragment in your Navigation Graph, ensure that the Fragment's `id` is the same as the MenuItems in your Menu i.e res/menu/ folder
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+<menu xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item
+        android:id="@+id/first_fragment"
+        android:title="@string/menu_dashboard"
+        android:icon="@drawable/ic_dashboard_white_24dp"/>
+
+    <item
+        android:id="@+id/second_fragment"
+        android:title="@string/menu_leaderboard"
+        android:icon="@drawable/ic_multiline_chart_white_24dp"/>
+
+    <item
+        android:id="@+id/third_fragment"
+        android:title="@string/menu_store"
+        android:icon="@drawable/ic_store_white_24dp"/>
+
+    <item
+        android:id="@+id/fourth_fragment"
+        android:title="@string/menu_profile"
+        android:icon="@drawable/ic_person_outline_white_24dp"/>
+
+</menu>
+```
+
+Navigation Graph i.e res/navigation/ folder
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+<navigation xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/nav_graph"
+    app:startDestination="@id/first_fragment">
+
+    <fragment
+        android:id="@+id/first_fragment"
+        android:name="me.ibrahimsn.smoothbottombar.FirstFragment"
+        android:label="First Fragment"
+        tools:layout="@layout/fragment_first" />
+    <fragment
+        android:id="@+id/second_fragment"
+        android:name="me.ibrahimsn.smoothbottombar.SecondFragment"
+        android:label="Second Fragment"
+        tools:layout="@layout/fragment_second" />
+    <fragment
+        android:id="@+id/third_fragment"
+        android:name="me.ibrahimsn.smoothbottombar.ThirdFragment"
+        android:label="Third Fragment"
+        tools:layout="@layout/fragment_third" />
+    <fragment
+        android:id="@+id/fourth_fragment"
+        android:name="me.ibrahimsn.smoothbottombar.FourthFragment"
+        android:label="Fourth Fragment"
+        tools:layout="@layout/fragment_fourth" />
+</navigation>
+```
+
+- In your activity i.e `MainActivity`, override `onCreateOptionsMenu`, get a reference to your SmoothBottomBar and call `setupWithNavController()` which takes in a `Menu` and `NavController` on the SmoothBottomBar.
+```kotlin
+  override fun onCreateOptionsMenu(menu: Menu?): Boolean {
+        menuInflater.inflate(R.menu.menu_bottom,menu)
+        bottomBar.setupWithNavController(menu!!,navController)
+        return true
+    }
+```
+- You can also setup your `ActionBar` with the Navigation Component
+```kotlin
+ private lateinit var navController: NavController
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        navController = findNavController(R.id.fragment)
+        setupActionBarWithNavController(navController)
+    }
+
+    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
+        menuInflater.inflate(R.menu.menu_bottom,menu)
+        bottomBar.setupWithNavController(menu!!,navController)
+        return true
+    }
+
+    override fun onSupportNavigateUp(): Boolean {
+        navController.navigateUp()
+        return true
+    }
+```
+
+Result:
+<p align="center"><a><img src="https://github.com/mayokunthefirst/SmoothBottomBar/blob/navigation-component-dev/GIF/smooth_bar_gif.gif?raw=true" width="300"></a></p>
+
+
 ## Customization
 
 ```xml

app/build.gradle

@@ -23,15 +23,21 @@ android {
 }
 
 dependencies {
+    def nav_version = '2.2.2'
     implementation fileTree(dir: 'libs', include: ['*.jar'])
-    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
     implementation 'androidx.appcompat:appcompat:1.1.0'
     implementation 'androidx.core:core-ktx:1.1.0'
     implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
-    
+
     implementation project(":lib")
 
+    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
     testImplementation 'junit:junit:4.12'
     androidTestImplementation 'androidx.test.ext:junit:1.1.1'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
+
+    //Navigation Architecture Component
+    implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
+    implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
 }

app/src/main/java/me/ibrahimsn/smoothbottombar/FirstFragment.kt

@@ -0,0 +1,22 @@
+package me.ibrahimsn.smoothbottombar
+
+import android.os.Bundle
+import androidx.fragment.app.Fragment
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+
+/**
+ * A simple [Fragment] subclass.
+ */
+class FirstFragment : Fragment() {
+
+    override fun onCreateView(
+        inflater: LayoutInflater, container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        // Inflate the layout for this fragment
+        return inflater.inflate(R.layout.fragment_first, container, false)
+    }
+
+}

app/src/main/java/me/ibrahimsn/smoothbottombar/FourthFragment.kt

@@ -0,0 +1,22 @@
+package me.ibrahimsn.smoothbottombar
+
+import android.os.Bundle
+import androidx.fragment.app.Fragment
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+
+/**
+ * A simple [Fragment] subclass.
+ */
+class FourthFragment : Fragment() {
+
+    override fun onCreateView(
+        inflater: LayoutInflater, container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        // Inflate the layout for this fragment
+        return inflater.inflate(R.layout.fragment_fourth, container, false)
+    }
+
+}

app/src/main/java/me/ibrahimsn/smoothbottombar/MainActivity.kt

@@ -1,20 +1,29 @@
 package me.ibrahimsn.smoothbottombar
 
 import android.os.Bundle
+import android.view.Menu
 import androidx.appcompat.app.AppCompatActivity
+import androidx.navigation.NavController
+import androidx.navigation.findNavController
+import androidx.navigation.ui.setupActionBarWithNavController
 import kotlinx.android.synthetic.main.activity_main.*
 
 class MainActivity : AppCompatActivity(R.layout.activity_main) {
-
+    private lateinit var navController: NavController
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+        navController = findNavController(R.id.main_fragment)
+        setupActionBarWithNavController(navController)
+    }
 
-        bottomBar.onItemSelected = {
-            status.text = "Item $it selected"
-        }
+    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
+        menuInflater.inflate(R.menu.menu_bottom,menu)
+        bottomBar.setupWithNavController(menu!!,navController)
+        return true
+    }
 
-        bottomBar.onItemReselected = {
-            status.text = "Item $it re-selected"
-        }
+    override fun onSupportNavigateUp(): Boolean {
+        navController.navigateUp()
+        return true
     }
 }

app/src/main/java/me/ibrahimsn/smoothbottombar/SecondFragment.kt

@@ -0,0 +1,22 @@
+package me.ibrahimsn.smoothbottombar
+
+import android.os.Bundle
+import androidx.fragment.app.Fragment
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+
+/**
+ * A simple [Fragment] subclass.
+ */
+class SecondFragment : Fragment() {
+
+    override fun onCreateView(
+        inflater: LayoutInflater, container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        // Inflate the layout for this fragment
+        return inflater.inflate(R.layout.fragment_second, container, false)
+    }
+
+}

app/src/main/java/me/ibrahimsn/smoothbottombar/ThirdFragment.kt

@@ -0,0 +1,22 @@
+package me.ibrahimsn.smoothbottombar
+
+import android.os.Bundle
+import androidx.fragment.app.Fragment
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+
+/**
+ * A simple [Fragment] subclass.
+ */
+class ThirdFragment : Fragment() {
+
+    override fun onCreateView(
+        inflater: LayoutInflater, container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        // Inflate the layout for this fragment
+        return inflater.inflate(R.layout.fragment_third, container, false)
+    }
+
+}

app/src/main/res/layout/activity_main.xml

@@ -6,11 +6,14 @@
     android:layout_height="match_parent"
     tools:context=".MainActivity">
 
-    <TextView
-        android:id="@+id/status"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:gravity="center"
+
+    <fragment
+        android:id="@+id/main_fragment"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:name="androidx.navigation.fragment.NavHostFragment"
+        app:defaultNavHost="true"
+        app:navGraph='@navigation/nav_graph'
         app:layout_constraintBottom_toTopOf="@+id/bottomBar"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"

app/src/main/res/layout/fragment_first.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".FirstFragment">
+
+
+    <TextView
+        android:id="@+id/textView"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="First Fragment"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+</androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/layout/fragment_fourth.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".FourthFragment">
+
+
+    <TextView
+        android:id="@+id/textView4"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="Fourth Fragment"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+</androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/layout/fragment_second.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".SecondFragment">
+
+
+    <TextView
+        android:id="@+id/textView2"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="Second Fragment"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+</androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/layout/fragment_third.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".ThirdFragment">
+
+
+    <TextView
+        android:id="@+id/textView3"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="Third Fragment"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+</androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/menu/menu_bottom.xml

@@ -2,22 +2,22 @@
 <menu xmlns:android="http://schemas.android.com/apk/res/android">
 
     <item
-        android:id="@+id/item0"
+        android:id="@+id/first_fragment"
         android:title="@string/menu_dashboard"
         android:icon="@drawable/ic_dashboard_white_24dp"/>
 
     <item
-        android:id="@+id/item1"
+        android:id="@+id/second_fragment"
         android:title="@string/menu_leaderboard"
         android:icon="@drawable/ic_multiline_chart_white_24dp"/>
 
     <item
-        android:id="@+id/item2"
+        android:id="@+id/third_fragment"
         android:title="@string/menu_store"
         android:icon="@drawable/ic_store_white_24dp"/>
 
     <item
-        android:id="@+id/item3"
+        android:id="@+id/fourth_fragment"
         android:title="@string/menu_profile"
         android:icon="@drawable/ic_person_outline_white_24dp"/>