Too much margin on SearchView

Question

My SearchView is showing up like this:

As you can see there is a margin both on the search_edit_frame of the SearchView, and outside the SearchView itself.

Where is this coming from? Inspecting the layout reveals a margin of 24 pixels to the left of search_edit_frame but no margin elsewhere.

How can I remove this extra space?

menu.xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/appbar_menu_search"
        android:icon="@drawable/ic_search"
        android:title="@string/search_search"
        app:showAsAction="always"
        app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>

Layout:

<RelativeLayout

    android:id="@+id/root_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/profile_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/topbar_gradient"
        android:theme="@style/AppTheme.Dark"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <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/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/topbar_gradient"
            android:fitsSystemWindows="true"
            android:minHeight="?android:attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways">

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

    (...)
</RelativeLayout>

I managed to reduce the spacing by applying @Jimmy's answer:

However theres still a big gap between the "back" imagebutton and the SearchView.

The behavior you see is a consequence of how `Toolbar` layouts its children. Basically, all of the `MenuItem`s would be laid out from right to left (in the case of rtl - from left to right). Inspect [`Toolbar#layoutChildRight()`](https://android.googlesource.com/platform/frameworks/support/+/refs/heads/master/v7/appcompat/src/main/java/android/support/v7/widget/Toolbar.java#1953): `childWidth` is the value, that affects on how much margin would be between back arrow and `SearchView`. I would recommend to stick to `Toolbar` with custom layout, as long as there is no API to resolve the issue. — azizbekian, May 29 '18 at 14:11
May be your search icon and back icon image have more extra white space. Open you images in any image editing tool like photoshop and try to reduce the white space(transparent area). — jessica, Jun 04 '18 at 08:32
No i havent... I guess Ill have to use a custom toolbar layout — MichelReap, Jun 05 '18 at 08:14

score 2 · Answer 1 · answered May 25 '18 at 15:04

search_edit_frame is a LinearLayout in searchview layout. It has start and end margin of 8dip by default .

relevant code from source

 <LinearLayout
        android:id="@+id/search_edit_frame"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_marginStart="8dip"
        android:layout_marginEnd="8dip"
        android:orientation="horizontal"
        android:layoutDirection="locale">

Your issue is probably because of start margin on it. You can get this linear layout from search view and set the layout parameter to reduce the gap in your activity ( probably inside onCreateOptionsMenu or similar where you are inflating thissearchview ) .

Something like this , assuming searchView is your SearchView instance,

        LinearLayout searchFrameLL=(LinearLayout)searchView.findViewById(R.id.search_edit_frame);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,  LinearLayout.LayoutParams.MATCH_PARENT);
        params.setMargins(0,0,8,0); //params.setMargins(left, top, right, bottom)
       // params.setMarginStart(0);  //(or just use individual like this
        searchFrameLL.setLayoutParams(params);

In similar fashion, you can update other properties in that xml to meet your needs.

thanks, im going to try but the margin I show is way more than only 8dp, dont you think? — MichelReap, May 28 '18 at 07:03
this does reduce the spacing a bit but its still too much wasted space, theres a gap that i cannot identify! — MichelReap, May 28 '18 at 07:08
that brought your left margin on search frame to 0. now you can try to reduce right margin for the `back` button as well. — Jimmy, May 29 '18 at 02:46
@MichelReap have you tried to use `contentInsetEnd/Right="0dp"` for your `Toolbar`? It should help to remove the remained margin of your back button. — romtsn, May 30 '18 at 19:28
yes i have, also if i use landscape searchview stays at the far right! — MichelReap, May 31 '18 at 08:59

score 1 · Answer 2 · answered May 28 '18 at 09:28

I'm not sure if it helps, but I also had an unwanted margin in the Toolbar view. This answer about content insets helped me figure it out.

<android.support.v7.widget.Toolbar
     xmlns:app="schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="@color/primaryColor"
     android:contentInsetLeft="0dp"
     android:contentInsetStart="0dp"
     app:contentInsetLeft="0dp"
     app:contentInsetStart="0dp"
     android:contentInsetRight="0dp"
     android:contentInsetEnd="0dp"
     app:contentInsetRight="0dp"
     app:contentInsetEnd="0dp" />

This did not change anything :( – MichelReap May 28 '18 at 11:18 — MichelReap, May 28 '18 at 11:18

ADM · Answer 3 · 2018-11-03T14:53:13.983

There will be small padding as it a MenuItem. You can reset the content Inset padding. try setting attribute contentInsetStartWithNavigation to 0dp.

<RelativeLayout
    android:id="@+id/root_layout"
    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="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/profile_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentInsetStartWithNavigation="0dp"
            android:background="@color/colorAccent"
            android:minHeight="?android:attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways">

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

</RelativeLayout>

score 0 · Answer 4 · edited Jun 03 '18 at 12:25

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/profile_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <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/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:contentInsetEnd="0dp"
            android:contentInsetLeft="0dp"
            android:contentInsetRight="0dp"
            android:contentInsetStart="0dp"
            android:fitsSystemWindows="true"
            android:minHeight="?android:attr/actionBarSize"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            app:layout_scrollFlags="scroll|enterAlways">


            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_back_arrow" />


            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="text"
                android:textColor="@android:color/white" />


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

</RelativeLayout>

score 0 · Answer 5 · answered Jun 01 '18 at 03:56

You can set the leftMargin to zero to achieve desired result:

LinearLayout searchEditFrame = (LinearLayout) searchView.findViewById(R.id.search_edit_frame);
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) searchEditFrame.getLayoutParams();
layoutParams.leftMargin = 0;

score 0 · Answer 6 · edited Jun 04 '18 at 23:50

0

Use android:layout_gravity="right" on the view.

edited Jun 04 '18 at 23:50

Andrew Myers

2,754
5
32
40

answered Jun 01 '18 at 06:31

Abhishek D

465
2
9
24

does not do anything! – MichelReap Jun 01 '18 at 10:44

Jamil Hasnine Tamim · Answer 7 · 2020-09-21T07:00:06.287

0

For kotlin:

var searchView = searchItem.actionView as SearchView
val searchEditFrame: LinearLayout =
searchView!!.findViewById<View>(R.id.search_edit_frame) as LinearLayout
val layoutParams: LinearLayout.LayoutParams =
searchEditFrame.layoutParams as LinearLayout.LayoutParams
layoutParams.leftMargin = -10

edited Sep 21 '20 at 07:00

answered Sep 21 '20 at 06:48

Jamil Hasnine Tamim

4,389
27
43

score 0 · Answer 8 · answered Feb 01 '23 at 11:25

Maybe its too late, but I'll post here my solution in case it helps anyone. My SearchView is under app bar and always visible, but the excessive margin between the start of the view and the icon it's still present. My solution it's on the xml where the SearchView is declared, i just added:

android:layout_width="match_parent"
android:paddingStart="-5dp"

Too much margin on SearchView

8 Answers8