ScrollView doesn't work with ConstraintLayout inside Fragment - android

I have a ScrollView and a ConstraintLayout with some views inside, but it is not scrolling. I saw in other related questions some advice to add:
android:fillViewport="true"
to the layout and I ever tried with NestedScrollView and change the position of ScrollView, but nothing helps.
My fragment layout is:
<ScrollView
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:fillViewport="true"
>
<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/layout_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:paddingEnd="?attr/listPreferredItemPaddingRight"
android:paddingStart="?attr/listPreferredItemPaddingLeft"
android:paddingTop="?attr/listPreferredItemPaddingLeft"
>
<TextView
android:id="#+id/lbl_style"
style="#style/HeadSection"
android:text="#string/label_style"
app:layout_constraintStart_toStartOf="#+id/guideline_label_margins"
app:layout_constraintTop_toBottomOf="#+id/txt_beer_description"/>
<TextView
android:id="#+id/lbl_short_style"
style="#style/Label"
android:text="#string/label_short_style"
app:layout_constraintStart_toStartOf="#+id/guideline_label_margins"
app:layout_constraintTop_toBottomOf="#+id/lbl_style_name"/>
<TextView
android:id="#+id/txt_short_style"
style="#style/Content"
app:layout_constraintStart_toStartOf="#+id/guideline_content_margins"
app:layout_constraintTop_toBottomOf="#+id/txt_style_name"
tools:text="American Dark Lager"/>
<TextView
android:id="#+id/lbl_style_name"
style="#style/Label"
android:text="#string/label_style_name"
app:layout_constraintStart_toStartOf="#+id/guideline_label_margins"
app:layout_constraintTop_toBottomOf="#+id/lbl_style"/>
<TextView
android:id="#+id/txt_style_name"
style="#style/Content"
app:layout_constraintStart_toStartOf="#+id/guideline_content_margins"
app:layout_constraintTop_toBottomOf="#+id/lbl_style"
tools:text="American-Style Dark Lager"/>
<TextView
android:id="#+id/lbl_style_category_name"
style="#style/Label"
android:layout_height="19dp"
android:text="#string/label_style_category_name"
app:layout_constraintStart_toStartOf="#+id/guideline_label_margins"
app:layout_constraintTop_toBottomOf="#+id/lbl_short_style"/>
<TextView
android:id="#+id/txt_style_category_name"
style="#style/Content"
app:layout_constraintStart_toStartOf="#+id/guideline_content_margins"
app:layout_constraintTop_toBottomOf="#+id/txt_short_style"
tools:text="North American Lager"/>
<TextView
android:id="#+id/lbl_beer"
style="#style/HeadSection"
android:layout_marginLeft="16dp"
android:layout_marginTop="4dp"
android:text="#string/label_detail_head_beer_info"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/lbl_beer_name"
style="#style/Label"
android:text="#string/label_detail_beer_name"
app:layout_constraintStart_toStartOf="#+id/guideline_label_margins"
app:layout_constraintTop_toBottomOf="#+id/lbl_beer"/>
<TextView
android:id="#+id/txt_beer_name"
style="#style/Content"
app:layout_constraintStart_toStartOf="#+id/guideline_content_margins"
app:layout_constraintTop_toBottomOf="#+id/lbl_beer"
tools:text="Heineken"/>
<TextView
android:id="#+id/lbl_beer_Description"
style="#style/Label"
android:text="#string/label_detail_beer_description"
app:layout_constraintStart_toStartOf="#+id/guideline_label_margins"
app:layout_constraintTop_toBottomOf="#+id/lbl_beer_name"/>
<TextView
android:id="#+id/txt_beer_description"
style="#style/Content"
android:layout_width="0dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline_content_margins"
app:layout_constraintTop_toBottomOf="#+id/lbl_beer_Description"/>
<android.support.constraint.Guideline
android:id="#+id/guideline_label_margins"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="16dp"/>
<android.support.constraint.Guideline
android:id="#+id/guideline_content_margins"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="120dp"/>
</android.support.constraint.ConstraintLayout>
</ScrollView>
This layout is inflated in a fragment that is:
content_detail.xml:
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fragment_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
And the root layout:
<?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/layout_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/card_height_huge"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<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:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include
layout="#layout/content_detail"/>
</android.support.design.widget.CoordinatorLayout>
-- EDIT
there is a bug report about this behavior.
I found a bug that was supposed to be fixed, but some others users related still report the issue:
https://issuetracker.google.com/issues/37115702
-- EDIT
I rotate the phone, the txt_beer_description TextView goes off the screen. So if I scroll the scroll works until the end of txt_beer_description, no more.
-- EDIT
style file is:
<resources>
<!-- Base application theme. -->
<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">#android:color/black</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="SearchBeerItemBaseText">
<item name="android:gravity">start|center_vertical</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginStart">8dp</item>
</style>
<style name="SearchBeerItemTextPrimary" parent="SearchBeerItemBaseText">
<item name="android:textColor">#color/primary_text</item>
<item name="android:textSize">16sp</item>
</style>
<style name="SearchBeerItemTextSecundary" parent="SearchBeerItemBaseText">
<item name="android:textColor">#color/secondary_text</item>
<item name="android:textSize">14sp</item>
</style>
<style name="CollectionItemBaseText">
<item name="android:gravity">start|center_vertical</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="CollectionItemTextPrimary" parent="CollectionItemBaseText">
<item name="android:textColor">#color/white</item>
<item name="android:textSize">15sp</item>
<item name="android:focusable">false</item>
<item name="android:focusableInTouchMode">false</item>
<item name="android:clickable">false</item>
</style>
<style name="CollectionItemTextSecundary" parent="CollectionItemBaseText">
<item name="android:textColor">#color/white</item>
<item name="android:textSize">13sp</item>
</style>
<style name="SearchActivityPrimaryImage">
<item name="android:layout_width">56dp</item>
<item name="android:layout_height">56dp</item>
</style>
<style name="HeadSection">
<item name="android:layout_marginTop">16dp</item>
<item name="android:layout_marginBottom">8dp</item>
<item name="android:textStyle">bold</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#color/primary</item>
<item name="android:textAppearance">#style/TextAppearance.AppCompat.Subhead</item>
</style>
<style name="Label">
<item name="android:textStyle">bold</item>
<item name="android:layout_marginTop">16dp</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#color/primary_text</item>
<item name="android:textAppearance">#style/TextAppearance.AppCompat.Body1</item>
</style>
<style name="Content" >
<item name="android:layout_marginTop">16dp</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#color/secondary_text</item>
<item name="android:textAppearance">#style/TextAppearance.AppCompat.Body1</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>
</resources>


