I want to remove the end space of the navigation bar. I want the WhatsApp icon clip to the end. I also tried app:contentInsetEnd="0dp" and app:contentInsetRight="0dp". I couldn't find the answer to removing end space. please help me to solve this UI design issue. also, I tried a negative margin but the issue remains.
<?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=".activity.dashboard.ActivityDashboard">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEndWithActions="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/colabbol"
android:gravity="center"
android:text="Home Screen"
android:textColor="#color/colorBlack"
android:textSize="#dimen/_20sdp" />
<TextView
android:id="#+id/textview_ramumunimji"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:fontFamily="#font/colabreg"
android:gravity="center"
android:text="#string/RAMU_MUNIMJI"
android:textColor="#color/black"
android:textSize="#dimen/_13sdp"
android:visibility="gone" />
<ImageView
android:layout_marginEnd="#dimen/_5sdp"
android:id="#+id/imageviewRamumunimji"
android:visibility="gone"
android:layout_width="#dimen/_20sdp"
android:layout_height="#dimen/_20sdp"
android:layout_alignParentEnd="true"
android:scaleType="centerCrop"
android:layout_centerVertical="true"
android:src="#drawable/ic_whatsapp_1" />
<ImageView
android:id="#+id/imageviewWhatsaapshare"
android:visibility="visible"
android:layout_width="#dimen/_20sdp"
android:layout_height="#dimen/_20sdp"
android:layout_alignParentEnd="true"
android:scaleType="centerCrop"
android:layout_centerVertical="true"
android:src="#drawable/ic_whatsapp_1" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_activity_dashboard" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:visibility="gone"
app:srcCompat="#android:drawable/ic_dialog_email" />
<!--android:layout_margin="#dimen/fab_margin"-->
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Related
I have some issues with parallax for android, where I currently have an image on top (with text content in the center) and a button on the top right.
Now as I scroll, I want the text and button to remain fixed on screen. As I scroll past the appbar (toolbar), the toolbar should be fixed to the top and the button should be on top right of it, fixed to it , while the rest of the content stays scrollable.
Here's my code (without parallax), any clue how i can achieve this ?
<?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:id="#+id/cl_root_view"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false">
<LinearLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/Toolbar"
android:background="#color/white"
android:contentInsetStart="5dp"
android:contentInsetLeft="5dp"
android:contentInsetEnd="5dp"
android:contentInsetRight="5dp"
app:contentInsetEnd="5dp"
app:contentInsetLeft="5dp"
app:contentInsetRight="5dp"
app:contentInsetStart="5dp"
app:titleTextAppearance="#style/Toolbar.TitleText">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/toolbar_title"
style="#style/Toolbar.AltTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerInParent="true"
android:drawableStart="#drawable/ic_dots"
android:gravity="center_vertical" />
<ImageButton
android:id="#+id/my_button"
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="#+id/toolbar_title"
android:layout_marginEnd="20dp"
android:background="#drawable/ic_my_button"
android:tint="#color/black" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<ScrollView
android:id="#+id/scrollView"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF">
<TextView
android:id="#+id/roomsTitle"
style="#style/Headline2LeftBlack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_toStartOf="#+id/btnMore"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:text="#string/meeting_rooms"
android:textAppearance="#style/TextAppearance.Text.Chronicle"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btnMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/transparent"
android:fontFamily="sans-serif"
android:letterSpacing="0.02"
android:lineSpacingExtra="2sp"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:text="#string/all_rooms"
android:textColor="#color/reddish"
android:textSize="18sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v4.view.ViewPager
android:id="#+id/roomViewPager"
android:layout_width="match_parent"
android:layout_height="400dp"
android:clipToPadding="false"
android:overScrollMode="never"
android:paddingStart="15dp"
android:paddingTop="16dp"
android:paddingEnd="15dp"
android:paddingBottom="45dp"
app:layout_constraintTop_toBottomOf="#id/roomsTitle" />
<RelativeLayout
android:id="#+id/register_a_visitor_container"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_margin="5dp"
android:layout_marginTop="35dp"
android:background="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/roomViewPager">
<ImageView
android:id="#+id/register_visitor_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:tint="#color/reddish"
android:src="#drawable/ic_register_visitor_icon"
/>
<TextView
android:id="#+id/register_a_visitor_button"
style="#style/Body1RegLeftBlack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:letterSpacing="0.01"
android:layout_marginStart="16dp"
android:layout_toEndOf="#+id/register_visitor_icon"
android:lineSpacingExtra="8sp"
android:text="#string/register_a_visitor"
android:textAllCaps="false"
android:textAppearance="#style/TextAppearance.Text.Roboto.Regular" />
<ImageView
android:id="#+id/reset_password_chevron"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="16dp"
android:tint="#color/brownish_grey"
android:background="#drawable/ic_baseline_chevron_right_24px"
/>
</RelativeLayout>
<!-- TODO work on it after MVP -->
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:visibility="gone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/container">
<TextView
android:id="#+id/upcoming_events"
style="#style/Headline3LeftGrey"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginStart="25dp"
android:text="#string/upcoming_events" />
<android.support.v7.widget.RecyclerView
android:id="#+id/event_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/upcoming_events"
android:background="#color/black"
tools:listitem="#layout/item_repo_view" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
As you can see from the above layout. I want to add an image (and add the my_button on top right of that image) that is above the toolbar and scrolls off the screen as you scroll up while my button stays in its place until the toolbar gets on top ,after which the toolbar is affixed to the top as you scroll further up, unless you scroll down and the image is visible again and the button is no more fixed.
Please let me know if this is confusing,I will try to explain it better with diagrams if possible.
Any examples will be helpful! thanks!
Please refer below code, i have made something like 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/view_profile_parent_layout"
android:background="#color/splash_bg_color"
tools:context=".view_profile.ViewProfileActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_barLayout"
android:layout_width="match_parent"
android:layout_height="#dimen/view_profile_profile_app_bar_height"
android:elevation="#dimen/view_profile_app_bar_elevation"
android:theme="#style/ThemeOverlay.AppCompat.Light">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_bar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:titleEnabled="false"
android:fitsSystemWindows="true"
app:layout_scrollFlags="exitUntilCollapsed|scroll">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize">
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/view_profile_imageView"
android:layout_width="#dimen/view_profile_profile_width"
android:layout_height="#dimen/view_profile_profile_height"
android:src="#drawable/ic_profile_icon"
android:layout_centerHorizontal="true"
app:civ_border_width="#dimen/view_profile_profile_border_width"
app:civ_border_color="#color/textPrimary"/>
<TextView
android:id="#+id/view_profile_profile_name_textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/view_profile_profile_name_margin_top"
android:layout_below="#id/view_profile_imageView"
android:fontFamily="#font/roboto_regular"
android:text=""
android:textSize="#dimen/view_profile_profile_name_text_size"
android:gravity="center"
android:textColor="#color/white"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:layout_collapseMode="pin"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="#dimen/login_btn_elevation"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:id="#+id/back_button"
android:layout_width="#dimen/back_btn_layout_w"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_alignParentStart="true"
android:orientation="horizontal">
<Button
android:layout_gravity="center_vertical|center_horizontal"
android:layout_width="#dimen/back_btn_w"
android:layout_height="#dimen/back_btn_w"
android:layout_marginStart="#dimen/default_padding"
android:clickable="false"
android:background="#drawable/ic_arrow_back_white_24dp"
android:elevation="#dimen/login_btn_elevation" />
</LinearLayout>
<TextView
android:id="#+id/nav_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_marginStart="#dimen/nav_outer_h_space"
android:fontFamily="#font/roboto_regular"
android:text=""
android:gravity="center"
android:textColor="#color/white"
android:textSize="#dimen/title_size" />
<Button
android:id="#+id/edit_button"
android:layout_width="#dimen/back_btn_w"
android:layout_height="#dimen/back_btn_w"
android:layout_gravity="right"
android:layout_centerInParent="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="#dimen/nav_outer_h_space"
android:background="#drawable/edit_white_icon"
android:elevation="#dimen/login_btn_elevation" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Use
app:layout_scrollFlags="exitUntilCollapsed|scroll"
in collapsing layout
app:layout_collapseMode="pin"
in Toolbar
I have a collapsing toolbar and a tablayout in my layout file.
The tab layout only appears when the toolbar is fully collapsed.
My problem is, the tab layout appears like this:
But I want it to show completely, something like this:
I tried to change the gravity and the anchor (as it is wrapped up in a Coordinator layout) but I don't seem to be able to make it happen.
This is my 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"
android:id="#+id/relLayoutCountryInfo"
android:orientation="vertical"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/testeparainfo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/actionBarDivider">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/backgroundcollapsedtoolbarinfo"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="exitUntilCollapsed|scroll">
<ImageView
android:id="#+id/imgCountryInfoFoto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
<ImageView
android:id="#+id/imgCountryInfoEscuro"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:background="#drawable/background_pais_info"
android:scaleType="centerInside" />
<ImageView
android:id="#+id/imgEscuroCountryTopo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:cropToPadding="false"
android:scaleX="2"
android:scaleY="-1"
app:srcCompat="#drawable/blur_paises_filtro" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbaridinfo"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
<com.github.mmin18.widget.RealtimeBlurView
android:id="#+id/blurView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:realtimeBlurRadius="10dp"
app:realtimeOverlayColor="#8000" />
<TextView
android:id="#+id/txtNomePaisInfo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginStart="30dp"
android:layout_marginTop="520dp"
android:paddingBottom="40dp"
android:text="TextView"
android:textColor="#android:color/background_light"
android:textSize="35sp"
app:layout_anchor="#+id/txtNomeContinente"
app:layout_anchorGravity="left|bottom" />
<TextView
android:id="#+id/txtContinenteNome"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginStart="30dp"
android:layout_marginTop="520dp"
android:paddingBottom="10dp"
android:text="TextView"
android:textColor="#android:color/background_light"
android:textSize="25sp"
app:layout_anchor="#+id/testeparainfo"
app:layout_anchorGravity="left|bottom" />
<ImageView
android:id="#+id/imgVoltar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
app:srcCompat="#drawable/arrow_back_branca" />
<com.like.LikeButton
android:id="#+id/heart_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="340dp"
android:layout_marginTop="520dp"
android:paddingBottom="40dp"
app:icon_size="25dp"
app:icon_type="heart"
app:layout_anchor="#+id/txtNomeContinente"
app:layout_anchorGravity="right|bottom">
</com.like.LikeButton>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="#+id/includeTeste"
app:layout_anchorGravity="top|center">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Center" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left" />
</android.support.design.widget.TabLayout>
<include
android:id="#+id/includeTeste"
layout="#layout/content_scrolling" />
I am trying to add customized toolbar i want cart badge count so i added the relative layout to toolbar widget, when i didn't added relative layout in toolbar the title appeared in center but now removing relative layout causes problem in adding badge textview on cart, can anybody suggest what to do in this situation?
Toolbar.xml
<android.support.v7.widget.Toolbar
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/mytoolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetStart="0dp"
app:contentInsetRight="0dp"
app:contentInsetLeft="0dp"
android:clipToPadding="false"
app:contentInsetStartWithNavigation="0dp"
app:contentInsetEndWithActions="0dp"
android:background="#color/header">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/displaytexttoolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:layout_margin="#dimen/activity_vertical_margin"
android:text="TEXT_VIEW"
android:textColor="#color/white" />
<RelativeLayout
android:layout_gravity="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/cart_imagetoolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_gravity="end"
android:layout_margin="#dimen/activity_vertical_margin"
android:src="#drawable/cart_mobile_white" />
<TextView
android:id="#+id/tvBadge"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:background="#drawable/cart_circle_mobile"
android:gravity="center"
android:textColor="#color/white"
android:visibility="visible" />
</RelativeLayout>
</RelativeLayout>
It has to do with your layout_margin. Try the below:
<TextView
android:id="#+id/displaytexttoolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft|Right="?attr/actionBarSize"
android:text="TEXT_VIEW"
android:textColor="#color/white" />
Default value of the contentInsetStart (left padding in toolbar) is 16dp.
Change it to
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
Try this code:
use a Framelayout instead of RelativeLayout and apply android:gravity="center" for the Title
<android.support.v7.widget.Toolbar 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/mytoolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
android:theme="#style/ThemeToolbar"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/displaytexttoolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/activity_vertical_margin"
android:gravity="center"
android:text="TEXT_VIEW"
android:textColor="#color/color_black" />
<ImageView
android:id="#+id/cart_imagetoolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_gravity="end"
android:layout_margin="#dimen/activity_vertical_margin"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/tvBadge"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:gravity="center"
android:src="#mipmap/ic_launcher"
android:textColor="#color/color_black"
android:visibility="visible" />
</FrameLayout>
</android.support.v7.widget.Toolbar>
Output
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
I'm trying to implement new android design support library. I have a view pager inside appbar layout and a tab layout below it. Also I need to stick my toolbar and tab header layout on top while scrolling. When I try to scroll the content by scrolling in appbar layout, it didn't gets scrolled. But when I scrolled in content of tablayout, the whole content will gets scrolled. Here is my xml:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/outer_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffb4b4b4"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v4.view.ViewPager
android:id="#+id/top_viewpager"
android:layout_width="match_parent"
android:layout_height="320dp"
android:fitsSystemWindows="true" />
</RelativeLayout>
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="80dp"
android:fitsSystemWindows="true"
app:layout_scrollFlags="enterAlwaysCollapsed"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextColor="#color/white" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tab_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
I had a similar layout and it works well. Here I will post so that you can be inspired.
activity_profile.xml:
<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:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="me.danielpan.twitterlike.ProfileActivity">
<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_tool_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/Widget.AppCompat.ActionBar.TabText"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="?attr/colorAccent">
<include layout="#layout/profile_header_layout" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:backgroundTint="#color/app_color_primary"
app:collapseIcon="#drawable/header_avatar"
app:layout_collapseMode="pin"
app:navigationIcon="#mipmap/ic_launcher"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:subtitle="Incredible Pics"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="Twitter Profile" />
<!--app:layout_scrollFlags="scroll|exitUntilCollapsed"-->
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/TabLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:tabContentStart="2dp"
app:tabGravity="fill"
app:tabIndicatorColor="#color/app_color_accent"
app:tabIndicatorHeight="2dp"
app:tabMinWidth="24dp"
app:tabMode="fixed"
app:tabPadding="1dp"
app:tabSelectedTextColor="#color/text_color_secondary"
app:tabTextColor="#color/text_color" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:paddingEnd="0dp"
app:paddingStart="0dp" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
android:src="#color/text_color"
app:borderWidth="3dp"
app:elevation="2dp"
app:fabSize="mini"
app:layout_anchor="#id/coordinator_layout"
app:layout_anchorGravity="bottom|right|end"
app:pressedTranslationZ="3dp"
app:rippleColor="#color/text_color_secondary" />
</android.support.design.widget.CoordinatorLayout>
profile_header_layout.xml:
<?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="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:id="#+id/header_cover"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:scaleType="centerCrop"
android:src="#drawable/header_cover" />
<LinearLayout
android:id="#+id/header_detail_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/header_cover"
android:layout_centerHorizontal="true"
android:layout_marginLeft="5dp"
android:gravity="left"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<Button
android:id="#+id/header_btn_follow"
android:layout_width="65dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:background="#drawable/btn_blue_bg_selector"
android:gravity="center"
android:text="Follow"
android:textAllCaps="false"
android:textColor="#646464"
android:textSize="18sp" />
<Button
android:id="#+id/header_btn_favorite"
android:layout_width="65dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:layout_toLeftOf="#id/header_btn_follow"
android:background="#drawable/btn_white_bg_selector"
android:gravity="center"
android:text="Favorite"
android:textAllCaps="false"
android:textColor="#646464"
android:textSize="18sp" />
</RelativeLayout>
<TextView
android:id="#+id/header_nickname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="center"
android:text="Incredible Pics"
android:textAllCaps="false"
android:textColor="#000000"
android:textSize="20sp" />
<TextView
android:id="#+id/header_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="center"
android:text="#string/header_id_text"
android:textAllCaps="false"
android:textColor="#767676"
android:textSize="16sp" />
<TextView
android:id="#+id/header_brief"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="4dp"
android:gravity="left"
android:text="Good still exists in the world. Inspiring you in 140 characters or less."
android:textAllCaps="false"
android:textColor="#565656"
android:textSize="18sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_marginLeft="5dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left|center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/header_following"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|top"
android:text="12K"
android:textAllCaps="false"
android:textColor="#000000"
android:textSize="17sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="left|top"
android:text="FOLLOWING"
android:textAllCaps="false"
android:textColor="#898989"
android:textSize="17sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left|center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/header_follower"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|top"
android:text="23.5K"
android:textAllCaps="false"
android:textColor="#000000"
android:textSize="17sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="left|top"
android:text="FOLLOWER"
android:textAllCaps="false"
android:textColor="#898989"
android:textSize="17sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/header_avatar"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="#drawable/iv_bg_round_corner"
android:scaleType="centerCrop"
android:src="#drawable/header_avatar" />
</RelativeLayout>
To answer your question, first you need to know how the nest scroll works.
The nest scroll behavior implemented by AppBarLayout is mainly based the NestScrolling system. The system only start nest scroll event dispatching when the touch event start from the NestScrollingChild which is the RecyclerView inside the ViewPager.
Therefore, if you want to start nest scroll from the AppbarLayout, there is no easy way to just modify the xml to achieve it.