I am trying to collapse the custom toolbar with below 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"
xmlns:custom="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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">
<LinearLayout
android:id="#+id/ll_custom_toolbar_normal"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_toolbar_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/padding_16" />
<com.idolbee.android.customview.CustomTextView
android:id="#+id/tv_toolbar_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#android:color/white"
custom:font="ars_maquette_pro_bold"
tools:text="Title" />
<ImageView
android:id="#+id/iv_toolbar_menu1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/padding_16"
android:paddingLeft="#dimen/padding_16"
android:paddingTop="#dimen/padding_16"
android:visibility="gone" />
<ImageView
android:id="#+id/iv_toolbar_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/padding_16" />
</LinearLayout>
<ImageView
android:id="#+id/iv_my_stats_profile_pic"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginTop="#dimen/padding_16"
android:src="#drawable/profile_pic_holder" />
<com.idolbee.android.customview.CustomTextView
android:id="#+id/tv_my_stats_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/margin_16"
android:layout_marginTop="#dimen/margin_16"
custom:font="ars_maquette_pro_bold"
tools:text="Isabel Lozano" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tl_my_stats"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#color/colorAccent"
app:layout_collapseMode="pin"
custom:tabBackground="#color/colorAccent"
custom:tabIndicatorColor="#color/colorPrimary"
custom:tabMode="scrollable"
custom:tabSelectedTextColor="#color/colorPrimary"
custom:tabTextColor="#color/colorPrimary" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_my_stats"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:listitem="#layout/list_item_my_stats" />
<RelativeLayout
android:id="#+id/rl_fab_overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/actionbar_overlay"
android:visibility="gone">
<LinearLayout
android:id="#+id/ll_home_fab_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="#dimen/margin_floating_action_menu"
android:layout_marginRight="#dimen/margin_16"
android:gravity="right"
android:orientation="vertical">
</LinearLayout>
</RelativeLayout>
<ImageView
android:id="#+id/fab_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="#dimen/margin_16"
android:src="#drawable/floating_btn_menu" />
</android.support.design.widget.CoordinatorLayout>
But its not working. ToolBar is not collapsing with scroll event of RecyclerView.
Can anyone help me with this ?
Just remove exitUntilCollapsed from app:layout_scrollFlags and the CollapsingToolBar will start working.
PS: Tested
Related
i want to remove the divider that is shown in sc.
look at the green arrows
(i have 5 fragment that are loaded in the viewpager and my frame,when i touch the tabs ,fragments change)
and this is my xml code for this activity.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="ir.myinsta.myinstaapp.MainActivity">
<android.support.v7.widget.CardView
android:id="#+id/header_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height">
<RelativeLayout
android:id="#+id/actionbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/my_gradiant">
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
style="#style/MyDrawerArrowToggle"
android:layout_width="#dimen/toolbar_height"
android:layout_height="#dimen/toolbar_height"
android:layout_alignParentRight="true">
</android.support.v7.widget.Toolbar>
<ImageView
android:id="#+id/helpImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:layout_toLeftOf="#+id/main_toolbar"
android:clickable="true"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:id="#+id/gemLayout"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:clickable="true"
android:gravity="left"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp">
<ImageView
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="8dp"
android:src="#drawable/diamond_white" />
<TextView
android:id="#+id/gemCountTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"
android:layout_gravity="center_vertical"
android:textColor="#color/white" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:elevation="5dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="0dp"
android:background="#color/white"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="#00000000"
app:tabIndicatorHeight="0dp" />
<android.support.v4.view.ViewPager
android:id="#+id/myViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/tab_layout"
android:layout_below="#id/header_layout">
</android.support.v4.view.ViewPager>
<FrameLayout
android:id="#+id/fragment_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/header_layout"></FrameLayout>
<RelativeLayout
android:id="#+id/centerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:padding="150dp" />
</RelativeLayout>
I don't know this is a divider or elevation.please help me.
using styles? or what?
Try to add app:elevation="0dp" in your ToolBar.
Like this :-
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
style="#style/MyDrawerArrowToggle"
app:elevation="0dp"
android:layout_width="#dimen/toolbar_height"
android:layout_height="#dimen/toolbar_height"
android:layout_alignParentRight="true">
</android.support.v7.widget.Toolbar>
Or you can use:-
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
</android.support.design.widget.AppBarLayout>
I'm trying to collapse my header view while scrolling up the view pager.
In the following image relativelayout3 is the layout I want to collapse..
Something like playstore preview image collapse in app page..
I tried searching and the following line in relativelayout3, But it didnt work
app:layout_scrollFlags="scroll|enterAlways"
And this my complete xml,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/relativeLayout3"
app:layout_scrollFlags="scroll|enterAlways"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:id="#+id/toolbar"
android:background="#color/cornflower_blue_two"
android:elevation="5dp">
<ImageButton
android:id="#+id/more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:background="#null"
android:src="#drawable/ic_dots_vertical" />
<ImageButton
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginEnd="5dp"
android:layout_marginStart="10dp"
android:background="#null"
android:src="#drawable/ic_arrow_left" />
</RelativeLayout>
<ss.com.bannerslider.views.BannerSlider
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#color/blue"
android:layout_below="#id/toolbar"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_below="#+id/relativeLayout3">
<TextView
android:id="#+id/product"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Blah Blah"
android:textColor="#color/dark_gray"
android:textSize="25sp"
android:textStyle="bold" />
<TextView
android:id="#+id/brand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/product"
android:layout_below="#+id/product"
android:text="Blah inc."
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/ratings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/brand"
android:layout_alignBottom="#+id/brand"
android:layout_marginStart="10dp"
android:layout_toEndOf="#+id/brand"
android:background="#color/ratings"
android:paddingEnd="10dp"
android:paddingStart="10dp"
android:text="4.7"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/brand"
android:layout_marginTop="14dp"
app:tabGravity="fill"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/tabLayout" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Consider using CollapsingToolbarLayout. Please refer Collapsing Toolbar Example.
<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:layout_width="match_parent"
android:layout_height="250dp"
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">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/cartoon"
android:scaleType="centerCrop"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:layout_collapseMode="parallax" />
<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.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffe5e5"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="10dp">
<include layout="#layout/card_layout" />
<include layout="#layout/card_layout" />
<include layout="#layout/card_layout" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Output
More Reference
https://i.stack.imgur.com/j1sPI.png
Please see the link for layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#80000000"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin">
<ImageView
android:id="#+id/user_profile_empty"
android:layout_width="match_parent"
android:layout_height="#dimen/secondaryPhotoWidth"
android:scaleType="centerCrop"
android:visibility="gone" />
<android.support.v4.view.ViewPager
android:id="#+id/photo_pager"
android:layout_width="match_parent"
android:layout_height="#dimen/secondaryPhotoWidth" />
<com.ogaclejapan.smarttablayout.SmartTabLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/viewpagertab"
android:layout_width="wrap_content"
android:layout_height="#dimen/Profile.List.Item.Edit.Margin.Left"
android:layout_alignBottom="#+id/photo_pager"
android:layout_alignRight="#+id/photo_pager"
android:layout_gravity="bottom"
android:layout_marginBottom="#dimen/Profile.List.Item.Edit.Margin.Left"
android:layout_marginRight="#dimen/Profile.List.Item.Edit.Margin.Left"
android:layout_marginTop="#dimen/Profile.List.Item.Edit.Margin.Left"
app:stl_customTabTextLayoutId="#layout/custom_tab_circle"
app:stl_dividerColor="#color/transparent"
app:stl_dividerThickness="0dp"
app:stl_indicatorColor="#color/Sapio.RED"
app:stl_indicatorCornerRadius="#dimen/Profile.List.Item.Edit.Margin.Left"
app:stl_indicatorInterpolation="linear"
app:stl_indicatorThickness="#dimen/Profile.List.Item.Edit.Margin.Left"
app:stl_underlineColor="#color/transparent"
app:stl_underlineThickness="0dp" />
</RelativeLayout>
<!--<android.support.v7.widget.Toolbar-->
<!--android:id="#+id/MyToolbar"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="80dp"-->
<!--app:layout_collapseMode="parallax"/>-->
<RelativeLayout
android:id="#+id/likeIgnore_name_view"
android:layout_width="match_parent"
android:layout_height="#dimen/secondaryPhotoWidth">
<LinearLayout
android:id="#+id/like_ignor_view_upper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:layout_marginRight="15dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/skip_button"
android:layout_width="45dp"
android:layout_height="45dp"
android:src="#drawable/close" />
<ImageView
android:id="#+id/superLikeImage"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginLeft="#dimen/Default.PaddingMargin.Small"
android:src="#drawable/super_like" />
<ImageView
android:id="#+id/like_button"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginLeft="#dimen/Default.PaddingMargin.Small"
android:src="#drawable/heart" />
</LinearLayout>
<LinearLayout
android:id="#+id/nameView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:layout_marginLeft="25dp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/nameView_margin"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="visible" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="#dimen/abc_action_bar_subtitle_bottom_margin_material"
android:paddingRight="#dimen/abc_action_bar_subtitle_bottom_margin_material"
android:layout_weight="1"
android:gravity="center"
android:singleLine="true"
android:text="abc,31"
android:textColor="#color/Header.Text"
android:textSize="#dimen/Registration.Button.TextSize"
android:textStyle="bold" />
<TextView
android:id="#+id/distance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="#dimen/abc_action_bar_subtitle_bottom_margin_material"
android:paddingRight="#dimen/abc_action_bar_subtitle_bottom_margin_material"
android:layout_weight="1"
android:gravity="center"
android:singleLine="true"
android:text="abc,31"
android:textColor="#color/Header.Text"
android:textSize="#dimen/Registration.Button.TextSize" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/refine_matches_view"
style="#style/TextAppearanceThin"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentLeft="true"
android:layout_gravity="center_vertical"
android:layout_marginLeft="15dp"
android:layout_marginTop="20dp"
android:background="#drawable/filter_shape"
android:gravity="center"
android:minHeight="0dp"
android:text="#string/filter"
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textSize="#dimen/LoginScreen.Button.TextSize"
android:visibility="visible" />
<ImageButton
android:id="#+id/more_button"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginTop="20dp"
android:background="#drawable/ic_more_vert_white_36dp"
android:gravity="center"
android:minHeight="0dp"
android:src="#drawable/filter_shape"
android:visibility="visible" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/MyToolbar"
android:layout_width="match_parent"
android:layout_height="80dp"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<ImageView
android:id="#+id/user_photo"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="15dp"
android:gravity="center_vertical"
android:scaleType="fitCenter"
android:src="#drawable/match_bg"
android:visibility="visible"
app:elevation="10dp"
app:layout_anchor="#id/nameView"
app:layout_anchorGravity="bottom"/>
</android.support.design.widget.CoordinatorLayout>
<include
android:id="#+id/empty_profile_view"
layout="#layout/section_empty_list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
please help me to achieve above type from layout.As i have tried as above and when scrolling the image view go inside the toolbar and half of the image view not visible.
you can follow this link.
http://www.journaldev.com/13927/android-collapsingtoolbarlayout-example
<?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:fitsSystemWindows="true"
tools:context="com.journaldev.collapsingtoolbarlayout.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/expandedImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="#drawable/photo"
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"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#android:drawable/ic_dialog_info" />
</android.support.design.widget.CoordinatorLayout>
hopefully you will be helpe from it.
Actually the appbar is already having the elevation that's why it makes all the views to gets inside of itself.
So just you need to give app:elevation="0dp" to the appbar layout. It gives all other views freedom to stay over itself.
I am having following issues when using bottomsheet with snackbar:
Whenever Snackbar is shown then Bottoomsheet is getting inflated first.
Refer screenshot below
Here is the layout file, id of bottomSheet is details_bottom_sheet
<?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:animateLayoutChanges="true"
android:fitsSystemWindows="true"
tools:context="project.udacity.com.investishare.ui.ItemsDetailActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_subhead_desc"
style="#style/TextAppearance.AppCompat.Caption"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/subheading_margin_bottom"
android:layout_marginLeft="#dimen/subheading_margin_left"
android:layout_marginStart="#dimen/subheading_margin_left"
android:drawableLeft="#drawable/ic_subtree"
android:drawablePadding="#dimen/subheading_drawable_padding"
android:drawableStart="#drawable/ic_subtree"
android:gravity="center_vertical"
android:paddingLeft="#dimen/subheading_padding_left"
android:paddingStart="#dimen/subheading_padding_left"
android:textColor="#color/color_white"
android:textSize="#dimen/tv_subhead_desc_text_size"
tools:text="#string/tv_subhead_desc_sample_text" />
<TextView
android:id="#+id/tv_shared_with"
style="#style/TextAppearance.AppCompat.Caption"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv_subhead_desc"
android:layout_marginBottom="#dimen/subheading_margin_bottom"
android:layout_marginLeft="#dimen/subheading_margin_left"
android:layout_marginStart="#dimen/subheading_margin_left"
android:drawableLeft="#drawable/ic_shared_white"
android:drawablePadding="#dimen/subheading_drawable_padding"
android:drawableStart="#drawable/ic_shared_white"
android:gravity="center_vertical"
android:paddingEnd="#dimen/tv_shared_with_padding_right"
android:paddingLeft="#dimen/subheading_padding_left"
android:paddingRight="#dimen/tv_shared_with_padding_right"
android:paddingStart="#dimen/subheading_padding_left"
android:textColor="#color/color_white"
android:textSize="#dimen/tv_shared_with_text_size"
tools:text="#string/tv_shared_with_sample_text" />
<ImageView
android:id="#+id/iv_remove_sharing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_below="#id/tv_subhead_desc"
android:layout_marginEnd="#dimen/subheading_drawable_padding"
android:layout_marginRight="#dimen/subheading_drawable_padding"
android:clickable="true"
android:contentDescription="#string/cd_remove_sharing"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:padding="#dimen/subheading_drawable_padding"
android:src="#drawable/ic_cancel_white" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_items_detail" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_detail_activity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_shared_white" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="450dp"
android:id="#+id/details_bottom_sheet"
android:elevation="16dp"
android:background="#color/color_white"
app:layout_behavior="#string/bottom_sheet_behavior">
<TextView
android:id="#+id/bottom_sheet_header"
style="#style/Base.TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/textview_bg"
android:padding="10dp"
android:text="hello"
android:textSize="24sp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_bottom_sheet"
android:layout_width="match_parent"
android:layout_below="#id/bottom_sheet_header"
android:background="#color/color_white"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
I do not want the toolbar to collapse in the coordinator layout below. No matter what I do it collapses (the tabs do not collapse but the toolbar with the title does).
Second issue is that the nestedscrollview in the viewpager has a few EditTexts. On opening of softkeyboard when an edittext at the bottom is clicked the softkeyboard goes over the edittext. On closing the softkeyboard and then doing second attempt it successfully moves the edittext text up.
<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.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"
app:layout_collapseMode="none">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="36dp"
android:paddingLeft="6dp"
app:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:layout_marginBottom="?attr/actionBarSize"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_white_48dp"
android:visibility="gone" />
This is one of the views within the viewpager:
<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"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="22dp"
android:layout_marginRight="22dp"
android:layout_marginTop="15dp"
android:orientation="vertical">
<AutoCompleteTextView
android:id="#+id/symbolAutoCompleteBuy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:hint="Enter Symbol Here"
android:inputType="textCapCharacters" />
<TextView
android:id="#+id/companyNameBuy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginLeft="4dp"
android:textColor="#color/gray2"
android:textStyle="bold"
android:textSize="14sp" />
<TextView
android:id="#+id/currentPriceBuy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginLeft="4dp"
android:textColor="#color/gray2"
android:textStyle="bold"
android:textSize="14sp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<TextView
android:layout_weight="0.45"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="PURCHASE PRICE"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:orientation="horizontal">
<TextView
android:layout_weight="0.45"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="NUMBER OF SHARES"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:orientation="horizontal">
<TextView
android:layout_weight="0.45"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="PURCHASE DATE"
android:layout_gravity="center_vertical" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.35"
android:id="#+id/dateText"
android:layout_gravity="center_vertical" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:id="#+id/datePickerImage"
android:src="#drawable/ic_event_note_black_24dp" />
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Try this
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#color/primary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:src="#drawable/collapsing_toolbar_bg"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tab_layout"
android:background="?attr/colorPrimary"/>
</android.support.design.widget.AppBarLayout>
The atrribute:
app:layout_scrollFlags="scroll|exitUntilCollapsed"
prevents the collapsing toolbar layout from getting completely collapsed.
And replace android:src="#drawable/collapsing_toolbar_bg" with your image resource