In your ScorllView, change layout_height to:
android:layout_height="wrap_content"


The problem is related with the appbar:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/card_height_huge"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
I shouldn't use app:layout_behavior in that.

Related

Status bar overlaps action bar in android

I have tried many ways to make action bar place in bottom of status bar but still not working, I am using API 17,I have added android:fitsSystemWindows="true" in CoordinatorLayout but still not working
Here is my code:
the main_activity:
<net.aparteman.apartemanapp.viewHolder.SlidingMenuLayout 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.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="#color/dark_purple"
android:fitsSystemWindows="true"
android:layoutDirection="rtl"
android:textDirection="rtl"
app:elevation="0dp"
app:headerLayout="#layout/dashboard_nav_header"
app:itemTextColor="#color/white"
app:menu="#menu/dashboard_drawer_view"
app:theme="#style/ApartemanStyle" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<include
android:id="#+id/actionbar"
layout="#layout/dashboard_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#+id/dashboard_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
the dashboard_bar.xml :
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:popupTheme="#style/AppTheme" />
</android.support.design.widget.AppBarLayout>
style.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="actionMenuTextColor">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="ApartemanStyle" parent="Theme.AppCompat.Light">
<item name="android:textSize">16sp</item>
<item name="actionMenuTextColor">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
<item name="contentInsetStart">0dp</item>
<item name="contentInsetEnd">0dp</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="ApartemanStyle.NoActionBar">
<item name="actionMenuTextColor">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="ApartemanStyle.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="ApartemanStyle.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
It looks like this:
Can anyone help me on this?

