CODEWITHSUNDEEP
androidsearchviewandroid-collapsingtoolbarlayout
Mayur Saini
Mayur Saini

Reputation: 229

How to show SearchView Outside/Below toolbar

LIKE THIS SCREENSHOT - the SearchBar outside/below-toolbar in snapdeal, flipkart app...

How to add searchbar below or outside the toolbar.. Please suggest with a layout...

Upvotes: 2

Views: 5435

Answers (2)

Shafayat Mamun
Shafayat Mamun

Reputation: 439

See if this works,

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay">
        <EditText
             android:layout_width="match_parent"
             android:layout_height="wrap_content"/> 
</android.support.v7.widget.Toolbar>

If it is over the toolbar then add margin top to your edittext to keep it below the toolbar title.

Upvotes: 2

Joel
Joel

Reputation: 838

This is most likely a custom component, you can use a button and switch it to an EditText with the icons you prefer or use a button directly to launch the search view:

For example to achieve this you can:

1) Have a drawable with radius of 2dp and use it as the background of your component

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white" />
    <corners android:radius="2dp" />
</shape>

2)Use it within your Button/EditText along with your two icons/mipmaps

<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.jsosa.myapplication.MainActivity">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/corners"
        android:drawableBottom="12dp"
        android:drawableEnd="@mipmap/ic_camera_alt_black_24dp"
        android:drawablePadding="22dp"
        android:drawableStart="@mipmap/ic_search_black_24dp"
        android:gravity="left|center"
        android:hint="Find your dil ki deal!"
        android:padding="16dp" />
</RelativeLayout>

And you will get: enter image description here

Then implement your business flow/logic on onClickListener etc

Hope it helps.

Upvotes: 6

Related Questions