Develop Reference

Toolbar overlay hidden under system UI in YouTube player fullscreen

I'm using a YouTubePlayerFragment in my activity, and attempting to overlay the player with an app bar (aka action bar) when the player is in fullscreen. I'm following the guidelines and example in the YouTube Player API "Overlay ActionBar Demo" sample application and YouTubePlayerFragment documentation (more detail below).
All of this worked fine when I was extending from Activity and using the core ActionBar. But when I switch to using AppCompatActivity with the support Toolbar, a few issues arise:
The Toolbar is laid out under the status bar and navigation bar
The player no longer plays when the Toolbar is on top of it
It seems as though the player fullscreen mode used to treat the action bar as part of the system UI (along with the status bar and navigation bar), in terms of positioning and overlay, but no longer does so with the Toolbar.
Any thoughts on why this is happening or how I can use the Toolbar to properly overlay the YouTube player in fullscreen mode? I realize the Toolbar is just another view and I could probably force it to resize and reposition under the status bar, and I could set up a listener for system UI changes and show and hide my Toolbar accordingly, but I'm hoping there's a cleaner fix that I'm missing.
Here's a screenshot:
More detail: I was able to reproduce this behavior in the "Overlay ActionBar Demo" sample app (ActionBarDemoActivity), with the following changes:
Extend AppCompatActivity
Change import from android.app.ActionBar to android.support.v7.app.ActionBar
Add Toolbar to layout
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<view
class="com.examples.youtubeapidemo.ActionBarDemoActivity$ActionBarPaddedFrameLayout"
android:id="#+id/view_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
...
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/material_deep_teal_500" />
</FrameLayout>
Change the theme to Theme.AppCompat.Light.NoActionBar and add windowActionBarOverlay
<style name="OverlayActionBarTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
Set the Toolbar as the action bar in onCreate()
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Note that the sample app also does the following (I didn't change these):
Implement YouTubePlayer.OnFullscreenListener
Extend the layout and set padding when not in fullscreen so that content displays below Toolbar
#Override
public void onFullscreen(boolean fullscreen) {
viewContainer.setEnablePadding(!fullscreen);
...
}
public static final class ActionBarPaddedFrameLayout extends FrameLayout {
public void setEnablePadding(boolean enable) {
paddingEnabled = enable;
requestLayout();
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int topPadding =
paddingEnabled && actionBar != null && actionBar.isShowing() ? actionBar.getHeight() : 0;
setPadding(0, topPadding, 0, 0);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
Set YouTube player fullscreen control flag
player.addFullscreenControlFlag(YouTubePlayer.FULLSCREEN_FLAG_CUSTOM_LAYOUT);
Handle config changes
<activity
...
android:configChanges="keyboardHidden|orientation|screenSize"
...
</activity>

I suspect this is a bug. I filed a new bug report for the layout problem, and added a comment to an existing report about the support ActionBar/Toolbar being treated as an illegal overlay.
Toolbar overlay hidden under system UI in YouTube player fullscreen
With AppCompat theme on older devices, ActionBar is detected as an illegal overlay
In the meantime, as a workaround I'm doing the following:
Layout issue
As Troy suggested, I added android:fitsSystemWindows="true" to the Toolbar XML. This fixed the layout in fullscreen, but caused padding to be added to the Toolbar when leaving fullscreen (screenshot). I added logic to the onFullscreen(boolean) method to remove the Toolbar padding (toolbar.setPadding(0, 0, 0, 0)) but this unfortunately still shows white space in place of the padding, which disappears when the layout is next redrawn (e.g., when clicking an item, starting the player, etc). I'm still a little stumped on how to properly set the layout/padding, but the current workaround will do for now.
Illegal overlay issue
Given that showing the Toolbar will pause the YouTube player in fullscreen, I've added logic to only show the Toolbar when the player is already paused. This isn't ideal, as it forces the user to pause the player to see the Toolbar, but it's the best option I can think of.
In onFullscreen(boolean), if we enter fullscreen and the player is playing, the Toolbar is hidden.
public void onFullscreen(boolean isFullscreen) {
mFullscreen = isFullscreen;
if (isFullscreen && youTubePlayer.isPlaying()) {
toolbar.setVisibility(View.GONE);
}
else {
toolbar.setVisibility(View.VISIBLE);
}
}
When setting up the player (in onInitializationSuccess()), I added a listener to show and hide the Toolbar on play and pause:
youTubePlayer.setPlaybackEventListener(new YouTubePlayer.PlaybackEventListener() {
...
#Override
public void onPlaying() {
if (mFullscreen) {
toolbar.setVisibility(View.GONE);
}
}
#Override
public void onPaused() {
if (mFullscreen) {
toolbar.setVisibility(View.VISIBLE);
}
}
});

This code will solved your issue.
To hide navigation bar and toolbar
public void fullScreenCall() {
if(Build.VERSION.SDK_INT > 11 && Build.VERSION.SDK_INT < 19) { //lower api
View v = getActivity().getWindow().getDecorView();
v.setSystemUiVisibility(View.GONE);
} else if(Build.VERSION.SDK_INT >= 19) {
//for new api versions.
View decorView = getActivity().getWindow().getDecorView();
int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY | View.SYSTEM_UI_FLAG_FULLSCREEN;
decorView.setSystemUiVisibility(uiOptions);
}
}
to back normal mode
public void normalScreenCall() {
if(Build.VERSION.SDK_INT > 11 && Build.VERSION.SDK_INT < 19) { // lower api
View v = getActivity().getWindow().getDecorView();
v.setSystemUiVisibility(View.VISIBLE);
} else if(Build.VERSION.SDK_INT >= 19) {
//for new api versions.
View decorView = getActivity().getWindow().getDecorView();
decorView.setSystemUiVisibility(0);
}
}

Try adding android:fitsSystemWindows="true" to your toolbar in your XML file.

Changing Search View back icon?

I am using AppCompat action bar and i want to change the back icon of the searchview I use in the action bar. I searched but i couldn't find a solution.
I have tried setting the icon in the style :
<item name="homeAsUpIndicator">#drawable/myBackButton</item>
but I want to set another one programmatically when the user selects the search view.
Any ideas on how I can do it?

To customize SearchView "up" icon, you can use style attribute:
collapseIcon="#drawable/ic_discard_icon"
in your Toolbar layout:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapseIcon="#drawable/ic_discard_icon"/>
Or you can move this attribute into Toolbar style. As you wish.

Try this code snippet:
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
// get the parent view of home (app icon) imageview
ViewGroup home = (ViewGroup) findViewById(android.R.id.home).getParent();
// get the first child (up imageview)
( (ImageView) home.getChildAt(0) )
// change the icon according to your needs
.setImageDrawable(getResources().getDrawable(R.drawable.custom_icon_up));
} else {
// get the up imageview directly with R.id.up
( (ImageView) findViewById(R.id.up) )
.setImageDrawable(getResources().getDrawable(R.drawable.custom_icon_up));
}

You can change the background of the back icon like this
Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initToolbar();
}
private void initToolbar() {
toolbar = (Toolbar) findViewById(R.id.tbMaster);
setSupportActionBar(toolbar);
if (toolbar != null) {
toolbar.setBackgroundColor(getResources().getColor(R.color.base_color));
getSupportActionBar().setTitle("Title");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.image);
}
}

