Custom Action Bar in Android does not match parent

Question

Hello everyone I'm try to make custom action bar. My codes below. Everything is good at the right side of Action Bar but at the left side custom action bar does not match. How can I solve this problem.

Thanks in helpings.

EDIT 1 : My main activity xml, it has not got anything interest with action bar but I could not figure out where the problem is

activity_main.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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"              tools:context=".MainActivity"
android:id="@+id/hh">

   </RelativeLayout>

Here is my custom action bar xml file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical" 
      android:layout_width="match_parent"
      android:layout_height="match_parent">

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:id="@+id/button"
    android:background="#ffff2301" />
</RelativeLayout>

My Java Code;

public class MainActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    getSupportActionBar().setCustomView(R.layout.action_bar);
    getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
}

}

Answer 1

You are using setCustomView() on the default toolbar provided by the theme. Custom views are meant to be loaded in the toolbar space that is not occupied by other views (logo, title, overflow menu..).

So your custom layout becomes part of the toolbar, and does not replace it. So either:

1. You want things to be this way. In this case your issue is just background color. I don't know how you set the custom view to be yellow, but try adding android:background="@color/transparent" to the RelativeLayout and switch the whole toolbar color to yellow instead. The room in the left will be eventually loaded with navigation icons, so you want it to be there.

2. You want to (I'd suggest to) use the Toolbar API which makes it easier to add custom views. This is done this way:

   <LinearLayout
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">
   <include layout="@layout/custom_toolbar"/>
   
   
       <RelativeLayout android:id="@+id/main_content"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
   
       </RelativeLayout>
   
   </LinearLayout>
   

And then, in custom_toolbar.xml,

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:abc="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_height="?attr/actionBarSize"
    android:layout_width="match_parent">

    <!-- you can add any custom view here -->

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button"
        android:background="#ffff2301" />

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

In your onCreate() you now have to call:

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar tb = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(tb);
    }

    }