Android my bottom app a bar is overlapping my recyclerview - android

I am trying to fix this issue where my recyclerview is overlapped by bottomappbar. Here is my layout code .
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/notes_container_layout"
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"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:padding="8dp"
android:text="#string/myTasksHeader"
android:textColor="#color/appBarTextColor"
android:textSize="40dp" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:padding="16dp"
android:scrollbars="none"
tools:listitem="#layout/note_list_item" />
</ScrollView>
</LinearLayout>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:backgroundTint="#color/colorPrimary"
app:hideOnScroll="false"
app:menu="#menu/appbar_menu"
app:navigationIcon="#drawable/ic_menu" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/add_note_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/medium_margin"
android:backgroundTint="#color/colorPrimary"
app:layout_anchor="#id/bottomAppBar"
app:srcCompat="#drawable/ic_add_black_24dp"
tools:ignore="VectorDrawableCompat" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
when I fill my list I cant reach my last item in the recycler view. I tried adding margin but it did not work.

Two ways to achieve this
Hide BottomAppBar layout while scrolling ..
Add following attribute inside BottomAppBar
app:fabAlignmentMode="center"
app:fabCradleMargin="10dp"
app:fabCradleRoundedCornerRadius="10dp"
app:hideOnScroll="true"
If you do not want to hide BottomAppBar then add margin from bottom
in RecyclerView
android:layout_marginBottom="?actionBarSize"

The problem with using margin is that the RecyclerView won't show through the FAB. A better solution than using margin would be to add extra space at the bottom of the RecyclerView using padding.
android:clipToPadding="false"
android:paddingBottom="?actionBarSize"

Related

How to prevent BottomAppBar from overlapping content

I would like to use a CoordinatorLayout to include a BottomAppBar at the bottom of the screen, and to display some content in the remaining space (for example using a ConstraintLayout).
If I add a ConstraintLayout to the CoordinatorLayout, and then I add a button which is placed at the bottom of the ConstraintLayout, the button is covered by the BottomAppBar.
I would like the ConstraintLayout to use up all the vertical space, except for where the BottomAppBar is located, so that the button is not covered.
I tried including app:layout_behavior="#string/appbar_scrolling_view_behavior" in the ConstraintLayout, as suggested on some sites, but it doesn't work.
Also, setting app:layout_insetEdge="bottom" in the BottomAppBar, and then setting app:layout_dodgeInsetEdges="bottom" in the ConstraintLayout does not work properly, since the ConstraintLayout then overflows at the top of the screen (but the bottom is not covered anymore).
Below is the xml layout file where the BottomAppBar covers the button.
Thank you
<?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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<Button
android:id="#+id/myButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
style="#style/Widget.MaterialComponents.BottomAppBar.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I haven't found a proper fix, but what works for me is adding a margin to the one overlapping the BottomAppBar,
android:layout_marginBottom="?attr/actionBarSize"
e.g.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:layout_marginBottom="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<Button
android:id="#+id/myButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Prevent AppBarLayout.ScrollingViewBehavior from adding top margin to the view?

I'm trying to achieve a layout where my view will extend all the way across the screen, under the ActionBar, and the ActionBar will be transparent. I also need the ActionBar and BottomNavigationView to hide on scroll, so I'm using CoordinatorLayout.
I'm using the AppCompat theme with the attribute <item name="windowActionBarOverlay">true</item> in order to have my views extend under the ActionBar. However, after adding app:layout_behavior="#string/appbar_scrolling_view_behavior" to my container Fragment, the view gets placed below the ActionBar.
Is there a way to prevent this part of the appbar_scrolling_behaviour? I've tried without the behaviour, but the scrolling of the AppBar is not synced witht he RecyclerView scrolling underneath it. Thank you!
Here's a gif of the problem
P.S.: I'm trying to use the Android Navigation Component, so I'm following a single activity, multi fragment architecture, if that matters.
Try this code and make some changes because i used androidx..
make main layout like this way..
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/white"
android:theme="#style/MyToolbar"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:titleTextAppearance="#style/MyToolbar">
<ImageView
android:id="#+id/headerIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_6sdp"
android:src="#drawable/ic_edit_location_black"
android:visibility="gone" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_6sdp">
<TextView
android:id="#+id/header"
style="#style/MyToolbar"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:gravity="center_vertical"
android:textColor="#color/primary"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/ivSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/_10sdp"
android:src="#drawable/search_icon"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:id="#+id/activity_main_container"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/bottomContainer"
app:layout_constraintTop_toBottomOf="#+id/appBarLayout" />
<RelativeLayout
android:id="#+id/bottomContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bvTabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Widget.BottomNavigationView"
app:itemIconTint="#drawable/navigation_drawable_tint"
app:itemTextColor="#drawable/navigation_drawable_tint"
app:menu="#menu/bottom_menu_item" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Disabling the ToolBar overlay Effect and List scroll disable

