Develop Reference

How can I put a SearchView inside of a ToolBar with a height set to wrap_content without it disappearing?

I've noticed that if I place an android.support.v7.widget.SearchView inside of an android.support.v7.widget.Toolbar with its height set to wrap_content that the SearchView behaves very strangely. It appears fine at first but then as soon is it gains focus it disappears and no longer takes up space in a layout. This can be resolved by setting an explicit height to the Toolbar but I'm trying to use wrap_content specifically because my use-case requires the Toolbar to resize dynamically.
It might also be worth mentioning that the SearchView is still functional after it disappears. If I add a SearchView.OnQueryTextListener to the SearchView then I can observe that the query text is indeed being updated as I type. Neither this text nor any other part of the SearchView takes up space in the layout though and if you force it to be unobscured in the layout then it is still not visible.
This kind of seems like a bug in SearchView to me. Does anybody have some more insight into why it's happening or how to work around it?
Here's a working example of the issue:
<?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="com.me.MyActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.v7.widget.SearchView
android:id="#+id/internalSearchView"
app:queryHint="To..."
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</android.support.v7.widget.SearchView>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

It certainly looks like it should work... I have two suggestions.
If it doesn't interfere with your design goals, set android:minHeight="?attr/actionBarSize" on your toolbar. This may be desired anyway.
Try setting android:layout_height="48dp" on the SearchView.

No No No...
set the search view with these params:
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay"
android:animateLayoutChanges="true">
<androidx.appcompat.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"/>
<com.lapism.searchview.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/search_behavior"
app:search_version="menu_item"
app:search_version_margins="menu_item"/>
</FrameLayout>

Android toolbar issues

I'm having a very strange issue using MaterialDesign toolbar and I haven't been able to figure out what's causing it.
I have a toolbar with a custom menu icons which I use in different layouts using <include> I wanted to use the toolbar in another layout without all the icons and menus so I included this in the xml:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
But the toolbar that shows when on this activity view is the same one I use across other activities. I even tried using a different id name but it still uses the other toolbar and not the one I have included.
The other issue is that, I want to use material design scrolling by using the coordinator layout. While the scrolling works on every other layout, it doesn't work on this particular one when I have the toolbar set. If I remove the toolbar then the scroll works for the view below it. The scroll property app:layout_scrollFlags="scroll|exitUntilCollapsed"on both the toolbar and the view below it. Here's the full code for this layout:
<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:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Yourtime.NonSwipeableViewpager
android:id="#+id/profileviewpager"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="wrap_content" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:id="#+id/appbar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
<FrameLayout
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:id="#+id/profile_container"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="#dimen/profile_tabs_height"
app:tabMode="fixed"
style="#style/MyCustomTabLayout"
app:tabGravity="center"
android:id="#+id/profiletabs" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
I will really appreciate if someone can help with either of the questions.

tab activity in toolbars? or should i say, drawer + tabbed activity in a tool bar. How can i achieve this?

so i am trying to create like a social media kind of tool bar, check this out. This is like the toolbar that includes a navigation drawer slider and when you swipe around, it becomes just like a tabbed activity.
(sorry for only 1 picture, stackover flow is not allowing me to post more than 3 links)
I have been thinking what to use and ways to do it.
Here are my conclusions
Create a drawer and customise the toolbar by adding tabs into it. If tabs cannot be added, i will try to add image button and then use it along with fragments. Sliding effect might be compromised.
Create a tabbed activity, set the icons and try to get the slider/drawer to work. Which i think might be possible. I just thought of another idea which VSCO app was using, slider drawer to be placed in a floating action button. Brilliant, this might work.
I am leaning more on choice 2 btw.
GUYS I NEED SOME INPUT, CRITICISE ME. GO.
whatever unsure of can be clarified with me of course.

Yes, you can add TabLayout inside the toolbar with DrawerLayout. See below XML it work for me.
<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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="#style/Theme.AppCompat.NoActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="?attr/colorPrimary"
android:elevation="6dp"
app:tabMode="fill"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerRecyclerView"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="left|start"
android:background="#color/WhiteColor"
android:fitsSystemWindows="true"
android:scrollbars="vertical"/>
</android.support.v4.widget.DrawerLayout>

How to enable horizontal scroll in tab like Google Play?

I'm referencing a great demo here regarding material design. It has tabs, but when I add too many the tab items get squished (see screenshot). How can I make it scroll horizontally?
I believe below is the layout I should make the change, but I combed the docs and can't seem to get it, pls help!
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>

TabLayout has a method setTabMode() which can be either MODE_FIXED (default) or MODE_SCROLLABLE which is what you need.
You can also define this in XML with app:tabMode="scrollable".

You can add this app:tabMode="scrollable" to your android.support.design.widget.TabLayout

If you added
app:tabMode="scrollable"
like mentioned above and it,
shows the layout and you are not able to scroll
Then maybe you have put it at the top of the XML file and below it added matchh_parent (height/width) to the ViewPager. Because the viewpager is above the tab layout you will not be able to scroll.
Add it at the bottom of the XML so another view does to overlap the tab layout.

SlidingTabLayout and SlidingTabStrip classes is what are you looking for
You need to copy these classes from google developers site, add sliding tab layout in xml, and in set viewpager for sliding tab layout in java. Hope it'll help.

CoordinatorLayout(AppbarLayout) does not draw toolbar properly

I am using the new design support library to achieve scroll to hide toolbar.
However, every thing works well if I don't load images by picasso. If I load images, sometimes when I scroll down to let toolbar show again, my toolbar become a blank white rectangle. Note that in this situation I still can press the navigation toggle to open the drawer, although it is not draw(show) on the screen:
https://www.dropbox.com/s/nte3pr091nt2wfx/device-2015-05-30-093222.png?dl=0
But sometimes it works well:
https://www.dropbox.com/s/i3u87df4x48fhj6/device-2015-05-30-094217.png?dl=0
I am so confusing about this, if I disable all loading image task, the toolbar can be shown properly.
Here is my layout:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
I think when picasso load image into ImageView, it may requestFocus and requestLayout and the CoordinatorLayout can't redraw the toolbar properly in that situation but It is only my guess.
Any suggestion will help, many thanks!

<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways" />
<View
android:layout_width="fill_parent"
android:layout_height="1dp"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Try this. I solved same problem by this snippet. I appended dummy view which has height of 1dp after the Toolbar.