Develop Reference

Why is the android.widget.SearchView not expanding on single click and instead moves the icon to left side?

I am using android.widget.SearchView inside MaterialToolbar and have also set the correct attributes inside the menu reource file. But when I click the search icon, it doesn't expand. Instead, the search icon moves to the left side. On clicking it again, it expands but the search icon still appears inside the EditText.
Layout file
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
style="#style/Widget.MaterialComponents.Toolbar.Primary"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:title="#string/app_name" />
</com.google.android.material.appbar.AppBarLayout>
Menu file
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/action_search"
android:title="#string/action_search"
android:icon="#drawable/ic_search"
app:showAsAction="ifRoom|collapseActionView"
app:actionViewClass="android.widget.SearchView" />
</menu>
Before clicking
After clicking
SearchView hint

Though the documentation suggests using the framework SearchView, I've always found that the support/androidx SearchView plays nicer with the library components – e.g., AppCompatActivity, MaterialToolbar, etc. – though I'm not sure exactly what causes these little glitches. Indeed, using androidx.appcompat.widget.SearchView here in lieu of android.widget.SearchView for the actionViewClass got rid of that misplaced search icon upon expanding.
However, the AutoCompleteTextView inside the SearchView still has a similar search icon as a hint because it's not ending up with the right style. I initially expected that setting the Toolbar as the support ActionBar would've integrated that with the other relevant styles for the children, but it seems SearchView's style, for some reason, is normally set with a ThemeOverlay.*.ActionBar on the <*Toolbar> acting as the ActionBar.
Though most sources seem to indicate that the various ThemeOverlay.*.ActionBar styles only adjust the colorControlNormal attribute, they actually set the searchViewStyle to the appropriate Widget.*.SearchView.ActionBar value, too, so it's doubly important that we add a proper overlay. For example, in keeping with changing to the androidx version:
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
... />
This could also work by setting that as the actionBarTheme in your Activity's theme instead, but be warned that it can be overridden by attributes on the <*Toolbar> itself, like it would be in the given setup by style="#style/Widget.MaterialComponents.Toolbar.Primary".
If you're not using Material Components, ThemeOverlay.AppCompat styles are available as well. And if you're using only platform classes, similar styles are available in the system namespace; e.g., #android:style/ThemeOverlay.Material.Dark.ActionBar.
The initial revision of this answer removed that hint icon manually, as at the time I was unaware of how exactly the given setup was failing. It shouldn't be necessary to do that now, but if you'd like to customize this further, that example simply replaced the menu <item>'s app:actionViewClass attribute with an app:actionLayout pointing to this layout:
<androidx.appcompat.widget.SearchView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:searchHintIcon="#null" />
The searchHintIcon setting is all that was needed for the example here, but you can set whatever applicable SearchView attributes you'd like.
If you're going this route, it might be preferable to set style="#style/Widget.AppCompat.SearchView.ActionBar", which includes the searchHintIcon setting, and ensures the correct overall style for the SearchView, as suggested by Artem Mostyaev in comments below.

the above method does not work for me. I don't know why but a tried this and succeed.
Refer to the search hint icon through SearchView and set it's visibility to GONE:
ImageView icon = (ImageView) mSearchView.findViewById(androidx.appcompat.R.id.search_mag_icon);
icon.setVisibility(View.GONE);
And then add this line:
mSearchView.setIconified(false);

Customizing the AppCompat Actionbar

This question has sort of been asked but not really, what I'm looking to do is have a highly customized toolbar for our app, I recently implemented a drawer menu with the AppCompat Actionbar and it works great, except this is what it gives me by default:
What I'd like to have is something like this (excuse the rushed drawing):
I'm prefectly capable of doing this in a normal layout, so I'm not looking for advice on how to make the toolbar look like this, what my question is, is how do I start customizing the layout of the toolbar at all? For example, I don't see a way to position the home button (I believe that's what the hambuger menu is called in this case), it seems like a lot of this stuff is built into the appcompat actionbar and I don't see a way of getting around it, basically to summarize, I just want to have multiple rows of controls in the toolbar, and customize the default built in controls of the toolbar, including positioning. Is there a way I can just insert my own layout file into the actionbar and just have a control set to be the button that activates the drawer layouts drawers? That would be the most ideal solution to this problem for my circumstances.

