I have create layout with combination of AppBarLayout > CollapsingToolbarLayout > RelativeLayout
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<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:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="240dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<RelativeLayout
android:id="#+id/layoutHeader"
android:layout_width="match_parent"
android:layout_height="240dp"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/ivCoverImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
<RelativeLayout
android:id="#+id/layoutImgWrapper"
android:layout_width="74dp"
android:layout_height="74dp"
android:layout_marginLeft="#dimen/app_normal_padding"
android:layout_marginRight="20dp"
android:layout_marginTop="100dp"
android:background="#drawable/rest_image_wrapper"
android:padding="3dp">
<ImageView
android:id="#+id/ivRestaurant"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
/>
</RelativeLayout>
<com.test.widget.CustomTextView
android:id="#+id/tvRestaurantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/layoutImgWrapper"
android:layout_marginBottom="4dp"
android:layout_toEndOf="#+id/layoutImgWrapper"
android:layout_toRightOf="#+id/layoutImgWrapper"
android:text="Benjy's"
android:textColor="#color/white"
android:textSize="18sp"
app:typeface="fonts/proximanova_semibold.ttf" />
<RatingBar
android:id="#+id/ratingBar"
style="#style/CustomRatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvRestaurantName"
android:layout_toEndOf="#+id/layoutImgWrapper"
android:layout_toRightOf="#+id/layoutImgWrapper"
/>
<com.test.widget.UnderlinedTextView
android:id="#+id/tvReviews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/ratingBar"
android:layout_marginLeft="10dp"
android:layout_toEndOf="#+id/ratingBar"
android:layout_toRightOf="#+id/ratingBar"
android:autoLink="web"
android:text="0 Review"
android:textColor="#color/white"
android:textSize="14sp"
app:underlineColor="#color/rest_review_underline_color"
app:underlineWidth="1dp" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginTop="50dp"
app:tabIndicatorColor="#color/primary_dark_color"
app:tabIndicatorHeight="#dimen/tab_indicator_height"
app:tabMode="scrollable" />
</android.support.design.widget.CollapsingToolbarLayout>
</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" />
When I re-expanding layout, top part (toolbar, tab etc) is not working in ICS and jelly bean. I have tested, It was working above all versions. I think top part height is fixed after collapsing (it takes toolbar's height) in lower OS. Let me suggest any solution.
Thanks in advance.
Related
on my app i have a collapsing toolbar with three icons;
hamburger icon, app logo, setting icon,
My hamburger icon is on the left and the settings icon on the right and i'm trying to center the app logo in the toolbar. But it appear next to my settings logo instead that in the center. any ideas why am I doing wrong?
<?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"
tools:context=".Activities.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="#+id/appbar"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/colappsingtoolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#color/lightBlack"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="64dp"
app:layout_scrollFlags="exitUntilCollapsed|scroll|snap"
app:title="">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="200dp"
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="40dp"
android:gravity="top"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:titleMarginTop="15dp" >
<ImageView
android:id="#+id/title"
android:layout_width="23dp"
android:layout_height="23dp"
android:layout_marginTop="13dp"
android:layout_marginRight="13dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_account" />
<ImageView
android:id="#+id/accoun_btn"
android:layout_width="23dp"
android:layout_height="23dp"
android:layout_marginTop="13dp"
android:layout_marginRight="13dp"
android:layout_gravity="right"
android:src="#drawable/ic_account" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I edited your code into my Android studio 3.5, as I am using androidx framework, but I don't think it would be any issue to solve it. Check my code from below :-
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="#+id/appbar"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/colappsingtoolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#color/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="64dp"
app:layout_scrollFlags="exitUntilCollapsed|scroll|snap"
app:title="">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="top"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat"
app:titleMarginTop="15dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="3"
android:padding="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/title"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
android:layout_marginRight="13dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_beach_access_black_24dp" />
<ImageView
android:id="#+id/accoun_btn"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
android:layout_marginRight="13dp"
android:layout_gravity="end"
android:src="#drawable/ic_settings_black_24dp" />
<ImageView
android:id="#+id/accoun_btn_1"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="23dp"
android:layout_marginTop="13dp"
android:layout_marginRight="13dp"
android:layout_gravity="start"
android:src="#drawable/ic_android_black_24dp" />
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Happy coding
I have the following code below on which I'm trying to make a collapsible toolbar that will make the toolbar which has a linearlayout inside, to stick to the bottom part of the layout when expanded.
I have been moving parts/layouts all around for several hours trying to make it stick to the bottom and still show at the appbar even when closed/pushed up but I cant make it show up as I intended.
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/ivProfileAvatar"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/profile_image" />
<Space
android:layout_width="match_parent"
android:layout_height="16dp" />
<TextView
android:id="#+id/tvUserUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="SomeName"
android:textColor="#android:color/white"
android:textSize="24dp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="UniversityName"
android:textColor="#android:color/white"
android:textSize="16dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="tvUserStatus"
android:textColor="#android:color/white"
android:textSize="16dp" />
<Space
android:layout_width="match_parent"
android:layout_height="16dp" />
<Button
android:id="#+id/btnEditProfile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/btn_gradient_blue"
android:paddingEnd="48dp"
android:paddingStart="48dp"
android:text="Edit Profile"
android:textAllCaps="false"
android:textColor="#android:color/white" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
<android.support.design.widget.TabLayout
android:id="#+id/tabsProfile"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tabBackground="#null"
app:tabGravity="center"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="2dp">
<android.support.design.widget.TabItem
android:id="#+id/tabProfileMyLikes"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:id="#+id/tabProfileMyPosts"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
You are using TabLayout inside Toolbar and that's not a good design and wrong (i should say).
Instead, try something like this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:id="#+id/tabsProfile"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tabBackground="#null"
app:tabGravity="center"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="2dp">
<android.support.design.widget.TabItem
android:id="#+id/tabProfileMyLikes"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:id="#+id/tabProfileMyPosts"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>
To make a view pinned or stick somewhere, using app:layout_collapseMode="pin" will help or instead, add the view to CoordinatorLayout like FloatingActionButton position to make it stick in the bottom and set: android:gravity to bottom.
Use the below code I hope it will help you
<?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:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/TextAppearance.AppCompat.Title"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
app:titleEnabled="false">
<include layout="#layout/record_description_header" />
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_marginTop="50dp"
android:scaleType="centerCrop"
android:src="#drawable/bcslogo2"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Hi I'm trying to use Collapsing Toolbar but when the collapsing toolbar collapses the title of the toolbar moves outside the screen. I'm using right alignment for the text as i'm trying to build an app in Urdu language. I have searched on this and not no solution. Need help!
See the screenshot here
XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.mrvirk.urduapp.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="350dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
android:fitsSystemWindows="true"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="350dp"
app:layout_collapseMode="parallax"
android:contentDescription="#string/app_name"
android:src="#drawable/quran"
android:scaleType="centerCrop"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/toolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:title="#string/Quran"
app:layout_collapseMode="pin"
/>
</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:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="6dp"
android:layout_marginBottom="16dp"
app:cardUseCompatPadding="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:id="#+id/quranTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:padding="12dp"
android:textStyle="bold"
android:layout_marginTop="12dp"
android:text="#string/Quran"
android:textColor="#color/colorPrimary"
android:layout_gravity="right"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="12dp">
<TextView
android:id="#+id/quranIntro"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="9"
android:padding="10dp"
android:text="#string/intro"
android:textColor="#color/colorPrimary"
android:textSize="22sp"
android:textStyle="bold" />
</LinearLayout>
<TextView
android:id="#+id/quranDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="17sp"
android:lineSpacingMultiplier="1.5"
android:padding="20dp"
android:layout_marginTop="12dp"
android:text="#string/description"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="97dp"
android:elevation="6dp"
android:scaleType="fitCenter"
android:src="#drawable/fav"
app:layout_anchor="#id/appbar"
app:backgroundTint="#color/white"
app:layout_anchorGravity="bottom|left|end"
app:pressedTranslationZ="12dp" />
</android.support.design.widget.CoordinatorLayout>
Thanks in Advance :)
I could not find a better answer or solution to this problem. Now i have added a TextView at the right of the toolbar title. Which basically consume some space so the title comes at the required place. And i know its not the best practice. If someone has a better solution Please share.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/toolbar"
app:title="#string/Quran"
android:gravity="right"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:layout_collapseMode="pin" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_gravity="right" />
</android.support.v7.widget.Toolbar>
in your CollapsingToolbarLayout try to add this app:layout_scrollFlags="scroll|exitUntilCollapsed"
like this
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="350dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
I have : There is 1. Toolbar, 2. ViewPager, 3. TabLayout, 4. small ViewPager, 5. ViewPager for Fragment which has RecyclerView :)
Desired: When RecyclerView inside 5. ViewPager at below is scrolled, 1.Toolbar, 3.TabLayout, 4.ViewPager must be pinned and ONLY 2.ViewPager should be scrolled and gone like below:
Problem: I can't only pin 2.ViewPager without pinning 1.Toolbar. So it is like, i pin both 1.Toolbar and 2.ViewPager or none of them.
Question: How to only hide 2.ViewPager when scrolling?
Code:
<?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/coordinatorLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_white"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_white"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarFeedNew"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/toolbar_shadow"
android:gravity="center_horizontal"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageView
android:id="#+id/toolbarLogoFeedNew"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_gravity="center"
android:gravity="center"
android:src="#drawable/fenerbahce_logo" />
</android.support.v7.widget.Toolbar>
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerTopFeedNew"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#drawable/mavi_bg_gradient"
app:layout_scrollFlags="scroll|enterAlways" />
<LinearLayout
android:id="#+id/layoutTabAndSkor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/haberler_bg"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/genel_haberler_bant"
app:tabGravity="fill"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/color_light_gray"
app:tabTextAppearance="#style/tabLayoutTextAppearance"
app:tabTextColor="#color/color_white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="58dp"
android:background="#null"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerSkorFeedNew"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#null" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/circleIndicatorFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#null"
android:paddingBottom="4dp"
android:paddingTop="4dp"
app:fillColor="#color/color_white"
app:pageColor="#bbbbbb"
app:strokeColor="#bbbbbb" />
</LinearLayout>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<com.pordiva.coreproject.component.NonSwipableViewPager
android:id="#+id/viewPagerPostsFeedNew"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_white"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_white"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarFeedNew"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/toolbar_shadow"
android:gravity="center_horizontal"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageView
android:id="#+id/toolbarLogoFeedNew"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_gravity="center"
android:gravity="center"
android:src="#drawable/fenerbahce_logo" />
</android.support.v7.widget.Toolbar>
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerTopFeedNew"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#drawable/mavi_bg_gradient"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="#+id/layoutTabAndSkor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/haberler_bg"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/genel_haberler_bant"
app:tabGravity="fill"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/color_light_gray"
app:tabTextAppearance="#style/tabLayoutTextAppearance"
app:tabTextColor="#color/color_white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="58dp"
android:background="#null"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerSkorFeedNew"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#null" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/circleIndicatorFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#null"
android:paddingBottom="4dp"
android:paddingTop="4dp"
app:fillColor="#color/color_white"
app:pageColor="#bbbbbb"
app:strokeColor="#bbbbbb" />
</LinearLayout>
</LinearLayout>
<com.pordiva.coreproject.component.NonSwipableViewPager
android:id="#+id/viewPagerPostsFeedNew"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_white" />
If i underestood that correctly, you can use CollapsingToolbarLayout with this flag:
app:layout_scrollFlags="scroll|exitUntilCollapsed"
Which says:
Scroll the view and after it Collapsed, exit (or your purpose, hide it
after Collapsed).
Here is a good example of how that is working: https://github.com/TheLittleNaruto/SupportDesignExample
Just put your contents into it for after it collapsed, then it will hide or exit that view.i think this is what you were looking for.
EDIT: use it with your own implementation.
Or something like this actually:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarFeedNew"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerTopFeedNew"
android:layout_width="match_parent"
android:layout_height="150dp" />
<!--Perhaps a ViewPager-->
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
app:tabMode="scrollable" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="58dp"
android:background="#null"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerSkorFeedNew"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#null" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/circleIndicatorFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#null"
android:paddingBottom="4dp"
android:paddingTop="4dp"
app:fillColor="#color/color_white"
app:pageColor="#bbbbbb"
app:strokeColor="#bbbbbb" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
Hope that helps.
in Android is used the followring Support-Library
com.android.support:design:23.0.0
In my project i wan't to use the CollapsingToolbar with an image, but when i scroll in my app when the AppBar is visible, it's only scroll when I move the content and the content does not scroll alone. When the AppBar is invisible and the Toolbar is showing, it's work fine.
Show this video: https://www.youtube.com/watch?v=kcojEVVJe7M
What can I do to make the scrolling works the same as with Google Play, Whatsapp, etc.??
Thanks.
EDIT:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
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"
app:contentScrim="?attr/colorPrimary"
android:clipToPadding="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/header"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
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>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/card_status"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="horizontal"
app:cardCornerRadius="2dp"
app:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:text="New Text" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="31dp"
android:text="Lorem ipsum [...]"></TextView>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>