Problem 1:
I have made my toolbar transparent but There is some sort of overlay effect which I don't want. How can I remove that effect? I have marked that place(1) in a sample image.
code for ToolBar:
<android.support.design.widget.AppBarLayout
android:id="#+id/cvSlider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:layout_marginTop="20dp"
app:theme="#style/CustomActionBar"
android:background="#android:color/transparent">
<include layout="#layout/toolbar_layout" />
</android.support.design.widget.AppBarLayout>
ToolBarLayOut:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:background="#color/transparent"
android:minHeight="?attr/actionBarSize"
>
<RelativeLayout
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/location_ic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_location"
/>
<TextView
android:layout_toRightOf="#id/location_ic"
android:id="#+id/toolbar_title"
android:padding="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/custom_font"
android:text="서울 서초구 강남역 주변"
android:textColor="#color/colorWhite" />
<ImageView
android:layout_width="wrap_content"
android:src="#drawable/ic_arrow_drop_down"
android:layout_toRightOf="#id/toolbar_title"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Problem 2: I am using a scroll view with a child list view in my app. but the problem is when I am taping any white space(marked 2) o list item parent scroll is not working but when taping on images then the parent scroll works (Marked 3). only the child list view scroll is working which I don't want I want the parent scroll to work here.
AppBarLayout has StateListAnimator by default try setting it to null using below code
<android.support.design.widget.AppBarLayout
android:id="#+id/cvSlider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:layout_marginTop="20dp"
android:stateListAnimator="#null"
app:theme="#style/CustomActionBar"
android:background="#android:color/transparent">
<include layout="#layout/toolbar_layout" />
</android.support.design.widget.AppBarLayout>

FloatingActionButton is not pushed upwards in CoordinatorLayout with RecyclerView

I'm working with RecyclerView and FloatingActionButton (FAB) in CoordinatorLayout. Before jumping into details, this is what I'm trying to achieve.
This layout has a list of items using RecyclerView and there is an FAB at the bottom. You can also see a text called 'Save' which is invisible at the start. Once RecyclerView has some items, it will be displayed. Everything works as intended. However, when the text 'Save' is shown, it is not pushing FAB upwards.
Here's the layout.
<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:id="#+id/layout_main_container">
<FrameLayout
android:id="#+id/layout_custom_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView android:id="#+id/custom_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|center_horizontal"
android:textColor="#android:color/darker_gray"
android:layout_gravity="center" />
<com.custom.CustomRecycler
android:id="#+id/custom_recycler"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_gravity="center"
android:visibility="visible"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_vertical_margin"
android:clickable="true"
app:srcCompat="#drawable/icon_add"
android:id="#+id/add"
android:layout_gravity="bottom|right"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_anchor="#id/list_custom_recycler"
app:layout_anchorGravity="bottom|right|end"
/>
<TextView
android:id="#+id/save"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:layout_gravity="bottom|end"
android:text="Save"
android:textColor="#android:color/white"
android:background="#android:color/holo_blue_bright"
android:padding="10dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:visibility="visible"
/>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
What is it differently I'm doing which prevents FAB from being pushed upward when the text is shown?
Do I need a nested scroll view? Any thoughts?

