Develop Reference

Hide toolbar layout lines

I have a UI design to create where the toolbar is immersed within the recyclerview.
I have created the design but the lines of the layout are still visible on device whereas it appears to be right in the emulator. How do I merge the layout line in recyclerview.
Below is a screenshot from emulator
and below is a screenshot from my device
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:background="#android:color/transparent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:elevation="0dp"
android:background="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_weight="100"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:layout_width="match_parent"
android:weightSum="100"
android:background="#android:color/transparent"
android:layout_height="match_parent">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="0dp"
android:gravity="center"
android:layout_weight="80"
android:layout_height="match_parent"
android:text="#string/app_name"
android:textColor="#android:color/black"
android:textSize="25sp"
android:textStyle="bold" />
<ImageView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="20"
android:layout_gravity="right"
android:src="#drawable/ic_add_black_24dp" />
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:background="#android:color/transparent"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

That line is a shadow, caused by the Toolbar's elevation. Elevation only happens automatically on devices running Lollipop or newer, and the layout preview often doesn't show shadows.
Try adding this attribute to your Toolbar's XML to remove the elevation (and therefore the shadow):
android:elevation="0dp"

The most concise answer and easiest way to remove hide ToolBar Layout line/divider adding this line in your style.xml file inside the AppTheme style or whatever theme style you declared for your activity:
<item name="android:showDividers">none</item>
then your should look something like this
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
...
<item name="android:showDividers">none</item>
<!-- This line is not compulsory -->
<item name="actionBarDivider">#android:color/transparent</item>
<!-- This line is not compulsory -->
...
</style>
I hope this helps. it worked for me tho
Result: here's a screenshot of a typical example:

fitSystemWindows with windowTranlucentStatus and windowTranslucentNavigation makes Toolbar too tall

I'm trying to make my app bleed under the status bar and the navigation bar. I got the layouts to work using fitSystemWindows = true with just the status bar translucent but when I make the navigation bar as well, the toolbar appears to react as if it needs to fill under the status bar and the notification bar.
The toolbar appears to function normally when in landscape for some reason.
This double "translucent" bar effect also makes the NestedScrollView extends beyond the bottom of the page. I am also not sure how to make the FAB fit.
On another note, I originally wrote the layout with a CoordinatorLayout. This added the extra problem that the NestedScrollView then scrolls up to the bottom of where the toolbar should be, not where it is. I think, however, that the NestedScrollView respected the bottom screen boundary properly with CoordinatorLayout.
Here's the xml for the layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraint"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/toolbar">
<LinearLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000"
android:clipToPadding="false"
android:orientation="vertical"
android:paddingBottom="74dp"/>
</android.support.v4.widget.NestedScrollView>
<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"
app:layout_constraintTop_toTopOf="parent"
android:background="#color/nav_color_1_bright"
android:elevation="4dp"
android:fitsSystemWindows="true"
app:navigationContentDescription="#string/open_nav_menu"
app:navigationIcon="#drawable/ic_dehaze_white_24dp"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_margin="16dp"
android:clipToPadding="false"
android:fitsSystemWindows="true"
android:onClick="createNew"
android:src="#drawable/ic_add_black_24dp"
app:backgroundTint="#color/darkAccent"
app:fabSize="normal" />
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:itemBackground="#drawable/nav_item">
<ListView
android:id="#+id/drawer_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#null"
android:dividerHeight="0dp"
android:fitsSystemWindows="true" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
I apply the following 'Light Theme' to the Activity programmatically.
<style name="AppTheme" parent="Theme.AppCompat.DayNight.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:windowTranslucentStatus">true</item>
<item name ="android:windowTranslucentNavigation">true</item>
</style>
<style name="LightTheme" parent="AppTheme">
<item name="android:colorPrimary">#color/lightPrimary</item>
<item name="android:colorPrimaryDark">#color/lightPrimaryDark</item>
<item name="android:colorAccent">#color/lightAccent</item>
<item name="android:navigationBarColor">#color/lightPrimaryDark</item>
<item name="actionOverflowButtonStyle">#style/OverflowMenuButtonStyleDark</item>
</style>
Here's a preview of the layout: (bigger version here)

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

Actionbar/toolbar background color is not changing at all xml

hello i have project that use multiple activity and xml one of this xml is navigation drawer it's easy to change backgournd color of actionbar/toolbar but when i change it on the other layout/xml background actionbar/tooolbar not change how to change all of them it's
Screenshot
screenshot
on this change
<?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:fitsSystemWindows="true"
tools:context="ir.diamonddesign.tajrobi96.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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:background="#android:color/holo_red_dark"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
on this not change
/*
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="ir.diamonddesign.tajrobi96.Questionsactivity"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15dp"
android:textAppe``arance="?android:attr/textAppearanceLarge"
android:text="#string/kharej_text"
android:id="#+id/textView2"
android:textDirection="rtl"
android:layout_alignTop="#+id/textView3"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/dakhel_text"
android:textSize="15dp"
android:id="#+id/textView3"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="false"
android:textDirection="rtl" />
</RelativeLayout>*/

Find the file named styles.xml in your res folder.
You should have defined a theme for your project which looks something like below code
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/text_description</item>
<item name="colorPrimaryDark">#color/black</item>
<item name="colorAccent">#color/theme_teal</item>
</style>
Here, colorPrimary defines the color of your actionBar. This color must have been set to blue acc to the screenshot.
Try changing the colorPrimary value to the desired color that you want.

Change style.xml:
<item name="colorPrimary">#color/colorPrimary</item>
to :
<item name="colorPrimary">#android:color/holo_red_dark</item>

Android Material CardView with full screen image on Cardview

i need to do this :
http://developer.android.com/design/material/images/card_travel.png
so i create and add the dependency to the project and here is my activity main code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/feed_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="6dp">
<ImageView
android:layout_width="100dp"
android:layout_height="50dp"
android:src="#drawable/ic"/>
<TextView
style="#style/TextAppearance.AppCompat.Caption"
android:textColor="#555"
android:layout_margin="3dp"
android:gravity="end"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Detail"/>
</android.support.v7.widget.CardView>
</LinearLayout>
so, how we can do this like below picture:?
http://i.stack.imgur.com/Z0lNa.png
Cheers!

What you're looking for is a translucent status bar. When you have this configured you're able achieve this effect. Make also sure to remove the actionbar as I do in my example down below, otherwise you'll have to make it transparent.
Change your v21/themes.xml file to this:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
Then add android:fitsSystemWindows="true" to your LinearLayout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/feed_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">