Shadow effect (elevation) is hiding after app was launched - java

I have a problem with elevation effect in my app (shadow under TabLayout exactly) that is collapsing after I'm running my App. It's visible in preview mode but not on my device cause it's hiding. This is my code:
Main Activity
<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:background="#android:color/white"
android:clipToPadding="false">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_material_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" >
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_portrait"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />`
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
android:elevation="20dp"
app:tabTextAppearance="#style/MineCustomTabText"
/>
</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.support.design.widget.CoordinatorLayout>
Here is code of styles.xml
<resources>
<style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
</style>
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<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/colorAccent</item>
<item name="colorControlNormal">#color/editTextIndigo</item>
<item name="colorControlActivated">#color/editTextPink</item>
</style>
<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">16sp</item>
<item name="android:textAllCaps">true</item>
</style>
<style name="MineCustomTabText" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
<item name="android:textSize">13sp</item>
<item name="android:textAllCaps">true</item>
<item name="android:textColor">#android:color/white</item>
</style>
styles-v21.xml
<resources>
<style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
<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>
And here is my screen while running app:
via GIPHY
I want to achieve simple shadow effectt that is not hiding under tablayout to seperate from the rest of the content. I'm testing it on my phone with android 6.0.1

I've found a solution to my problem. I have created Relative layout with view inside that imitates shadow. Adding this line of code after TabLayout and before end of AppBarLayout solved everything.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="#id/tabs"
app:layout_anchorGravity="bottom"
android:background="#android:color/white">
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_alignParentBottom="true"
android:background="#drawable/tablayout_shadow"
/>
</RelativeLayout>
And here is full code of main_activity.xml
<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:background="#android:color/white"
android:clipToPadding="false">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_material_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" >
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_portrait"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
android:elevation="20dp"
app:tabTextAppearance="#style/MineCustomTabText"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="#id/tabs"
app:layout_anchorGravity="bottom"
android:background="#android:color/white">
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_alignParentBottom="true"
android:background="#drawable/toolbar_shadow"
/>
</RelativeLayout>
</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"
/>
tablayout_shadow.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:startColor="#android:color/transparent"
android:endColor="#88333333"
android:angle="90"/>
Finally after 2 days of brainstorming i solved it:D. I hope this will help someone in future.

Related

set Label Alignment in navigation Fragments

I want the label(toolbar title) to be aligned centered.What should I do? I have reffered to some logics and didn't find them effective and they also didn't work. So kindly guide me through it.
This is the Navigation File:
<?xml version="1.0" encoding="utf-8"?>
<navigation 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/mobile_navigation"
app:startDestination="#id/current_weather_fragment">
<fragment
android:id="#+id/current_weather_fragment"
android:name="com.example.wheatherapp.UI.Weather.CurrentWeather.CurrentWeatherFragment"
android:label="current_weather_fragment"
tools:layout="#layout/current_weather_fragment" />
<fragment
android:id="#+id/future_weather_fragment"
android:name="com.example.wheatherapp.UI.Weather.FutureWeather.FutureWeatherListFrag.FutureWeatherFragment"
android:label="future_weather_fragment"
tools:layout="#layout/future_weather_fragment" />
<fragment
android:id="#+id/future_detail_weather"
android:name="com.example.wheatherapp.UI.Weather.FutureWeather.FutureDetailFrag.FutureDetailWeather"
android:label="future_detail_weather_fragment"
tools:layout="#layout/future_detail_weather_fragment" />
<fragment
android:id="#+id/setting_fragment"
android:name="com.example.wheatherapp.UI.Setting.SettingFragment"
android:label="SettingFragment" />
</navigation>
This is the MainActvity.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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=".UI.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:theme="#style/ToolbarTheme">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="?colorPrimary"
/>
</com.google.android.material.appbar.AppBarLayout>
<androidx.fragment.app.FragmentContainerView
android:id="#+id/nav_host_frag"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/appbar_layout"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/bottom_nav"
app:navGraph="#navigation/mobile_navigation"
app:defaultNavHost="true"
android:name="androidx.navigation.fragment.NavHostFragment" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/bottom_nav_menu"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
This is the image in which i want the title to be aligned centered:
the uploaded one
Style.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.WheatherApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_200</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/black</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_200</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="ToolbarTheme" parent="ThemeOverlay.MaterialComponents.ActionBar">
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#EEEEEE</item>
<item name="android:gravity">center_vertical|center_horizontal</item>
<item name="background">?colorPrimary</item>
</style>
</resources>
1) Add Textview for your toolbar title into your tag which is located in MainActivity.xml in your case.
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:theme="#style/ToolbarTheme">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="?colorPrimary">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Borrowers"
android:textColor="#color/white"
android:textSize="18dp" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
2) Add toolbar to your MainActivity.java in onCreate() method.
//set toolbar
Toolbar toolbar = findViewById(R.id.borrowerstoolbar_main);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle(null);

