Set roughike bottombar drawable background

Question

I am using roughike bottombar to navigate through fragments in my project, I am trying to set a drawable background to my bottombar but is having difficulty doing so. The example in the official guide https://github.com/roughike/BottomBar only shows how to change the color of the bar. Is there any possible way to do so?

    resId = R.drawable.footer_bg_02;
    bottomBar = BottomBar.attach(this, savedInstanceState);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
        bottomBar.setBackground(resId);
    }
    bottomBar.setFragmentItems(getSupportFragmentManager(), R.id.fragmentContainer,
            new BottomBarFragment(StoreList.newInstance("Content for fragment 1."), R.drawable.ic_01, "fragment 1"),
            new BottomBarFragment(QRscanner.newInstance("Content for fragment 2."), R.drawable.ic_02, "fragment 2"),
            new BottomBarFragment(MyBooking.newInstance("Content for fragment 3."), R.drawable.ic_03, "fragment 3"),
    );

    bottomBar.setOnItemSelectedListener(new OnTabSelectedListener() {
        @Override
        public void onItemSelected(int position) {
            switch (position) {
                case 0:
                    getSupportActionBar();
                    //return;
                case 1:
                    //getSupportActionBar().hide();
                case 2:
                    //return;
                case 3:
                    //getSupportActionBar().hide();
                case 4:
                    //return;
                    // Item 1 Selected
            }
        }
    });

I am trying to use setBackground but cannot get any luck.

score 1 · Answer 1 · answered Mar 22 '19 at 22:39

This worked for me, create a layout and set the background you want to the layout, then place the bottombar inside the layout you created and set the background to transparent color:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns: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="60dp"
android:background="@drawable/gradient_color"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom|end">
<com.roughike.bottombar.BottomBar
    android:id="@+id/bottombar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:bb_activeTabColor="@color/White"
    app:bb_inActiveTabColor="@color/White"
    app:bb_tabXmlResource="@xml/bottombar_tabs"
    android:background="@color/colorTransparent"/>
</android.support.design.widget.CoordinatorLayout>

Or you can use bottomNavigationView (its official) instead of the roughike bottombar. https://materialdoc.com/components/bottom-navigation/#how-to-style — ANDRESfff, Mar 25 '19 at 00:00

rafsanahmad007 · Answer 2 · 2017-01-12T08:42:17.417

try this: add this to parent layout:

 xmlns:app="http://schemas.android.com/apk/res-auto"

then

 <com.roughike.bottombar.BottomBar
        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_alignParentBottom="true"
        app:bb_activeTabAlpha="1"
        app:bb_activeTabColor="@color/color_white"
        app:bb_behavior="shifting"
        app:bb_inActiveTabAlpha="0.6"
        app:bb_inActiveTabColor="#1B5E20"
        app:bb_tabXmlResource="@xml/bottombar_tabs"
        app:bb_titleTextAppearance="@style/style_text"
        app:paddingEnd="0dp" />

in your res/xml folder:

bottombar_tabs.xml write:

 <?xml version="1.0" encoding="utf-8"?>
<tabs>
    <tab
        icon="@drawable/drawable1"
        id="@+id/areas_item"
        title="HOME" />
    <tab
        icon="@drawable/drawable2"
        id="@+id/nearby_item"
        title="Nearby" />
    <tab
        icon="@drawable/drawable3"
        id="@+id/my_marker_item"
        title="My marker" />

</tabs>

this is the style:

<style name="style_text">
    <item name="android:textSize">12sp</item>
    <item name="android:textColor">@color/color_white</item>
    <item name="android:textStyle">bold</item>
</style>

For programetically set items use:

  bottomBar = BottomBar.attach(this, savedInstanceState);

    bottomBar.setFragmentItems(getSupportFragmentManager(), R.id.fragmentContainer,
            new BottomBarFragment(SampleFragment.newInstance("Content for recents."), R.drawable.home, "Recents"),
            new BottomBarFragment(SampleFragment.newInstance("Content for food."), R.drawable.food, "Food"),
            new BottomBarFragment(SampleFragment.newInstance("Content for favorites."), R.drawable.favourite, "Favorites"),
            new BottomBarFragment(SampleFragment.newInstance("Content for locations."), R.drawable.location, "Location")
    );

    // Setting colors for different tabs 
    bottomBar.mapColorForTab(0, "#3B494C");
    bottomBar.mapColorForTab(1, "#00796B");
    bottomBar.mapColorForTab(2, "#7B1FA2");
    bottomBar.mapColorForTab(3, "#FF5252");

    bottomBar.setOnItemSelectedListener(new OnTabSelectedListener() {
        @Override
        public void onItemSelected(int position) {
            switch (position) {
                case 0:
                    // Item 1 Selected
            }
        }
    });

is there a way to set it programatically ? Since I have not made a bottom bar in my layout file, the bottombar was created directly from my activity — JerryKo, Jan 12 '17 at 07:13
@JerryKo see the edit..actuall y i don't find any method to change drawable...you can change the color only — rafsanahmad007, Jan 12 '17 at 08:42

score 0 · Accepted Answer · answered Jan 12 '17 at 06:40

This suggestion is from issue, you can use like this:

<com.roughike.bottombar.BottomBar 
    android:id="@+id/bottomBar" 
    android:layout_width="match_parent" 
    android:layout_height="60dp"      
    android:background="@color/colorAccent"  
    android:layout_alignParentBottom="true"  
    app:bb_tabXmlResource="@xml/bottombar_tabs" />

score 0 · Answer 4 · edited Jan 10 '18 at 13:08

0

I figured it out.

BottomBar bBar = (BottomBar) findViewById(R.id.bottomBar);
bBar.setOnTabSelectListener(this);

BottomBarTab tab1 = bBar.getTabAtPosition(0);
tab1.setBarColorWhenSelected(Color.WHITE)
BottomBarTab tab2 = bBar.getTabAtPosition(1);
tab2.setBarColorWhenSelected(Color.WHITE)

bBar.selectTabAtPosition(0)

It's a bit clumsy, but it works. Just set any color you want and it will update programmatically.

edited Jan 10 '18 at 13:08

Satan Pandeya

3,747
4
27
53

answered Jun 01 '17 at 16:46

widavies

774
2
9
22

I have issues like this , How I can change BottomBarTab lable String? – Htut Oct 03 '19 at 10:30

Set roughike bottombar drawable background

4 Answers4