Develop Reference

Round Corner is not working in Material Button

I have button like this in my login activity layout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:weightSum="2">
<com.google.android.material.button.MaterialButton
android:id="#+id/button_login_activity"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:text="Login"
app:cornerRadius="20dp"
android:background="#color/colorPrimaryDark"
android:textColor="#color/toolbar_text"
android:textStyle="bold" />
<com.google.android.material.button.MaterialButton
android:id="#+id/button_skip_login_activity"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginStart="10dp"
android:layout_weight="1"
app:cornerRadius="20dp"
android:background="#color/colorPrimaryDark"
android:textColor="#color/toolbar_text"
android:text="Skip"
android:textStyle="bold"
android:layout_marginLeft="10dp" />
</LinearLayout>
My Style is like this
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!--Common Color-->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:alertDialogTheme">#style/AlertDialogTheme</item>
<item name="windowActionBar">true</item>
<item name="windowNoTitle">true</item>
<item name="colorSwitchThumbNormal">#color/switch_normal</item>
<item name="colorControlNormal">#color/switch_normal</item>
<item name="android:textColorSecondary">#color/switch_normal</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:windowDisablePreview">true</item>
</style>
I have dependency like below
implementation 'com.google.android.material:material:1.2.1'
I have tried many things but unable to make it working for round corner, same thing is working for my another project. Let me know if anyone can help me for come out from the issue.
Thanks!

You have to remove the background:
android:background="#color/colorPrimaryDark"
Using it the MaterialButton doesn't use its own MaterialShapeDrawable for the background. This means that features like shape appearance, stroke and rounded corners are ignored.
In your case use the app:backgroundTint attribute:
<com.google.android.material.button.MaterialButton
app:backgroundTint="#color/colorPrimaryDark"

Android MaterialButton style not changing