Status bar overlapping with activity

Problem
Status bar overlapping with Toolbar. I have tried to setting various attributes but it isn't working out. So now suggest me what to do with this issue and what is causing this issue.
One more thing to note is that I've used transparent status bar attribute in one other activity.
activity_symptom.xml
<?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="com.example.nishantsikri.microdoctor.SymptomActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
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="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_symptom" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
content_symptom.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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/button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.nishantsikri.microdoctor.SymptomActivity"
tools:showIn="#layout/activity_symptom">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/symptom1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Symptom 1" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:spinnerMode="dialog"
android:layout_gravity="start|center_vertical"
android:ellipsize="marquee"
android:gravity="center_vertical"
android:minHeight="48dp"
android:paddingBottom="12dp"
android:paddingLeft="24dp"
android:paddingRight="24dp"
android:paddingStart="24dp"
android:paddingTop="12dp"/>
<TextView
android:id="#+id/symptom2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Symptom 2" />
<Spinner
android:id="#+id/spinner2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start|center_vertical"
android:spinnerMode="dialog"
android:ellipsize="marquee"
android:gravity="center_vertical"
android:minHeight="48dp"
android:paddingBottom="12dp"
android:paddingLeft="24dp"
android:paddingRight="24dp"
android:paddingStart="24dp"
android:paddingTop="12dp"/>
<TextView
android:id="#+id/symptom3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Symptom 3" />
<Spinner
android:id="#+id/spinner3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start|center_vertical"
android:spinnerMode="dialog"
android:ellipsize="marquee"
android:gravity="center_vertical"
android:minHeight="48dp"
android:paddingBottom="12dp"
android:paddingLeft="24dp"
android:paddingRight="24dp"
android:paddingStart="24dp"
android:paddingTop="12dp"/>
<Button
android:id="#+id/button8"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"
tools:layout_editor_absoluteX="70dp"
tools:layout_editor_absoluteY="16dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView"
tools:layout_editor_absoluteX="127dp"
tools:layout_editor_absoluteY="170dp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
styles.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- 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:windowTranslucentStatus" tools:targetApi="19">true</item>
<item name="android:windowDrawsSystemBarBackgrounds" tools:targetApi="21">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" />
<style name="AppTheme.Button" parent="Widget.AppCompat.Button.Colored">
<item name="colorControlHighlight">#color/indigo</item>
<item name="colorButtonNormal">#color/pink</item>
<item name="android:textColor">#color/White</item>
<item name="android:padding">20dp</item>
</style>
//Styles for Trending Topics Content Header Text
<style name="TextAppearance.Design.CollapsingToolbar.Expanded.Shadow">
<item name="android:shadowDy">0</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowRadius">8</item>
<item name="android:shadowColor">#android:color/black</item>
</style>
<style name="AppThemeNavigation" 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:textColorPrimary">#android:color/white</item>
<item name="android:windowTranslucentStatus" tools:targetApi="19">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="windowActionBar">false</item>
<item name="android:windowDrawsSystemBarBackgrounds" tools:targetApi="21">true</item>
</style>
</resources>

Scroll to EditText in NestedScrollView is not working