Material "close" button in Toolbar instead of Back

I have seen in Google's Inbox App, composing a new email, in the toolbar instead of the back button (an arrow) it has a "close" button (see picture).
How can I achieve this?

Use  
this.getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_action_close);
 
to achieve this.
You can create your own close icon or get from material design icon set on GitHub. Also, add this line before above line to make close function as the back arrow.
this.getSupportActionBar().setDisplayHomeAsUpEnabled(true);

You need to define a parent in the manifest, then override onSupportNavigationUp() if using the support app bar of course. Also, go to this handy site for the icon packs: https://www.google.com/design/icons/
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.yourAwesomeLayout);
setupToolBar();
}
private void setupToolBar() {
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar == null) return;
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_close_white_24dp);
}
#Override
public boolean onSupportNavigateUp() {
finish(); // close this activity as oppose to navigating up
return false;
}

sorry for late reply. i found easiest solution for you. here above all answer not works for me (because i want to use toolbar not actionBar due to theming). so try to add close button through xml layout. and it works.
here is an xml syntax to add close button to toolbar(v7) .
app:navigationIcon="#drawable/ic_close_black_24dp"
ans here is an out put image

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("Search");
toolbar.setNavigationIcon(R.drawable.abc_ic_clear_mtrl_alpha);
setSupportActionBar(toolbar);

