Develop Reference

Why is CollapsingToolbarLayout putting a empty space under expanded content

I am trying to use CollapsingToolbarLayout but getting this blue space under my content. Collapsed state doesn't have this problem.
The Empty space under the expanded content seems to be equal to status bar height. I am unable to understand why that would happen.
My xml looks like this
<android.support.design.widget.CoordinatorLayout
android:fitsSystemWindows="true" ...>
<android.support.design.widget.AppBarLayout
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true" ...>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed|enterAlwaysCollapsed"
app:statusBarScrim="#android:color/transparent">
<android.support.constraint.ConstraintLayout
android:id="#+id/expanded_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax".../>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:navigationIcon="?attr/homeAsUpIndicator"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<android.support.constraint.ConstraintLayout.../>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Update
I found a workaround for the time being
collapsingToolbar.post {
val params = (collapsingToolbar.layoutParams as ViewGroup.MarginLayoutParams)
params.height = findViewById<View>(R.id.expanded_toolbar).height
collapsingToolbar.layoutParams = params
}

I think you should try changing the layout_height of your collapsing toolbar to wrap_content instead of match_parent
I believe that the blue color is because of the toolbar within the collapsing toolbar. So you should make sure that your background is applied to the appbar layout, or the collapsing toolbar layout.
However, that may cause problems since you're using an image background instead of just a color. So I recommend that you keep track of the collapsing toolbar's status, whether it's collapsed or open, and update your background accordingly.

Setting "match_parent" in the constraint inside the CollapsingToolbarLayout works for me:
<android.support.constraint.ConstraintLayout
android:id="#+id/expanded_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax".../>

How to programmatically add elements to toolbar

I'm currently making an app with backwards support for toolbars, and thus I have this file
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
I then programatically add it in to the views by doing something like:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
However, I want to be able to add custom views into the Toolbar, such as EditText and TextView's without hard-coding them into the toolbar.xml above.
Is there any way to do this? It might be worth noting that I'm using the V7 support library.
Thanks,
Liam

Just give a try to the following
Step 1 : Add LinearLayout to the toolbar in xml file
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:id=#+id/toolbar_item_container
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" />
</android.support.v7.widget.Toolbar>
Step 2 : Get this LinearLayout in code
Toolbar mToolbar = (Toolbar)findViewById(R.id.toolbar_transaction);
LinearLayout layoutToolbar = (LinearLayout)
mToolbar.findViewById(R.id.toolbar_item_container);
Step3 : Add and Remove view to this LinearLayout using following code
layoutToolbar.addView();
layoutToolbar.removeView();
This can be done without LinearLayout also, by directly adding and removing elements from Toolbar. You can try both the ways.
Hope it'll help.

if you dont have toolbar in xml, can set custom view programmatically
actionBar.setCustomView(R.layout.custom_view);
View view = actionBar.getCustomView();
TextView locationTitle = view.findViewById(R.id.tv_custom_toolbar);
locationTitle.setText("some text");
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
actionBar.setDisplayHomeAsUpEnabled(true);

Set scrim color programmatically

I'm trying to set the AppBarLayout's primary color programmatically. The XML layout is AndroidStudio's Scrolling sample:
<android.support.design.widget.AppBarLayout android:id="#+id/app_bar"
android:fitsSystemWindows="true" android:layout_height="#dimen/app_bar_height"
android:layout_width="match_parent" android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout android:id="#+id/toolbar_layout"
android:fitsSystemWindows="true" android:layout_width="match_parent"
android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<android.support.v7.widget.Toolbar android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize" android:layout_width="match_parent"
app:layout_collapseMode="pin" app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
And in the activity, I want all items inside the AppBarLayout to have a yellow background, so I'm setting:
int barColor = Color.parseColor("#FFC107");
AppBarLayout barLayout = (AppBarLayout) this.findViewById(R.id.app_bar);
if (barLayout != null) {
barLayout.setBackgroundColor(barColor);
}
toolbar.setBackgroundColor(barColor);
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) this.findViewById(R.id.toolbar_layout);
if (collapsingToolbarLayout != null) {
collapsingToolbarLayout.setBackgroundColor(barColor);
collapsingToolbarLayout.setContentScrimColor(barColor);
}
Everything works fine, except when I'm halfway through scrolling the toolbar (in the exact point where the FAB disappears). In that state, the toolbar's color is still the default primary color (blue, not yellow), like in this image:
So, two questions:
Am I missing a method call?
Any tips on debugging these scenarios? In Android Device Monitor's view hierarchy dump I can't tell which one is the view that's tinted with this color.

I was having the same problem, you have to set the statusBar scrim color as well:
int red = ContextCompat.getColor(activity, R.color.red);
collapsingToolbar.setBackgroundColor(red);
collapsingToolbar.setContentScrimColor(red);
collapsingToolbar.setStatusBarScrimColor(red);
you can even get the color directly using:
collapsingToolbar.setBackgroundResource(R.color.red);
collapsingToolbar.setContentScrimResource(R.color.red);
collapsingToolbar.setStatusBarScrimResource(R.color.red);

Tabs indide material design Toolbar

In pre-5.0 documentation there is an example that shows tabs inside the Action bar:
https://developer.android.com/guide/topics/ui/actionbar.html#Tabs
What is the correct way to achieve that in 5.0+ interface with new Toolbar?
Do I just place widget.TabLayout inside widget.Toolbar?

You can place the tablayout widget inside the toolbarwidget like
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/toolbar"
android:background="?attr/colorPrimary">
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
</android.support.v7.widget.Toolbar>

Android Toolbar NavigationIcon Size

I created a toolbar in my xml file by using
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar_settings"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:elevation="4dp"
/>
I set an NavigationIcon by using this:
mToolbarSettigs.setNavigationIcon(R.drawable.ic_done_black_24dp);
But now there is no margin between the icon and the sides of the toolbar.
How can I change that?
Thanks!