BottomNavigation View with some magic

On my previous project I used this library as implementing of BottomNavigationView. I was really enjoying the way author implemented work with onNavigationItemSelectedListener and after that, on my next projects, I wanted to implement it for default BottomNavigationView. And in this article I will show you how to write and use it in MVVM architecture.

Implementing

1. Create interface

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".view.activity.home.MainActivity">

    <FrameLayout
        android:id="@+id/homeContainer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/bottomNavigation"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

   <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:elevation="8dp"
        app:itemIconTint="@color/selector_bot_nav_color"
        app:itemTextColor="@color/selector_bot_nav_color"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/navigation_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

2. Create 3 empty fragments with label in the centre of the screen

class HomeFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.<em>fragment_home</em>, container, false)
    }
}

3.Create Enum with bottom navigation tabs

enum class BottomNavigationPage {

    TAB_HOME,

    TAB_EVENTS,

    TAB_LIBRARY

}

4. Create ViewModel for MainActivity

class MainViewModel : ViewModel() {

        <em>////////////////////////////////////////////////////////////////////
        /////////////// Live Data with getters ////////////////
        ///////////////////////////////////////////////////////////////////</em>

        private val _homeItemClickedLD = MutableLiveData<Unit>()
        val homeItemClickedLD<strong>:</strong> LiveData<Unit> get() = _homeItemClickedLD

        private val _eventsItemClickedLD = MutableLiveData<Unit>()
        val eventsItemClickedLD: LiveData<Unit> get() = _eventsItemClickedLD
        
        private val _libraryItemClickedLD = MutableLiveData<Unit>()
        val libraryItemClickedLD: LiveData<Unit> get() = _libraryItemClickedLD 

        <em>////////////////////////////////////////////////////////////////////</em> 
        <em>//////////////////////////////// Calls /////////////////////////</em>
        <em>///////////////////////////////////////////////////////////////////
</em>
        fun onBottomItemChanged(position: Int) {
                when(values()[position]) {
                    TAB_HOME -> _homeItemClickedLD.<em>execute</em>()
                    TAB_EVENTS -> _eventsItemClickedLD.<em>execute</em>()
                    TAB_LIBRARY -> _libraryItemClickedLD.<em>execute</em>()
                }
        }
}

5. Create extension for BottomNavigationView

fun BottomNavigationView.onItemSelected(function: (Int) -> Unit) {
    setOnNavigationItemSelectedListener { item ->
        for(i in0 <em>until menu</em>.size()) {
            if (<em>menu</em>.getItem(i).<em>itemId </em>== item.<em>itemId</em>) {
                function(i)
            }
        }
        return@setOnNavigationItemSelectedListener true}}

fun BottomNavigationView.onItemReselected(function: (Int) -> Unit) {
    setOnNavigationItemReselectedListener { item ->
        for(i in0 <em>until menu</em>.size()) {
            if(<em>menu</em>.getItem(i).<em>itemId </em>== item.<em>itemId</em>) {
                function(i)
            }
        }
    }
}

6. And implement these all parts of code in MainActivity

class MainActivity : AppCompatActivity() {

    private lateinit var viewModel: MainViewModel
    private lateinit var binding: ActivityMainBinding
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.<em>activity_main</em>)
        viewModel = ViewModelProviders.of(this).get(MainViewModel::class.<em>java</em>)
        binding.<em>bindData</em>(BR.<em>viewmodel</em>, viewModel)

        initViews()
        initObservers()
    }

    private fun initViews() {
        initBottomNavigation()
    }

    private fun initObservers() {
        viewModel.homeItemClickedLD.<em>obs</em>(this) {<em>replaceFragment</em>(R.id.<em>homeContainer</em>, HomeFragment(), false) }
        viewModel.eventsItemClickedLD.<em>obs</em>(this) {<em>replaceFragment</em>(R.id.<em>homeContainer</em>, EventsFragment(), false) }
        viewModel.libraryItemClickedLD.<em>obs</em>(this) {<em>replaceFragment</em>(R.id.<em>homeContainer</em>, LibraryFragment(), false) }
}

    private fun initBottomNavigation() {
        bottomNavigation.<em>onItemSelected </em>{viewModel.onBottomItemChanged(it) }
        bottomNavigation.<em>onItemReselected </em>{ }
        <em>replaceFragment</em>(R.id.<em>homeContainer</em>, HomeFragment(), false)
    }
}

Example:

So, I hope this article was interesting and useful for you and, of course, if you have any questions or suggestions for improvement, feel free to write me in comments.

If you like this article, that I hope, you will probably like my other articles and find something interesting for you in them here.

Also I have created my own library and you can find it here.

Thanks for reading.