Develop Reference

Getting elevation bewteen Toolbar and Tablayout

I am trying to create a layout which includes toolbar and tablayout inside appbarlayout. It works fine but shows a line between toolbar and appbarlayout. I am setting toolbar background color dynamically like:
toolbar.setBackgroundColor(Color.parseColor("myColor"));
tabLayout.setBackgroundColor(Color.parseColor("myColor");
I have tried setting app:elevation="0dp" on Appbar and Toolbar but it doesn't work.
<androidx.coordinatorlayout.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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
style="#style/MyTabStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="scrollable" />
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
MyTabsStyle.xml:
<style name="MyTabStyle" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#color/colorWhite</item>
<item name="tabIndicatorHeight">2.5dp</item>
<item name="android:elevation">2dp</item>
<item name="tabIconTint">#color/colorWhite</item>
<item name="tabSelectedTextColor">#color/colorWhite</item>
<item name="tabTextColor">#color/white_trans</item>
</style>
Styles.xml:
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.MaterialComponents.Light" />

Try this
set elevation to 0dp in your MyTabsStyle.xml
MyTabsStyle.xml:
<style name="MyTabStyle" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#color/colorWhite</item>
<item name="tabIndicatorHeight">2.5dp</item>
<item name="android:elevation">0dp</item>
<item name="tabIconTint">#color/colorWhite</item>
<item name="tabSelectedTextColor">#color/colorWhite</item>
<item name="tabTextColor">#color/white_trans</item></style>

You can wrap Toolbar and TabLayout with AppBarLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
app:tabBackground="?attr/colorPrimary"
android:layout_height="wrap_content"/>
</com.google.android.material.appbar.AppBarLayout>
<LinearLayout/>
Hope it helps.

Here the modified code in below.
<androidx.coordinatorlayout.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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
style="#style/MyTabStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="scrollable" />
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Add app:elevation="0dp" in AppBarLayout to hide the shadow in toolbar.

In your mytheme.xml change update AppTheme.AppBarOverlay style as :
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar" >
<item name="elevation">0dp</item>
</style>
Done.

Try this
<androidx.appcompat.widget.Toolbar
android:id="#+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorAppBar"
android:elevation="0dp">

Navigationbar covers Vierpager content

I have a tab layout and each tab is represented my a fragment in the viewpager. Now I tried to attach a Toolbar to the bottom but the android navigation bar keeps overlapping it. Adding a margin is not a option because it looks very strange on devices without a navigation bar on the screen.
XML from main activity:
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<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:layout_height="?attr/actionBarSize"
android:layout_weight="1"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="#string/app_name">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:id="#+id/tabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fragment_map_title" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fragment_list_title" />
</android.support.design.widget.TabLayout>
</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.CoordinatorLayout>
XML from fragment:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/ballon_info_bar" />
<android.support.v7.widget.Toolbar
android:background="#2a3b4c"
android:id="#+id/ballon_info_bar"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp">
</android.support.v7.widget.Toolbar>
</RelativeLayout>
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>
<item name="android:windowTranslucentNavigation">true</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
I found several other posts about this topic but none of them solved my problem.
EDIT1: The margin in the image is just for visualization.
EDIT2: According to the blueprint, the ViewPager is alredy behind the navigationbar

The solution is:
Setting android:fitsSystemWindows to false and setting android:windowTranslucentNavigation to false in style.xml

Toolbar Title Uppercase

Trying to uppercase the title of a toolbar:
Toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/App.Theme.ToolbarTitleUppercase"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:titleTextAppearance="#style/App.Theme.ToolbarTitleUppercase" />
Toolbar style
<style name="App.Theme.ToolbarTitleUppercase" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textAllCaps">true</item>
</style>
This is not having any effect on the title text. Any ideas?

This is with support library 27.1.1 set app:theme
<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:theme="#style/ToolbarTextAppearance"
/>
Then in ToolbarTextAppearance in styles.xml
<style name="ToolbarTextAppearance">
<item name="textAllCaps">true</item>
<item name="android:textAllCaps">true</item>
</style>

Based on Tim's answer, here's another way to do it:
styles.xml
<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<!--<item name="android:textSize">18sp</item>-->
<item name="textAllCaps">true</item>
<item name="android:textAllCaps">true</item>
</style>
toolbar.xml
<android.support.v7.widget.Toolbar
...
app:titleTextAppearance="#style/Toolbar.TitleText"/>

You can create a toolbar.xml on layout folder:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/AppTheme.PopupOverlay"
tools:showIn="#layout/activity_layout">
<TextView
android:id="#+id/my_title"
android:text="Title text"
android:textAllCaps="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
Include it on the xml you want to use the toolbar:
<include layout="#layout/toolbar"/>
And then inside your view:
getActivity().findViewById(R.id.toolbar);
getActivity().getSupportActionBar().setDisplayShowTitleEnabled(false);
Hope it helps!

Use Material Toolbar like this:
put app:titleCentered="true" to make your text in the center
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:background="#color/main_color"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleCentered="true"
app:titleTextAppearance="#style/Toolbar.TitleText" />

Elevation / shadow not working on my app

I'm creating an android app for our capstone project. I'm using API 23. I add elevation on my toolbars and other components yet the shadows aren't appearing. Is my theme ruining it?
<!-- Base application theme. -->
<style name="ThesisTheme" parent="Theme.AppCompat.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:colorButtonNormal">#color/colorButton</item>
<item name="android:textColorPrimary">#color/textColorPrimary</item>
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
<item name="android:navigationBarColor">#color/colorPrimary</item>
<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">#color/colorAccent</item>
<item name="colorControlHighlight">#color/colorPrimaryDark</item>
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<!--Datepicker-->
<item name="android:datePickerDialogTheme">#style/MyDatePickerDialogTheme</item>
</style>
when i try to include the toolbar then run the program to my phone/ emulator the shadow wont display. even with cardview
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_login"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="capstoreit.capstoreit.Login.Login"
android:background="#drawable/login_bg">
<!--Layout for Login and Signup-->
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:elevation="10dp"
android:layout_height="wrap_content">
<!--Toolbar-->
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/login_toolbar"
android:layout_width="match_parent"
android:elevation="10dp"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/new_logo"
android:adjustViewBounds="true"
android:padding="5dp"
android:id="#+id/app_logo" />
</android.support.v7.widget.Toolbar>
<!--Tab-->
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
android:elevation="10dp"
android:background="#color/textColorPrimary"
app:tabSelectedTextColor="#color/colorAccent"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_alignParentStart="true"
>
</android.support.v4.view.ViewPager>
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.2"
/>
</LinearLayout>
</RelativeLayout>
Screenshot:
After changing to app:elevation

I was able to fix my erro by removing this on my Android Manifest:
android:hardwareAccelerated="false"

use this if you are using support library for older versions too
app:elevation
use this if you are not using support library
android:elevation

Content hides under appbar layout

In my app contet is hidden under appbarlayout. I don't expect that behaviour!
Android 23 PREVIEW
ANDROID 21 - test on DEVICE
ANDROID 21 - test on DEVICE content hidden under toolbar
Altough my content scroll down as expect, when it goes up content is hidden under toolbar. I uploaded also android 23 preview because there is visible that actually toolbar is align Top behind status bar. Working on device content go up where is should be moved if the preview was correct. But toolbar view is under status bar not behind. I dont know where is the problem.
Style
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
</style>
<style name="AppTheme.NoStatusBar" parent="AppTheme.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
UPDATED
ok I found the solution. It was so dump. Just my scrollView was scrolled down due to its last child which was gaining focus - recycler view.
No I set on cardView focusableInTouchMode="true" and the last element on false
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fitsSystemWindows="true"
android:fillViewport="true">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="4dp"
android:layout_margin="4dp"
app:contentPaddingTop="24dp"
android:focusableInTouchMode="true"/>
...
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view_overbid_history"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="200dp"
android:focusable="false"
android:focusableInTouchMode="false"/>
android.support.v4.widget.NestedScrollView>

I'm sharing part of my code with you, it's working for me in my app:
<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.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="240dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleMarginBottom="140dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.75">
<ImageView
android:id="#+id/store_detail_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
...
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
v21/styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#color/...</item>
<item name="windowActionModeOverlay">true</item>
...
</style>