Develop Reference

NavigationComponents does not let me hide my appBar

I'm trying to use a collapsingToolbarLayout to show an image and a bunch of options inside a recyclerview, what I have done is the followin
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/appbar"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="bottom"
app:expandedTitleMarginEnd="#dimen/activity_horizontal_margin"
app:expandedTitleMarginStart="#dimen/activity_horizontal_margin"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="#string/app_name">
<ImageView
android:id="#+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:contentDescription="#null"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/ofertas_gradient" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This code, outputs this layout
Now, this is fine, and its working as espected in my fragment, the thing is that I also have the appbar configured my my NavigationController and is also poping above my toolbar
So, after swiping up, my toolbar collapses but I also have my appbar
So, what I did is this at my fragment to setup my toolbar
toolbar.apply {
setNavigationOnClickListener { findNavController().navigateUp() }
}
Now, I tried with actionBar.hide() to hide my actionbar and only let my toolbar to show up, but I cant get the actionBar, also I tried to setHomeDisplay as true with the toolbar but since I cant get the actionBar, I also cant add my navigationUp arrow to my toolbar
How can I also get the appBar from every fragment ?
Styles
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowLightStatusBar">true</item>
<item name="actionBarTheme">#style/AppTheme.AppBarOverlay</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#color/negro</item>
<item name="fontFamily">#font/cera_pro_light</item>
</style>
</resources>
Thanks

