Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Left space in Toolbar with SearchView android studio

I'm trying to add a simple SearchView to the toolbar in my app. Everything it's working fine expect for the layout.

There is this "space" between the NavigationDrawer icon and the SearchView. If I set a title the space is filled with that string, otherwise is empty.

Empty string:

enter image description here

With a string in title:

enter image description here

How do I remove that annoying empty space?

Edit:

I'm using as base code the NavigationDrawer example from Android Studio

main.xml

    <menu 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"
    tools:context=".MainActivity"
    >

    <item
        android:id="@+id/action_search"
        android:icon="@android:drawable/ic_menu_search"
        android:title="Search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always" />

    </menu>

app_bar_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
    tools:context="ga.musicforyou.musicforyou.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
       >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            app:contentInsetEnd="0dp"
            app:contentInsetStart="0dp"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            />

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


</android.support.design.widget.CoordinatorLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        app:theme="@style/ThemeOverlay.AppCompat.Dark"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:itemTextColor="#FFF"
        app:itemIconTint="#FFF"

        app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>
like image 958
Gregory Wullimann Avatar asked May 29 '16 20:05

Gregory Wullimann


2 Answers

Toolbar extends from FrameLayout and you can put views inside it. Like this:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/primary_color">

<SearchView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

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

Edit: You put it inside the layout as a menu. It always will be on the right side of the toolbar, because it is a menu. If you want to have a more direct control over views inside a toolbar, just put it there as I did show you.

like image 151
slanecek Avatar answered Nov 15 '22 14:11

slanecek


I have set actionBar.setDisplayHomeAsUpEnabled(true) in code. So only adding SearchView in the toolbar didn't work for me and there is some extra space between Navigation Back and SearchView. I don't have Title in Toolbar. So I customized whole toolbar like this:

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentTop="true" // If parent layout is RelativeLayout
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:contentInsetLeft="0dp" // This is important,
        app:contentInsetStart="0dp" // Otherwise there will be extra space on Left Side
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/ivNavBack"
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:background="@drawable/your_drawable" // Custom background (optional), if you want to have a press effect
                android:padding="16dp"
                android:src="@drawable/ic_nav_back" /> // You can set icon of your choice here

            <android.support.v7.widget.SearchView
                android:id="@+id/searchView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:queryHint="@string/search_view_hint"
                app:queryHint="@string/search_view_hint" />

        </LinearLayout>

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

...& in your Activity:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
SearchView  searchView = (SearchView) toolbar.findViewById(R.id.searchView);
searchView.onActionViewExpanded(); // Expands searchView by default
// If this is not set, then you will see default search icon and you have to click it to expand SearchView.

Now no need to set actionBar.setDisplayHomeAsUpEnabled(true) in code. Just handle click event of ivNavBack for it.

enter image description here

like image 21
Chintan Shah Avatar answered Nov 15 '22 12:11

Chintan Shah