Action Buttons do not cover the entire Toolbar

Question

I have used a Toolbar to display four action buttons. When I inflate the toolbar with menu, the action buttons are displayed towards one side as shown in the picture :

How can I make these action buttons cover the entire toolbar?

This is the code for the Activity :

public class ResultActivity extends FragmentActivity {

final int TAB_NUM = 2;
private ViewPager mViewPager;
private PagerAdapter mPagerAdapter;
private Toolbar mResultToolbar;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_result);
    mResultToolbar = (Toolbar) findViewById(R.id.result_toolbar);
    mResultToolbar.inflateMenu(R.menu.result_menu);
    mResultToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            int id = item.getItemId();
            switch (id) {
                case R.id.camera_action :
                    Intent cameraIntent = new Intent(getApplicationContext(),CameraActivity.class);
                    startActivity(cameraIntent);
                    break;
                case R.id.gallery_action :
                    Intent intent = new Intent(Intent.ACTION_PICK,
                            android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
                    startActivityForResult(intent, 0);
                    break;
                case R.id.profile_action :
                    Toast.makeText(getApplicationContext(),"Profile",Toast.LENGTH_SHORT).show();
                    break;
                case R.id.slide_up_action :
                    Toast.makeText(getApplicationContext(),"Slider",Toast.LENGTH_SHORT).show();
                    break;
            }
            return true;
        }
    });
    mViewPager = (ViewPager)findViewById(R.id.result_view_pager);
    mPagerAdapter = new ResultViewPagerAdapter(getSupportFragmentManager());
    mViewPager.setAdapter(mPagerAdapter);
    mViewPager.setPageTransformer(true, new DepthPageTransformer());
    }
}

This is the XML :

<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_marginLeft="@dimen/activity_margin_horizontal"
android:layout_marginRight="@dimen/activity_margin_horizontal"
android:background="@color/app_background">

<android.support.v4.view.ViewPager
    android:id="@+id/result_view_pager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/result_toolbar"
    android:layout_alignParentTop="true"
    android:background="@color/colorAccent">

    <android.support.v4.view.PagerTabStrip
        android:id="@+id/result_page_tab_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="@color/instagram_background" />

</android.support.v4.view.ViewPager>

<android.support.v7.widget.Toolbar
    android:id="@id/result_toolbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/toolbar_height"
    android:layout_alignParentBottom="true"
    android:background="@color/default_line_indicator_selected_color"
    android:elevation="@dimen/toolbar_elevation">
</android.support.v7.widget.Toolbar>

</RelativeLayout>

Windsor

please show your code – Dastard

@AmitVaghela Does seeing the code help? – Windsor

More helpful will be code from xml – Flipflop

show your xml file @ArjunIssar – Dastard

@AmitVaghela added the XML file. – Windsor

Answer 1

You can add LinearLayout to toolbar with parameters

 <LinearLayout android:layout_height="?attr/actionBarSize"
 android:layout_width="match_parent"
 android:orientation="horizontaly"
 android:weightSum="4">  </LinearLayout>

then for buttons

<Button android:layout_height="match_parent" 
        android:layout_width="0dp"
        android:layout_weight="1"></Button>

and every button will take 1/4 of toolbar space.

so to sum up, inside toolbar you will have:

<LinearLayout android:layout_height="?attr/actionBarSize"
     android:layout_width="match_parent"
     android:orientation="horizontaly"
     android:weightSum="4"> 
<Button android:layout_height="match_parent" 
            android:layout_width="0dp"
            android:layout_weight="1"></Button>
<Button android:layout_height="match_parent" 
            android:layout_width="0dp"
            android:layout_weight="1"></Button>
<Button android:layout_height="match_parent" 
            android:layout_width="0dp"
            android:layout_weight="1"></Button>
<Button android:layout_height="match_parent" 
            android:layout_width="0dp"
            android:layout_weight="1"></Button>
 </LinearLayout>

I wrote it from head, so I not tested this code, but I hope it will be helpful for you.

Flipflop

I do not want to add a linear layout to it. Can it be done with only using the Toolbar? – Windsor

this approach comes first to my mind, but try add android:weightSum="4" to your toolbar and then without adding LinearLayout try to add this btns with properties as I wrote above – Flipflop

toolbar does not have a weightSum attribute, only Linear Layout does. – Windsor

this will work but you will loose the native ripple and toast effect of native menu icon in toolbar. – Rash

Answer 2

If you have only four options for menu then you can think of not using Toolbar . Instead you can use a LinearLayout directly in AppBarlayout as it can hold other views then toolbar too. Like

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/app_background">

    <LinearLayout
        android:layout_height="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:orientation="horizontaly"
        android:weightSum="4">

        <Button
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"></Button>

        <Button
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"></Button>

        <Button
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"></Button>

        <Button
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"></Button>
    </LinearLayout>
    </android.support.design.widget.AppBarLayout>

I used the same layout of MyWay. Thanks MyWay.

Rash

How do I add this appBarlayout to the Activity?? – Windsor

To activity? ofcourse add it to your activity.xml file and you can fetch items using ids – Latashialatch

Do i have to add the sources to the buttons seperately? Can't I inflate a menu into the appbarlayout? – Windsor

Yeah thats right because option menus are for actionBar only and as far as now only Toolbar can be supported as action bar not AppBar layout. – Rash