Develop Reference

Title in expanded CollapsingToolbarLayout not displayed correctly

So, I got a wierd problem with my CollapsingToolbarLayout in my project. After my activity starts this is how my toolbar title appears:
After collapsing the layout is like this:
The original title text in the example is: "UPC VONALKODOS TERMEK"
I think the title in the expanded state should be longer (there is enough room for it) than in collapsed state. This what my activity's xml looks like:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:theme="#style/PolarThemeNoActionBar">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_below="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="142dp"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleTextAppearance="#style/ExpandedText">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_below="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:gravity="bottom"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="?attr/colorPrimaryDark"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
My res/style/ExpandedText looks like:
<style name="ExpandedText" parent="android:TextAppearance">
<item name="android:textColor">#android:color/white</item>
<item name="android:textSize">20sp</item>
</style>
Support library version: 25.1.1.
Phone: Nexus 5
Android version: 6.0.1 (stock)
My question: Why the title have dots at the end in expanded state and not filling the space to show more from it?
[EDIT 1] Issue still remains with support library version 25.3.0

CollapsingToolbarLayout uses a helper class - CollapsingTextHelper - to draw and animate its title. At the time of writing, the recent versions of this class are restricting the available width for the expanded title to a size based on the width available in the collapsed state, scaled by the ratio of the states' text sizes.
Relevant source comments:
// If the scaled down size is larger than the actual collapsed width, we need to
// cap the available width so that when the expanded text scales down, it matches
// the collapsed width
This was apparently introduced to address some edge cases where the title would overlap other Toolbar stuff, as explained in the notes on the relevant commit.
Fix CollapsingToolbarLayout displaying over icons
CTL scales it title which works in most situations.
There are edge cases though where the title can be
drawn on the Toolbars contents, namely icons.
This CL fixes the edge cases where the collapsed
and expanded text sizes are similar in size, which
means that there is limited/no scaling happening
while scrolling. In this instance we need to cap
any available width when expanded, so that it
'scales' to match the collapsed width when collapsed.
Normally, I'm all about tearing into View classes to modify their behavior with reflection and other trickery, but in this case, the given setup is such that this would take some really heavy lifting. The helper class is not normally accessible outside the library package, its instance is private in the CollapsingToolbarLayout, and the sizing calculations are performed in a private, secondary method with mostly local variables.
If it's a possibility, the simplest solution would be to revert to a library version published before this fix. I've not determined the exact version that brought this change, and the support library revision history doesn't seem to mention it, unfortunately. However, that commit was made in the middle of last year (2016), so probably around version 24.0.0, or a little later. I can verify that the behavior is not present in 23.4.0.
You could certainly file a bug report for this, if you like, though no guarantees that they'd consider this a bug. I didn't find any previously filed issues regarding this specifically, other than this tangentially-related one complaining about the ellipsizing that was a side effect of that change.

You can turn off ellipsizing. Add this to your TextAppearance style:
<item name="android:ellipsize">none</item>
If it's necessary you can also manually change the width of the textview that is created by adding width to the style
<item name="android:width">300dp</item>

I edit your code see this may be you like this
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tablayout"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="142dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#style/ExpandedText"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_below="#+id/toolbar"
android:background="?attr/colorPrimary"
android:gravity="bottom"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="?attr/colorPrimaryDark" />
</android.support.design.widget.AppBarLayout>
and this is Activity Class
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private CollapsingToolbarLayout collapsingToolbar;
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.answer2);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("UPC VONALKODOS TERMEK");
collapsingToolbar.setExpandedTitleTextAppearance(R.style.ExpandedAppBar);
collapsingToolbar.setCollapsedTitleTextAppearance(R.style.CollapsedAppBar);
}
}
and this is res/style/:
<style name="CollapsedAppBar" parent="#android:style/TextAppearance.Medium">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#color/white</item>
<item name="android:textStyle">normal</item>
</style>
<style name="ExpandedAppBar" parent="#android:style/TextAppearance.Medium">
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
</style>

Android: I cannot remove elevation / shadow on my toolbar

Hi i would like to remove the elevation and shadow effect from my toolbar for API 21 and greater. Below is what i have tried
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setElevation(0);
My Toolbar in XML. I have tried to set elevation to 0dp
<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"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:elevation="0dp"
android:theme="#style/ToolbarStyle"
app:theme="#style/ToolbarStyle"
>
And this is ToolbarStyle if it helps
<style name="ToolbarStyle" parent="ThemeOverlay.AppCompat.Dark">
<item name="colorControlNormal">#android:color/white</item>
</style>
Edit 1: Tried the following in styles v21. Still same result
<style name="ToolbarStyle" parent="ThemeOverlay.AppCompat.Dark">
<item name="colorControlNormal">#android:color/white</item>
<item name="android:elevation">0dp</item>
</style>
Edit 2: Where the toolbar is in my layout
android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.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">
<include layout="#layout/toolbar" />

