Develop Reference

Collapsing toolbar title ignores textStyle and fontStyle while expanded

I've got a couple of toolbars. The upper one's id is toolbar2 and the second one's id is toolbar. They are both placed within CollapsingToolbarLayout. The upper toolbar got: app:layout_collapseMode="parallax" and the second one – app:layout_collapseMode="pin".
I set the same text appearance for both of them, but toolbar doesn't get bold and most likely hasn't got the fontFamily I specified. It only gets the right textColor and textSize from the following style, while the upper toolbar has got all the parameters as I specified:
<style name="ToolbarTextAppearance">
<item name="android:textSize">22sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#color/colorWhite</item>
<item name="android:fontFamily">sans-serif</item>
</style>
So, I wanted the same text appearance for both toolbars, though, here is what I've got:
Can somebody please tell me why that behaviour appears and how I can get the behaviour I want?
<android.support.design.widget.CoordinatorLayout
...>
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar"
app:expandedTitleTextAppearance="#style/ToolbarTextAppearance"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleMarginStart="18dp"
app:collapsedTitleTextAppearance="#style/ToolbarTextAppearance">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="Toolbar 2"
app:titleTextAppearance="#style/ToolbarTextAppearance" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="Toolbar"
app:titleTextAppearance="#style/ToolbarTextAppearance" />
<RelativeLayout
...
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
targetSdkVersion is 27

why tablayout scroll up?

i'm trying to create app with 2 tablayout i follow some steps and every things works fine but i have this problem with Tablayout show me big space between Toolbar and tablayout like this photo when i scroll up tablyout Space disappears i want to remove this space
when i scroll up :
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#ffffff">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:elevation="5dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_below="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:layout_scrollFlags="snap|enterAlways"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabIndicatorHeight="4dp"
android:elevation="10dp"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#FFFFFF"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.CoordinatorLayout>
Style.xml :
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>

In your case the extra space is an toolbar in your xml on above tab layout and you are using theme
"Theme.AppCompat.Light.DarkActionBar"
which become causing two actionbar here, if you dont using toolbar just remove it
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#ffffff">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_below="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:layout_scrollFlags="snap|enterAlways"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabIndicatorHeight="4dp"
android:elevation="10dp"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#FFFFFF"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.CoordinatorLayout>
this will be your final xml after removing toolbar,
else you want toolbar then set the them which dont have actionbar

Problem: I didn't see your Manifest file but it looks like you have one default Toolbar coming from your Theme and one you are setting yourself. To fix it, you can remove default Toolbar and use the one you added.
To fix this follow these steps.
Step 1: Add NoActionBar style to your Style.xml
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Step 2: Set AppTheme.NoActionBar to your Activity in Manifest.xml
<activity
android:name="YourActivity"
android:theme="#style/AppTheme.NoActionBar">
</activity>
Now your Activity will not have a system Toolbar. You can add your own Toolbar customise it as you want.
Step 3: Set your layout Toolbar as default Toolbar inside your Activity.
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Now you can use this Toolbar:
setTitle("Some Title");

The extra space is the second toolbar which is written by you in appbarlayout. First toolbar is by default toolbar.
you can remove extra space which is a toolbar by writing below code in your style.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
Instead of
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
Or
you can modify your appbarlayout code like below. You have just remove the toolbar from appbarlayout.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_below="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:layout_scrollFlags="snap|enterAlways"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabIndicatorHeight="4dp"
android:elevation="10dp"/>
</android.support.design.widget.AppBarLayout>

toolbar background doesn't adjust and title is not shown - android

I'm trying to create a toolbar that uses a background I made in a png file.
Now, when I use the background in the xml, the layout editor in the android studio shows exactly the expected result. The problem comes when I run the app in the virtual device. The background doesn't adjust to the toolbar and as a result only a part of it gets shown.
Moreover, the title and the items are acting strange. The title is not shown at all and the only item that is displayed in the toolbar suddenly jumps to the left.
XML Code of the Toolbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/app_bar_styled"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:elevation="15dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_styled"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="15dp"
android:theme="#style/AppTheme.AppBarOverlay.Styled">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/action_bar_background"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
XML Code for the style of the toolbar:
<style name="AppTheme.AppBarOverlay.Styled" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#drawable/action_bar_background</item>
<item name="android:titleTextStyle">#style/ToolBarTitleStyle</item>
</style>
<style name="ToolBarTitleStyle" parent="Base.TextAppearance.AppCompat">
<item name="android:textColor">#android:color/white</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">16dp</item>
</style>
And this is the MainActivity code which concerns the toolbar:
toolbar = (Toolbar) findViewById(R.id.toolbar_styled);
toolbar.setTitle(R.string.app_name);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowTitleEnabled(true);
Here is the images of the layout editor preview and the virtual device:
Layout Editor : https://i.gyazo.com/2b01f5ef9c87ecb35a605aa150aa6ad5.png
Virtual Device: https://i.gyazo.com/5bbd9bf5a2df1727278ba9e78efd622b.png

You need to nest it 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:id="#+id/cor_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="256dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_styled"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="15dp"
android:theme="#style/AppTheme.AppBarOverlay.Styled">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/action_bar_background"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
then set them up like this:
toolbar= (Toolbar) findViewById(R.id.toolbar);
collapse=(CollapsingToolbarLayout) findViewById(R.id.collapseToolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
collapse.setTitle("Title");
collapse.setCollapsedTitleTextColor(Color.parseColor("#FFFFFF"));
collapse.setExpandedTitleColor(Color.parseColor("#FFFFFF"));
collapse.setStatusBarScrimColor(Color.parseColor("#FFFFFF"));

1) create one tool_bar.xml file in your res folder and paste the following code.
2) Include this tool_bar.xml file when ever you required.
3) Instantiate tool_bar object in .java file and do further process.
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/action_bar_background"/>
</android.support.v7.widget.Toolbar>
<include id="#+id/tool_bar"
layout="#layout/tool_bar"/>
Toolbar toolbar = (Toolbar)findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);

Remove margin in android toolbar icon

I get this weird margin in my app toolbar between icon and navigation icon in the toolbar (as in the image).
I've got no idea about where it comes from and how to remove it. After searching the internet I found this:
<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_height="wrap_content"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:background="?attr/colorPrimaryDark"
android:layout_margin="0dp"
android:contentInsetLeft="0dp"
android:contentInsetRight="0dp"
android:contentInsetStart="0dp"
android:contentInsetEnd="0dp"
android:padding="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:contentInsetEnd="0dp">
</android.support.v7.widget.Toolbar>
But I still get this margin as in the figure:
Edit >> Solution
Well after using layout bound I figured much of the margins are of the icon(as in figure). But can I still remove this margin and change the size of the icon and the title text.
Edit
Following #Amir solution:
Helper for java:
class BasicActivity extends AppCompatActivity{
protected Toolbar mToolbar; /// Initilize it in onCreate methode
.....
protected void setupToolbar(String title) {
toolbar=(Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar ab = getSupportActionBar();
if (ab != null) {
ab.setDisplayHomeAsUpEnabled(true);
ab.setDisplayShowHomeEnabled(true);
}
if (!TextUtils.isEmpty(title)) {
setTitle(title);
}
}
}
And in your activity class:
class Main extends BasicActivity{
#override
protected void onCreate(Bundle saved){
super.onCreate(saved);
....
setupToolbar("MAIN");
}
}

You can easily remove Margin | padding between title and back icon with:
app:contentInsetStartWithNavigation="0dp"
Margin | padding In left/right side of toolbar with:
app:contentInsetStart="0dp"
Also if you need more customization do with following:
<?xml version="1.0" encoding="utf-8"?>
<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="?attr/actionBarSize"
android:background="#color/color_primary"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical">
<ImageView
android:id="#+id/icon_toolbar_left"
style="#style/IconFont.Large"
android:layout_width="48dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="?attr/selectableItemBackground" />
<TextView
android:id="#+id/text_toolbar_title"
style="#style/Textview.White.MediumSmall"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/icon_toolbar_right"
android:layout_toRightOf="#+id/icon_toolbar_left"
android:gravity="center"
android:text="#string/nav_category"/>
<ImageView
android:id="#+id/icon_toolbar_right"
style="#style/IconFont.Large"
android:layout_width="48dp"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:background="?attr/selectableItemBackground"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>

You can adjust the margins by modifying the theme and style, like this：
<style name="cusToolbarNavigationButtonStyle" parent="#style/Widget.AppCompat.Toolbar.Button.Navigation">
<!--default is 56dp-->
<item name="android:minWidth">0dp</item>
<item name="android:paddingLeft">16dp</item>
<item name="android:paddingRight">16dp</item>
</style>
<style name="cusToolbarStyle" parent="#style/Widget.AppCompat.Toolbar">
<!--default 4dp-->
<item name="titleMargin">0dp</item>
<!--default #dimen/abc_action_bar_content_inset_with_nav-->
<item name="contentInsetStartWithNavigation">0dp</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="toolbarNavigationButtonStyle">#style/cusToolbarNavigationButtonStyle</item>
<item name="toolbarStyle">#style/cusToolbarStyle</item>
</style>

if you are using this
<android.widget.Toolbar>
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
</android.widget.Toolbar>
if using
<androidx.appcompat.widget.Toolbar>
app:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
</androidx.appcompat.widget.Toolbar>

If you want to remove the margin/padding from the title in a CollapsingToolbarLayout you might find this usefull:
<android.support.design.widget.CollapsingToolbarLayout
app:expandedTitleMarginStart="0dp"
.../>

<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStartWithNavigation="0dp"
app:contentInsetEndWithActions="0dp"
>

Hide android ToolBar

I am developing a tabbed application and for some tabs I want to hide the toolbar. I am setting the visibility as gone to accomplish that. Below is my XML file,
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout android:id="#+id/main_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:visibility="gone"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_gravity="bottom"
android:background="#color/offwhite"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>
But I am seeing some item still on the top section of the screen. please check the screen shot. Am i doing it correctly? Is there any better way to hide Toolbar.
Thanks.

You can hide the toolbar programmatically using the following code
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setVisibility(View.GONE);`
And if that doesn't fix the problem, try removing from your AppBarLayout,
android:paddingTop="#dimen/appbar_padding_top"
and change your toolbar to this
app:layout_scrollFlags="scroll"
This would fix your problems

To hide the toolbar in your App, just add two lines in your style.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>