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);
}
}

Change the size of hamburger icon in toolbar?

I have 2 questions which can be strange but anyway...
I have toolbar with a title of application. How to change it to picture which is not the logo?
The next question: Is it possible to set, change the size of hamburger icon in toolbar? I made classic navigation drawer with the help of next code below (I used ActionBarDrawerToggle also) but the size is too small if you will compare it with another items(icons) of my toolbar.
toolbar = (Toolbar) findViewById(R.id.application_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
NavigationDrawerFragment drawerFragment = (NavigationDrawerFragment)getFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
drawerFragment.setUp(R.id.fragment_navigation_drawer,(DrawerLayout)findViewById(R.id.drawer_layout), toolbar );
Thanks for any help! =)

I had solved this problem by this way:
for (int i = 0; i < mToolbar.getChildCount(); i++) {
if(mToolbar.getChildAt(i) instanceof ImageButton){
mToolbar.getChildAt(i).setScaleX(1.5f);
mToolbar.getChildAt(i).setScaleY(1.5f);
}
}
and my hamburger icon size had been increased.

I wanted to increase the size of the Hamburger button and found other answers to not work. Code from this answer worked perfectly and is pasted below.
"Create a custom class which extends the Drawable class to create the
hamburger and navigation icons. There are various methods to change
the size of either but below are the methods which control the
hamburger icon."
public class HamburgerDrawable extends DrawerArrowDrawable {
public HamburgerDrawable(Context context){
super(context);
setColor(context.getResources().getColor(R.color.white));
}
#Override
public void draw(Canvas canvas){
super.draw(canvas);
setBarLength(30.0f);
setBarThickness(5.0f);
setGapSize(5.0f);
}
}
"Then call it from your class:"
private void increaseHamburgerSize(){
mDrawerToggle.setDrawerArrowDrawable(new HamburgerDrawable(this));
}

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>

Dynamically recolor activity background before showing it

I need to set custom color both to actionbar and to client area. With the following code my app get succesfully colored, however, I still see the default theme for like 0.5 seconds when the activity starts. How do I remove this gap?
The color is set dynamically, so I guess I cannot use theme definition here. (I will later change my code to get color from an Intent)
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_note_screen);
setNoteColor(0xFFFFF8DC);
}
public void setNoteColor(int color) {
getWindow().getDecorView().setBackground(new ColorDrawable(color));
assert getActionBar() != null;
getActionBar().setBackgroundDrawable(new ColorDrawable(color));
}

Funny thing I just read about that yesterday... =)
Here is a great post regarding you issue