I have long scroll form, and I need to scroll to its position on form is not valid input (for example, scroll to email edit text when it's not valid email or empty field)
I am facing 2 issues with scroll to EditText inside NestedScrollView
When one edit text is focused, all times scroll to take me directly to the focused scroll view, not to provided view coordinate
When there is no focused item, it's scrolling in a bad way, the wanted Edittext showing trimmed from the button
Note: I am using NestedScrollView with CoordinateLayout
Below is the layout
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/full_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f5f6f5">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:layout_marginEnd="9dp"
android:layout_marginStart="9dp"
android:layout_marginTop="25dp"
android:text="#string/personal_details"
android:textColor="#a1143c"
android:textSize="14sp" />
<RelativeLayout
android:id="#+id/step1.rel.full_name"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/step.1.title.full_name"
style="#style/business_form_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/firstName" />
<EditText
android:id="#+id/step.1.feild.full_name"
style="#style/business_form_field"
android:layout_width="match_parent"
android:layout_height="34dp"
android:layout_below="#+id/step.1.title.full_name"
android:inputType="textPersonName" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/step1.rel.last_name"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/step.1.title.last_name"
style="#style/business_form_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/last_name" />
<EditText
android:id="#+id/step.1.feild.last_name"
style="#style/business_form_field"
android:layout_width="match_parent"
android:layout_height="34dp"
android:layout_below="#+id/step.1.title.last_name"
android:inputType="textPersonName" />
</RelativeLayout>
<!--Rest Of Views-->
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
here is the style
<style name="business_form_field">
<item name="android:background">#drawable/roundedallsideswhite</item>
<item name="android:layout_marginStart">9dp</item>
<item name="android:layout_marginEnd">9dp</item>
<item name="android:textColor">#383838</item>
<item name="android:textSize">14sp</item>
<item name="android:gravity">start|center_vertical</item>
<item name="android:imeOptions">actionNext</item>
<item name="android:singleLine">true</item>
<item name="android:inputType">textAutoComplete</item>
<item name="android:paddingStart">15dp</item>
<item name="android:paddingEnd">15dp</item>
<item name="android:lines">1</item>
<item name="android:maxLines">1</item>
<item name="android:layout_marginTop">10dp</item>
</style>

Android pre Lollipop toolbar don't work

I have a drawer menu in devices post LOLIPOP work fine in change colors on title and icon navigation but in devices PRE LOLLIPOP don't work and only display white bar but dont show icon
my toolbar
<FrameLayout 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=".Users.MenuDrawer">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<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="#color/WHITE"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:theme="#style/CustomToolbar" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
and my styles
<style name="CustomToolbar" parent="AppTheme">
<item name="android:textColorSecondary">#color/BLACK</item>
<item name="colorPrimary">#color/BLACK</item>
<item name="actionMenuTextColor">#color/BLACK</item>
<item name="android:textColor">#color/BLACK</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.ActionBar" >
<item name="android:textColorSecondary">#color/BLACK</item>
<item name="colorPrimary">#color/BLACK</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
My error is in used frame layouts in z index position to mi toolbar in pre lolipop dont work i added this change and work fine
<FrameLayout 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=".Users.MenuDrawer">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<include layout="#layout/content_main" />
<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="#color/WHITE"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:theme="#style/CustomToolbar" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>

Status bar turns white when using custom Toolbar

I'm using NavigationView with a Toolbar. Status bar's background is white. If you have any questions just comment it before downvoting I'll look at them asap.
activity_main.xml
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#+id/flContent"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer/>
</android.support.v4.widget.DrawerLayout>
app_bar_main.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_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.support.v7.widget.Toolbar>
styles.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>
<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" />
colors.xml
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
</resources>
You must add this attribute android:fitsSystemWindows="true" in parent (DrawerLayout). To fix the white status bar while using it.
To know more about it refer this link Why would I want to fitsSystemWindows?
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/tool_bar" />
<FrameLayout
android:id="#+id/Holder"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_header"
app:itemTextColor="#color/primary_dark"
app:menu="#menu/my_navigation_items" />

Categories