I have the following layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/Theme.MyPhotos.AppBarOverlay">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:menu="#menu/toolbar_menu"
app:popupTheme="#style/Theme.MyPhotos.PopupOverlay"
app:subtitleCentered="true"
app:title="#string/app_name"
app:titleCentered="true">
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.AppBarLayout>
<fragment
android:id="#+id/nav_host_fragment_activity_main"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:navGraph="#navigation/mobile_navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:layout_insetEdge="bottom"
app:menu="#menu/bottom_nav_menu" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
With these styles:
<style name="Theme.MyPhotos" parent="Theme.MaterialComponents.DayNight.NoActionBar">
...
<!-- Status bar color. -->
<item name="android:windowTranslucentStatus">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
And it looks like this:
But when I scroll, it looks like this (toolbar is hiding behind status bar):
I am try to make it look like this:
What am I missing? Any help is appreciated.
Related
Hey guys I am using custom toolbar in my project. When I try to scroll view it goes behind the toolbar and see all item. I made a short video please have a look.
toolbar.xml
<?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:fitsSystemWindows="true"
android:focusable="true">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:fitsSystemWindows="true"
android:gravity="bottom"
app:elevation="0dp"
tools:layout_height="170dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:fitsSystemWindows="true"
android:theme="#style/SearchViewTheme"
app:closeIcon="#drawable/ic_cancel"
app:layout_collapseMode="pin"
app:searchIcon="#drawable/ic_search" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/consultationsToolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:layout_marginTop="20dp"
app:layout_collapseMode="pin"
app:theme="#style/ActionBarTheme">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/account_details" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
/// more item
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I tried to put white background on toolbar, it solve the problem when scroll but another occur. When my searchview collapse its invisible. I think it's goes behind white background. I also made a short video for that.
<androidx.appcompat.widget.Toolbar
android:id="#+id/consultationsToolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:layout_marginTop="20dp"
app:layout_collapseMode="pin"
android:background="#color/white"
app:theme="#style/ActionBarTheme">
styles.xml
<style name="ActionBarTheme" parent="Theme.AppCompat.Light">
<item name="colorControlNormal">#color/aqua</item>
<item name="color">#color/aqua</item>
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="actionBarStyle">#style/ActionBarStyle</item>
<item name="actionMenuTextAppearance">#style/MenuItemTextAppearance</item>
<item name="android:textColorPrimary">#color/aqua</item>
</style>
Any idea How can I fix this problem?
Android Studio 2.3 RC 1
I have created an app that uses a transparent status bar that works ok as the status bar is transparent. The problem is with my toolbar as it seems to get pushed up. I have been trying to solve this issue using fitsSystemWindows to true. However, this has not worked.
Just wondering if there is something I am doing wrong.
The 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="me.androidbox.busbymovies.movielist.MovieListViewImp">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarlayout"
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:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="#color/primary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/primary"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="parallax">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/rvMovieList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tool_bar"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.v4.widget.ContentLoadingProgressBar
android:id="#+id/pbMovieList"
style="#style/Widget.AppCompat.ProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</android.support.design.widget.CoordinatorLayout>
My styles:
<style name="AppTheme" parent="BaseTheme">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
And in my onCreate(..) in the main activity
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
final Window window = getWindow();
window.setFlags(
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}
I would suggest, since you have this element:
app:layout_collapseMode="parallax"
that you do actually want some kind of parallax when scrolling. So this tells me that what you really meant to do is use a CoordinatorLayout. So this isn't a direct answer to your question but it will work if you use this method and you can fix both problems. I'm taking into account the image I can see in your screenshot.
<android.support.design.widget.CoordinatorLayout
android:fitsSystemWindows="true"
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">
<! -- Your Scrollable View -->
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:fitsSystemWindows="true"
android:layout_height="192dp"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
https://android-developers.googleblog.com/2015/05/android-design-support-library.html
im trying to make a transparent toolbar inside a AppBarLayout so the navigation drawer icon and Title appear like this
Toolbar i wish to make like
this is what i achieved but i would like to remove the borders around the tool bar. i tried removing the elevation and sitting the windowContentOverlay with #null but was not successful
my current achieved toolbar
Try following
<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
<item name="android:windowContentOverlay">#null</item>
<item name="windowActionBarOverlay">true</item>
<item name="colorPrimary">#android:color/transparent</item>
</style>
Try my below 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"
android:id="#+id/main_content"
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="#dimen/_400sdp"
android:background="#color/colorPrimary"
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"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/iv_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<View
android:layout_width="match_parent"
android:layout_height="#dimen/_400sdp"
android:background="#drawable/gradient_bg" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/_140sdp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_20sdp"
android:clickable="true"
android:src="#drawable/ic_attach_money"
app:backgroundTint="#color/kleen_green"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
app:layout_behavior="#string/bottom_sheet_behavior"
app:layout_collapseMode="pin" />
<!--app:layout_behavior="#string/bottom_sheet_behavior"-->
</android.support.design.widget.CoordinatorLayout>
I've a fragment with a CoordinatorLayout
When i run the app with API 19 the behavior is right :
The toolbar is below the status bar and the FAB button of the main_activity go away :
But with the API 21 and + :
The toolbar is behind the status bar and the FAB button of the main_activity don't go away :
Layout file:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/caves_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/caves_appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/caves_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimaryDark"
app:expandedTitleMarginStart="78dp"
app:expandedTitleMarginEnd="124dp">
<ImageView
android:id="#+id/caves_backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#drawable/drawer_header_bg"
app:layout_collapseMode="parallax"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/caves_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/caves_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/caves_fab"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/caves_appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_discuss"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>
I've add a specify style-v21 xml file
<resources>
<style name="AppTheme" parent="Base.Theme.Design">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowSharedElementsUseOverlay">false</item>
</style>
</resources>
I'dont find and understand the problem.
add android:fitsSystemWindows="false"to the CoordinatorLayout
Had a similar problem (exemplified here)
How I made it work was to add android:fitsSystemWindows="false" to the AppBarLayout and have it on true on the CoordinatorLayout
take off this line:
<item name="android:windowTranslucentStatus">true</item>
I'd like the toolbar(actionbar) to hide completely when scrolling down. On launching the activity or scrolling back up the toolbar should be visible and the statusbar light grey.
start as [ statusbar | toolbar | content ]
scrolling down [ co-(statusbar)-ntent ]
scrolling up [ statusbar | toolbar | content ]
currently:
on startup / boot
scrolled content down
scrolled content up
activity_layout.xml
<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:background="#color/background_white"
tools:context="com.conevoud.captjeluigi.ui.activities.GalleryActivity">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include layout="#layout/toolbar" />
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/drawer_left" />
</android.support.v4.widget.DrawerLayout>
toolbar.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbar_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="?popup_theme"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
</android.support.design.widget.AppBarLayout>
</merge>
styles:
<item name="windowActionModeOverlay">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowTranslucentStatus">true</item>
thank you for reading this.
I had a sinular problem before, try setting android:fitsSystemWindows=”true” in your AppBarLayout.
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbar_frame"
android:fitsSystemWindows=”true”
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="?popup_theme"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
</android.support.design.widget.AppBarLayout>
I had the similar problem. Mine was solved.
Added android:fitsSystemWindows="true" to theAppBarLayout.
Addedapp:layout_scrollFlags="scroll|enterAlways|snap" for Toolbar
Below is the layout I had.
<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"
tools:context=".HomeActivity">
<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:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/id_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+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.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"/>
it's looks like the only options is - get rid of
<item name="android:statusBarColor">#android:color/transparent</item>
property