what my question is, is how do I start customizing the layout of the toolbar at all?
You can customize the view of your SupportActionbar like this:
Create a ToolbarView.axml view file for your Actionbar(It's just an example, you can define anything inside):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="300dp">
<TextView
android:id="#+id/tvShow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Please Click Me"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
In your activity's onCreate method, set the custom view of the SupportActionbar:
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView (Resource.Layout.Main);
SupportActionBar.SetDisplayShowCustomEnabled(true);
SupportActionBar.SetCustomView(Resource.Layout.ToolbarView);
...
}
The height of the ActionBar won't change by the content inside, you have to set the height manually in Style.xml:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#5A8622</item>
<!--Set the ActionBar Size-->
<item name="actionBarSize">200dp</item>
</style>
</resources>

custom android navigation drawer

I want to create an Android app using the navigation drawer, something like Google Maps, Gmail ecc. I know how to realize that, but I want something different. I would that the navigation bar is not completely hidden but it has to shows the icon always.
Is possible to realize this? Thank you

This would be realizable using a SlidingPaneLayout (https://developer.android.com/reference/android/support/v4/widget/SlidingPaneLayout.html) instead of the NavigationDrawer.
Here is an example of a SlidingPaneLayout:
http://blog.sqisland.com/2015/01/partial-slidingpanelayout.html

If you want to create a Navigation Drawer, the Android Design Library has a new component called NavigationView. [Refer Link]
A sweet tutorial of the Android Design Library by Chris Banes is available at this page. GitHub - Cheesesquare
You might want to refer to the Google I/O app if you want a custom feel to your Nav Drawer. github.com/google/iosched
EDIT: Considering you use the NavigationView and want to make the text transparent on being selected, add a new file in /res/color/. Let's name it nav_item_text.xml
Use the following content in it:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Text color when checked -->
<item android:color="#00000000" android:state_checked="true" />
<!-- Text color when not checked. Modify value to color of primary text. -->
<item android:color="#212121" />
</selector>
And then add this to your NavigationView layout:
app:itemTextColor="#color/nav_item_text"
It will now look like:
<android.support.design.widget.NavigationView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/navView"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:itemTextColor="#color/nav_item_text"
app:headerLayout="#layout/nav_header"
app:menu="#menu/nav"/>
If you want to make the text gone always:
app:itemTextColor="#00000000"

adjustResize not working in lollipop and above with translucent status/Nav

There are questions talking about this problem but I didn't solve mine by existed answers.
This is my styles-v21.xml:
<style name="MainTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:colorBackground">#EEEEEE</item>
</style>
I've set windowSoftInputMethod="adjustResize" for related Activity of course.
Here is my layout.xml, notice that the root FrameLayout is used for specific function thus it is needed:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/rl_background"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--This View is used to fill the space of status bar-->
<View
android:id="#+id/statusbar"
android:layout_width="match_parent"
android:layout_height="#dimen/statusbar_size"/>
<!--I've set this toolbar as Actionbar-->
<android.support.v7.widget.Toolbar
android:id="#+id/actionbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_below="#id/statusbar"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/actionbar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Two EditTexts inside -->
</RelativeLayout>
</ScrollView>
</RelativeLayout>
</FrameLayout>
When I don't touch the EditText, everything looks fine: status bar View stays where it should be and navigation bar doesn't overlay content(doen't make content invisible but content is under it in fact).
In similar questions, people often teach us to set fitsSystemWindow="true", I did this to different layouts inside my layout.xml and got different results.
Setting fitsSystemWindow="true" in:
1.FrameLayout:
AdjustResize works, but status bar View now stays below the real status bar. Status bar's color turns to windowBackground. Navigation bar became entirely transparent because it shows other fragment's content where this fragment was added.
2.First RelativeLayout:
AdjustResize works, but status bar View was below real status bar.Navigation bar isn't too transparent to show other fragment but overlays content.
3&4.ScrollView&RelativeLayout inside ScrollView:
AdjustResize doesn't work and others are same to condition 2.
I also used a method to write my own FrameLayout like this:https://stackoverflow.com/a/22266717/3952691 but as the author said, setting bottom will cause error. Because I use translucent navigation bar, I also need to draw bottom inset. And I try its upgrade version:https://gist.github.com/romannurik/8919163, no use too.
Sorry for can't provide pictures but I really need help.Thank you!

Coloring Android Status Bar in Nav Drawer

In this app I'm building, I've added a Navigation Drawer fragment into my activity. I'm using 5.0, so I've been able to set the primaryColor and primaryColorDark to get the right colors. I've decided to try and style my Nav Drawer to be very similar to Google Now's drawer in 5.0, where the Nav Drawer has it's own background for the status bar. (Can't post pictures, not enough reputation >.>)
I've followed this question's recommendations here, which has helped quite a bit. I've achieved drawing my Nav Drawer under the status bar when I pull it out. Only trouble is, I can't figure out how to set the color of the status bar that shows in my drawer. Currently, it just shows white.
Here are the relevant bits of my styles and code:
Activity Layout:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Main"
android:fitsSystemWindows="true">
<!-- main content -->
...
<!-- Drawer fragment -->
<fragment
android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="left|start"
android:theme="#style/DrawerTheme"
android:fitsSystemWindows="true"
android:choiceMode="singleChoice"
android:name="com.myname.appname.NavigationDrawerFragment"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
Fragment Layout:
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/navDrawerFragment"
android:theme="#style/DrawerTheme"
android:background="#color/WindowBackground"
tools:context=".NavigationDrawerFragment"
android:fitsSystemWindows="true">
<!-- content here -->
</RelativeLayout>
Per link above, setting color of my status bar for the activity (this part works correctly):
public void onCreate(Bundled savedInstanceState) {
super.onCreate(savedInstanceState);
// ....
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
drawerLayout.setDrawerShadow(R.drawable.drawer_shadow, Gravity.START);
drawerLayout.setStatusBarBackgroundColor(getResources().getColor(R.color.colorPrimaryDark));
// ....
}
And finally, my associated styles for the activity, and what I've 'tried' to assign to the fragment.
<style name="StatusBarActivityTheme" parent="MyAppTheme">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
<style name="DrawerTheme" parent="MyAppTheme">
<item name="android:statusBarColor">#000000</item>
<item name="android:colorPrimaryDark">#000000</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
Thanks in advance for any help you can send my way! I suspect my issue is related to do with how Google Now's primary screen has a transparent status bar, and only colors it during the Nav Drawer, but any news to the contrary would be great!

With the setup you have, the Nav Drawer is simply a view drawing its background (which you have defined as android:background="#color/WindowBackground") underneath the status bar (the color of which you have set to transparent via your StatusBarActivityTheme). The system only looks as far as the Activity theme to set the status bar color; assigning android:statusBarColor to a child has no effect.
The simple solution would be to change your Nav Drawer fragment layout's android:background to the color you desire. If you wish for the portion below your image to remain white, an option would be to then add an empty View in your drawer layout with android:background="#color/WindowBackground" or some other color.
If you desire for the content in your Nav Drawer to extend below the status bar, it requires a bit more work. The reason it is offset to begin with is because you set the android:fitsSystemWindows attribute to true, which in turn calls the view's default fitSystemWindows(). As the docs explain, this method takes the inset (i.e. the height of the status bar in our case) and applies it as the view's padding (in your case, this becomes top padding for the RelativeLayout of your Nav Drawer fragment).
One way to circumvent this padding is to overwrite the view's fitSystemWindows() method. I direct you to the open source IO Schedule app by Google - specifically, they used the ScrimInsetsScrollView as the root element in their Nav Drawer. This modified ScrollView applies a scrim of a color of your choice (set via the custom app:insetForeground attribute) and consumes the inset, i.e. no more padding!
The ScrimInsetsScrollView can be used as a model to write your own version for any View descendant, really - see the nigh identical ScrimInsetsFrameLayout.