Darshan Trivedi
Darshan Trivedi

Reputation: 231

Getting unncessary space at the top of toolbar while adding bottom navigation

As per my functionality I need to use drawer menu as well as bottom navigation. I am using https://github.com/roughike/BottomBar for bottom navigation.

If I use bottom navigation with only 3 tabs than it works fine but if I extend it with 4 or 5 tabs than it appears white space at the top of tool bar.

Here is my code snippet which I have used for adding bottom navigation.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/DrawerLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" android:elevation="7dp" android:fitsSystemWindows="false" android:scrollbars="none">
    <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
        <include android:id="@+id/tool_bar" layout="@layout/row_main_toolbar_header"></include>
        <!-- The main content view -->
        <FrameLayout android:id="@+id/contentFrame" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="@dimen/dp_1" android:layout_marginTop="@dimen/dp_10" android:background="@android:color/white" android:orientation="vertical"></FrameLayout>
    </LinearLayout>
    <ListView android:id="@+id/lvDrawerMenu" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" android:background="@android:color/white" android:scrollbars="none"></ListView>
</android.support.v4.widget.DrawerLayout>

There is no any component required for bottom navigation using given library.

In MainActivity.java to add bottom navigation.

BottomBar bottomBar = BottomBar.attach(this, savedInstanceState);
bottomBar.setItemsFromMenu(R.menu.home_tab_menu, new OnMenuTabSelectedListener() {
 @Override
 public void onMenuItemSelected(int itemId) {
  switch (itemId) {
   case R.id.recent_item:

    break;
   case R.id.favorite_item:

    break;
   case R.id.location_item:

    break;
   case R.id.planning_item:

    break;
   case R.id.saver_item:

    break;

  }
 }
});

row_main_toolbar_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:elevation="@dimen/dp_4"
    android:gravity="center"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <RelativeLayout
        android:id="@+id/RelativeLayout01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp">

        <TextView
            android:id="@+id/txtTBTitle"
            style="@style/CustomBlackHeaderText"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/imgTB4" />

        <ImageView
            android:id="@+id/imgTB4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/imgTB3"
            android:layout_toStartOf="@+id/imgTB3"
            android:padding="@dimen/dp_5" />

        <ImageView
            android:id="@+id/imgTB3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="@dimen/dp_5"
            android:layout_toLeftOf="@+id/imgTB2"
            android:layout_toStartOf="@+id/imgTB2"
            android:padding="@dimen/dp_5" />


        <ImageView
            android:id="@+id/imgTB2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="@dimen/dp_5"
            android:layout_toLeftOf="@+id/imgTB1"
            android:layout_toStartOf="@+id/imgTB1"
            android:padding="@dimen/dp_5" />

        <ImageView
            android:id="@+id/imgTB1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_alignTop="@+id/txtTBTitle"
            android:layout_centerVertical="true"
            android:layout_marginLeft="@dimen/dp_5"
            android:padding="@dimen/dp_5" />

    </RelativeLayout>

</android.support.v7.widget.Toolbar>

Screenshot which display space while bottom navigation

Screenshot with no space while only 3 tabs

Upvotes: 4

Views: 2442

Answers (2)

Hồng Ph&#250;c
Hồng Ph&#250;c

Reputation: 478

When create default bottom navbar will auto have this properties in activity_main:

android:paddingTop="?attr/actionBarSize"

So just delete it and no have space on top of your app

Upvotes: 5

MaasDl
MaasDl

Reputation: 1

I had a similar problem. I solved it by adding this line of code. according to your code:

bottomBar.noTopOffset();

this at least worked for me with more than 3 tabs.

Upvotes: 0

Related Questions