Develop Reference

Change text style (to bold) in custom style resource for collapsing toolbar layout

I am using a collapsible toolbar in a project and I am trying to set the textStyle of the expanded collapsing toolbar title to bold.
For some reason I can change pretty much anything using a custom text appearance except textStyle. Does anyone have any information about that issue? I found it hard to search in the internet. I tried programmatically to no avail neither.
<!-- style resource -->
...
<style name="Toolbar_Title" parent="#android:style/TextAppearance.Large">
<item name="android:fontFamily">sans-serif-condensed</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:textSize">#dimen/detail_title_text_size</item>
<item name="android:textStyle">bold</item>
</style>
...
<!-- layout file -->
...
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginBottom="16dp"
app:expandedTitleMarginStart="16dp"
app:expandedTitleTextAppearance="#style/Toolbar_Title"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
...

This one works for me. Having defined the text appearance in the layout file for the collapsing toolbar I can use the setExpandedTitleTypeface function to add a bold style to the currently used type face:
mCollapsingToolbarLayout.setExpandedTitleTypeface(Typeface.create(mCollapsingToolbarLayout.getExpandedTitleTypeface(), Typeface.BOLD));
The attribute textStyle does not seem to be taken into account by the collapsing toolbar.
A disadvantage is that the collapsing toolbar by default ellipsizes the title, which may not be a desired behaviour in some cases.

Remove extra background color rectangle from overflow menu enter/exit animations?

When I open the overflow menu in my application, I see a solid rectangle of the menu background color displayed behind the menu itself throughout the enter/exit animations. Here's an animation showing this (slowed to 75% speed):
The presence of this extraneous colored rectangle spoils the nice enter/exit animations! How can I remove it while retaining all other Toolbar styling?
Research
I've read a bunch of answers on Toolbar styling on SO, and Chris Banes' own posts on the subject. It seems that usage of the style/theme tags on a per-View basis has changed in the past couple years, which has made it difficult to find definitive information anywhere.
I've reproduced this using versions 22.1.0 through 23.2.0 (inclusive) of the support library.
App files
styles.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="ToolbarStyle" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#color/colorPrimary</item>
</style>
</resources>
activity_main.xml
<LinearLayout
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:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:style="#style/ToolbarStyle" />
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Runtime View Analysis
As #Commonsware suggested, I took a look at the view hierarchy at run time. Editing in the results:
Menu collapsed (overflow button present, no mysterious extra rectangle):
Menu expanded (overflow menu views displayed in separate Window):
The main application view hierarchy (as displayed in the original Window) is unchanged when comparing the two menu (steady) states. My guess is therefore that the extra rectangle is temporarily added to the main application's window during menu animations, and immediately removed upon their completion. I'm not sure why this would be done - perhaps it's a hangover from an older (and now unused) method of showing and hiding the overflow menu? If my deduction is correct, then this question could be resolved if we can determine how to prevent this transitory behavior...

An extract from the Chris Bane's answer to the question AppCompat style background propagated to the Image within the ToolBar
style = local to the Toolbar
theme = global to everything inflated in the Toolbar
Based on the above post it seems, the android:background attribute you are setting in the android:theme is the reason for the extra background color during the animation.
I'd set the background to the toolbar directly and used the android:colorBackground attribute to set the background color for the popup. The animation seems to work fine.
Code:
activity_main.xml
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:theme="#style/CustomToolbarTheme" />
styles.xml
<style name="CustomToolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:colorBackground">#color/colorPrimary</item>
<item name="android:textColorPrimary">#android:color/white</item>
</style>

How to implement Toolbar Layout

How do I remove the boundary between action and toolbar?
Bad Case
Good Case, I want to like it.
Activity XML
Fragment XML

What you are looking for is a way to remove the shadow under toolbar.
For android 4.4 or below, you will have to set the window content overlay in your activity theme like this
<style name="Theme.MyApp" parent="Theme.AppCompat.Light.NoActionBar">
...
<!--To hide shadow effect in toolbar for Android 4.4 or below-->
<item name="android:windowContentOverlay">#null</item>
</style>
For Android 5.0+, you will also need to set the toolbar elevation to 0 in the activity layout like this.
<LinearLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
...
>
<android.support.design.widget.AppBarLayout
...
app:elevation="0dp">
...
</android.support.design.widget.AppBarLayout>
</LinearLayout>
Actually, many people ask about this. See answer here
Try to search for existing answer next time ;)

Toolbar navigation icon can't be center inside

I want to set the navigation icon for my toolbar ,and get into the problem that the icon isn't center inside by default it looks like:
and the code is:
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setHomeButtonEnabled(true);
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white_48dp);
and the theme.xml is:
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:windowTranslucentStatus">true</item>
<item name="android:navigationBarColor">#color/colorPrimaryDark</item>
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
and the layout xml is:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
/>
I think I have tried everything I know but I just can't figure it out.I used to set the navigation icon for toolbar then it will be center inside and now.Any help will save my day!
Eidted: of course I tried different size of icons
and I konw I could add a custom layout in toolbar or customize a layout like (which is a Linearlayout I write about)
But I just don't why I can't set the navigation icon like before,it will automatically be center inside....I think maybe I should change the theme or define something like navigationButttonStyle in the attributes....

I fix this by inherit the right theme Widget.AppCompat.Toolbar rather than ThemeOverlay.AppCompat.Dark.ActionBar to define my own toolbar style.
And use
<item name="toolbarStyle">#style/MyToolBar</item>
to set the toolbarStyle

I think you are using a bit big image. Try figure it out using this link

OK now I finally find out where the problem is: which has nothing to do with the icon size
You should place the image resource in the to the corresponding folder like (drawable-xxhdpi , drawable-xhdpi).If you don't do so,which means if you just put it in the drawable folder , it won't be auto resized to be center inside in your toolbar;

Add margin to Appcompat actionbar popup menu

I am using appcompat actionbar. I want to add top margin to the overflow menu that opens on the top-right. Hence, increasing the spacing above it as you can see in the picture below. Right now the dropdown menu open on top of the 3 dots. How can I push it down?
Thank you.

If you are referring to Activity's default OptionItem menu, I guess you can't do it programmatically as the APIs just let you inflate it, thus adding/removing elements. Spacing should be fine tho, as the menu is standardized across every kind of layout.
What is the spacing problem you're having? Could you add a screenshot of your desired result?
A possible solution, not too dirty, would be using a custom style:
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:actionButtonStyle">#style/MyStyle</item>
</style>
<style name="MyStyle" parent="AppBaseTheme">
<item name="android:minWidth">XXdip</item>
<item name="android:padding">XXdip</item>
</style>

You can Toolbar instead of ActionBar
<android.support.v7.widget.Toolbar
android:id="#id/toolbar"
android:background="#color/color_notification_toolbar"
android:layout_width="fill_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material">
<TextView
android:textSize="#dimen/abc_text_size_title_material_toolbar"
android:textStyle="bold"
android:textColor="#color/color_notification_title"
android:layout_gravity="center"
android:id="#id/tvTimeLineTitle" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="#string/title" />
/* add your menu items here as simple text views and
and give as much margins and paddings as you want */
</android.support.v7.widget.Toolbar>