Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Android Material Design Bottom Navigation

    @arvind.kumar
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.04k
    Comment on it

    This blog will help you to setup a navigation bar at the bottom side of screen in which you can define maximum three to five top level view of an app. These all view can be directly accessed from any where in the app. If we are putting maximum five view inside navigation bar then it could be not covered and will be scrollable. Whereas it should avoid scrollable content inside navigation bar. Bottom navigation bar has icons and text both together.

    With the help of this tutorial you will be able to easily use Bottom Navigation in your app. Just follow the below mentioned steps:

    Step-1 Put below line in your Gradle files

    1. compile 'com.roughike:bottom-bar:1.3.3'

     

    Step-2 Adding items from menu resource

     

    1. ?xml version="1.0" encoding="utf-8"?>
    2. <menu xmlns:android="http://schemas.android.com/apk/res/android">
    3.  
    4.     <item
    5.         android:id="@+id/firstitem"
    6.         android:icon="@drawable/ic_recents"
    7.         android:title="Second" />
    8.     <item
    9.         android:id="@+id/seconditem"
    10.         android:icon="@drawable/ic_favorites"
    11.         android:title="Second" />
    12.     <item
    13.         android:id="@+id/thirditem"
    14.         android:icon="@drawable/ic_nearby"
    15.         android:title="Third" />
    16.     <item
    17.         android:id="@+id/fourthitem"
    18.         android:icon="@drawable/ic_friends"
    19.         android:title="Fourth" />
    20.     <item
    21.         android:id="@+id/fifthitem"
    22.         android:icon="@drawable/ic_restaurants"
    23.         android:title="Five" />
    24. </menu>

     

    Step-3 Create a MainActivity 

    1. import android.os.Bundle;
    2. import android.support.annotation.IdRes;
    3. import android.support.v4.content.ContextCompat;
    4. import android.support.v7.app.AppCompatActivity;
    5. import android.widget.TextView;
    6. import android.widget.Toast;
    7.  
    8. import com.roughike.bottombar.BottomBar;
    9. import com.roughike.bottombar.OnMenuTabClickListener;
    10.  
    11. public class MainActivity extends AppCompatActivity {
    12.     private BottomBar mBottomBarView;
    13.     private TextView mMessageView;
    14.  
    15.     @Override
    16.     protected void onCreate(Bundle savedInstanceState) {
    17.         super.onCreate(savedInstanceState);
    18.         setContentView(R.layout.activity_main);
    19.  
    20.         mMessageView = (TextView) findViewById(R.id.msgview);
    21.  
    22.         mBottomBarView = BottomBar.attach(this, savedInstanceState);
    23.         mBottomBarView.setItemsFromMenu(R.menu.bottombar_menu, new OnMenuTabClickListener() {
    24.             @Override
    25.             public void onMenuTabSelected(@IdRes int menuItemId) {
    26.                 mMessageView.setText(getMessage(menuItemId, false));
    27.             }
    28.  
    29.             @Override
    30.             public void onMenuTabReSelected(@IdRes int menuItemId) {
    31.                 Toast.makeText(getApplicationContext(), getMessage(menuItemId, true), Toast.LENGTH_SHORT).show();
    32.             }
    33.         });
    34.  
    35.         // Setting colors for different tabs when there's more than three of them.
    36.         // You can set colors for tabs in three different ways as shown below.
    37.         mBottomBarView.mapColorForTab(0, ContextCompat.getColor(this, R.color.colorAccent));
    38.         mBottomBarView.mapColorForTab(1, 0xFF5D4037);
    39.         mBottomBarView.mapColorForTab(2, "#7B1FA2");
    40.         mBottomBarView.mapColorForTab(3, "#FF5252");
    41.         mBottomBarView.mapColorForTab(4, "#FF9800");
    42.     }
    43.  
    44.     private String getMessage(int menuItemId, boolean isReselection) {
    45.         String message = "Content for ";
    46.  
    47.         switch (menuItemId) {
    48.             case R.id.firstitem:
    49.                 message += "First";
    50.                 break;
    51.             case R.id.seconditem:
    52.                 message += "Second";
    53.                 break;
    54.             case R.id.thirditem:
    55.                 message += "Third";
    56.                 break;
    57.             case R.id.fourthitem:
    58.                 message += "Fourth";
    59.                 break;
    60.             case R.id.fifthitem:
    61.                 message += "Five";
    62.                 break;
    63.         }
    64.  
    65.         if (isReselection) {
    66.             message += " Reselected!";
    67.         }
    68.  
    69.         return message;
    70.     }
    71.  
    72.     @Override
    73.     protected void onSaveInstanceState(Bundle outState) {
    74.         super.onSaveInstanceState(outState);
    75.  
    76.         // Necessary to restore the BottomBar's state, otherwise we would lose the current tab on orientation change.
    77.         mBottomBarView.onSaveInstanceState(outState);
    78.     }
    79. }
    80.  

     

    Step-4 Add badges to bottom bar tabbed

    1. You can easily add badges for showing an unread message count or new items.
    2.  
    3. /* Make a Badge for the first tab, with red background color and a value of "20"*/
    4. // 
    5. BottomBarBadge unreadMessages = mBottomBar.makeBadgeForTabAt(0, "#FF0000", 20);
    6.  
    7. // Control the badge's visibility
    8. unreadMessages.show();
    9. unreadMessages.hide();
    10.  
    11. // Change the displayed count for this badge.
    12. unreadMessages.setCount(4);
    13.  
    14. // Change the show / hide animation duration.
    15. unreadMessages.setAnimationDuration(200);
    16.  
    17. // If you want the badge be shown always after unselecting the tab that contains it.
    18. unreadMessages.setAutoShowAfterUnSelection(true);

    Step-5 Add listener on tab selected

    1. It will provide a specified position to tabs on which you will click.
    2.  
    3. // Listen for tab changes
    4. mBottomBar.setOnTabClickListener(new OnTabClickListener() {
    5.     @Override
    6.     public void onTabSelected(int position) {
    7.         // The user selected a tab at the specified position
    8.         Toast.makeText(MainActivity.this,"Tab Selected Position "+position,Toast.LENGTH_SHORT).show();
    9.     }
    10.  
    11.     @Override
    12.     public void onTabReSelected(int position) {
    13.         // The user reselected a tab at the specified position!
    14.     }
    15. });
    Android bottom navigation bar Material design bottom bar How to use bottom navigation bar in android
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: