CODEWITHSUNDEEP
androidxmlandroid-layoutbottomnavigationview
Naty
Naty

Reputation: 25

Uneven Bottom Navigation Bar

I'm trying to create a bottom navigation bar with 5 items regularly spaced and without labels underneath the icons. I found lots of guidance and followed it but unlike the examples I followed, my navigation bar display is very uneven. How can I make it evenly distributed?

This is what it looks like now:

My xml view (within Relative Layout):

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation_search"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@android:color/white"
    app:itemTextColor="@android:color/white"
    app:menu="@menu/navigation" />

Navigation xml file:

<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

<item
    android:id="@+id/navigation_home"
    android:enabled="true"
    android:icon="@drawable/ic_home_black_24dp"
    android:title="Home"
    app:showAsAction="always" />

<item
    android:id="@+id/navigation_look"
    android:icon="@drawable/ic_find_in_page_black_24dp"
    android:title="Search"
    android:enabled="true"
    app:showAsAction="always"/>

<item
    android:id="@+id/navigation_basket"
    android:enabled="true"
    android:icon="@drawable/ic_shopping_basket_black_24dp"
    android:title="Basket"
    app:showAsAction="always"/>

<item
    android:id="@+id/navigation_favourite"
    android:icon="@drawable/ic_favorite_black_24dp"
    android:title="Favourite"
    android:enabled="true"
    app:showAsAction="always"/>


<item
    android:id="@+id/navigation_account"
    android:enabled="true"
    android:icon="@drawable/ic_person_black_24dp"
    android:title="Account"
    app:showAsAction="always"/>
</menu>

And this is what is in my CategoryActivity.java within onCreate:

BottomNavigationView navigationSearch = (BottomNavigationView) 
findViewById(R.id.navigation_search);
navigationSearch.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    switch (item.getItemId()) {
                        case R.id.navigation_home:
                            Intent main = new Intent(CategoryActivity.this, MainActivity.class);
                            startActivity(main);
                            break;
                        case R.id.navigation_look:
                            Intent search = new Intent(CategoryActivity.this, SearchActivity.class);
                            startActivity(search);
                            break;
                        case R.id.navigation_basket:
                            Intent basket = new Intent(CategoryActivity.this, BasketActivity.class);
                            startActivity(basket);
                            break;
                        case R.id.navigation_favourite:
                            Intent favourite = new Intent(CategoryActivity.this, FavouritesActivity.class);
                            startActivity(favourite);
                            break;
                        case R.id.navigation_account:
                            Intent account = new Intent(CategoryActivity.this, AccountActivity.class);
                            startActivity(account);
                            break;
                    }
                    return false;
                }
            });

Upvotes: 0

Views: 611

Answers (4)

ReDLaNN
ReDLaNN

Reputation: 524

i had the same problem but with 4 items, there is a sort of trick, you should use this method on your BottomNavigationView after the findViewById.

@SuppressLint("RestrictedApi")
public static void disableShiftMode(BottomNavigationView view) {
    BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
    try {
        Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
        shiftingMode.setAccessible(true);
        shiftingMode.setBoolean(menuView, false);
        shiftingMode.setAccessible(false);
        for (int i = 0; i < menuView.getChildCount(); i++) {
            BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
            //noinspection RestrictedApi
            item.setShiftingMode(false);
            // set once again checked value, so view will be updated
            //noinspection RestrictedApi
            item.setChecked(item.getItemData().isChecked());
        }
    } catch (NoSuchFieldException e) {
        Log.e("BNVHelper", "Unable to get shift mode field", e);
    } catch (IllegalAccessException e) {
        Log.e("BNVHelper", "Unable to change value of shift mode", e);
    }
}

Sorry, i can't really explain the solution more in-depth since it was an issue i solved a long time ago following some advice on StackOverflow and i don't remember the theory/reasons there was a need for this, but this works fine for me on Android Oreo so you could do some experiments and find a better way.

Upvotes: 1

shakunthalaMK
shakunthalaMK

Reputation: 386

Use a linear layout with horizontal orientation. You can give layout_weight for each item about 20. WeightSum of 100 for the Linear layout. Load the data using fragments.

Upvotes: 0

Talib Ismayilzada
Talib Ismayilzada

Reputation: 15

I recommend you to use the fragments

navigationSearch.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                Fragment selectedFragment = null;
                switch (item.getItemId())
                {
                    case R.id.navigation_home:
                        selectedFragment = HomeFragment.newInstance();
                        break;
                    case R.id.navigation_look:
                        selectedFragment = LookFragment.newInstance();
                        break;
                    case R.id.navigation_basket:
                        selectedFragment = BasketFragment.newInstance();
                        break;
                    case R.id.navigation_favourite:
                        selectedFragment = FavouriteFragment.newInstance();
                        break;
                    case R.id.navigation_account:
                        selectedFragment = AccountFragment.newInstance();
                        break;
                }
                FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
                transaction.replace(R.id.frame_layout,selectedFragment);
                transaction.commit();
                return true;
            }
        });
setDefaulFragment();

private void setDefaulFragment() {
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        transaction.replace(R.id.frame_layout,HomeFragment.newInstance());
        transaction.commit();
    }

activity_category.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/gradient"
    tools:context=".CategoryActivity">
    <FrameLayout
        android:id="@+id/frame_layout"
        android:animateLayoutChanges="true"
        android:layout_above="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimaryDark"
        app:itemIconTint="@drawable/nav_item_color_state"
        app:itemTextColor="@drawable/nav_item_color_state"
        app:menu="@menu/bottom_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</RelativeLayout>

Example fragment: HomeFragment.java:

public class HomeFragment extends Fragment {
    View mFragment;

    public static HomeFragment newInstance(){
        HomeFragment homeFragment = new HomeFragment();
        return homeFragment ;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        mFragment = inflater.inflate(R.layout.fragment_home,container,false);
        return mFragment;
    }
}

Example fragment : fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeFragment">

<TextView
    android:text="Home Fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</FrameLayout>

Upvotes: 1

Aman Rawat
Aman Rawat

Reputation: 395

What you can do is give the Title attribute as android:title="" in Navigation.xml and then to disable the shift mode use BottomNavigationViewHelper.disableShiftMode(your BottomNavigationView)

Upvotes: 0

Related Questions