Skip to content Skip to sidebar Skip to footer
Home / Android / Android Tablayout

Android Tablayout On The Bottom Of The Screen

Post a Comment
I have this generated XML code when I started a new Tabbed Activity:

Solution 1:

This is how I achieved it: 

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayoutxmlns: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"app:layout_behavior="in.mylo.pregnancy.baby.app.FAB"><android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><android.support.v7.widget.Toolbarandroid:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="@android:color/white" /></android.support.design.widget.AppBarLayout><android.support.v4.view.ViewPagerandroid:id="@+id/viewPagerHome"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_above="@+id/bottomNavigation" /><android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:background="@android:color/white"android:elevation="80dp"><android.support.design.widget.TabLayoutandroid:id="@+id/bottomNavigation"android:layout_width="match_parent"android:layout_height="56dp"android:clickable="true"app:tabBackground="?attr/selectableItemBackground"app:tabGravity="fill"app:tabIndicatorHeight="0dp"app:tabMode="fixed"app:tabSelectedTextColor="@android:color/black" /></android.support.design.widget.AppBarLayout></android.support.design.widget.CoordinatorLayout>

Solution 2:

Layout Dont use tab menu, instead add the new material bottom navigation view

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"xmlns:app="http://schemas.android.com/apk/res-auto"android:fitsSystemWindows="true"><android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:theme="@style/AppTheme.AppBarOverlay"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="?attr/colorPrimary"app:popupTheme="@style/AppTheme.PopupOverlay"></android.support.v7.widget.Toolbar></android.support.design.widget.AppBarLayout><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"app:layout_behavior="@string/appbar_scrolling_view_behavior"><android.support.v4.view.ViewPagerandroid:id="@+id/viewpagerhome"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentLeft="true"android:layout_alignParentStart="true" /><android.support.design.widget.BottomNavigationViewandroid:id="@+id/bottom_navigation"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"app:itemBackground="@color/colorPrimaryDark"app:itemIconTint="@drawable/menucolor"app:itemTextColor="@drawable/menucolor"app:menu="@menu/bottommenu"/><android.support.design.widget.FloatingActionButtonandroid:id="@+id/fab"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@+id/bottom_navigation"android:layout_alignParentRight="true"app:srcCompat="@android:drawable/ic_dialog_email"android:layout_marginTop="@dimen/fab_margin"android:layout_marginBottom="@dimen/fab_margin" /></RelativeLayout></android.support.design.widget.CoordinatorLayout>

menu to be used at the bottom as its a bottom menu, its required an menu to be inflated

<?xml version="1.0" encoding="utf-8"?><menuxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"><itemandroid:id="@+id/action_order"android:enabled="true"android:icon="@drawable/orders"android:title="My Orders"app:showAsAction="ifRoom" /><itemandroid:id="@+id/action_account"android:enabled="true"android:icon="@drawable/account"android:title="My Account"app:showAsAction="ifRoom" /><itemandroid:id="@+id/action_logout"android:enabled="true"android:icon="@drawable/account"android:title="Logout"app:showAsAction="ifRoom" /></menu>

In your Activity class initialize your declare your bottom menu and implement the listner, 

BottomNavigationView bottomNavigationView;
bottomNavigationView = (BottomNavigationView)findViewById(R.id.bottom_navigation); 

    bottomNavigationView.setOnNavigationItemSelectedListener(
                    newBottomNavigationView.OnNavigationItemSelectedListener() {
                        @OverridepublicbooleanonNavigationItemSelected(@NonNull MenuItem item) {

                            switch (item.getItemId()) {
                                case R.id.action_order:
                                    // your fragment or activity code herebreak;
                                case R.id.action_account:
                                    // your fragment or activity code herebreak;
                                case R.id.action_logout:
                                    break;
                            }
                            returnfalse;
                        }
                    });
        }

Done! Hope this helps.

You may like these posts

Post a Comment for "Android Tablayout On The Bottom Of The Screen"