I am trying to style the material buttons using the new styles offered by the implementation 'com.google.android.material:material:1.0.0'
library. The issue is that the buttons are not styling properly. For example, I have 2 different activities using the exact same theme, with the exact same code for the button but on refuses to use the right style, on the Android preview screen it looks right but in the actual app its not.
Also, I am manually overriding the style of a group of buttons by setting style="myButtonStyleWhatever" but that just gets ignored as well. This is getting very frustrating so I would love if someone could help.
Styles-v11
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyMaterialTheme.Base" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimaryDark</item>
</style>
<style name="ToolBarStyle" parent="Theme.AppCompat">
<item name="colorPrimary">#364c70</item>
<item name="actionMenuTextColor">#android:color/white</item>
</style>
<style name="WhiteButtons" parent="Widget.MaterialComponents.Button">
<item name="android:background">#ffff</item>
<item name="android:textColor">#000</item>
</style>
</resources>
Styles-v21
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyMaterialTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">#android:transition/move</item>
<item name="android:windowSharedElementExitTransition">#android:transition/move</item>
</style>
<style name="MyMaterialTheme.Base" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimaryDark</item>
</style>
</resources>
Styles
<resources>
<style name="MyMaterialTheme.Base" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimaryDark</item>
</style>
<style name="ToolBarStyle" parent="Theme.AppCompat">
<item name="colorPrimary">#364c70</item>
<item name="actionMenuTextColor">#android:color/white</item>
</style>
<style name="WhiteButtons" parent="Widget.MaterialComponents.Button">
<item name="android:background">#ffff</item>
<item name="android:textColor">#000</item>
</style>
</resources>
Code used for the button
<com.google.android.material.button.MaterialButton
android:id="#+id/get_suggestions"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="#dimen/_65sdp"
android:layout_height="wrap_content"
android:layout_marginStart="163dp"
android:layout_marginTop="83dp"
android:layout_marginEnd="163dp"
android:layout_marginBottom="219dp"
android:text="SEARCH"
android:textSize="#dimen/_9sdp"
app:cornerRadius="100dp" />
Not meant to look like that
<!-- MAIN CONTENT -->
<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:sothree="http://schemas.android.com/apk/res-auto"
xmlns:mapbox="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/xmlns:app="
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:windowSoftInputMode="adjustNothing"
sothree:umanoPanelHeight="68dp"
sothree:umanoShadowHeight="4dp"
sothree:umanoParallaxOffset="100dp"
sothree:umanoDragView="#+id/dragger"
sothree:umanoOverlay="true"
sothree:umanoScrollableView="#+id/dragView">
<androidx.drawerlayout.widget.DrawerLayout
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer"
android:focusableInTouchMode="true"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:id="#+id/parent"
android:layout_height="match_parent">
<com.mancj.materialsearchbar.MaterialSearchBar
android:id="#+id/search"
android:layout_width="#dimen/_233sdp"
android:layout_height="#dimen/_58sdp"
android:layout_marginStart="8dp"
android:layout_marginTop="5dp"
android:elevation="100dp"
android:imeOptions="actionSearch"
sothree:layout_constraintStart_toStartOf="parent"
sothree:layout_constraintTop_toTopOf="parent"
tools:ignore="UnusedAttribute" />
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:id="#+id/get_suggestions"
android:layout_width="#dimen/_65sdp"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginTop="10dp"
app:cornerRadius="100dp"
android:text="SEARCH"
android:textSize="#dimen/_9sdp"
sothree:layout_constraintEnd_toEndOf="parent"
sothree:layout_constraintTop_toTopOf="parent" />
<com.mapbox.mapboxsdk.maps.MapView
android:id="#+id/mapview"
android:layout_width="match_parent"
android:layout_height="match_parent"
mapbox:mapbox_cameraTargetLat="46.885"
mapbox:mapbox_cameraTargetLng="24.679"
mapbox:mapbox_cameraTilt="20"
mapbox:mapbox_cameraZoom="4"
mapbox:mapbox_styleUrl="mapbox://styles/sudafly/cjm89d4011nu02smk5a7e0d8h"
sothree:layout_constraintBottom_toBottomOf="parent"
sothree:layout_constraintEnd_toEndOf="parent"
sothree:layout_constraintStart_toStartOf="parent"
sothree:layout_constraintTop_toTopOf="parent">
</com.mapbox.mapboxsdk.maps.MapView>
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/nav_menu"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"
app:menu="#menu/navigation_menu"
/>
</androidx.drawerlayout.widget.DrawerLayout>
<!-- SLIDING LAYOUT -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/dragView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:clickable="true"
android:focusable="false"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="68dp"
android:background="#2a2e41"
android:id="#+id/dragger"
android:orientation="horizontal">
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="#string/search_for_airports"
android:textColor="#d2d4e0"
android:textSize="20dp" />
</LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
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:id="#+id/drag"
android:background="#eceff1">
<LinearLayout
android:id="#+id/Lin"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eceff1"
android:elevation="#dimen/_20sdp"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.google.android.material.tabs.TabLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="0dp">
<include layout="#layout/charts_v2" />
<include layout="#layout/content_main" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.AppBarLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

The styles you've posted don't make a ton of sense.
You are showing ToolBarStyle and WhiteButtons styles but you're not using them anywhere.
You have MyMaterialTheme (as opposed to MyMaterialTheme.Base) in one of the files; I hope you aren't expecting this to be automatically inherited from by MyMaterialTheme.Base, since specifying a parent overrides the dot-notation inheritance.
All three files have the same contents for MyMaterialTheme.Base; why bother specifying it in three places?
Additionally, none of the styles you've posted seem like they would affect MaterialButton widgets (except for colorPrimary). So it's hard to know exactly where your problem lies.
All that said, the list of attributes supported by MaterialButton is available in the GitHub documentation. Notably, android:background is not supported by MaterialButton. From the JavaDoc:
Do not use the android:background attribute. MaterialButton manages its own background drawable, and setting a new background means MaterialButton can no longer guarantee that the new attributes it introduces will function properly. If the default background is changed, MaterialButton cannot guarantee well-defined behavior.
I suspect that what you're seeing is a combination of different colorPrimary definitions on the two screens and the fact that android:background is not supported.
If you want to manually override the button's background color, use the app:backgroundTint attribute on your <MaterialButton> tag. If you want to specify that in a <style> tag, it doesn't use a namespace:
<item name="backgroundTint">#color/your_background_color</item>

