{
  "$type": "site.standard.document",
  "canonicalUrl": "https://segunfamisa.com/posts/bottom-navigation-view-android",
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreibqo2zwye6pb6liaevx4exskhblstnvqu2rommu45gbryfrcr2hue"
    },
    "mimeType": "image/jpeg",
    "size": 15365
  },
  "description": "Tutorial on how to implement the new bottom navigation view with the support library",
  "path": "/posts/bottom-navigation-view-android",
  "publishedAt": "2016-10-24T06:42:45.000Z",
  "site": "at://did:plc:a5mekodp4afxadlpr4hp2wci/site.standard.publication/3mm2oa7vz5327",
  "tags": [
    "android",
    "android studio",
    "tutorial",
    "material design",
    "support library"
  ],
  "textContent": "Sometimes in March 2016, Luke Wroblewski announced that the\nBottom navigation bars were now a part of the material design guidelines.\nUntil then, bottom nav bars were seen as an anti-pattern and were heavily kicked against.\n\nThere have been several nice libraries to implement this bottom nav bar design, some of which include:\nhttps://github.com/roughike/BottomBar and\nhttps://github.com/aurelhubert/ahbottomnavigation.\n\nJust last week, Google (through Nick Butcher)\nannounced the release of the v25 of the Android Design Support Library which includes the new BottomNavigationView.\n\nIn this short post, I'll be showing how to use it in your Android app.\n\nIf you are in a hurry, feel free to jump straight to look at the sample code here: https://github.com/segunfamisa/bottom-navigation-demo\n\nSetup\nTo get started with this, you need the latest version (version 25) of Android SDK & tools (including SDK tools, build-tools, platform-tools, support repository).\n\nHow to use it.\n\n1. Add the design support library\nFirst step is to add the design support library to your app-level build.gradle file. Example is as shown below:\n\n2. Add the BottomNavigationView to your layout\nNext step, is to add the actual bottom nav view to the layout. Typically, you will add something like:\n\nThe BottomNavigationView uses design:menu is a custom attribute that points to the menu resource containing items to be shown on the BottomNavigationView.\n\nThere are other custom attributes for the view, including:\n\n   design:itemBackground to set the background of the menu resource  \n   design:itemIconTint to set the tint which is applied to the item icons.  \n   design:itemTextColor to set the menu item text colour.  \n\n3. Define the nav items in the menu resource\t \nThe BottomNavigationView is used in a very similar way to the NavigationView because the bottom nav view also uses menu resources to populate items.\n\nTo define the items, you need to do so in a menu resource. Let's create one and name it bottom_nav_items.xml as we have specified in step 2 above.\n\nA typical content will look like this:\n\nThis means that there will be 3 items, Home, Search and Notifications on the bottom nav view.\nWe can run the app now, and we'll see our neatly implemented bottom nav view.\n\nListening for events on the bottom nav view\nNow that we've added the view, we'd love to know when a menu item is clicked right?\n\nTo listen for click events on the BottomNavigationView, we just need to call setOnNavigationItemSelectedListener()\n\nExample of how to do this is:\n\nWant more code?\nI've made a 'fuller' demo app demonstrating a use case of the bottom nav view. You can find the code here: https://github.com/segunfamisa/bottom-navigation-demo (Please remember to star the repo ;)\n\nHere's what the demo app looks like:\n<p align=\"center\">\n  <img src=\"https://imgur.com/y0uv4tX.gif\">\n</p>\n\nReferences\n   https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html\n  * https://material.google.com/components/bottom-navigation.html\n\nHey, thank you for reading!\nIf you have any comments/suggestions or corrections, feel free to drop a comment below or tweet at me.\n\nPlease share if you found this useful or know someone that may find it useful.\n\nThanks.\n\nSegun.",
  "title": "Implementing Bottom Navigation View in your app"
}