Toolbar with Custom View not Displaying with Full Width in android

Question

I went through lots of answers here related to Toolbar but none of the answers could help me.

What I'm trying to achieve is to have an extended toolbar which will display a logo and menu items.

The way I'm trying to achieve this is through toolbar. First I create the toolbar and add my custom view.

My toolbar.xml:-

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/dl_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
android:clipToPadding="false">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize">


    <View
        android:layout_width="fill_parent"
        android:layout_height="5dp"
        android:background="#358c44"
        android:layout_alignParentTop="true"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_alignParentBottom="true"
        android:background="#358c44"/>

</RelativeLayout>

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

My name activity:-

 protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setTitle(null);
     toolbar.setLogo(R.mipmap.ic_launcher);
   /* toolbar.setPadding(10,10,10,10);*/
    getSupportActionBar().setDisplayHomeAsUpEnabled(false);
    getSupportActionBar().setDisplayShowHomeEnabled(true);

    viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);

    tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
}

My app show like this:-

I am new in android developing please help me! Thanks in advance

After update my code my app look like:-

Answer 1

在工具栏上使用AppBar布局，请参阅此处的完整教程

Answer 2

Try this it is working for me

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        // imageView for logo
        <ImageView
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:layout_gravity="center_vertical"
            android:scaleType="centerInside"
            android:src="@drawable/title" />

        // This is for search button on the right side
        <ImageButton
            android:id="@+id/imageButton"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:padding="10dp"
            android:src="@drawable/button_image"
            android:scaleType="fitXY"
            android:background="@android:color/transparent"
            android:layout_gravity="center_vertical|end"
            android:layout_marginEnd="16dp" />

    </FrameLayout>

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

and in your activity simply set it like this

Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar);
setSupportActionBar(toolbar);

for menu add this in your main activity

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return super.onCreateOptionsMenu(menu);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.menuSettings:
            // Do some thing on setting press
            break;
        case R.id.menuAboutUs:
            // Do some thing on About us 
            break;

    }

    return super.onOptionsItemSelected(item);
}

and for list of menu item add menu_main.xml file in your menu directory under your resource directory and items in this file like this

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/menuSettings"
        android:title="Settings" />

    <item
        android:id="@+id/menuAboutUs"
        android:title="About Us" />

</menu>

Answer 3

check below code it worked. I used toolbar.xml file in src\\main\\res\\layout folder.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout
        android:layout_width="match_parent"
        android:background="#2196F3"
        android:layout_height="58dp"
        android:id="@+id/relative">
        <include
        android:id="@+id/toolbarFav"
        layout="@layout/toolbar"
            android:layout_width="match_parent"
            android:layout_height="58dp"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"/>
    </RelativeLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/relative">
</LinearLayout>
</RelativeLayout>

toolbar.xml

<android.support.v7.widget.Toolbar 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="58dp"
    android:background="#FFFFFF"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>