How to create android button bar?

Question

I need to create a horizontal list of buttons without a separating space like this one
each button will contain a text and an icon I know about buttonbarlayout but it didn't work for me, please can someone help me, Thanks in advance

Create custom tab bar .https://github.com/roughike/BottomBar — IntelliJ Amiya, Mar 31 '17 at 08:57

score 6 · Answer 1 · answered Mar 31 '17 at 09:02

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:drawableTop="@drawable/read"
        android:text="Rewards" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:drawableTop="@drawable/read"
        android:text="Places" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:drawableTop="@drawable/read"
        android:text="Challenges" />
</LinearLayout>

Use LinearLayout with horizontal orientation and three buttons with layout_weight=1

score 3 · Answer 2 · answered Dec 06 '17 at 18:26

There is BottomNavigationView element for this

in your layout:

 <android.support.design.widget.BottomNavigationView
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/navigation"
 android:layout_width="match_parent"
 android:layout_height="56dp"
 android:layout_gravity="start"
 app:menu="@menu/my_navigation_items" />

res/menu/my_navigation_items.xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/action_search"
          android:title="@string/menu_search"
          android:icon="@drawable/ic_search" />
    <item android:id="@+id/action_settings"
          android:title="@string/menu_settings"
          android:icon="@drawable/ic_add" />
    <item android:id="@+id/action_navigation"
          android:title="@string/menu_navigation"
          android:icon="@drawable/ic_action_navigation_menu" />
</menu>

score 0 · Answer 3 · answered Mar 31 '17 at 09:05

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:weightSum="4"
        android:id="@+id/func"
        android:layout_above="@+id/btn_next">

        <Button
            android:id="@+id/btn_bgm"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:background="#3279CE"
            android:layout_height="wrap_content"
            android:layout_below="@+id/pager_image"
            android:text="BitRate"/>

        <Button
            android:id="@+id/btn_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#3279CE"
            android:text="time"
            />


        <Button
            android:id="@+id/btn_effect"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#3279CE"
            android:text="effect" />
        <Button
            android:id="@+id/frame"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#3279CE"
            android:text="FRAME" />


    </LinearLayout>

Thank you very much for your answer, it's so similar to what I want to do, I just have an issue:I want that the icon and the text will be next to each other and in the center of the button |------ Text +Icon ------ | — Caroline, Mar 31 '17 at 09:56
@Caroline, no problem, just use `android:drawableRight="@drawable/..."` to put a drawable to the right of the text. — Victor Zamanian, Jun 26 '17 at 12:47

Fathima km · Answer 4 · 2017-03-31T10:06:53.440

private LinearLayout tabLayout; 

   FrameLayout tab1 = (FrameLayout) LayoutInflater.from(this).inflate(R.layout.tab_cell, null);
    tab1.findViewById(R.id.click_view).setOnClickListener(this);
    tab1.findViewById(R.id.click_view).setTag(First_TAB);
    textviewone = (TextView) tab1.findViewById(R.id.tab_header);
    textviewone.setWidth(SMALL_TAB_WIDTH);
    textviewone.setText("Rewards");
    textviewone.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.picture_s, 0, 0);
    tabLayout.addView(tab1);

    FrameLayout tab2 = (FrameLayout) LayoutInflater.from(this).inflate(R.layout.tab_cell,, null);
    tab2.findViewById(R.id.click_view).setOnClickListener(this);
    tab2.findViewById(R.id.click_view).setTag(Second_TAB);
    secondtab = (TextView) tab2.findViewById(R.id.tab_header);
    secondtab.setWidth(SMALL_TAB_WIDTH);
    secondtab.setText(R.string.roster);
    secondtab.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.icon_selector_s, 0, 0);
    tabLayout.addView(tab2);

    FrameLayout tab3 = (FrameLayout) LayoutInflater.from(this).inflate(R.layout.tab_cell, null);
    tab3.findViewById(R.id.click_view).setOnClickListener(this);
    tab3.findViewById(R.id.click_view).setTag(Third_TAB);
    thirdtab = (TextView) tab3.findViewById(R.id.tab_header);
    thirdtab.setWidth(SMALL_TAB_WIDTH);
    thridtab.setText(R.string.copy_entry);
    thridtab.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.select_activity_selector_s, 0, 0);
    tabLayout.addView(tab3);

tab_cell.xml is below:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" android:layout_height="wrap_content">
    <TextView
        android:id="@+id/tab_header"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:layout_weight="1"
        android:gravity="center"
        android:maxLines="1"
        android:textSize="10.5sp"/>
    <RelativeLayout
        android:id="@+id/click_view"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center"></RelativeLayout>
</FrameLayout>

Below is the linear layout in the activity declared as tabLayout in the code:

 <LinearLayout
                        android:id="@+id/tabs" android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:weightSum="10"></LinearLayout>

I have added it. Please check it out – Fathima km Mar 31 '17 at 10:07 — Fathima km, Mar 31 '17 at 10:07

score 0 · Answer 5 · answered Nov 13 '17 at 19:13

What you can see in that picture isn't a simple button bar, it's called Bottom Navigation Bar, and Android has specific code for that. In this question you can learn how to create one and use it. You can change of course the colors with simple XML or Java code. Hope you find it helpful.

How to create android button bar?

5 Answers5