神刀安全网

Bottom Navigation Bar Android Tutorial

One of the newest additions to the Material Design guidelines is Bottom Navigation. Its like the TabBar you see on iOS, and similar in functionality too.

Bottom Navigation Bar Android Tutorial

Android Bottom Navigation

Bottom Navigation Bar Android Tutorial

Facebook iOS App

Before getting to the tutorial, let’s get to know what Bottom Navigation is. Also let’s narrow down on the best scenarios to use it.

What is Bottom Navigation?

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. – Material Design spec

Again, iOS users would feel completely at home with this, since its exactly the same.

This helps developers opt for Bottom Navigation, instead of a Navigation Drawer. If you have about four top-level navigation items, its ideal to use Bottom Navigation. Otherwise, go for a Navigation Drawer. We don’t want the Bottom Navigation looking too crowded now, do we?

When to use?

When you have three to five top-level destinations of similar importance. This may confuse you with Tabs. But not to worry.

I would make a call between the two, depending on how many navigation items I need. Let’s clarify this with a use case.

Take the Play Store app. There are six different Tabs to navigate or swipe around.

Bottom Navigation Bar Android Tutorial

Play Store App Tabs

Here’s the Play Store’s home screen:

Bottom Navigation Bar Android Tutorial

Home screen (non-swipeable Tabs)

Well, these look like Tabs too, but not swipeable. This is a perfect use case for Bottom Navigation!

Also notice that the Navigation Drawer remains accessible from all screens. Just swipe from the left edge. Now this, is an ideal structured app!

READ ALSO:

Getting Started

Yet with all that aside, I must admit the Bottom Navigation looks pretty cool. So right when I started to make it, I noticed Aurelien Hubert’s library for the same. That was a godsend!

So let’s get right to using that.

Add the library’s dependency to your build.gradle file.

dependencies {     compile 'com.aurelhubert:ahbottomnavigation:0.1.3' }

NOTE: This library support  minSDK 16 and above only.

Next, add the Bottom Navigation layout to XML.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:layout_width="match_parent"     android:layout_height="match_parent">      <FrameLayout         android:id="@+id/frame"         android:layout_width="match_parent"         android:layout_height="match_parent" />      <com.aurelhubert.ahbottomnavigation.AHBottomNavigation         android:id="@+id/bottom_navigation"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_gravity="bottom"         android:background="@android:color/white" />      <android.support.v7.widget.Toolbar         android:id="@+id/toolbar"         android:elevation="4dp"         android:background="?attr/colorPrimary"         android:layout_width="match_parent"         android:layout_height="?attr/actionBarSize" />  </FrameLayout>

The FrameLayout with ID frame is the placeholder UI to load our Fragment.

Action Plan

Each Bottom Navigation bar item denotes a different color. For demonstration purposes, each item click will change the Fragment’s view color.

But ideally, you’ll want to load a different Fragment for each item.

Setting up Bottom Navigation

1. Create your Items

AHBottomNavigationItem item1 = new AHBottomNavigationItem("Green", R.drawable.ic_map_24dp, Color.parseColor(colors[0]));

Create the number of items you need. colors[] is a String Array containing the the hashed color codes.

2. Add items to Bottom Navigation

bottomNavigation.addItem(item1);

3. Style it

bottomNavigation.setDefaultBackgroundColor(Color.parseColor("#FEFEFE"));         bottomNavigation.setAccentColor(Color.parseColor("#F63D2B"));        bottomNavigation.setInactiveColor(Color.parseColor("#747474"));         //  Enables Reveal effect        bottomNavigation.setColored(true);         bottomNavigation.setCurrentItem(0);

4. Set Listener

Finally, you need to listen to item clicks, so you can make changes to your Fragment.

bottomNavigation.setOnTabSelectedListener(new AHBottomNavigation.OnTabSelectedListener() {           @Override           public void onTabSelected(int position, boolean wasSelected) {                fragment.updateColor(Color.parseColor(colors[position]));           }       });

I have a tiny card layout centered in my Fragment layout. Depending on the item click, I change its color.

Ideally, you’d want to change the Fragment. This is highly similar to how its done when making a Navigation Drawer.

Adding a Fragment

You can add a simple Fragment and load it into the FrameLayout like this.

getSupportFragmentManager()              .beginTransaction()              .add(R.id.frame, fragment, "square")              .commit();

You can read more about Fragments here .

TIP:

You can swap out Fragments using this:

NewFragment newFragment = new NewFragment();   getSupportFragmentManager()                 .beginTransaction()                 .replace(R.id.frame, newFragment, fragment.getClass().getName())                 .commit();

Final Output

With all that in place, your Bottom Navigation Tabs will now be working. Run your app and take a look.

Bottom Navigation Bar Android Tutorial

SOURCE CODE: GitHub

Now, some of you may notice this does not conform a hundred percent to the Material Design spec. If you feel those are not negligible, try out this alternate library . Clearly it is the more popular (and fancier) one. But I’m happy with how the current one works. Moreover the Bottom Bar by roughike (alternate one), doesn’t seem to work for me.

So what do you think about Bottom Navigation? It’s the latest addition to Material Design. A few already use this navigation pattern, like the Google Photos app.

I’m more excited about what’s new in Material Design than Android N! What about you? Let me know in the comments below.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Bottom Navigation Bar Android Tutorial

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