Cardview in recyclerview showing grey and brown colors - android

I've been stuck with the follow issue. I have a 'normal' card view with is showing up in funny different grey colours. I don't know why.
It looks like this:
Why isn't it the normal white?
Here is the xml for the item_row
<?xml version="1.0" encoding="utf-8"?>
<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.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardCornerRadius="5dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp">
<TextView
android:id="#+id/textViewItemName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/checkBox"
android:layout_toStartOf="#+id/checkBox"
android:textColor="#000"
android:layout_centerVertical="true"
android:text="TextView" />
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Here is the layout_content for the activity:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/content_choose"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.apps.reuven.choosepicture.ChoosePicturesToDisplayActivity"
tools:showIn="#layout/activity_choose_to_display">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewToDisplay"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
The theme in the manifest
android:theme="#style/AppTheme">
Which is...
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>

Change your Theme to this:
<style name="AppTheme" 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>
</style>

You are using a Dark theme Theme.AppCompat.NoActionBar that's why your view background colors are showing darker.
Try using a Light theme Theme.AppCompat.Light.NoActionBar.
<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>

If you don't want to change the theme for in case you need white toolbar icons (Back arrow, title color, overflow menu icon), you can change this behavior in your theme.
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="cardViewStyle">#style/CardView.Light</item>
</style>

Android Layout not display properly

I post my code below ,in the following layout there is a space from the top displayed in the layout. I just want to remove the top space and trying to show title at the top. But i am confused how to set it. please suggest me solution.Thanks in advance.
XML File
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:orientation="vertical"
android:weightSum="100">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/folder_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="30dip"
android:textSize="15dp"
android:layout_weight="1"
android:textColor="#115c28"/>
<TextView
android:id="#+id/folder_count"
android:layout_width="0dp"
android:layout_height="60dp"
android:textSize="20dp"
android:textStyle="bold"
android:textColor="#115c28"
android:gravity="center"
android:paddingRight="30dip"
android:paddingLeft="35dip"
android:layout_weight="1" />
</LinearLayout>
<ListView
android:id="#+id/folder_display_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>

if you are just asking about the two text alignment on top without space than below code will work for you
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="horizontal" >
<TextView
android:id="#+id/folder_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="20sp"
android:layout_weight="1"
android:gravity="top|center"
android:textColor="#115c28"/>
<TextView
android:id="#+id/folder_count"
android:layout_width="0dp"
android:layout_height="60dp"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#115c28"
android:gravity="top|center"
android:layout_weight="1" />
</LinearLayout>
<ListView
android:id="#+id/folder_display_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>

Please check the margin values from your style.xml file inside the values directory.
It might be occupies with your Theme params.

xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!--
Base application theme, dependent on API level. This theme is replaced
by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="android:Theme.Light">
<!--
Theme customizations available in newer API levels can go in
res/values-vXX/styles.xml, while customizations related to
backward-compatibility can go here.
-->
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
<!--THIS ONE FOR THE CHANGE THE COLOR OF THE APPBAR STARTS -->
<style name="MyTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#CECFCE</item>
<item name="android:textAlignment">center</item>
</style>
<!--THIS ONE FOR THE CHANGE THE COLOR OF THE APPBAR STARTS -->
<!-- Theme : Green-->
<style name="ThemeSelector" parent="android:Theme.Light">
<item name="android:windowTitleStyle">#style/headerTextStyle</item>
<item name="android:windowBackground">#color/white</item>
<item name="android:windowTitleSize">20dip</item>
<item name="android:windowTitleBackgroundStyle">#style/WindowTitleBackground</item>
</style>
<style name="headerTextStyle" >
<item name="android:textSize">10sp</item>
<item name="android:textColor">#color/black</item>
<item name="android:paddingLeft">10sp</item>
</style>
<style name="WindowTitleBackground">
<item name="android:background">#color/light_grey</item>
</style>
<style name="myOptionMenu">
<item name="android:background">#color/white</item>
<item name="android:textColor">#color/black</item>
</style>
<!-- color -->
<color name="green">#05781e</color>
<color name="white">#ffffff</color>
<color name="black">#000000</color>
<color name="red">#f71350</color>
<color name="grey">#666666</color>
<color name="light_grey">#bfbfbf</color>
<!-- end -->
</resources>

