I have been using this layout file like this and the view kind of jitters whenever I scroll from the recycler view. This doesnt happen for all the pages but a very few ones. it could be an issue with the lay outing style or could be because of the image being rendered. here is a video link. Thanks.
<?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:id="#+id/f_s_s"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
tools:context=".ui.main.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...
>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
...
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlwaysCollapsed"
app:toolbarId="#id/toolbar">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#000"
android:fitsSystemWindows="true">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="300dp"
app:actualImageScaleType="fitStart"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:overlayImage="#drawable/gradient_cover_image_title"
app:viewAspectRatio="1"
tools:actualImageUri="#sample/seriesbackground"
tools:foreground="#drawable/gradient_cover_image_title"
tools:scaleType="centerCrop"
tools:src="#sample/seriesbackground" />
<TextView
android:id="#+id/txt_series_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
.../>
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/series_author_avatar"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginStart="#dimen/activity_horizontal_margin"
app:actualImageScaleType="centerCrop"
app:actualImageUri="#sample/banner"
app:backgroundImage="#color/white"
app:layout_constraintBottom_toBottomOf="#id/toolbar_image"
app:layout_constraintStart_toStartOf="parent"
app:roundAsCircle="true"
app:roundingBorderColor="#color/white"
app:roundingBorderWidth="1dp"
tools:src="#sample/banner" />
<TextView
android:id="#+id/series_author_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
<TextView
android:id="#+id/series_parts_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
... />
<ImageView
android:id="#+id/series_rating_star"
android:layout_width="20dp"
android:layout_height="0dp"
.../>
<TextView
android:id="#+id/series_rating_display"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
.../>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:menu="#menu/toolbar_share_menu"
app:navigationIcon="#drawable/ic_arrow_back_white_24dp"
app:popupTheme="#style/AppTheme.AppBarOverlay"
app:titleTextAppearance="#style/PC.TextView.SeriesTitle" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_series_parts_list_exp"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/margin_xllarge"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/lyt_info"
tools:itemCount="6"
android:nestedScrollingEnabled="true"
tools:listitem="#layout/item_series_part" />
<ProgressBar
android:id="#+id/progress_series_parts_exp"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:indeterminate="true" />
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Related
I have a BottomNavigationView Bar on my App. This bar does not show on where it is placed until it's scrolled.
How can I change the Behavior so that the bar shows even without scrolling. That is I want a permanent Fixed position to the bottom, if user does not scroll id remains there, if they scroll it remains there still.
Here is my app_bar xml code
<?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="com.sckoolboy.app.AspirantOfflineActivity">
<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:visibility="gone"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:fitsSystemWindows="true"
android:background="?android:attr/windowBackground"
android:foreground="?attr/selectableItemBackground"
app:menu="#menu/master_bottom_navigation"
app:elevation="10dp"
app:labelVisibilityMode="labeled"
app:itemIconTint="#color/accent"
app:itemTextColor="#color/black"
app:itemBackground="#color/bottomNavigationBackground"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And below is how this bar appears on my main activity
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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"
tools:context="com.sckoolboy.app.AspirantOfflineActivity"
tools:showIn="#layout/app_bar_main"
style="#style/parent.contentLayout">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textViewUser"
style="#style/viewParent.headerText"
android:maxLines="2"
android:text="Aspirant Mode"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"/>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profileCircleImageView"
android:layout_width="60dp"
android:layout_height="60dp"
app:civ_border_width="2dp"
app:civ_border_color="#color/colorAccent"
android:src="#drawable/icon"
android:layout_alignParentRight="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
app:cardCornerRadius="16dp"
app:cardPreventCornerOverlap="false"
app:cardBackgroundColor="#color/colorAccent"
android:minHeight="200dp"
android:layout_alignParentTop="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dp"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome to \nSckoolboy"
android:textColor="#color/whiteBodyColor"
android:textStyle="bold"
android:textSize="20sp"/>
<TextView
android:layout_marginTop="15dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="20% Complete"
android:textColor="#color/whiteBodyColor"
android:textStyle="bold"
android:textSize="13sp"/>
</LinearLayout>
<ImageView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:cropToPadding="true"
android:src="#drawable/hero"
android:elevation="44dp"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<TextView
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:text="Popular"
style="#style/viewParent.headerText"/>
<TextView
android:layout_alignParentRight="true"
style="#style/viewParent"
android:text="See All"
android:layout_centerVertical="true"
android:textSize="#dimen/headerMoreTextSize"
android:textColor="#color/colorAccent"
android:textStyle="bold"/>
</RelativeLayout>
<!--remove the below layout with recycler view, use card poplar courses as model for design-->
<LinearLayout
android:layout_width="match_parent"
android:layout_marginBottom="50dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/includeCallEnd0"
layout="#layout/offline_exam_etest"/>
<include
android:id="#+id/includeCallEnd0"
layout="#layout/sckoolboy_community"/>
<include
android:id="#+id/includeCallEnd0"
layout="#layout/sckoolboy_radio"/>
</LinearLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
You can get the BottomNavigationView out of the CoordinatorLayout, and add both to another root layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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.sckoolboy.app.AspirantOfflineActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/navigation">
<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:visibility="gone"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:fitsSystemWindows="true"
android:background="?android:attr/windowBackground"
android:foreground="?attr/selectableItemBackground"
app:menu="#menu/master_bottom_navigation"
app:elevation="10dp"
app:labelVisibilityMode="labeled"
app:itemIconTint="#color/accent"
app:itemTextColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:itemBackground="#color/bottomNavigationBackground"/>
</androidx.constraintlayout.widget.ConstraintLayout>
I am having an issue with the display of the backdrop menu from material-ui for android together with a nested scroll view which comes on top of the backdrop when scrolling, I have been trying to use the elevation property on different elements hoping that it will work but I got no where;
this is the layout for main_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:clipChildren="false"
android:clipToPadding="false"
tools:context=".MainFragment">
<LinearLayout
style="#style/Widget.Provenance.Backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="88dp">
<include layout="#layout/backdrop_menu" />
</LinearLayout>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="8dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/app_bar"
style="#style/Widget.Provenance.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="10dp"
android:paddingStart="12dp"
android:paddingLeft="12dp"
android:paddingEnd="12dp"
android:paddingRight="12dp"
app:layout_scrollFlags="scroll|enterAlways"
app:contentInsetStart="0dp"
app:navigationIcon="#drawable/menu_icon"
app:title="#string/app_name" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/nested_grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:background="#color/colorPrimary"
android:clipToPadding="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include
android:id="#+id/main_lay"
layout="#layout/main_menu_layout" />
</androidx.core.widget.NestedScrollView>
</FrameLayout>
then main_menu_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linLayMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="15dp">
<TextView
android:id="#+id/titleTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="18dp"
android:gravity="center_horizontal"
android:text="#string/app_name"
android:textAlignment="center"
android:textColor="#color/colorPrimaryDark"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textSize="30sp" />
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonCreateUserMainMenu"
android:layout_marginTop="26dp"
style="#style/Widget.Provenance.Button.Menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="#string/button_create_user_main_menu" />
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonAddProductMainMenu"
style="#style/Widget.Provenance.Button.Menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="#string/button_add_product_main_menu" />
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonTransferProductMainMenu"
style="#style/Widget.Provenance.Button.Menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="#string/button_transfer_product_main_menu" />
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonShowAccountQRMainMenu"
style="#style/Widget.Provenance.Button.Menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="#string/button_show_account_qr_main_menu" />
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonQRCodeScanMainMenu"
style="#style/Widget.Provenance.Button.Menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/button_qrcode_scan_main_menu" />
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonOne"
style="#style/Widget.Provenance.Button.Menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/button_one" />
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonTwo"
style="#style/Widget.Provenance.Button.Menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/button_two" />
<com.google.android.material.button.MaterialButton
android:id="#+id/buttonTest"
style="#style/Widget.Provenance.Button.Menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test" />
</LinearLayout>
then backdrop_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<com.google.android.material.button.MaterialButton
style="#style/Widget.Provenance.Button.TextButton"
android:id="#+id/menuItemLogin"
android:textColor="#color/colorWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/backdrop_menu_login" />
<com.google.android.material.button.MaterialButton
style="#style/Widget.Provenance.Button.TextButton"
android:id="#+id/menuItemCommercial"
android:visibility="gone"
android:textColor="#color/colorWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/backdrop_menu_commercial" />
<com.google.android.material.button.MaterialButton
style="#style/Widget.Provenance.Button.TextButton"
android:id="#+id/menuItemOption2"
android:textColor="#color/colorWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/backdrop_menu_option2" />
<View
android:layout_width="56dp"
android:layout_height="1dp"
android:layout_margin="16dp"
android:background="?android:attr/textColorPrimary" />
<com.google.android.material.button.MaterialButton
style="#style/Widget.Provenance.Button.TextButton"
android:id="#+id/menuItemProducts"
android:textColor="#color/colorWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/backdrop_menu_products" />
<com.google.android.material.button.MaterialButton
style="#style/Widget.Provenance.Button.TextButton"
android:id="#+id/menuItemLogout"
android:textColor="#color/colorWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/backdrop_menu_logout" />
</merge>
in the following picture, in red are buttons that should not be on top of the backdrop menu, when i scroll in the main menu layout i want it to go under the backdrop menu; thanks in advance
Try using CollapsingToolbarLayout
<?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"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<LinearLayout
style="#style/Widget.Provenance.Backdrop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="88dp">
<include layout="#layout/backdrop_menu" />
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/app_bar"
style="#style/Widget.Provenance.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="10dp"
android:paddingStart="12dp"
android:paddingLeft="12dp"
android:paddingEnd="12dp"
android:paddingRight="12dp"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:navigationIcon="#drawable/menu_icon"
app:title="#string/app_name" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/nested_grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:clipToPadding="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include
android:id="#+id/main_lay"
layout="#layout/main_menu_layout" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
My Problem: The Content of the included RelativeLayout/RecyclerView does not stop before the buttons displayed at the bottom of the screen (see Fig. 1). Therefore the last Elements inside the RecyclerView are overlapped by the buttons after scrolling (see Fig. 2).
My current source 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:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.julian.brainy.ProjectListActivity">
<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"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:theme="#style/MyActionBarTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
app:expandedTitleGravity="bottom"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<ImageView
android:id="#+id/bgImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:contentDescription="#null"
android:minHeight="100dp"
android:scaleType="fitXY"
android:src="#drawable/bg5"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" />
<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/MyActionBarTheme.PopupOverlay"
app:titleTextColor="#color/brainyPrimary" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include
layout="#layout/content_project_list" />
<Button
android:id="#+id/projectOverviewCreateProject"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_gravity="bottom"
android:layout_marginBottom="60dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:stateListAnimator="#null"
android:layout_marginTop="5dp"
android:background="#color/brainyPrimary"
android:text="#string/btn_create_project"
android:textColor="#color/brainyWhite" />
<Button
android:id="#+id/btndirectlearning"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:stateListAnimator="#null"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:background="#color/brainyPrimaryExperimental"
android:text="#string/btn_start_timer_project_list"
android:textColor="#color/brainyWhite" />
</android.support.design.widget.CoordinatorLayout>
and the included 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/projectOverviewCreateProject"
android:background="#android:color/transparent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".ProjectListActivity"
tools:showIn="#layout/activity_project_list">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/projectOverviewCreateProject"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:clipToPadding="false"
android:scrollbars="vertical" />
</RelativeLayout>
I tried to use a ConstraintLayout, but it broke the AppBar.
Update: Now the included Layout exceeds the top of the AppBarLayout.
Source code changed:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/content_project_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
app:layout_constraintBottom_toTopOf="#id/projectOverviewCreateProject"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/projectOverviewCreateProject"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:background="#color/brainyPrimary"
android:stateListAnimator="#null"
android:text="#string/btn_create_project"
android:textColor="#color/brainyWhite"
app:layout_constraintBottom_toTopOf="#id/btndirectlearning"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintWidth_default="spread"
tools:layout_editor_absoluteX="5dp"
tools:layout_editor_absoluteY="459dp" />
<Button
android:id="#+id/btndirectlearning"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:background="#color/brainyPrimaryExperimental"
android:stateListAnimator="#null"
android:text="#string/btn_start_timer_project_list"
android:textColor="#color/brainyWhite"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintWidth_default="spread"
tools:layout_editor_absoluteX="222dp" />
</android.support.constraint.ConstraintLayout>
Put the and the two Buttons in a ConstraintLayout. Then, give the buttons the right rules so they will stay at the bottom of the layout, and modify the tag to look like this:
<include
android:layout_height="0dp"
android:layout_width="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/projectOverviewCreateProject"
layout="#layout/content_project_list" />
EDIT:
to solve the issue related to the RecyclerView overlapping the appBar, just add this to your ConstraintLayout:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
My problem is, i want use RecyclerView with CollapsingToolbarLayout. But the issue is CollapsingToolbarLayout not scrolling when RecyclerView scrolling. I cant use Nested Scroll to put RecyclerView, because i want load more data to RecyclerView
<android.support.design.widget.AppBarLayout
android:id="#+id/collapsing_toolbar_appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?themeColorBack">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="?themeColorBack"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/image_contain_relative"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="invisible">
<android.support.constraint.ConstraintLayout
android:id="#+id/first_image_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/first_post"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="10dp"
android:adjustViewBounds="true"
android:contentDescription="#string/latest_post"
android:scaleType="fitXY"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/first_image_container"
android:background="#bb000000"
android:orientation="vertical">
<TextView
android:id="#+id/first_image_category"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:paddingLeft="8dp"
android:paddingStart="8dp"
android:textColor="#color/white"
android:textSize="14sp"
tools:ignore="RtlSymmetry" />
<TextView
android:id="#+id/first_image_date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:paddingLeft="8dp"
android:paddingStart="8dp"
android:textColor="#color/white"
android:textSize="14sp"
tools:ignore="RtlSymmetry" />
</LinearLayout>
</RelativeLayout>
<TextView
android:id="#+id/first_post_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:textColor="?themeHeadColorText"
android:textSize="16sp"
android:textStyle="bold" />
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- app:layout_behavior attribute value settings make app tool bar appear while RecyclerView scroll. -->
<android.support.v7.widget.RecyclerView
android:id="#+id/post_recycle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="60dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Try like this I hope this will be full fill your requirements.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="250dp"
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="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="#android:color/transparent">
<ImageView
android:id="#+id/ivFeature"
android:layout_width="match_parent"
android:layout_height="match_parent"
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="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/card_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
You can use like this.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/layout_toolbar" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="4dp" />
</LinearLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="18dp"
android:src="#drawable/ic_add" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I have a Recyclerview and two other views(ImageView and TextView) above Recyclerview.
I want that initially Recyclerview should stay below ImageView and TextView but when the user scrolls the Recyclerview it should come over the other views.
XML:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBlack">
<ImageView
android:id="#+id/ivProfile"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dimen_vertical_half_margin"
android:fontFamily="#font/roboto_medium"
android:gravity="center"
android:textColor="#color/colorWhite"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivProfile"
tools:text="Prithvi Bhola" />
<TextView
android:id="#+id/tvEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_regular"
android:textColor="#color/colorWhite"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvName"
tools:text="prithvi.leo08#gmail.com" />
<TextView
android:id="#+id/tvLiked"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dimen_horizontal_margin"
android:layout_marginTop="#dimen/dimen_vertical_margin"
android:fontFamily="#font/roboto_medium"
android:text="#string/liked"
android:textAllCaps="true"
android:textColor="#color/colorWhite"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvEmail" />
<ImageView
android:id="#+id/ivStaggered"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginEnd="#dimen/dimen_horizontal_margin"
android:layout_marginStart="#dimen/dimen_horizontal_margin"
android:layout_marginTop="#dimen/dimen_vertical_margin"
android:src="#drawable/ic_view_compact_black_24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvEmail" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rvLikedPalettes"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="#dimen/dimen_vertical_margin"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvLiked" />
<TextView
android:id="#+id/tvEmptyList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_regular"
android:text="#string/empty_liked_palette"
android:textColor="#color/colorWhite"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvLiked" />
</android.support.constraint.ConstraintLayout>
You can achieve it via collapsing toolbar layout.
below is sample code.
<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.v7.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/appbar"
android:padding="10dp"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_height="300dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?colorPrimary"
app:expandedTitleMarginStart="49dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
</YOUR HEADER LAYOUT HERE/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_flexible_space"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<?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:fitsSystemWindows="true">
<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="#dimen/dp350"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header_image"
android:layout_width="match_parent"
android:layout_height="#dimen/dp350"
android:contentDescription="#string/app_name"
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="?attr/actionBarSize"
android:title="#string/app_name"
android:visibility="gone"
app:layout_collapseMode="none"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:clipToPadding="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
In your hierarchy, make sure your RecyclerView is placed above the ImageView and Textview. Then you can just add the following properties on your recyclerview in the xml :
android:clipToPadding="false"
android:paddingTop="xxxdp"
The property clipToPadding to false is the key !
If you need a dynamic paddingTop, you can programmatically get the bottom of the view which must be right above the Recyclerview and set it as the paddingTop on your RecyclerView.
Note : Your recyclerview background must be transparent and you have to set à non-transparent background on each of your recyclerview's and it will work.
Here is a quick example with FrameLayout but you can use a ConstraintLayout if you prefer.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher_foreground"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MY TEXT"
/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingTop="200dp"
/>
</FrameLayout>
Edit : Here is the same example with ConstraintLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher_foreground"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MY TEXT"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageView"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingTop="200dp"/>
</android.support.constraint.ConstraintLayout>
I don't know why do you think that fragment in viewpager can't hold collapsing toolbar. Because it can be done with all answers given above. As none of them mentioned the java code for it let me add one for you.
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true">
//your code here
</android.support.design.widget.CollapsingToolbarLayout>
In the java code of your fragment call your collapsing toolbar like this.
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_one, container, false);
CollapsingToolbarLayout collapsingToolbarLayout=(CollapsingToolbarLayout)rootView.findViewById(R.id.collapse_toolbar);
return rootView;
}
And you will have your desired behaviour.
EDIT
Adding a demo gif for preview.