I recently changed my AppBarLayout with SmoothAppBarLayout
It is smoother and faster so i am happy with the result. But this changed my toolbar height somehow and i couldn't yet fix it.
Collapsed ToolBar's height should be 'actionBarSize' but it is bigger than that.
It is not about toolbar title, disabling or changing the padding of it doesnt work. But it is about the behaviour.
Setting a new behavior like below solves the problem but I want a proper solution.
AppBarLayout.Behavior behavior = new AppBarLayout.Behavior();
params.setBehavior(behavior);
First image shows the intended size, second shows the actual size.
Here is the part of my XML: (Didn't put all of it since it is pretty long)
<me.henrytao.smoothappbarlayout.SmoothAppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="210dp"
android:minHeight="50dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:sabl_target_id="#id/nestedScrollView">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:fitsSystemWindows="true"
android:minHeight="210dp"
app:contentScrim="#color/dark_gray_actionbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="210dp"
android:orientation="vertical"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/serviceImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="Servis Fotoğrafı"
android:scaleType="centerCrop"
android:src="#drawable/gray_color_gradient"
app:layout_collapseMode="parallax" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentTop="true"
android:layout_gravity="center_horizontal"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
<include
layout="#layout/get_quote_layout"
android:layout_width="match_parent"
android:layout_height="64dp"
app:layout_anchor="#id/nestedScrollView"
app:layout_anchorGravity="bottom"
app:layout_collapseMode="pin" />
</android.support.design.widget.CoordinatorLayout>
I think the issue comes from fitSystemWindows. You can simplify your layout as below:
...
<me.henrytao.smoothappbarlayout.SmoothAppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:sabl_target_id="#id/nestedScrollView">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent"
app:contentScrim="#color/dark_gray_actionbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="210dp"
android:orientation="vertical"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/serviceImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="Servis Fotoğrafı"
android:scaleType="centerCrop"
android:src="#drawable/gray_color_gradient"
app:layout_collapseMode="parallax" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentTop="true"
android:layout_gravity="center_horizontal"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
...
Related
My app contains a collapsing toolbar with a tablayout. The tabs have an own background color, my #color/colorPrimary. Now I would like to 'merge' the tablayout and collapsing toolbar and it should both be transparent, so the background image reaches from the toolbar down including the tabs. Like it is not divided by the background anymore.
Some what like this is needed:
And this is what my app now looks like:
My code is as follows:
<?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:background="#f3f3f3"
tools:context="example.jocelinthomas.dictionary.WordMeaningActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingtoolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginBottom="60dp"
app:expandedTitleMarginEnd="5dp"
app:expandedTitleMarginStart="10dp"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/ExpandedTitleText"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
android:scaleType="centerCrop"/>
<ImageButton
android:id="#+id/btnSpeak"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="bottom|right"
android:layout_margin="15dp"
android:background="#drawable/speaker"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/mToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
style="#style/TabStyle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:tabGravity="center"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/colorAccent"
app:tabTextColor="#color/white">
</android.support.design.widget.TabLayout>
</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.v4.view.ViewPager>
<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="16dp"
android:src="#android:drawable/ic_menu_share" />
</android.support.design.widget.CoordinatorLayout>
I want a b/g image or gradient effect to my collapsing toolbar and the tab layout background should be transparent as shown in the first image, How should I achieve this?
IT IS TOO EASY
Use this line of code inside TabLayout
android:background="#android:color/transparent"
My CollapsingToolbarLayout is not working accurate enough. Image 1 shows the initial state and image 2 the one, when I was scrolling down a little. The transition happens too early and it will end up in a (in this case) pink blank space. The same happens when scrolling up again.
Any way to fix that?
My layout:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/activity_main_cover_height"
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"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/transparent_background_dark"
android:orientation="vertical"
android:paddingLeft="#dimen/box_headline_padding"
android:paddingStart="#dimen/box_headline_padding">
<!-- ... -->
</LinearLayout>
</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>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="0dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- ... -->
</android.support.v4.widget.NestedScrollView>
Thanks to when the morning comes I figured out the correct parameter app:scrimVisibleHeightTrigger
In the end I combined both
app:scrimAnimationDuration="300"
app:scrimVisibleHeightTrigger="60dp"
Use this attribute in your CollapsingToolbarLayout:
app:scrimAnimationDuration="600"
The time is in milliseconds.
I'm going to use CollapsingToolbarLayout in my App View.
I put ImageView inside of it and fill it by Image like Images attached below.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/annonce.main.coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlHardcoded" >
<android.support.design.widget.AppBarLayout
android:id="#+id/flexible.example.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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="true"
app:contentScrim="?colorPrimary"
app:expandedTitleMarginBottom="94dp"
app:expandedTitleTextAppearance="#style/CollapsingTextAppearance.Inverse" >
<ImageView
android:id="#+id/post_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:adjustViewBounds="true"
android:fitsSystemWindows="true"
android:scaleType="fitXY" />
<android.support.v7.widget.Toolbar
android:id="#+id/flexible.example.toolbar"
style="#style/ToolBarWithNavigationBack"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
android:background="#null" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Issue
As you can see in images, When image height is greater than screen height! CollapsingToolbarLayout act like css property overFlow:hidden and cut the image
I have an activity with some fragments which has a CollapsingToolbarLayout. In an specific fragment, I want the toolbar to show a TabLayout. I have made it work.. well almost.
When changing to the fragment where TabLayout must be shown, the CollapsingToolbarLayout is collapsed using:
collapsingToolbarLayout.setExpanded(false,true);
And the tabs are shown using this in the fragment code:
tabs.setVisibility(View.VISIBLE);
The issue is that the CollapsingToolbarLayout is completely hidden and it only shows the tab bar, instead of the collapsed toolbar above the app bar.
This is the layout:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:elevation="0dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="0dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="32dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="24dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/toolbarHeader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/header"
android:visibility="invisible"
app:layout_collapseMode="parallax"
tools:ignore="ContentDescription"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="0dp"
android:minHeight="?actionBarSize"
android:paddingTop="#dimen/tool_bar_top_padding"
android:transitionName="actionBar"
app:contentInsetStart="#dimen/toolbar_contentInset"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
tools:ignore="UnusedAttribute">
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="left|center_vertical"
android:layout_weight="1"
android:gravity="left|center_vertical"
android:text=""
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title"
android:textColor="#fff"
android:textSize="20sp"/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/primary"
android:clipToPadding="false"
android:minHeight="?actionBarSize"
android:paddingLeft="#dimen/tabs_contentInset"
android:paddingStart="#dimen/tabs_contentInset"
android:visibility="gone"
app:tabIndicatorColor="#android:color/white"
app:tabMode="scrollable"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#color/semitransparent_white"
tools:ignore="NewApi,RtlSymmetry,UnusedAttribute"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
And this is how it currently looks like, (and which I don't want it to be).
And this is how I expect/want it to look like:
Thanks in advance for any help.
Please try this :
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="0dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="32dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="24dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/toolbarHeader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/header"
android:visibility="invisible"
app:layout_collapseMode="parallax"
tools:ignore="ContentDescription"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="0dp"
android:minHeight="?attr/actionBarSize"
android:paddingTop="#dimen/tool_bar_top_padding"
android:transitionName="actionBar"
app:contentInsetStart="#dimen/toolbar_contentInset"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
tools:ignore="UnusedAttribute">
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="left|center_vertical"
android:layout_weight="1"
android:gravity="left|center_vertical"
android:text=""
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title"
android:textColor="#fff"
android:textSize="20sp"/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/primary"
android:clipToPadding="false"
android:minHeight="?actionBarSize"
android:paddingLeft="#dimen/tabs_contentInset"
android:paddingStart="#dimen/tabs_contentInset"
android:visibility="gone"
app:tabIndicatorColor="#android:color/white"
app:tabMode="scrollable"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#color/semitransparent_white"
tools:ignore="NewApi,RtlSymmetry,UnusedAttribute"/>
</android.support.design.widget.CollapsingToolbarLayout>
please tell me if it works or not in a comment
Good luck
Hello remove the next code line
app:layout_scrollFlags="scroll|enterAlways|snap"
I already answer to this problem in here = https://stackoverflow.com/a/54817940/4258880.
But you can add an offset change listener to explicitly set your action bar when you reach a greater than percentage. (Sometimes I dont know why, the offset changes on scroll behavior, even though it has a fixed height)
In Kotlin:
app_bar_layout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
val percentage: Float = Math.abs(verticalOffset) / appBarLayout.totalScrollRange.toFloat()
Log.d("%", "$percentage")
when {
percentage < 0.1 -> (activity as MainActivity).bottom_navigation.visibility = View.GONE
percentage >= 1.0.toFloat() -> (activity as MainActivity).setSupportActionBar(where_toolbar) // This is hack to avoid toolbar disappearing
else -> (activity as MainActivity).bottom_navigation.visibility = View.VISIBLE
}
})
Here I am using it to inflate it in a Fragment when the percetange is greater than 1 (Weird).
I would like to achieve something similar to the following in my app, but I want the whole red area (where it says "Guardians Of The Gala..." in the screenshots below) to be a custom view. (Some elements would fade out as the toolbar is collapsed.)
``
`
I've been trying for hours and hours to get it to work, but to no avail.
Obviously, just putting it into <Toolbar> doesn't work, since it doesn't know that it's supposed to animate it:
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout>
<ImageView/>
<android.support.v7.widget.Toolbar>
<include layout="#layout/link_view_title_bar"/>
I've tried doing most of the answers from here and here but nothing actually worked.
How could I do this, preferably using mostly XML and the Android Design Support library. Any help would be appreaciated.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/homeCoordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/homeAppBarLayout"
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/homeCollapseToolbar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
//This can be changed to ImageView
<com.daimajia.slider.library.SliderLayout
android:id="#+id/homeSliderLayout"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="350dp"/>
<android.support.v7.widget.Toolbar
android:id="#+id/homeToolbar"
android:title=""
android:layout_width="match_parent"
android:layout_height="115dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" >
<ImageView
android:src="#drawable/ic_logo"
android:paddingLeft="10dp"
android:layout_gravity="center|top"
android:layout_width="wrap_content"
android:layout_height="35dp" />
</android.support.v7.widget.Toolbar>
//Instead of the TabLayout, put your Red Layout
<android.support.design.widget.TabLayout
android:id="#+id/homeTabLayout"
android:layout_marginBottom="15dp"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabGravity="center"
app:tabIndicatorColor="#color/colorAccent" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/homeViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>