RecyclerView cutting off last item

We can see here last item is partially visible. How can i fix this?
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
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">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
layout="#layout/header"
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:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/grey_background">
<ImageView
android:id="#+id/image"
android:layout_width="#dimen/thumbnail_width"
android:layout_height="#dimen/thumbnail_height"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:scaleType="fitCenter"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/image"
android:orientation="vertical"
android:padding="#dimen/participant_left_padding">
<TextView
android:id="#+id/participants_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="name"
android:textColor="#android:color/white"/>
<TextView
android:id="#+id/total_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="view"
android:textColor="#android:color/white"/>
<TextView
android:id="#+id/ranking"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ranking"
android:textColor="#android:color/white"/>
</LinearLayout>
<ImageView
android:id="#+id/overflow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_action_overflow"/>
</RelativeLayout>
I'm also having the same problem. In my opinion this happened because you set the AppBarLayout XML attribute android:fitsSystemWindows="true". To solve this i give the RecyclerView margin bottom equal to action bar size
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/recyclerView"
android:layout_marginBottom="?attr/actionBarSize">
#Lester was right problem was RecyclerView's wrap_content height. But changing match_parent was not working because. This layout was added to a fragment and that fragment was declared wrap_content. So I have changed fragment's height and recyclerview's height to match_parent and now problem solved.
<fragment
android:id="#+id/fragment"
android:name="com.example.fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
I had this problem with a RecyclerView inside a ConstraintLayout, and i changed my recyclerview constriants to "0dp" (match_constraint) and had no further trouble.
have a look
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- Title -->
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="#dimen/view_with_press_height"
android:text="#string/taxes_fees_charges"
android:gravity="center_vertical"
android:layout_marginStart="#dimen/general_side_margin"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<!-- Details Recyclerview-->
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="#dimen/general_bottom_margin"
app:layout_constraintVertical_bias="0.0"
tools:itemCount="28"
tools:listitem="#layout/tax_details_row" />
</android.support.constraint.ConstraintLayout>
if you want to use the tools:itemCount="28" you will have to import xmlns:tools="http://schemas.android.com/tools" in your XMLfile.
I tried all the available option from most of possible site but I didn't get the solution.
Then, I think can I use bottom padding? And Yes, It's work for me.
I am sharing the code to you.
Nothing more attribute required other than height, width & padding.
android:paddingBottom="?attr/actionBarSize"
<android.support.v7.widget.RecyclerView
android:id="#+id/your id name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="?attr/actionBarSize"
app:layout_constraintTop_toBottomOf="#+id/your field" />
Use RelativeLayout instead of ConstraintLayout.It's working for me.
I'm showing some solution but didn't work
Now I find one easy solution for this cutting off the last item in recycler view
Add your recycler view into LinearLaout
After adding recycler view into Linearlayout add these two Attributes into recycler view.
android:paddingBottom="?attr/actionBarSize"
android:clipToPadding="false"
Now, Your Recyclerview looks like this,
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvQuotes"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="#dimen/_10sdp"
android:layout_marginEnd="#dimen/_10sdp"
android:background="#color/white"
android:paddingBottom="?attr/actionBarSize"
android:paddingTop="#dimen/_10sdp"
android:clipChildren="false"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
tools:listItem="#layout/item_dessert"
android:clipToPadding="false"/>
Easiest but not the best solution. Still works;
Return +1 in the getItemCount() method of your RecyclerView.Adapter implementation and wrap your code in onBindViewHolder method override with a try-catch block.
For others.Disabling nested scrolling in recyclerview also causes this problem in CoordinatorLayout with scrollable toolbar or tablayout. Because when you scroll recyclerview, toolbar or tablayout doesn't scroll.
don't align recyclerview with respect to any view.. simply make it match parent and provide margin from top....this worked for me
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerViewAddresses"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
android:layout_marginTop="#dimen/dimen_120dp"
/>

Categories

Resources