[Android] Bottombar+viewpager+fragment for a cool bottom navigation effect

Bottombar

　　

　　

Bottombar is an open source framework on GitHub, since 1.3.3 does not support fragments, it has to be configured for a long time, regardless of whether the app's fragment or V4 program always comes back. So this is the way to achieve, the effect is good. GitHub has a detailed explanation, needless to say.

　

This roughike is the owner of the project (Tribute to the Great God).

I use the Android Studio development, fragment all-in-one V4 package (think the first support is V4, behind also support App.fragment).

First, dependencies.

‘com.jakewharton:butterknife:7.0.0‘‘com.roughike:bottom-bar:1.3.3‘

Add a second on the line, I use the butterknife (do not know can Baidu, from the Jakewharton great God of a view injection framework).

Add Items from Menu

Res/menu/bottombar_menu.xml

<?xml version= "1.0" encoding= "Utf-8"?><menu xmlns:android="Http://schemas.android.com/apk/res/android">    <itemandroid:id="@+id/bb_menu_recents"android:icon="@drawable/ Ic_recents "android:title=" recents " />                            <itemandroid:id="@+id/bb_menu_favorites"android:icon="@drawable /ic_favorites "android:title=" Favorites " />                            <itemandroid:id= "@+id/bb_menu_nearby"android:icon="@ Drawable/ic_nearby "android:title=" Nearby " />                            <itemandroid:id="@+id/bb_menu_friends"android:icon="@drawable/ Ic_friends "android:title=" Friends " />                            <itemandroid:id= "@+id/bb_menu_food"android:icon="@ Drawable/ic_restaurants "android:title=" Food " />                        </Menu>

Initializing Bottombar and Viewpager in activity

 Public  class mainactivity extends fragmentactivity {    @Bind(R.id.viewpager) Viewpager Viewpager;@Bind(r.id.mycoordinator) Coordinatorlayout mycoordinator;PrivateBottombar Mbottombar;PrivateList<fragment> fragmentlist;@Override    protected void onCreate(Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate);        Setcontentview (R.layout.activity_main); Butterknife.bind ( This);        Initviewpager ();    Createbottombar (savedinstancestate); }Private void Createbottombar(Bundle savedinstancestate)        {Mbottombar = Bottombar.attachshy (Mycoordinator,viewpager, savedinstancestate); Mbottombar.setitemsfrommenu (R.menu.bottombar_menu,NewOnmenutabclicklistener () {@Override             Public void onmenutabselected(@IdResintMenuitemid) {Switch(Menuitemid) { CaseR.id.bb_menu_recents:viewpager.setcurrentitem (0); Break; CaseR.id.bb_menu_favorites:viewpager.setcurrentitem (1); Break; CaseR.id.bb_menu_nearby: Break; CaseR.id.bb_menu_friends: Break; CaseR.id.bb_menu_food: Break; }            }@Override             Public void onmenutabreselected(@IdResintMenuitemid) {}});//Setting colors for different tabs if there ' s more than three of them.        //You can set colors to tabs in three different ways as shown below.Mbottombar.mapcolorfortab (0, Contextcompat.getcolor ( This, r.color.coloraccent)); Mbottombar.mapcolorfortab (1,0xff5d4037); Mbottombar.mapcolorfortab (2,"#7B1FA2"); Mbottombar.mapcolorfortab (3,"#FF5252"); Mbottombar.mapcolorfortab (4,"#FF9800"); }@Override     Public void onsaveinstancestate(Bundle outstate) {Super. Onsaveinstancestate (Outstate);//necessary to restore the Bottombar ' s state, otherwise we would        //Lose the current tab to orientation change.Mbottombar.onsaveinstancestate (outstate); }Private void Initviewpager() {fragmentlist =NewArraylist<> (); Fragmentlist.add (NewFragmentone ()); Fragmentlist.add (NewFragmenttwo ()); Viewpager.setadapter (NewFragmentstatepageradapter (Getsupportfragmentmanager ()) {@Override             PublicFragmentGetItem(intPosition) {returnFragmentlist.get (position); }@Override             Public int GetCount() {returnFragmentlist.size ();        }        }); Viewpager.addonpagechangelistener (NewViewpager.onpagechangelistener () {@Override             Public void onpagescrolled(intPositionfloatPositionoffset,intPositionoffsetpixels) {}@Override             Public void onpageselected(intPosition) {Mbottombar.selecttabatposition (position,true); }@Override             Public void onpagescrollstatechanged(intState) {}}); }}

Bottombar's GitHub offers two ways of initializing, here is the second implementation of the slide hide, because it is fragment scrolling so fragment layout to be Nestedscrollview wrapped (below the sticker code, very simple), Also note that Viewpager.setonpagechangelistener is out of date.

Layout/activity_main.xml

<?xml version="1.0"encoding="Utf-8"? ><android. Support. Design. Widgets. CoordinatorlayoutXmlns:android="Http://schemas.android.com/apk/res/android"Android:id="@+id/mycoordinator"xmlns:tools="Http://schemas.android.com/tools"Android:layout_width="Match_parent"android:layout_height="Match_parent"Android:fitssystemwindows="true"tools:context="Com.example.bottombar.bottombar.MainActivity"> <android. Support. V4. View. ViewpagerAndroid:id="@+id/viewpager"Android:layout_width="Match_parent"android:layout_height="Match_parent"/> </android. Support. Design. Widgets. Coordinatorlayout>

Fragmentone.java

publicclass FragmentOne extends Fragment {    View v;    Context context;    @Nullable    @Override    publiconCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        v = inflater.inflate(R.layout.fragment_one, container,false);        context = getActivity();        return v;    }}

Layout/fragment_one.xml

<?xml version= "1.0" encoding= "Utf-8"?><android.support.v4.widget.NestedScrollViewandroid:id="@+id/myscrollview" xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width=  "Match_parent"android:layout_height="Match_parent" >                    <relativelayoutandroid:layout_width="Match_parent"android:layout _height="Match_parent"android:padding="20DP">                            <TextViewandroid:layout_centerinparent="true"android:layout_width= "Match_parent" android:layout_height="Wrap_content"android:text="@string/baiduinfo"/>                                     </relativelayout></android.support.v4.widget.NestedScrollView>

Over the finish, the icon resource file is put in the code. The code has been uploaded:

Click I download OH

[Android] Bottombar+viewpager+fragment for a cool bottom navigation effect