I am trying to style a SearchView in a toolbar to look / behave like the SearchView in the Google Play Store app. It seems to wrap the searchview in a cardview but it also seems to integrate up button / drawer toggle behavior.
This is the main activity searchView, it has integrated drawer toggle
when you click on it, the drawer toggle changes to arrow (that when clicked will remove focus from the search view)
When you click on an app in the store, you go to app detail page and you have what looks like iconified version of the search view as a collapsed action item with up button:
Finally if you click on search icon it expands as an action item (with a kind of ripple animation) and displays all the way across the screen and incorporates the up button:
When I try to do it myself I have a lot of problems. I tried to wrap the searchview in a cardview and put that in a toolbar. It works but there is always padding on the left side that I can't remove (I tried contentInsetStart, doesn't work):
<android.support.v7.widget.Toolbar
android:id="#+id/activityCatalogToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:theme="#style/AppTheme.AppBarOverlay"
app:contentInsetStart="0dp"
app:contentInsetLeft="0dp">
<android.support.v7.widget.CardView
android:id="#+id/activityCatalogSearchContainer"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
app:cardCornerRadius="4dp"
app:cardElevation="8dp">
<android.support.v7.widget.SearchView
android:id="#+id/activityCatalogSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:queryHint=""
android:iconifiedByDefault="false"/>
</android.support.v7.widget.CardView>
</android.support.v7.widget.Toolbar>
I have also tried to remove the toolbar and replace it with just a FrameLayout. This allows me to control the padding but obviously I lose the toolbar functionalities (up button, etc) and also introduces theming problems (icons and text disappear).
Does anyone have an idea how they are doing this? I don't want to add another library just to style widgets that already exist in the framework. Thanks!
You might try to deep dive into this project:
https://android.googlesource.com/platform/packages/apps/Dialer/
For Lollipop or Marshmallow, or N it has a SearchEditTextLayout which is what you need:
Advantage
a code made by Google, not third party.
You have to use this Custom Implementation of SearchView.
https://github.com/Quinny898/PersistentSearch
Android Studio:
Add the Sonatype repository if you have not already:
maven {
url "https://oss.sonatype.org/content/repositories/snapshots"
}
Import it as a dependency:
compile 'com.quinny898.library.persistentsearch:library:1.1.0-SNAPSHOT'
In your layout:
<com.quinny898.library.persistentsearch.SearchBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/searchbox"
/>
Output :
I myself was trying to build this. Ended up just making the search button an ImageButton. a click on this would Trigger a Fragment to be added on top which would contain an Edittext inside an layout made to look like this. and this Fragment consisted of a listview below this searchbox to show suggestions.
Tip: Keep the Fragment's rootlayout without any background and set clickable to true to achieve best results with a transparent pane
Related
I need to display a hint in the search box before the user clicks on it, as well as to have the search icon on the right.
In order to place the icon on the right, I used android:layoutDirection="rtl", but there were problems with the hint. If I set app:iconifiedByDefault="false", then the hint always starts to be displayed, but my search icon moves to the left.
my searchView code:
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/toolbar"
android:layout_marginTop="12dp"
app:searchIcon="#drawable/ic_search_button"
app:searchHintIcon="#null"
android:background="#drawable/shape_stroke_yellow"
app:queryBackground="#drawable/shape_stroke_yellow"
android:layoutDirection="rtl"
app:queryHint="#string/find_student"
>
</androidx.appcompat.widget.SearchView>
I saw Android 4.3: Not focus searchView not show hint , but this solution does not suit me, it is desirable to do everything through xml.
In other topics, the hint is solved everywhere by the line app:iconifiedByDefault="false", but then my icon is in the wrong place, so such solutions do not suit me either.
I'm currently developing a simple apps using Android Studio with the minimum API Level 8, now i currently using android.support.v7.widget.SearchView in my LinearLayout in content_main.xml layout, not on ACTIONBAR, now the problem is, i'm not able to set the searchView as Expanded by default, i already look for solution and i only got this:
android:iconifiedByDefault="false"
here is my full code for my searchView
<android.support.v7.widget.SearchView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/searchView"
android:background="#00000000"
android:iconifiedByDefault="false"
android:layout_weight="1" />
but no luck, it's not working. anyone could help me? any help would be appreciated. Thank you so much!
Ok, so i solve the problem. to anyone who want to use support library for SearchView here's how you can customize it.
<android.support.v7.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:closeIcon="#drawable/ic_clear" // To set custom clear icon
app:searchIcon="#drawable/ic_search" //To set custom search icon
app:queryBackground="#color/transparent" // i decided to remove underline so i create a custom background for my searchView
app:queryHint="#string/filterHint" //to set a custom Hint
app:iconifiedByDefault="false" //And finally, to Expand it as default
/>
as i said, i'm afraid of overriding xml layout on runtime via java code, so to make it organize and no more overriding during the runtime, this is how i do it.
Reference
Thanks for help!!!
I used the below code to expand the searchview and place the cursor at the same time:
final SearchView sv = new SearchView(((MainActivity) getActivity()).getSupportActionBar().getThemedContext());
sv.setIconifiedByDefault(true);
sv.setFocusable(true);
sv.setIconified(false);
sv.clearFocus();
sv.requestFocusFromTouch();
To make the SearchView expanded by default, call setIconifiedByDefault(false) on it when you initialise it (e.g. in onCreate(..) . I've found in most cases this will give it focus automatically, but if not simply call requestFocus() on it too.
The default lollipop apps(like dialer in motoG) has some rounded iconic buttons in the LISTVIEWS and also the TOOLBAR, please refer the screenshot
Please tell me what are these buttons as per my understanding 2,3 are TOOLBAR(actionbar) icons and I assume 1 button is the floating action button.
Please share a sample code to create a button like the ones in the image especially the 1st button.
That button is pretty straight forward. Using the AppCompat library lets you use ?attr/selectableItemBackgroundBorderless as a background, which achieves the desired effect.
<ImageButton
android:src="#drawable/some_drawable"
android:layout_width="wrap_content"
android:background="?attr/selectableItemBackgroundBorderless"
android:layout_height="wrap_content" />
This is a fab button.
Include Angular Material in your project then use the following code to create a 'Comment' fab button.
<md-button class="md-fab" aria-label="Comment">
<md-icon md-svg-src="img/icons/ic_comment_24px.svg"></md-icon>
</md-button>
I have different activities in my project with listview in it. I am using app compact v7 and following material design.My requirement is to shown transparent toolbar and statusbar like iOS and when user will scroll the listeview towards up. listview should be visible behind the toolbar and actionbar. Please let me know how can i do this. I tried a lot of solution but could not achieve the desired o/p.
Styles
<item name="colorPrimaryDark">#android:color/transparent</item>
XML Layout
<android.support.v7.widget.Toolbar
android:id="#+id/my_awesome_toolbarAdd"
android:layout_height="56dp"
android:layout_width="match_parent"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:background="#android:color/transparent" />
You can try this (don't do the optional step #5 in your case):
Unable to make toolbar transparent in Android
I want to add a search bar in my application, similar to what Zomato does. I have searched a lot and I have learnt search interface is the way to go, but everywhere I have seen it has been added in the action bar whereas I want it in some fragment(fixed activity). Is there any other way search could be added(how zomato does it)?
Is it necessary to open another activity to do the search or I could open another fragment to do the same?
Like #pskink said, you can add the SearchView anywhere in your layout, like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</SearchView>
</LinearLayout>