You can do that with an easy step. Don't remove the android.support.design.widget.AppBarLayout from your layout, instead add the attribute app:elevation="0dp" to it. Your final layout will be:
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
...
</android.support.design.widget.AppBarLayout>

This remove elevation on toolbar (android:stateListAnimator="#null"), stateListAnimator is for API level 21 or higher, so insert a tools prop (before namespace declaration) like this:
//xmlns:tools="http://schemas.android.com/tools" in parent or start element
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stateListAnimator="#null"
android:theme="#style/AppTheme.AppBarOverlay"
tools:targetApi="21">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:elevation="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
//your content goes here like RecyclerView, Card or other layout
Here is my sample result:

Use setOutlineProvider(null); on your appBar. Just be sure to check the SDK version. :)

Use app:elevation="0dp" in your AppBarLayout. Make sure you put Toolbar inside your AppBarLayout like this -
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/AppTheme.AppBarOverlay"
android:fitsSystemWindows="true"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/firstOption"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
and add this line to your activity - findViewById(R.id.appBarLayout).bringToFront();
This will bring the AppBar to front.

Just remove this part of you layout hierarchy:
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
It's responsible for creating shadow. Toolbar itself doesn't cast any shadow.

Go to the activity you want to remove the ActionBar's Elevation.
Before setContent(....), request the ActionBar feature(That is if you have not declared it directly)
getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
getSupportActionBar().setElevation(0);
or else just call the declared Toolbar variable
e.g
toolbar.setElevation(0);

Get the appbarlayout in code:
var appbarLayout = findviewbyid<AppBarLayout>(resource.id. );
set the property
appbarLayout.StateListAnimator=null;

Create another style for v21 and add
<item name="android:elevation">#dimen/toolbar_elevation</item> to that style. On normal style don't use elevation and don't use it in xml, just use style="#style/yourCustomToolbarStyle"

Solution is simple. Just add following line into your AppBar layout. No need to add elevation for the Toolbar or AppBar layout after this.
android:stateListAnimator="#null"

use android:outlineSpotShadowColor=" assign transparent colour" your shadow will disappear its work for my as below
enter image description here

To remove elevation by using java code use the line below...
getSupportActionBar().setElevation(0);

Android design library TabLayout background issues

When I setup the tabBackground attribute of the "22.2.0 Android design library" TabLayout (android.support.design.widget.TabLayout) two problems appear :
The ripple effect in the tabs is lost
The tab indicator disappears.
This occurs on both Lollipop and Kitkat devices.
Without the tabBackground settings, both ripple effect and tab indicator work but the background has a default color that is different from the toobar, which is not exactly conform to the material design guidelines.
Please find below the XML :
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabBackground = "?attr/colorPrimary" />

Use android:background="?attr/colorPrimary" instead of app:tabBackground = "?attr/colorPrimary".
If you have a dark primary color, you may also want to change the theme to ThemeOverlay.AppCompat.Dark. This makes the text and the ripple color white.
Full example:
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark" />

Android API 21 Toolbar Padding

How do I get rid of the extra padding in the new Toolbar with Android SDK API version 21 (the support library)?
I am talking about the red arrows on this picture:
Here is the code I am using:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
android:padding="0dp"
android:layout_margin="0dp">
<RelativeLayout
android:id="#+id/action_bar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="0dp"
android:padding="0dp"
android:background="#000000">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
</Toolbar>
As you can see I've set all the relevant padding to 0, but there is still padding around the Spinner. What have I done wrong or what do I need to do to get rid of the extra padding?
Edit
Some have questioned why I am trying to do this.
As per the Material Design specs, the spinner should be 72dp from the left side
I need to neutralize the padding Google have put there in order to properly place my spinner:
Edit 2
As per Chris Bane's answer below I set the contentInsetStart to 0. For the support library you will need to use the app namespace:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
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="#dimen/action_bar_height"
android:background="?attr/colorPrimary"
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v4.widget.DrawerLayout>

The left inset is caused by Toolbar's contentInsetStart which by default is 16dp.
Change this to 72dp to align to the keyline.
Update for support library v24.0.0:
To match the Material Design spec there's an additional attribute contentInsetStartWithNavigation which by default is 16dp. Change this if you also have a navigation icon.