An alternative to defining the parent activity in the manifest is to handle what action to take in the onOptionsItemSelected method like in this example:
#Override
public boolean onOptionsItemSelected(MenuItem item){
switch (item.getItemId()) {
// Respond to the action bar's Up/Home/back button
case android.R.id.home:
finish();
break;
}
return super.onOptionsItemSelected(item);
}

You can use this function
fun setNavigationIcon(#DrawableRes resId: Int? = null) {
this.supportActionBar?.apply {
setDisplayHomeAsUpEnabled(true)
setHomeAsUpIndicator(resId ?: R.drawable.ic_close)
}
}

You can define a style:
<style name="Theme.Toolbar.Clear">
<item name="toolbarNavigationIcon">#drawable/abc_ic_clear_mtrl_alpha</item>
</style>
and use it in your theme:
<style name="Theme.Clear">
<item name="toolbarTheme">#style/Theme.Toolbar.Clear</item>
</style>

Android L - Sliding menu that overlaps actionbar

I am working on Android L trying to implement a drawer menu that overlaps the action bar. I have done it the normal way where it appears under the action bar, as described here: http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/.
It was done in the google IO 2014 app and I would like to replicate it. I have been looking through the code (https://github.com/google/iosched) but I can't figure out how they done it.
Here is an image:
Does anyone have any idea how they done it?

To obtain this you have to use the new Toolbar.
You can use a layout like this:
<Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:theme="#style/ActionBarThemeOverlay"
android:id="#+id/toolbar_actionbar"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize" />
Then in your activity you can do:
Toolbar mActionBarToolbar = (Toolbar) mActivity.findViewById(R.id.toolbar_actionbar);
if (mActionBarToolbar != null) {
mActivity.setActionBar(mActionBarToolbar);
}
Finally you have to setup the toolbar to work with the navigation drawer:
if (mActionBarToolbar != null) {
mActionBarToolbar.setNavigationIcon(R.drawable.ic_navigation_drawer);
mActionBarToolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if (mDrawerLayout.isDrawerOpen(Gravity.START)) {
mDrawerLayout.closeDrawer(Gravity.START);
} else {
mDrawerLayout.openDrawer(Gravity.START);
}
}
});
}
Pay attention because currently the new Toolbar class is only API-21.

Android: safe way to hide navigation spinner in ActionBar?

I would like to show a spinner in my ActionBar, using ActionBar.NAVIGATION_MODE_LIST, but I would like it to hide/show based on some application context. I have found that I can remove it from the ActionBar with getActionBar().setNavigationMode(-1), however I don't know if this is a good idea.
Any feedback on if this is safe or if there is a safer alternative?

Maybe this is more accepted:
ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
actionBar.setDisplayShowTitleEnabled(false);

