Bottombar: How to implement the navigation bar goodness?
I want to get this result.
Here is my current code:
bottomBar = BottomBar.attach(this, savedInstanceState);
bottomBar.setItemsFromMenu(R.menu.bar, new OnMenuTabSelectedListener() {
@Override
public void onMenuItemSelected(int resId) {
}
});
bottomBar.mapColorForTab(0, ContextCompat.getColor(this, R.color.primary_dark));
bottomBar.mapColorForTab(1, ContextCompat.getColor(this, R.color.md_teal_600));
bottomBar.mapColorForTab(2, ContextCompat.getColor(this, R.color.md_red_500));
bottomBar.mapColorForTab(3, ContextCompat.getColor(this, R.color.md_blue_grey_500));
But the result of this code is a black navbar.
What am I missing?
rosenpin
All 33 comments
Try adding one more item and see if that makes a difference
NickM-27
on 18 Mar 2016
I will investigate this.
roughike
on 18 Mar 2016
How many tabs do you have in your XML menu?
roughike
on 18 Mar 2016
I tried with both 4 and 5
rosenpin
on 18 Mar 2016
What device are you testing this on?
roughike
on 18 Mar 2016
I'm testing it on a virtual x86 Nexus 6P running android N.
rosenpin
on 18 Mar 2016
I'll test it now on my actual android 6.0.1 Nexus 6P.
rosenpin
on 18 Mar 2016
Well that's very odd.
When I run it on my actual device it looks like this
I'll double check my code to see if I modify anything related to the navbar, although I don't think I do.
rosenpin
on 18 Mar 2016
That is a weird bug I'm aware of. The top offset can be removed by calling bottomBar.noTopOffset(), but that is a hacky fix and won't probably fix the bottom stuff.
You're also probably using a CoordinatorLayout with fitsSystemWindows="true", which currently produces weird behavior. Try removing the fitsSystemWindows attribute and attaching the BottomBar to other Views by using bottomBar.attach(View view, Bundle savedInstanceState).
Could you post the whole XML code your using in that layout so I could investigate and try to fix this?
roughike
on 18 Mar 2016
I added the bottomBar.noTopOffset() and removed fitsSystemWindows="true" from my layouts, though I'm not sure which views I should attach.
Here are my layout files:
activity_scrolling.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/clWrapper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.fakeforsnapchat.Activities.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include layout="@layout/top" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_scrolling" />
</LinearLayout>
</FrameLayout>
content_scrolling.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/sv_items_wrapper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background"
tools:context="com.fakeforsnapchat.Activities.ScrollingActivity"
tools:showIn="@layout/activity_scrolling">
<LinearLayout
android:id="@+id/sv_items"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</ScrollView>
top.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:layout_marginTop="25dp"
android:orientation="vertical"
tools:showIn="@layout/activity_scrolling">
<com.quinny898.library.persistentsearch.SearchBox
android:id="@+id/sbSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
You could try bottomBar.attach(findViewById(R.id.sv_items_wrapper), savedInstanceState). If that doesn't work, try attaching it to different views you have.
If this doesn't work, let me know and I'll try my best to fix it during this weekend.
Right now I have some important business (=getting shitfaced with cheapest possible beer) to do, but I'll get back to you in a couple days.
roughike
on 18 Mar 2016
I got it to work by attaching it to R.id.main_content.
Thank you very much you quick support.
rosenpin
on 18 Mar 2016
I now noticed that there is a weird spacing above the bottom bar with this solution
Is this a known issue?
rosenpin
on 18 Mar 2016
Are you using noTopOffset()?
roughike
on 18 Mar 2016
Yes, I do
rosenpin
on 18 Mar 2016
If you are, try removing it.
roughike
on 18 Mar 2016
Back to this
rosenpin
on 18 Mar 2016
Try useOnlyStatusBarTopOffset() instead. If that doesn't work, I'll try to fix this when I can.
roughike
on 18 Mar 2016
Here is my current code:
bottomBar = BottomBar.attach(this, savedInstanceState);
BottomBar.attach(findViewById(R.id.clWrapper), savedInstanceState);
ViewCompat.setElevation(bottomBar, 8);
bottomBar.setItemsFromMenu(R.menu.bar, new OnMenuTabSelectedListener() {
@Override
public void onMenuItemSelected(int resId) {
switch (resId) {
case R.id.recents:
new toggleView().execute();
break;
case R.id.community:
new toggleView().execute();
break;
case R.id.favorites:
new toggleView().execute();
break;
}
}
});
bottomBar.mapColorForTab(0, ContextCompat.getColor(this, R.color.colorAccent));
bottomBar.mapColorForTab(1, 0xFF5D4037);
bottomBar.mapColorForTab(2, "#7B1FA2");
bottomBar.mapColorForTab(3, "#FF5252");
activity_scrolling.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:id="@+id/clWrapper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.fakeforsnapchat.Activities.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include layout="@layout/top" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_scrolling" />
</LinearLayout>
Don't call attach() twice, as it's unnecessary.
roughike
on 18 Mar 2016
When I change my code to
bottomBar = BottomBar.attach(findViewById(R.id.clWrapper), savedInstanceState);
ViewCompat.setElevation(bottomBar, 8);
bottomBar.setItemsFromMenu(R.menu.bar, new OnMenuTabSelectedListener() {
@Override
public void onMenuItemSelected(int resId) {
switch (resId) {
case R.id.recents:
new toggleView().execute();
break;
case R.id.community:
new toggleView().execute();
break;
case R.id.favorites:
new toggleView().execute();
break;
}
}
});
bottomBar.mapColorForTab(0, ContextCompat.getColor(this, R.color.colorAccent));
bottomBar.mapColorForTab(1, 0xFF5D4037);
bottomBar.mapColorForTab(2, "#7B1FA2");
bottomBar.mapColorForTab(3, "#FF5252");
It looks like this
When I change my code to
bottomBar = BottomBar.attach(findViewById(R.id.clWrapper), savedInstanceState);
bottomBar.noTopOffset();
ViewCompat.setElevation(bottomBar, 8);
bottomBar.setItemsFromMenu(R.menu.bar, new OnMenuTabSelectedListener() {
@Override
public void onMenuItemSelected(int resId) {
switch (resId) {
case R.id.recents:
new toggleView().execute();
break;
case R.id.community:
new toggleView().execute();
break;
case R.id.favorites:
new toggleView().execute();
break;
}
}
});
bottomBar.mapColorForTab(0, ContextCompat.getColor(this, R.color.colorAccent));
bottomBar.mapColorForTab(1, 0xFF5D4037);
bottomBar.mapColorForTab(2, "#7B1FA2");
bottomBar.mapColorForTab(3, "#FF5252");
It looks like this
rosenpin
on 18 Mar 2016
Looks like it's not drawing behind the Navigation Bar on that device.
I probably know the solution for this problem, and I'll fix this in a couple days.
roughike
on 18 Mar 2016
Great, thanks
rosenpin
on 18 Mar 2016
Now should work.
mBottomBar = BottomBar.attach(this, savedInstanceState);
// If you get that weird-looking top space, this fixes it:
// mBottomBar.noTopOffset();
Still doesn't work for me..
Screenshot
Code:
bottomBar = BottomBar.attach(this, savedInstanceState);
bottomBar.noTopOffset();
bottomBar.setItemsFromMenu(R.menu.bar, new OnMenuTabSelectedListener() {
@Override
public void onMenuItemSelected(int resId) {
switch (resId) {
case R.id.recents:
new toggleView().execute();
break;
case R.id.community:
new toggleView().execute();
break;
case R.id.favorites:
new toggleView().execute();
break;
}
}
});
bottomBar.mapColorForTab(0, ContextCompat.getColor(this, R.color.colorAccent));
bottomBar.mapColorForTab(1, 0xFF5D4037);
bottomBar.mapColorForTab(2, "#7B1FA2");
bottomBar.mapColorForTab(3, "#FF5252");
OH, wait a minute.
I think I might know why
rosenpin
on 19 Mar 2016
OK, I now know why.
It seems like this library is in conflict with 'MaterialDrawer', if I do not initialize the drawer, everything works just fine.
rosenpin
on 19 Mar 2016
Are you initializing the MaterialDrawer before or after BottomBar?
roughike
on 19 Mar 2016
Furthermore, if I initialize the materialdrawer before the BottomBar, the bottombar works fine, but the navbar gets a little messed up
rosenpin
on 19 Mar 2016
And another thing, when I intialize the materialdrawer before the bottombar, the weird spacing above the bottom bar reappears.
rosenpin
on 19 Mar 2016
It has to do with MaterialDrawer not drawing behind the Navigation Bar.
BottomBar can't extend there because it is a child of MaterialDrawer. You should figure how to get the MaterialDrawer to draw behind the Navigation Bar.
roughike
on 19 Mar 2016
Or maybe I could try if changing elevation works. If it does, I'll expose a method for changing it so you could use the sweet navbar goodness and MaterialDrawer.
roughike
on 19 Mar 2016
I'll close this issue as it's MaterialDrawer specific and not directly related to this library.
roughike
on 25 Mar 2016
Related issues
zhangzhzh
路
7Comments
mag2007
路
8Comments
javiersantos
路
5Comments
MansoorJafari
路
5Comments
LiuDeng
路
5Comments
Most helpful comment
You could try
bottomBar.attach(findViewById(R.id.sv_items_wrapper), savedInstanceState). If that doesn't work, try attaching it to different views you have.If this doesn't work, let me know and I'll try my best to fix it during this weekend.
Right now I have some important business (=getting shitfaced with cheapest possible beer) to do, but I'll get back to you in a couple days.