Above answer is correct but there is still one thing that might create issues (At least it did create an issue for me)
I used the following and it doesn't work properly on older devices -
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
The trick is here just use the following -
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
and get rid of -
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
And now it should work fine throughout all the devices.

Simpley add this two line in toolbar. Then we get new removed left side space bcoz by default it 16dp.
android:contentInsetStart="0dp"
app:contentInsetStart="0dp"

In case someone else stumbles here... you can set padding as well, for instance:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
int padding = 200 // padding left and right
toolbar.setPadding(padding, toolbar.getPaddingTop(), padding, toolbar.getPaddingBottom());
Or contentInset:
toolbar.setContentInsetsAbsolute(toolbar.getContentInsetLeft(), 200);

A combination of
android:padding="0dp"
In the xml for the Toolbar
and
mToolbar.setContentInsetsAbsolute(0, 0)
In the code
This worked for me.

Here is what I did and it works perfectly on every version of Android.
toolbar.xml
<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="56dp"
android:background="#color/primary_color"
app:theme="#style/ThemeOverlay.AppCompat"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp" <!-- Add margin -->
android:layout_marginStart="16dp"
android:gravity="left|center"
android:text="Toolbar Title" <!-- Your title text -->
android:textColor="#color/white" <!-- Matches default title styles -->
android:textSize="20sp"
android:fontFamily="sans-serif-medium"/>
</android.support.v7.widget.Toolbar>
MyActivity.java (To hide default toolbar title)
getSupportActionBar().setDisplayShowTitleEnabled(false); // Hide default toolbar title
Result with Keylines Shown

Make your toolbar like:
<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/menuToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#color/white"
android:contentInsetLeft="10dp"
android:contentInsetRight="10dp"
android:contentInsetStart="10dp"
android:minHeight="?attr/actionBarSize"
android:padding="0dp"
app:contentInsetLeft="10dp"
app:contentInsetRight="10dp"
app:contentInsetStart="10dp"></android.support.v7.widget.Toolbar>
You need to add
contentInset
attribute to add spacing
please follow this link for more - Android Tips

Update AndroidX toolbar:
<!-- TOOLBAR -->
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetStart="0dp">
<TextView
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/create_account_title"
android:textColor="#color/color_dark_grey"/>
</androidx.appcompat.widget.Toolbar>

Ok so if you need 72dp, couldn't you just add the difference in padding in the xml file? This way you keep Androids default Inset/Padding that they want us to use.
So: 72-16=56
Therefor: add 56dp padding to put yourself at an indent/margin total of 72dp.
Or you could just change the values in the Dimen.xml files.
that's what I am doing now. It changes everything, the entire layout, including the ToolBar when implemented in the new proper Android way.
Dimen Resource File
The link I added shows the Dimen values at 2dp because I changed it but it was default set at 16dp. Just FYI...

((Toolbar)actionBar.getCustomView().getParent()).setContentInsetsAbsolute(0,0);

How to change the current tab highlighter color in Android ViewPager?

Here is my layout inside ViewPager. I would like to change the color of the current tab highlighter which is below the text. Actually it is showing in black color. But I don't know whether it is a color by default or not. And also I have one more doubt. If I use PagerTitleStrip this tab highlighter doesn't appear. Is there a way to bring that with titlestrip?
Here is my layout:
<android.support.v4.view.PagerTabStrip android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#color/pager_titlestrip_bg"
android:textColor="#color/pager_titlestrip_text"
android:paddingTop="5dp"
android:paddingBottom="4dp" >
</android.support.v4.view.PagerTabStrip>

This just works.
PagerTabStrip pagerTabStrip = (PagerTabStrip) findViewById(R.id.pager_title_strip);
pagerTabStrip.setDrawFullUnderline(true);
pagerTabStrip.setTabIndicatorColor(Color.RED);
Thanks!

It can be done in both programmatically with jAVA or with XML
By XML
<android.support.design.widget.TabLayout
android:id="#+id/tabanim_tabs"
android:layout_width="match_parent"
app:tabIndicatorHeight="4dp"
app:tabIndicatorColor="#android:color/white"
android:layout_height="wrap_content" />
Or more simply you can solve this Code aswell
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
Similarly to change the Height
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));

This works in my project.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFF"
app:tabGravity="fill"
app:tabIndicatorColor="#color/text3"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/text3"
app:tabTextColor="#000" />