Git Product home page Git Product logo

bottomnavbar's Introduction

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);
    }

}
  1. Make your activity extend BottomBarHolderActivity
public class MainActivity extends BottomBarHolderActivity
  1. 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);
    }
  1. 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 People

Contributors

riddhimanadib avatar

Stargazers

Ormerod Jaegers avatar  avatar Dmitry Kolesnikovich avatar Bùi Nam Anh avatar Virender Srxn avatar Senku avatar  avatar  avatar Mark Villacampa avatar Eslam Ghazy avatar 残血战士 avatar  avatar Cengiz BAYRAK avatar  avatar  avatar dbaspider avatar  avatar Krisna Cahya avatar  avatar beebapcay avatar Anuchit Singkhornart avatar Aman Thakur avatar UaoanLao avatar Naser Khoshfetrat avatar Judicaël AHYI avatar Huong Nguyen avatar Lucian Mihailescu avatar Seanghay Yath avatar Norman Nuthu avatar  avatar Cédric CARNIEL avatar ze avatar Evert Moreno avatar Lulixue avatar Georgi Eftimov avatar Umut Soysal avatar Joshi Tushar avatar Mustafa Boztopraklı avatar Gad18 avatar Jakub Narębski avatar FTD_2014 avatar  avatar Samad Talukder avatar  avatar Dhiya Reksa Kusumojati Brameswanto avatar  avatar Adrian Jann Octat avatar tianhong1989 avatar  avatar  avatar  avatar  avatar  avatar Britannio Jarrett avatar Stefan Popa avatar Sachin Shekhar R avatar  avatar Clarence avatar Ko Htut avatar Arisono avatar CoolSnow avatar opkcloud avatar chonamdoo avatar  avatar  avatar Sakib Sami avatar Darren avatar Jumman Hossain avatar Wai Yan Phyoe avatar Perfect Makanju avatar Subrahmanya S M avatar A Solopov avatar xchechi123x avatar Baran Baltacı avatar nswwccmwfbzdqn avatar Jonathan avatar Karan M Rajpal avatar 行一 avatar  avatar  avatar  avatar Mazen Alsenih avatar  avatar Mudassir Zulfiqar avatar Tania Incio avatar  avatar 黄碧冠 Brogan avatar Arifullah Jan avatar Bad leadership avatar  avatar  avatar Bakha avatar Wajahat Karim avatar YoonaDream avatar  avatar Evgeny avatar Zhuohao Yuan avatar Dzhunet Hasan avatar shraddha avatar Raj Kiran avatar

Watchers

xwhy avatar Ren  Yu avatar  avatar VITAN avatar Baran Baltacı avatar  avatar

bottomnavbar's Issues

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

No of tabs

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

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.