Custom Toolbar layout with edit text

Question

I created a custom layout for toolbar with edittext but it does not fit in toolbar. I needed toolbar like this

But got this output

I needed full width edittext. Help me to achive this

My XML Code

<android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:gravity="center"
            app:contentInsetStart="0dp"
            app:layout_scrollFlags="scroll|enterAlways"
            app:navigationIcon="@drawable/icon_toolbar_back"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
            app:theme="@style/ThemeOverlay.AppCompat.Dark"
            app:titleTextAppearance="@style/ToolbarTextAppearance">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/imgActionLogo"
                    android:layout_width="match_parent"
                    android:layout_height="45dp"
                    android:layout_gravity="center"
                    android:src="@drawable/common_google_signin_btn_icon_dark" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/_25sdp"
                    android:layout_marginBottom="@dimen/_5sdp"
                    android:layout_marginLeft="@dimen/_10sdp"
                    android:layout_marginRight="@dimen/_10sdp"
                    android:background="@drawable/toolbar_search_bg"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:paddingLeft="@dimen/_5sdp"
                    android:paddingRight="@dimen/_5sdp"
                    app:layout_scrollFlags="scroll|enterAlways">

                    <ImageView
                        android:layout_width="@dimen/_20sdp"
                        android:layout_height="@dimen/_20sdp"
                        android:src="@drawable/icon_search" />

                    <EditText
                        android:id="@+id/etSearch"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="@dimen/_5sdp"
                        android:background="@null"
                        android:editable="false"
                        android:hint="Search More Products..."
                        android:textColorHint="@color/text_medium"
                        android:textSize="@dimen/_10sdp" />
                </LinearLayout>
            </LinearLayout>
        </android.support.v7.widget.Toolbar>

I also searched on google but not able to achieve this.

Answer 1

The inner content of the Toolbar will shrink if you use app:navigationIcon and/or menu items.

You can omit app:navigationIcon and menu items and create your own buttons inside Toolbar.

Then setting

<android.support.v7.widget.Toolbar
    ...
    app:contentInsetRight="0dp"
    app:contentInsetLeft="0dp">
 ...
 </android.support.v7.widget.Toolbar>

should give you more control of content padding

Answer 2

When you are using toolbar it will add some margin space after menu icon. So you have to add search view below of toolbar with same background color parent and make it fixed if there are any scroll then add that scroll below of search layout. Try this.

<LinearLayout
      android:layout_width="match_parent"
      android:layout_height="@dimen/_25sdp"
      android:background="?attr/colorPrimary"
      android:orientation="vertical">

        <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="?attr/colorPrimary"
                    android:gravity="center"
                    app:contentInsetStart="0dp"
                    app:layout_scrollFlags="scroll|enterAlways"
                    app:navigationIcon="@drawable/icon_toolbar_back"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
                    app:theme="@style/ThemeOverlay.AppCompat.Dark"
                   app:titleTextAppearance="@style/ToolbarTextAppearance">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">

                        <ImageView
                            android:id="@+id/imgActionLogo"
                            android:layout_width="match_parent"
                            android:layout_height="45dp"
                            android:layout_gravity="center"                            
                android:src="@drawable/common_google_signin_btn_icon_dark"/>                           
                   </LinearLayout>
                </android.support.v7.widget.Toolbar>
                   <FrameLayout
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/_25sdp"
                            android:background="?attr/colorPrimary">
                         <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/_25sdp"                                           
                            android:layout_marginBottom="@dimen/_5sdp"
                            android:layout_marginLeft="@dimen/_10sdp"
                            android:layout_marginRight="@dimen/_10sdp"
                            android:background="@drawable/toolbar_search_bg"
                            android:gravity="center"
                            android:orientation="horizontal"
                            android:paddingLeft="@dimen/_5sdp"
                            android:paddingRight="@dimen/_5sdp"
                            app:layout_scrollFlags="scroll|enterAlways">

                            <ImageView
                                android:layout_width="@dimen/_20sdp"
                                android:layout_height="@dimen/_20sdp"
                                android:src="@drawable/icon_search" />

                            <EditText
                                android:id="@+id/etSearch"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_marginLeft="@dimen/_5sdp"
                                android:background="@null"
                                android:editable="false"
                                android:hint="Search More Products..."
                                android:textColorHint="@color/text_medium"
                                android:textSize="@dimen/_10sdp" />
                        </LinearLayout>
    </FrameLayout>
</LinearLayout>