adib2149 / bottomnavbar

Easily add four tabbed bottom navigation bar in your activity.

Bottom-Nav-Bar

Easily add four tabbed bottom navigation bar in your app.

This library aids in adding four tabs in Bottom Navigation Bar, as easily and fast as possible. Th result looks like as it is commonly found in most of the apps, like Quora and others.

Difference from Official Bottom Navigation View

• This library is significantly different from what Google has provided for Android Developers. The official Bottom Navigation View from Google doesn't show text when it has 4 tabs.

• this library helps you add icons and texts with four bottom bars very easily and efficiently, where all stays visisble all the time, just like this one here:

Features

• Easily add four tabbed bottom navigation bar with minimal code
• changes color based on accent

Installation

Add this in your app's build.gradle file:

compile 'me.riddhimanadib.bottom-nav-bar:bottom-nav-bar:1.0.1'

How to use

1. Create four fragments (fragment with appcompat v4) with layouts and method to create new instance.

public class SampleFragment extends Fragment{

    public static FourthFragment newInstance() {
        return new FourthFragment();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_sample, container, false);
    }

}

2. Make your activity extend BottomBarHolderActivity

public class MainActivity extends BottomBarHolderActivity

3. Clear out setContentView() method and add the following:

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // remove this: setContentView(R.layout.activity_main);

        // four navigation pages that would be displayed as four tabs
        // contains title, icon and fragment instance
        NavigationPage page1 = new NavigationPage("Home", ContextCompat.getDrawable(this, R.drawable.ic_home_black_24dp), FirstFragment.newInstance());
        NavigationPage page2 = new NavigationPage("Support", ContextCompat.getDrawable(this, R.drawable.ic_mail_black_24dp), SecondFragment.newInstance());
        NavigationPage page3 = new NavigationPage("Billing", ContextCompat.getDrawable(this, R.drawable.ic_assessment_black_24dp), ThirdFragment.newInstance());
        NavigationPage page4 = new NavigationPage("Profile", ContextCompat.getDrawable(this, R.drawable.ic_person_black_24dp), FourthFragment.newInstance());

        // add them in a list
        List<NavigationPage> navigationPages = new ArrayList<>();
        navigationPages.add(page1);
        navigationPages.add(page2);
        navigationPages.add(page3);
        navigationPages.add(page4);

        // pass them to super method
        super.setupBottomBarHolderActivity(navigationPages);
    }

4. Now build and run!!

Change accent color

If you want to change the colors, just override the colors in your colors.xml file:

<color name="colorBackground">#F8F8F8</color>
<color name="colorNavAccentSelected">#9D0E15</color>
<color name="colorNavAccentUnselected">#727272</color>

License

This Library is released under the Apache License, Version 2.0.

bottomnavbar's Issues

Why not use BottomNavigationView?

Android has already offered a widget called BottomNavigationView , which can also do the same things.

What's the advantage of this project?

List of NavigationPage must contain 4 members

I only need two, you need at least four, fault tolerance is not high

How to implement Toobar?

On Screenshots you show examples with toolbar but in the examples provided on the repo you dont have a toolbar set.

How to implement?

Can we move the fragment initialization to XML?

The library currently shows view after being initialized programmatically. It would be great if it could be done only by XML.

Set which tab is selected by default

How do we set which tab is selected.
Lets say I have five tabs, and I want the middle on selected by default?

No of tabs

Let's say I want only 3 or 5 tabs. in that case this library is completely useless

layout problem in kitkat 4.4

Hi I'm using this library. It's layout is not showing correctly on android 4.4 kitkat.
What should I do?

How to set selected tab ?

Is it possible to set selected tab on create instead of first tab/ Home

hot to set unreaded number?

It is possible add five items to BottomBarHolderActivity

Hi thank you for your library I am using it in my android news app it is possible to increase items to 5 when I have added fifth item. It is giving this exception java.lang.RuntimeException: Unable to start activity ComponentInfo{yodgobekkomilov.edgar.com.worldnews/yodgobekkomilov.edgar.com.worldnews.MainActivity}: java.lang.RuntimeException: List of NavigationPage must contain 4 members.

below my code from MainActivity
public class MainActivity extends BottomBarHolderActivity implements AllJazeeraFragment.OnFragmentInteractionListener, BBCFragment.OnFragmentInteractionListener, CNNFragment.OnFragmentInteractionListener, CBCNewsFragment.OnFragmentInteractionListener {

//    private ApiService apiService;
public static final String url_key = "urlKey";
public ArrayList<Article> articleList = new ArrayList<>();


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);

    Article article = new Article(Parcel.obtain());
    article.setUrl(article.getUrl());
    Intent i = new Intent(this, DetailActivity.class);
    i.putExtra("urlKey", article);

// // using the (String name, Parcelable value) overload!
// startActivity(i);

    NavigationPage page1 = new NavigationPage("AllJazeera", ContextCompat.getDrawable(this, R.drawable.alljazeera), AllJazeeraFragment.newInstance());
    NavigationPage page2 = new NavigationPage("BBC", ContextCompat.getDrawable(this, R.drawable.bbc_icon), CNNFragment.newInstance());
    NavigationPage page3 = new NavigationPage("CNN", ContextCompat.getDrawable(this, R.drawable.cnn_icon), AllJazeeraFragment.newInstance());
    NavigationPage page4 = new NavigationPage("CBC", ContextCompat.getDrawable(this, R.drawable.cbc_icon), CBCNewsFragment.newInstance());
    NavigationPage page5 = new NavigationPage("Menu", ContextCompat.getDrawable(this, R.drawable.icon_menu), Menu.newInstance());
    List<NavigationPage> navigationPages = new ArrayList<>();
    navigationPages.add(page1);
    navigationPages.add(page2);
    navigationPages.add(page3);
    navigationPages.add(page4);
    navigationPages.add(page5);
    super.setupBottomBarHolderActivity(navigationPages);
}


public void onClicked() {
    Toast.makeText(this, "Clicked!", Toast.LENGTH_SHORT).show();
}

}
and help and suggestion will be appreacited