Android status bar is the same color as Toolbar

I am running an android project. My toolbar and status bar are all green in my activity_main layout. If i change toolbar color to other color the status bar will change to the new one too.
I have an activity with activity_hotel_detail.xml layout. The status bar and toolbar colors are different color which is i need.
Why does the same configuration for Toolbar makes the status bar color are different?
How can i make my main_activity layout is the same one as my activity_hotel_detail layout?
I am new on android, any help thanks!
activity_main.xml
<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:fitsSystemWindows="true"
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=".ViewController.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
style="#style/ThemeOverlay.AppCompat.Dark"/>
</RelativeLayout>
activity_hotel_detail.xml
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/Blue"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
style="#style/ThemeOverlay.AppCompat.Light"/>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:fillViewport="true"
android:background="#color/cell">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#color/white"
android:padding="0dp"
android:stretchColumns="1">
<com.facebook.drawee.view.SimpleDraweeView
android:layout_width="match_parent"
android:layout_height="200dp"
android:contentDescription="#string/img_description"
fresco:placeholderImage="#drawable/test_image"
fresco:actualImageScaleType="fitStart"
android:id="#+id/hotel_image_view" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/hotel_name"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:text="New Text New Text New Text New TextNew TextNew TextNew TextNew TextNew TextNew TextNew TextNew TextNew TextNew Text"
android:id="#+id/hotel_description"/>
<fragment
class="com.example.william.willhotel.ViewController.HotelDetailFragment"
android:layout_width="match_parent"
android:layout_height="30dp"
android:id="#+id/fragement">
</fragment>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="back"
android:background="#color/BlueViolet"
android:id="#+id/back_button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="next"
android:background="#color/DarkRed"
android:id="#+id/next_button" />
</LinearLayout>
</ScrollView>
EDIT: styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/DarkRed</item>
<item name="colorPrimaryDark">#color/IndianRed</item>
<item name="colorAccent">#color/yellow</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" />
<style name="AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
styles.xml(v21)
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
EDIT2 replace 'transparent1 by #color/IndianRed in styles.xml(v21) didn't work.
<resources>
<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/IndianRed</item>
</style>
</resources>
EDIT
my activity extend from AppCompatActivity, i see the source code only sdk version larger than 23 can get the system theme.
public class MainActivity extends AppCompatActivity
So if i run under sdk 23, the status bar appears correct as expect.
if (delegate.applyDayNight() && mThemeId != 0) {
// If DayNight has been applied, we need to re-apply the theme for
// the changes to take effect. On API 23+, we should bypass
// setTheme(), which will no-op if the theme ID is identical to the
// current theme ID.
if (Build.VERSION.SDK_INT >= 23) {
onApplyThemeResource(getTheme(), mThemeId, false);
} else {
setTheme(mThemeId);
}
}

Use following code in your activity's onCreate() method
if (Build.VERSION.SDK_INT >= 21) {
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getWindow().setStatusBarColor(ContextCompat.getColor(this, R.color.primary_dark));
}
Where primary_dark color is your toolbar's color

Add this in your values-v21/styles.xml.
<item name="android:statusBarColor">#color/IndianRed</item>
Your theme should Look like this remove Transparent.
<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/IndianRed</item>
</style>

This may help you.
<resources>
<!-- inherit from the material theme -->
<style name="AppTheme" parent="android:Theme.Material">
<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="android:colorPrimary">#color/primary</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="android:colorAccent">#color/accent</item>
Reference: https://developer.android.com/training/material/theme.html#StatusBar
Note: as per the google doc"the toolbar uses the 500 version of indigo, while the status bar uses the 700 version." Doc Link: https://www.google.com/design/spec/style/color.html#color-color-schemes

<item name="android:windowBackground">#color/cardview_dark_background</item>
<item name="android:statusBarColor">#color/cardview_dark_background</item>
it works for me if you have multiple theme