Collapsing Toolbar Image coming under status bar on recyclerview scroll down

When the layout forms everything is fine, as in image is formed from status bar and status bar color is transparent. But whenever i scroll up and then scroll down the recycler view the image is scrolled till under status bar. But when i click on the image, it takes the original position.
Code for style/v21
<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>
<item name="android:windowIsTranslucent">true</item>
</style>
<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:windowContentTransitions">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" >
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
</style>
Code for collapsing toolbar layout.
<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.ashish.swipemusic.GenreDetails">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">
<ImageView
android:id="#+id/headerArtist"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
android:src="#drawable/album_details1"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_genre_details" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_play_arrow_black_24dp"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end" />
<android.support.v7.widget.RecyclerView
android:id="#+id/genre_songs_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
</android.support.v7.widget.RecyclerView>
before scroll
after scroll down status bar appears

Did you try removing app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed" inside your Toolbar? I've tried this way and it works pretty well

Android Support Toolbar shadow API > 19

Using android.support.v7.widget.Toolbar, I find that it displays a weird shadow in devices with API > 19.
How it looks in Android 4.4.2 API 19:
How it looks in anything with API >19:
I'd need it to look like it does with API 19, where it does not have any shadows and rather "integrates" with the background.
Since I'm using this Activity with a DrawerLayout, I have 2 layouts.
activity_main_tabbed.xml
<?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/main_tabbed_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="right">
<include
layout="#layout/activity_main_tabbed_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:fitsSystemWindows="true" />
</android.support.v4.widget.DrawerLayout>
activity_main_tabbed_content.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:background="#drawable/activity_background_vertical"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:background="#android:color/transparent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_height"
android:elevation="0dp"
android:background="#android:color/transparent"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:layout_width="wrap_content"
android:id="#+id/btn_toolbar_back"
android:src="#drawable/left_white_arrow"
android:visibility="gone"
android:layout_height="match_parent"
android:layout_marginRight="#dimen/btn_back_toolbar_margin_right"
android:minHeight="#dimen/btn_back_toolbar_height"
android:minWidth="#dimen/btn_back_toolbar_width"
android:layout_gravity="left|center_vertical"/>
<rokk3rlabs.dingding.utils.views.FontTextView
android:layout_width="wrap_content"
android:textSize="#dimen/toolbar_text_size"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimary"
android:text="#string/toolbar_title"
android:layout_gravity="left"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_height"
app:tabMode="fixed"
android:elevation="0dp"
app:tabGravity="fill"/>
</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>
styles.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<!-- 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:windowBackground">#drawable/activity_background</item>-->
<item name="android:textColorPrimaryInverse">#color/colorPrimary</item>
<item name="android:textColorSecondaryInverse">#color/colorPrimary</item>
<item name="android:colorBackground">#color/colorPrimaryDark</item>
<item name="android:colorForeground">#color/colorPrimary</item>
<item name="android:textColorPrimary">#color/colorPrimary</item>
<item name="android:textColorSecondary">#color/colorPrimary</item>
<item name="android:windowBackground">#color/colorPrimary</item>
</style>
styles.xml (v21)
<style name="AppTheme" parent="Theme.AppCompat">
<!-- 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:textColorPrimaryInverse">#color/colorPrimary</item>
<item name="android:textColorSecondaryInverse">#color/colorPrimary</item>
<item name="android:colorBackground">#color/colorPrimaryDark</item>
<item name="android:colorForeground">#color/colorPrimary</item>
<item name="android:textColorPrimary">#color/colorPrimary</item>
<item name="android:textColorSecondary">#color/colorPrimary</item>
<item name="android:navigationBarColor">#color/navigationBarColor</item>
<item name="android:statusBarColor">#color/statusBarColor</item>
<item name="android:windowBackground">#color/colorPrimary</item>
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>

