Android Custom Action Bar LinearLayout with equally spaced buttons

Question

FIXED

I fixed this problem by simply removing the action bar and using the support library's toolbar instead. I have added the toolbar into my activity's XML file. Moreover, I have removed the default paddings of my root view (RelativeLayout) which have been chreated by Android Studio on creating the activity and which have initially not been notified by me. Furhtermore, I have used "match_parent" instead of "0dp" as image button width.

<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"
tools:context=".BluetoothConnectionManager">

<android.support.v7.widget.Toolbar android:id="@+id/tbMenu"
    xmlns:application="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/hafnertec"
    android:layout_alignParentTop="true">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_marginRight="12dp"
        android:orientation="horizontal">

        <ImageButton android:id="@+id/miBluetoothConnection"
            android:src="@drawable/ic_action_bluetooth_searching"
            android:background="@drawable/selector_menu_button"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:scaleType="centerInside"
            android:onClick="showDialogueCloseBluetoothConnection"/>

        <ImageButton android:id="@+id/miHome"
            android:src="@drawable/ic_action_bluetooth_searching"
            android:background="@drawable/selector_menu_button"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:scaleType="centerInside"
            android:onClick="switchToHomeFragment"/>

        <ImageButton android:id="@+id/miGraphsBurnOffCurves"
            android:src="@drawable/ic_action_bluetooth_searching"
            android:background="@drawable/selector_menu_button"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:scaleType="centerInside"
            android:onClick="switchToBurnOffGraphsFragment"/>

        <ImageButton android:id="@+id/miConfigurationMode"
            android:src="@drawable/ic_action_bluetooth_searching"
            android:background="@drawable/selector_menu_button"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:scaleType="centerInside"/>

        <ImageButton android:id="@+id/miExpertMode"
            android:src="@drawable/ic_action_bluetooth_searching"
            android:background="@drawable/selector_menu_button"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:scaleType="centerInside"/>
    </LinearLayout>

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

ORIGINAL QUESTION

I'm writing an Android application which makes use of a custom action bar. I want this action bar to display five button which are equally spaced. For accomplishing this task I use the following XML file (As the icons are still in work all buttons share the same icon.):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_gravity="fill_horizontal"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:orientation="horizontal">

<ImageButton android:id="@+id/miBluetoothConnection"
    android:src="@drawable/ic_action_bluetooth_searching"
    android:background="@drawable/selector_menu_button"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="2"
    android:scaleType="centerInside"
    android:onClick="showDialogueCloseBluetoothConnection"/>

<ImageButton android:id="@+id/miHome"
    android:src="@drawable/ic_action_bluetooth_searching"
    android:background="@drawable/selector_menu_button"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="2"
    android:scaleType="centerInside"
    android:onClick="switchToHomeFragment"/>

<ImageButton android:id="@+id/miGraphsBurnOffCurves"
    android:src="@drawable/ic_action_bluetooth_searching"
    android:background="@drawable/selector_menu_button"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="2"
    android:scaleType="centerInside"/>

<ImageButton android:id="@+id/miConfigurationMode"
    android:src="@drawable/ic_action_bluetooth_searching"
    android:background="@drawable/selector_menu_button"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="2"
    android:scaleType="centerInside"/>

<ImageButton android:id="@+id/miExpertMode"
    android:src="@drawable/ic_action_bluetooth_searching"
    android:background="@drawable/selector_menu_button"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="2"
    android:scaleType="centerInside"/>
</LinearLayout>

Working great in the designer this does not work when testing it on a real device. On testing all buttons are squeezed together and there is absolutely no spacing between them. The preview in the designer and a screenshot made with my testing device can be seen below.

Action bar displayed by the designer

Action bar on my testing device

I have also tried wrapping my LinearLayout into a RelativeLayout as well as using a TableLayout. However, non of these things work. Using a RelativeLayout the fifth button is not as big as the other ones.

For adding the action bar to my application I use the following code:

@Override
protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);

    ...
    // add the custom action bar
    this.abMainMenu = this.getSupportActionBar();
    this.abMainMenu.setDisplayShowCustomEnabled(true);
    LayoutInflater liAddActionBar = LayoutInflater.from(this);
    this.customActionBar = liAddActionBar.inflate(ApplicationSettings.LAYOUT_REFERENCE_MAIN_MENU, null);
    this.abMainMenu.setCustomView(this.customActionBar);
    ...
}

I am testing on a Samsung Galaxy S I9000 with CyanogenMod 11 December screenshot (Android 4.4.4).

I appreciate any help!

Thanks,

Lukas

Answer 1

Have you tried using the toolbar?