If you stick to ActionBar.NAVIGATION_MODE_LIST, you will have to set navigation listener every time you want to show your spinner back. That is obviously not the best soluton.
Instead, you may want to use ActionBar.setCustomView() to set spinner navigation (reference).
Here is some sample code where you set the spinner:
Spinner navigationSpinner = new Spinner(this);
navigationSpinner.setAdapter(yourSpinnerAdapter);
// Here you set navigation listener
navigationSpinner.setOnItemSelectedListener(yourSpinnerNavigationListener);
getActionBar().setCustomView(navigationSpinner);
getActionBar().setDisplayShowCustomEnabled(true);
Then, when you want to show/hide it you simply change it's visibility:
getActionBar().getCustomView().setVisibility(View.INVISIBLE);

Just modify your implementation of ActionBarDrawerToggle like this:
public void onDrawerSlide(View drawerView, float slideOffset) {
super.onDrawerSlide(drawerView, slideOffset);
if (slideOffset == 0) { // 0 = drawer is closed
setActionBarNavigationVisibility(activity, true); //show Tabs when Drawer is closed
}
}
public void onDrawerStateChanged(int newState) {
super.onDrawerStateChanged(newState);
//hides Tabs right after Drawer starts opening
if (DrawerLayout.STATE_DRAGGING == newState || DrawerLayout.STATE_SETTLING == newState) {
setActionBarNavigationVisibility(activity, false);
}
}
Where method setActionBarNavigationVisibility is considering all navigation modes (you can delete code for unnecesarry navigation modes):
public static void setActionBarNavigationVisibility(Activity activity, boolean visible) {
try {
/* 1. --- If the navigation items are showing in ActionBar directly. We have 3 options Spinner, Tabs, and CustomNav ---
(When Tabs are showing BELOW ActionBar, is handled at the end) */
int actionViewResId = Resources.getSystem().getIdentifier("action_bar", "id", "android"); // #see http://stackoverflow.com/questions/20023483/how-to-get-actionbar-view
View actionBarView = activity.findViewById(actionViewResId); // returns instance of com.android.internal.widget.ActionBarView (inaccessible)
if (actionBarView != null) {
int visibility = visible ? View.VISIBLE : View.INVISIBLE; // not GONE, so it still takes space in ActionBar layout
// handle tabs navigation
Field mTabScrollViewField = actionBarView.getClass().getDeclaredField("mTabScrollView");
if (mTabScrollViewField != null) {
mTabScrollViewField.setAccessible(true);
View mTabScrollView = (View) mTabScrollViewField.get(actionBarView); // instance of com.android.internal.widget.ScrollingTabContainerView (inaccessible)
if (mTabScrollView != null)
mTabScrollView.setVisibility(visibility);
}
// handle Spinner navigation
Field mSpinnerField = actionBarView.getClass().getDeclaredField("mSpinner"); // resp. mListNavLayout
if (mSpinnerField != null) {
mSpinnerField.setAccessible(true);
View mSpinner = (View) mSpinnerField.get(actionBarView); // instance of android.widget.Spinner
if (mSpinner != null)
mSpinner.setVisibility(visibility);
}
// handle Custom navigation
Field mCustomNavViewField = actionBarView.getClass().getDeclaredField("mCustomNavView"); // resp. mListNavLayout
if (mCustomNavViewField != null) {
mCustomNavViewField.setAccessible(true);
View mCustomNavView = (View) mCustomNavViewField.get(actionBarView);
if (mCustomNavView != null)
mCustomNavView.setVisibility(visibility);
}
}
// 2. --- If the Tabs are BELOW ActionBar (narrow screens) ---
ViewParent actionBarContainer = actionBarView.getParent(); // parent of ActionBarView is com.android.internal.widget.ActionBarContainer (inaccessible)
Field mTabContainerField = actionBarContainer.getClass().getDeclaredField("mTabContainer");
if (mTabContainerField != null) {
mTabContainerField.setAccessible(true);
View mmTabContainer = (View) mTabContainerField.get(actionBarContainer);
if (mmTabContainer != null)
mmTabContainer.setVisibility(visible ? View.VISIBLE : View.GONE); // now use GONE, so the mTabContainer below Actionbar does not take space in layout
}
} catch (Exception ex) {
// TODO Handle exception...
}
}