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"
Related
I used SharedElement Transition to go DetailsActivity in my recyclerView's onItemClick method. But when the item which is at the bottom is clicked it first it gets on top op BottomNavigationView an then Transition happens. OnBackPressed it is the same. Also it get ons top of mechanic keys in emulator. How to fix it?
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity.MainActivity"
android:id="#+id/main_activity"
>
<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="0dp"
android:id="#+id/childofMain"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation_view"
android:layout_marginTop="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_below="#+id/bottom_navigation_view">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#null"
android:layout_below="#+id/mainRecyclerView"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:titleEnabled="false"
app:expandedTitleMarginBottom="94dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?colorPrimary"
android:layout_below="#+id/mainRecyclerView"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:id="#+id/toolbar_image"
app:layout_collapseMode="parallax"
/>
<ImageView android:layout_width="120dp"
android:layout_height="36dp"
android:id="#+id/mainOdulluDUzyazi"
android:layout_marginTop="40dp"
android:scaleType="fitCenter"
android:layout_gravity="center|top"
app:layout_collapseMode="parallax"
/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/trendyarismalar"
android:text="Trend Yarışmalar"
android:textColor="#color/white"
android:layout_gravity="center|top"
android:layout_marginTop="100dp"
android:textSize="20sp"
android:textStyle="bold"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/mainRecyclerView"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#null"
android:layout_gravity="bottom"
app:behavior_overlapTop="150dp"
android:layout_marginRight="15dp"
android:layout_marginLeft="15dp"
android:layout_below="#+id/bottom_navigation_view"
/>
</android.support.design.widget.CoordinatorLayout>
<com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
android:id="#+id/bottom_navigation_view"
android:layout_width="match_parent"
android:layout_height="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_navigation_menu"
android:background="?android:attr/windowBackground"
app:itemIconTint="#drawable/nav_item_color_state"
app:itemIconSize="25dp"
app:layout_constraintCircleRadius="5dp"
app:labelVisibilityMode="unlabeled"
>
</com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx>
`
You may try to use this;
<item name="android:windowSharedElementsUseOverlay">false</item>
Note: Put this line to your application base theme inside styles.xml file.
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.
I'm trying to keep a button fixed at bottom when user's scrolling a RecyclerView. This is what I tried:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".AddProduct">
<android.support.design.widget.AppBarLayout
android:id="#+id/product_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="16dp"
android:orientation="vertical">
<TextView
android:id="#+id/tv_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="teste"
android:textColor="#161616"
android:textSize="22sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/rv_test"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
<Button
android:id="#+id/btn_product_add_product"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="138dp"
android:background="#color/colorPrimary"
android:text="Test button"
android:textColor="#color/textColorPrimary" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
And then I used AppBarLayout.OnOffsetChangedListener to adjust button margin according by user scrolling.
It worked, but if user scroll a little fast, it can't adjust the margin very well and the button don't appear to be fixed. It's not reliable.
So, how is the best way to do this?
Maybe you can use a ConstraintLayout instead of your RelativeLayout as below:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/rv_test"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/btn_product_add_product"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/btn_product_add_product"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#color/colorPrimary"
android:text="Test button"
android:textColor="#color/textColorPrimary" />
</android.support.constraint.ConstraintLayout>
The following is my layout xml. The problem now is that the BottomNavigationView is overlapping the FrameLayout. I wanted the FrameLayout to stretch to the top of the BottomNavigationView.
I tried with trick such as adding paddingBottom in the FrameLayout but I wonder if there is other better solution. Thanks.
<?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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<include layout="#layout/user_app_bar"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="#menu/navigation"
app:itemTextColor="#color/colorPrimaryDark"
app:itemIconTint="#color/colorPrimaryDark"
/>
<FrameLayout
android:id="#+id/fragment_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="58dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<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_anchorGravity="bottom|end"
app:layout_anchor="#id/app_bar"
app:srcCompat="#drawable/ic_edit_white_24px" />
</android.support.design.widget.CoordinatorLayout>
UPDATE: more information on the user_app_bar.xml. It contains a CollapsingToolbarLayout.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout 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/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_behavior="co.domain.DisableAppBarLayoutBehaviour"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false"
app:contentScrim="?attr/colorPrimary">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
android:contentDescription=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:ignore="ContentDescription"
android:background="#color/gray"/>
<TextView
android:id="#+id/profileName"
style="#style/textShadow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="0dp"
android:text="user name"
android:textAlignment="center"
android:textSize="18sp"
android:textColor="#fff"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="#+id/profileImage"
app:layout_constraintRight_toRightOf="#+id/profileImage"
app:layout_constraintTop_toBottomOf="#+id/profileImage" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profileImage"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:alpha="0.5"
android:src="#drawable/ic_account_circle_black_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<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>
There is simple solution for your issue. That is to put marginBottom in FrameLayout on 56dp which is according to documentation height of BottomNavigationView. I'm not sure is it changable acording to mobile screens. Even the documentation says nothing about changing of height. And I used it in some of my apps and I didn't find that height of BottomNavigationView is changing. But just in case check. Hope this will help.
Place CoordinatorLayout and BottomNavigationView inside RelativeLayout
with BottomNavigation android:layout_alignParentBottom="true" and CoordinatorLayout layout above with android:layout_above="#+id/{BottomNavigationView-ID}"
please check below layout
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
</data>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/homeCoordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bnHome" //above bottom navigation
>
<android.support.design.widget.AppBarLayout
android:id="#+id/homeAppbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<RelativeLayout
android:id="#+id/rlTopLayout"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize"
android:layout_alignParentTop="true"
android:background="#color/white"
android:orientation="horizontal"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v7.widget.AppCompatImageView
android:id="#+id/ivHomeLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/_minus15sdp"
android:src="#mipmap/launcher_logo" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tvHomeTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:layout_toEndOf="#+id/ivHomeLogo"
android:layout_toRightOf="#+id/ivHomeLogo"
android:text="#string/app_name"
android:textColor="#color/colorPrimary"
android:textSize="#dimen/_16ssp"
android:textStyle="bold" />
<android.support.v7.widget.AppCompatImageView
android:id="#+id/ivHomeSurprise"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/ivHomeSearch"
android:layout_toStartOf="#id/ivHomeSearch"
android:paddingBottom="#dimen/_13sdp"
android:paddingTop="#dimen/_13sdp"
android:src="#mipmap/surprise_icon_blue" />
<android.support.v7.widget.AppCompatImageView
android:id="#+id/ivHomeSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:padding="#dimen/_10sdp"
app:srcCompat="#drawable/ic_search_grey" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/flHomeContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bnHome"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" // align parent bottom true
app:itemBackground="#color/white_smoke"
app:itemIconTint="#color/bnv_color_state"
app:itemTextColor="#color/bnv_color_state"
app:menu="#menu/bottom_navigation_main"
app:onNavigationItemSelected="#{(item)->vm.onNavigationItemSelected(item)}" />
</RelativeLayout>
<android.support.v4.widget.ContentLoadingProgressBar
android:id="#+id/clpb_progress"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="#{vm.isLoading}" />
</FrameLayout>
Good a better solutions without having to hardcode the bottomView
You can put it inside a ConstraintLayout and make the height of the content 0dp and also set it's bottomToTop="#id/bottomViewId" or whatever is the Id you put to the bottomViewNavigator.
Here is an example.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".StartActivity">
<fragment
android:id="#+id/nav_controller"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/bottom_navigation"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:defaultNavHost="true"
app:navGraph="#navigation/nav_graph" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="#color/colorPrimary"
app:itemIconTint="#android:color/white"
app:itemTextColor="#android:color/white"
app:menu="#menu/bottom_navigation_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
/Try to replace your code with 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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<include layout="#layout/user_app_bar"/>
<FrameLayout
android:id="#+id/fragment_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="58dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<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_anchorGravity="bottom|end"
app:layout_anchor="#id/app_bar"
app:srcCompat="#drawable/ic_edit_white_24px" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="#menu/navigation"
app:itemTextColor="#color/colorPrimaryDark"
app:itemIconTint="#color/colorPrimaryDark"
/>
</android.support.design.widget.CoordinatorLayout>
add this line in your BottomNavigationView
android:background="?android:attr/windowBackground"
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/app_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:labelVisibilityMode="labeled"
android:background="?android:attr/windowBackground"
app:menu="#menu/app_navigation" />
I created a collapsing toolbar and placed a recyclerview below it but when I run the app the cardviews inside the recycleview overlaps the image of the collapsing toolbar .How can I fix this
MainActivity.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"
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:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/rv"
android:orientation="vertical"
android:clipToPadding="false"
android:layout_marginTop="?attr/actionBarSize"
android:layout_below="#+id/image"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:layout_anchor="#id/app_bar_layout"
style="#style/fab"
app:theme="#style/ThemeOverlay.AppCompat.Light"
app:layout_anchorGravity="bottom|right|end"
/>
</android.support.design.widget.CoordinatorLayout>
Item.xml (layout containing the cardview inside the recyclerview)
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.co nbm/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
app:cardElevation="6dp"
android:padding="6dp"
android:id="#+id/cv">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.co nbm/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#4682b4"
android:padding="16dp"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="16dp"
android:src="#drawable/li"
android:id="#+id/imageView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:text="Aayush Chaubey"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/imageView"
android:textColor="#ffffff"
android:textSize="30sp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView2"
android:text="app developer"
android:textColor="#ffffff"
android:textSize="25sp"
android:layout_centerVertical="true"
android:layout_alignLeft="#+id/textView"
android:layout_alignStart="#+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Show Capsule"
android:textColor="#00bfff"
android:textSize="20sp"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:id="#+id/textView3"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</android.support.v7.widget.CardView>
Well, I think you need to add this line app:layout_behavior="#string/appbar_scrolling_view_behavior"
in your RecyclerView
Eg:
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Most importantly you will also need to add
xmlns:app="http://schemas.android.com/apk/res-auto"
in coordinatorLayout tag.
Another point: Make sure you're using com.android.support:recyclerview-v7:22.2.0 with prior version it might not work properly
Hope it helps.