When using android:fitsSystemWindows="true" and android:adjustViewBounds="true" together for ImageView in CollapsingToolbarLayout its give padding to ImageView at bottom
and i am posting its answer to help this reference this issue solution to help others on github issue that i have raised a long time ago
Expected behavior:
Current behavior:
Layout XMl:
<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"
android:fitsSystemWindows="true">
<androidx.core.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include
android:id="#+id/include_bundle_detail_layout"
layout="#layout/include_bundle_detail_layout" />
</androidx.core.widget.NestedScrollView>
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
style="#style/Widget.Base.AppBarLayout"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimarySurface"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/imageView_bundleOfferImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:visibility="gone"
app:layout_collapseMode="parallax"
tools:ignore="ContentDescription"
tools:src="#drawable/playstore_feature_graphic"
tools:visibility="visible" />
<View
android:id="#+id/view_image_upper_gradient"
android:layout_width="match_parent"
android:layout_height="96dp"
android:background="#drawable/gradient_black_transparent"
android:visibility="gone"
app:layout_collapseMode="pin"
tools:visibility="visible" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
style="#style/Widget.Base.Toolbar"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
styles.xml
<style name="Widget.Base.Toolbar">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">?actionBarSize</item>
<item name="android:paddingTop">24dp</item>
</style>
to fix that you need to add android:fitsSystemWindows="true" from root to every child view until the view that you want to show below the status bar and just set android:fitsSystemWindows="false" to those views you want to get auto padding according to status bar height so this will fix the padding issue on image view but now that black gradient act weird and being to the size of the toolbar to fix that i have manually set padding to gradient in code using window insets check code below for that
Layout
<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"
android:fitsSystemWindows="true">
<androidx.core.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include
android:id="#+id/base_model_detail_layout_include"
layout="#layout/base_model_detail_layout_include" />
</androidx.core.widget.NestedScrollView>
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:minHeight="?actionBarSize"
app:contentScrim="?colorPrimarySurface"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:statusBarScrim="?colorPrimarySurface"
app:titleEnabled="false">
<ImageView
android:id="#+id/imageView_bundleOffer"
style="#style/Widget.PNBO.BundleOfferDetailFragment.ImageView"
android:fitsSystemWindows="true"
android:visibility="gone"
tools:ignore="ContentDescription"
tools:src="#drawable/playstore_feature_graphic"
tools:visibility="visible" />
<View
android:id="#+id/view_image_upper_gradient"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#drawable/gradient_black_transparent"
android:fitsSystemWindows="true"
android:visibility="gone"
app:layout_collapseMode="pin"
tools:visibility="visible" />
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:fitsSystemWindows="false"
style="#style/Widget.PNBO.BundleOfferDetailFragment.Toolbar" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Kotlin code
private fun setUpSystemBars() {
binding.root.apply {
ViewCompat.setOnApplyWindowInsetsListener(this) { _, insets ->
val top = insets.getInsets(WindowInsetsCompat.Type.statusBars()).top
val height: Int
binding.viewImageUpperGradient?.also {
height = it.layoutParams.height
it.layoutParams.height = height + top
}
insets
}
}
}
Related
When I changed the theme to Theme. Material3 during Android development, there was a problem with folding the ActionBar.ToolBar is blocked.
[enter image description here](https://i.stack.imgur.com/VAqlb.png)
<?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:id="#+id/lin"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/mainbackground">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="180dp"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/appbarcolor"
app:collapsedTitleGravity="center_horizontal"
app:expandedTitleTextColor="?android:attr/textColor"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="#android:color/transparent"
app:title="注册并开始">
<ImageView
android:id="#+id/iv_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="?attr/mainbackground"
app:layout_collapseMode="parallax" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/nested_scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
......
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Originally, I used NestScollView for areas other than AppBarLayout. I tried to change it to a separate xml, and found it invalid. I also tried to add android: fitsSystemWindows="true" to her, which is also invalid
I am facing problem for reducing left spaces of the Collapsible Toolbar Layout title. I want to align the title just below of the back button and I am unable to reduce the space. Thanks in advance. Here is the code.
<?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"
android:background="#color/white"
android:fitsSystemWindows="true"
tools:context="com.example.ManualConfigActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/scale_140dp"
android:background="#color/white"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="#dimen/scale_0dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:fitsSystemWindows="true"
app:collapsedTitleGravity="center_horizontal"
app:expandedTitleGravity="bottom"
app:toolbarId="#+id/toolbar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/white"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/tv_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="#drawable/ic_back"
/>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include
android:id="#+id/content_scrolling"
layout="#layout/menu_content_scrolling" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
You forget to add app:layout_scrollFlags="scroll|enterAlways" in CollapsingToolbarLayout
& if possible please attach the issue picture because it is easy to understand others
I'm using a collapsing toolbar layout in an activity which should have to items always shown in the overflow menu. the issue is that as you can see below (on the top right corner) both items has a background of the collapsed toolbar instead of being on top of the cover image directly like the back arrow.
All used drawables are vector drawables without background.
Activity XML 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=".ui.activities.WorkDetailsActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/ToolbarTheme"
app:collapsedTitleGravity="start"
app:contentScrim="#color/colorPrimary"
app:expandedTitleMarginEnd="48dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#style/expandedToolbarTitle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="#+id/toolbar_cover_container"
android:layout_width="match_parent"
android:layout_height="480dp"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/toolbar_cover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/down_dark_gradient" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:textAlignment="gravity"
android:theme="#style/ToolbarTheme"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_work" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/share_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_share_black"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/navigation_view" />
Expanded Layout
Collapsed layout
Removing the theme from toolbar
android:theme="#style/ToolbarTheme" didn't solve the issue, applying a theme that overrides the parent with a transparent background did.
<item name="android:background">#color/transparent</item>
Below is the code I am using to have a collapsing toolbar. It works. But at the same time I am trying to have toolbar elevation which is not working in pre lollipop devices, so I am trying to do that by applying a view with a shadow drawable. It works, but in this case, has an unintended effect as the shadow is visible all the time (see below)
I want the shadow to be visible only when only the toolbar is visible
Any advise?
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="72dp"
app:expandedTitleTextAppearance="#style/ExpToolbarTitleStyle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:id="#+id/backdropimg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/img"/>
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/profPic"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:scaleType="fitCenter"
android:src="#drawable/imgprf"
app:riv_border_color="#color/icons"
app:riv_border_width="2dip"
app:riv_corner_radius="30dip"
app:riv_mutate_background="true"
app:riv_oval="true"/>
</RelativeLayout>
<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/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<View
android:id="#+id/toolbar_shadow"
style="#style/ElevationFix"
app:layout_scrollFlags="exitUntilCollapsed"
android:layout_width="match_parent"
android:layout_height="6dp"/>
<android.support.v4.view.ViewPager .........
.........
.........
</android.support.design.widget.CoordinatorLayout>
This is a bug, you can find here is Assigend as Small-Priority to Chris Banes (Android Developer).
https://code.google.com/p/android/issues/detail?id=182083
I suggest you to add the custom shadow view as foreground in your fragment container.
i did same thing in my code like:
<android.support.v4.widget.NestedScrollView
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
**android:foreground="#drawable/header_shadow"**>
You can do one more thing put
<item name="header_shadow" type="drawable">#null</item>
attibute in value-21 style.xml and before api 21 add it into your styles.xml like this..
<item name="header_shadow" type="drawable">#drawable/bottom_shadow</item>
I have implemented CollapsibleToolbarLayout as below.
<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">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="40dp"
app:expandedTitleMarginStart="20dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imgPoster"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:background="#drawable/place_holder_land" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/detailsGradient" />
<ImageView
android:id="#+id/play"
android:layout_width="wrap_content"
android:visibility="invisible"
app:layout_collapseMode="parallax"
android:layout_gravity="center"
android:src="#drawable/ic_play_movie"
android:layout_height="wrap_content" />
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
...LinearLayout omitted...
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_file_download"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
I add the image view in a framelayout in the toolbar so that i can have a overlay on the image and a gradient to make the toolbar text visible on some images
But this color line is coming just below the image (see screenshot) on adding the framelayout. If I remove the line
android:fitsSystemWindows="true"
from appbarlayout then the the color line disapperas but toolbar also scrolls away from the view...
Also to show the back button on the toolbar I have added the below code in OnCreate still it does not show
toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.anim_toolbar);
SetSupportActionBar(toolbar);
SupportActionBar.SetDisplayHomeAsUpEnabled(true);
SupportActionBar.SetHomeButtonEnabled(true);
SupportActionBar.Title = content.Title;
toolbar.SetNavigationIcon(Resource.Drawable.ic_action);
collapsingToolbar = FindViewById<CollapsingToolbarLayout>(Resource.Id.collapsing_toolbar);
collapsingToolbar.SetTitle(content.Title);
Thanks...
OK got it now had to remove
android:fitsSystemWindows="true"
from
<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">
everything good now
Thanks
Consider adding a fixed width to your app bar layout
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">