Develop Reference

How to style Android SearchView like in Google Play Store app?

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

SearchView by EditText android

I want to implement searchView like this link and link2 but I want to make a search from own EditText not in ActioBar or in menu.
I want to know what is the code in the main layout xml file. consider that I'm not want to use ActionBar with menu item because it isn't supported for api less that level 11, I want to use the search and get result in the same Activity, all what I want to know how can I get the search bar when press a button to give it a word t search in sqlite and get the result in the same Activity?
Hope anyone got my mean.
Thanks in advance.

Do not use a EditText, it is much easier to use a SearchView. If you don't want to have search interface in the action bar, then you can use a search widget, which is an instance of SearchView.
The basics are here : http://developer.android.com/guide/topics/search/search-dialog.html

If you really do not want the ActionBar and have to support older API levels than API level 11 (Honeycomb) and do not want to use a search dialog, you have to do everything on your own.
You could use a AutoCompleteTextView to display search suggestions and start an activity / fragment to display a list of results with the query entered whenever the user triggers your search. That's not different from any other Activity that has to react to user input.
But I strongly suggest to use ActionBarCompat and the support library to provide an ActionBar on older devices and use the SearchView within the ActionBar. That's what users expect nowadays anyway and it makes development that much easier.

If you want to create a search box using EditText (not in Action Bar), you may refer to the following XML code:
<RelativeLayout
android:id="#+id/linearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal" >
<EditText
android:id="#+id/inputSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:hint="Search...."
android:inputType="textCapCharacters" />
<ImageButton
android:id="#+id/searchButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_menu_search" />
</RelativeLayout>
But, I would suggest use ActionBar for the search box, it would look neat and easier as well. For search box using ActionBar, you may refer the following link:
http://javapapers.com/android/android-searchview-action-bar-tutorial/

Sherlock Actionbar custom design

I will be very thankfull if anyone will help me find out some details about customizing sherlock actionbar.
To be more concrete: I need an action bar with four buttons. Two small buttons on the sides of the bar (on on the left side and second on the right), and one "paired" radiobutton in the middle of the bar.
When I say "paired" I mean something like in iOS when there are two buttons positioned near each other and when I press one - the second is unpressed and vice versa.
All in all it should look like this.
Is it even possible to make this or I should forget about using the wonderful sherlock creature?

I would personally abandon the idea of using ActionBarSherlock and instead just implement this using your own layout resource.
As a user of ActionBarSherlock I can say it's a fantastic library, as it essentially allows you to use the ActionBar API across all devices, including pre-Honeycomb, meaning you don't have to code a separate UI to suit pre-Honeycomb device. But the point of ActionBarSherlock is that it just provides APIs that are equivalent to those of the native ActionBar. And the problem is that the ActionBar is restrictive in what you can creatively do with it, because it is designed to offer specific functionality and controls that kind of fit around how Google want you to implement your UI. In a nutshell, you can specify a custom layout View that appears somewhere within the bar. You can also control which menu items appear as action items placed on the right-hand side of the bar (though it is ultimately still up to the system, based on screen space, if such items are made visible on the bar). The bar also allows you to implement some very special functionality (Action Views, Action Providers, etc.)
But if you're looking to create a very customised layout like the one you've pictured, and you don't need the special functionality that the ActionBar (or ActionBarSherlock) provides, then you might be better off doing it from scratch.

Yes you can make your Sherlock ActionBar like you show above. you have to set custom View to your SherLock ActionBAr. Just few lines of code
getSupportActionBar()
.setDisplayShowCustomEnabled(true);
getSupportActionBar().setCustomView(
R.layout.your_custom_layout);
and you custom layout should be RelativeLayout something like this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="72dp" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/icon" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/icon" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:src="#drawable/icon" />
</LinearLayout>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/icon" />
</RelativeLayout>

What controls should I use for this android UI?

I'm developing an android application, one page is like this:
You can see on the top of right part, there is a "settings" button. When clicking it, there will be a panel come out from the left.
I'm new to android, and I don't know what components shall I use.

It is called side navigation or a sliding menu. Introduced by facebook i believe.
Here is an answer how to design this:
Android Facebook style slide
and project code:
https://github.com/gitgrimbo/android-sliding-menu-demo
I haven't just searched for it and pasted the link here, i actually did this in my application, it is easy to implement and works great

You can use SlidingDrawer as below:
<SlidingDrawer
android:id="#+id/my_sliding_drawer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_margin="0dp"
android:content="#+id/content"
android:handle="#+id/handle" >
<ImageButton
android:id="#+id/handle">
<!-- Your handle content comes here. -->
</ImageButton>
<LinearLayout
android:id="#+id/content">
<!-- Your drawer contents come here. -->
</LinearLayout>
</SlidingDrawer>

Android 4.0 Tabbed Activity Layout

I have 2-3 Activities in my app that all share data in a memory pool. I want to be able to easily switch between these activities while keeping them all simultaneously running. In addition, I am developing for Android 4.0. I would like to use TabActivity, but it has been deprecated and replaced with ActionBar, which I have tried but I don't think it's what I'm looking for. I want large tabs, similar to the classic "Artist/Playlist/All" tabs found in the stock Android Music Application, or like the Tab Bar seen at the bottom of the screenshot below. Does anyone know of a library to create these tabs or a way to make ActionBar more customizable? Or is using TabActivity a perfectly good solution, even on ICS devices?

ActionBar is what you're looking for, actually.
You should convert your Activites to Fragments. Assuming they're not too complex, this shouldn't be hard at all. There are tons of examples out there. You need one Activity, preferably a FragmentActivity, to hold all of them.
This should help:
http://arvid-g.de/12/android-4-actionbar-with-tabs-example

There are several subquestions to this, I'll try to address them all:
-In order to use the top tabs, you want to use an ActionBar.
-If you were to do it in the style of the music app, where you swipe sideways between views and the label of the current one is always front and center... For that, the class you'd want to use is called ViewPager
You can see all of these methods by creating a new Activity in eclipse, and going through the wizard. Under "Navigation Type" you can select "Tabs", "Tabs + Swipe", "Swipe Views + Title Strip". Create any one of those Activities to see how it looks, and then look at the code to see how it's implemented & how to customize it.
-Navigation along the bottom is discouraged- See the Android Design Guide, spec the section "Don't use Bottom Tab Bars"

You have probably found an answer by now, but I thought I'll share another way you could create something like that tab bar using images and xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="#+id/main">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/tabackground"
android:layout_alignParentBottom="true"
android:id="#+id/llBottom">
<ImageButton
android:src="#drawable/icon2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
/>
<ImageButton
android:src="#drawable/icon3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
/>
<ImageButton
android:src="#drawable/icon4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
/>
<ImageButton
android:src="#drawable/icon5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
/>
</LinearLayout>
<ImageView
android:layout_height="24dp"
android:layout_width="fill_parent"
android:layout_alignTop="#+id/llBottom"
android:background="#10ffffff"/>
<ImageView
android:layout_height="1dp"
android:layout_width="fill_parent"
android:layout_alignTop="#+id/llBottom"
android:background="#30ffffff"/>
</RelativeLayout>
Is not perfect but with some creativity and changing some values it can look very good.
Hope it helps in some way.