You're using Toolbar and ActionBar at the same time.
Change your styles.xml by changing DarkActionBar -> NoActionBar.
If you need ActionBar callbacks on your Activity or Fragment, you need to set your Toolbar as ActionBar.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowLightStatusBar">true</item>
<item name="actionBarTheme">#style/AppTheme.AppBarOverlay</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.NoActionBar">
<item name="android:textColorPrimary">#color/negro</item>
<item name="fontFamily">#font/cera_pro_light</item>
</style>
</resources>
Optional (In your Activity's onCreate())
setSupportActionBar(toolbar)

Android black and white theme

i am trying to achieve theme like this but i can't find any help about it i am trying to get white action bar with black icons and text and status bar with black icons and white background I am changing color pragmatically but I think there is some proper theme to get something like this i have also tried material.theme.light

Here is your Solution
Try this
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white">
<android.support.v7.widget.Toolbar
android:id="#+id/ar_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="exitUntilCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Nilesh Rathod"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Theme
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#android:color/white</item>
<item name="colorPrimaryDark">#android:color/white</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlNormal">#FFFFFF</item>
<item name="android:windowLightStatusBar">true</item>
<item name="android:statusBarColor">#android:color/white</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentNavigation">false</item>
<item name="android:navigationBarColor">#000</item>
</style>
OUTPUT

How to remove shadow from Appbar and add shadow to the TabLayout

I have the following simple app with 3 tabs:
I want to remove the shadow from the appbar and add shadow to the tablayout.
I tried multiple things such as android:elevation or adding <item name="elevation">0dp</item> to the AppTheme, or using <item name="android:windowContentOverlay">#null</item>. Nothing works. I keep having a shadow under the app bar (where is says My App) and no shadow is added under
the tabs (Where is says PAGE 1, PAGE2, PAGE3).
These are my xml files:
style.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="elevation">0dp</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<!-- Style for a tab that displays a category name -->
<style name="CategoryTab" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#android:color/white</item>
<item name="tabSelectedTextColor">#android:color/holo_purple</item>
<item name="tabTextAppearance">#style/CategoryTabTextAppearance</item>
</style>
<!-- Text appearance style for a category tab -->
<style name="CategoryTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textColor">#000000</item>
</style>
</resources>
this is the activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/primary_color"
android:orientation="vertical"
tools:context="com.example.barebones.barebones.MainActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/CategoryTab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="15dp"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="10dp"/>
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>

add Elevation in AppBarLayout like below
getSupportActionBar().setElevation(0);
Adding shadow to your tablayout just add elevation to your Tablayout. and also for info read
Material-Design.
android:background="?attr/colorPrimary"
android:elevation="15dp"

just need to add
'android:background="#null"' in XML file

Toolbar TextColor and Overflow Menu color issue with Lollipop and Pre Lollipop devices

Style
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/my_primary_color</item>
<item name="colorPrimaryDark">#color/my_primary_dark_color</item>
<item name="colorAccent">#color/accent</item>
</style>
layout
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
By applying the above theme, android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar",
in AppBar, The Toolbar TextColor and Toolbar items are white in lollipop and black color in pre lollipop.
Lollipop
Pre Lollipop
And by applying the following theme, app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
The Toolbar Textcolor and Overflow Icon becomes black in both Lollipop and pre lollipop devices.
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app: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"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
Lollipop
Pre Lollipop
How can I work out to get Toolbar TextColor and OverFlow Menu icon color to white?? As you seen in the above code, I used
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
and
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
But it didn't work out. Any help will be appreciated.

This works for me!
<style name="AppTheme.WithoutActionBar" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="colorPrimaryDark">#color/titleBarColor</item>
<item name="colorPrimary">#color/actionBarColor</item>\
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlActivated">?attr/colorAccent</item>
<item name="android:textColorPrimary">#color/abc_primary_text_material_dark</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="colorControlNormal">#android:color/white</item>
</style>
In manifest!
<activity
android:name=".MainActivity"
android:theme="#style/AppTheme.WithoutActionBar"/>

Looks like you forgot to apply ThemeOverlay to the Toolbar itself (I'm not sure it even works on AppBarLayout, last time I checked, in support lib it only worked for Toolbar)
So, add this attribute to your <android.support.v7.widget.Toolbar>
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
and it should all come into place, no extra text color tweaks needed.

The best way to force the title, subtitle, colours from actiobar, toolbar, etc is by using html code.
actionBar.setTitle(Html.fromHtml("<font color='#FFFFFF'>ActionBarTitle </font>"));
Do the same with other titles. This way, it doesn't matter which theme you use or SDK, it will always be white.

Make own text style and set it to the Tollbar:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
[...]
app:titleTextAppearance="#style/AppTheme.Toolbar.Title.MyStyle" />
style:
<style name="AppTheme.Toolbar.Title.MyStyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<!-- Set title color -->
<item name="android:textColor">#color/toolbar_title</item>
</style>

add these below lines in your styles.xml or theme.xml in values and values-v21 folder aswell
<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/my_primary_color</item>
<item name="colorPrimaryDark">#color/my_primary_dark_color</item>
<item name="colorAccent">#color/accent</item>
<item name="android:titleTextStyle">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/holo_blue_dark</item>
<item name="android:actionMenuTextColor">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
</style>

Android Support Toolbar Styling

I am trying to implement a Light Theme of AppCompat with a dark toolbar (action bar), however when adding the toolbar dynamically or using <include /> the text fails to display in the correct color (black instead of white). The default action bar is styled correctly, but when I add the toolbar it is not.
Here is my code:
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"
app:theme="#style/AppTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:navigationContentDescription="#string/abc_action_bar_up_description"
android:background="?attr/colorPrimary"
app:navigationIcon="?attr/homeAsUpIndicator"
app:title="#string/action_settings"
/>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#ff299725</item>
<item name="colorPrimaryDark">#ff1d691b</item>
<item name="colorAccent">#ff5fb10b</item>
</style>
</resources>
However I get this in preview and live environment:
I have tried different versions of AppCompat (v.22.1, v.22.2, v.21.0.3) all replicate the issue, I have tried adding extra styles for textColor and all that happens is that it styles everything white.
Any help SO legends?

In your toolbar.xml, remove the app:theme attribute and use this instead:
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
Also, depending on how you're implementing toolbar, you may want to change your base theme (in styles.xml) to use the NoActionBar variant, like so:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

styles.xml
<style name="Toolbar" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#color/xxx</item>
<item name="android:background">#color/xxx</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="#style/Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/xxx</item>
<item name="gapBetweenBars">4dp</item>
</style>
my_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="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/Toolbar"
/>