Either make the AppBarLayout have a solid background or set its app:elevation="0dp" (not android:elevation).
Note: Why do you set every color to colorPrimary is puzzling. Purple text over purple background is not going to work. It also makes it impossible to know where the appbar layout ends and the activity background begins in the screenshot.

NavigationView and Translucent Status Bar

I followed all the tips on SO on how to achieve this and no success so far... I would like to have a Semi-transparent/transparent (not sure of the difference) status bar.
UPDATE 25/03/16: I tried all kinds of Theme attributes without progress. Updated question with what I attempted for the v21 styles file and a Bounty.
Does anyone have an idea?
fitSystemWindows is set in both my DrawerLayout and NavigationView in the 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
...
<android.support.design.widget.NavigationView
android:fitsSystemWindows="true"
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/tealfifty"
app:itemBackground="#drawable/drawer_item"
app:itemTextColor="#color/drawer_item"
app:itemIconTint="#color/drawer_item"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/navigation_view_items" />
</android.support.v4.widget.DrawerLayout>
This is my app theme:
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/teal</item>
<item name="colorPrimaryDark">#color/tealDark</item>
<item name="colorAccent">#color/purple700</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:navigationBarColor" tools:targetApi="21">#color/teal</item>
<item name="colorControlNormal">#color/iron</item>
<item name="colorControlActivated">#color/white</item>
<item name="colorControlHighlight">#color/white</item>
<item name="android:textColorHint">#color/iron</item>
</style>
and my v21\styles
<style name="MyTheme" parent="AppTheme.Base">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowSharedElementsUseOverlay">false</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
I also tried including those in the v21 styles:
<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>
Current result:

Look at this:
So the files are:
values:
<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" />
</resources>
values-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>
and MainActivity 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:fitsSystemWindows="true"
tools:openDrawer="start">
<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="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</RelativeLayout>
<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"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
and the result:
nav_header:
<?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="#dimen/nav_header_height"
android:background="#drawable/side_nav_bar"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:orientation="vertical"
android:gravity="bottom">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="#dimen/nav_header_vertical_spacing"
android:src="#android:drawable/sym_def_app_icon"
android:id="#+id/imageView" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/nav_header_vertical_spacing"
android:text="Hello Again"
android:textAppearance="#style/TextAppearance.AppCompat.Body1" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="me#android.com"
android:id="#+id/textView" />
</LinearLayout>

Toolbar weird elevation

If you set
App style:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
Style:
<style name="AppTheme.Toolbar.ThemeOverlay" parent="Base.ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#color/pickup_primary_text</item>
<item name="colorControlHighlight">#color/pickup_accent</item>
<item name="android:actionMenuTextColor">#color/pickup_primary_text</item>
<item name="android:textColorSecondary">#color/pickup_primary_text</item>
<item name="android:background">#color/pickup_primary</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="android:elevation">4dp</item>
</style>
Toolbar:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:toolbar="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?actionBarSize"
android:theme="#style/AppTheme.Toolbar.ThemeOverlay"
toolbar:titleTextAppearance="#style/AppTheme.Toolbar.TitleText" />
But if I set it directly in the toolbar
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:toolbar="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
android:minHeight="?actionBarSize"
android:theme="#style/AppTheme.Toolbar.ThemeOverlay"
toolbar:titleTextAppearance="#style/AppTheme.Toolbar.TitleText" />
I thought it was a bug but they say that not.
Why?

Categories

Resources