0

I switched from ConstraintLayout to CoordinatorLayout to avoid snackbar overlapping with my bottom view. While it worked very well in a screen with only a toolbar, RecyclerView and Floating button, in the second screen i am having a really hard time to add a view below the RecyclerView while avoiding it being overlapped with the RecyclerView

My best solution yet (below) was to add paddingBottomattribute of about 80dpto the recyclerView. This looks like it solves the problem but when the snackbar is UP, the bottom view android:id="@+id/item_cl_add" again will overlap with the recyclerView. Of course, i can add more paddingBottom to compensate the size of the snackbar, but that means i will be losing about 20dp of real estate (not a good idea).

I checked many websites but could not find an simple solution

bellow is my latest code which still overlaps on snackbar

<?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/item_col_top"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".item.ItemActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <include
        android:id="@+id/item_toolbar"
        layout="@layout/toolbar" />
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/item_rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="60dp"
        android:layout_marginTop="8dp"
        tools:listitem="@layout/list_item"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/item_cl_add"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:layout_dodgeInsetEdges="bottom"
        android:layout_gravity="bottom">

        <AutoCompleteTextView
            android:id="@+id/item_ac_add"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:hint="@string/item_edit_text_hint"
            android:imeOptions="actionDone"
            android:inputType="text"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/item_b_add"
            app:layout_constraintTop_toTopOf="parent"
            tools:targetApi="o" />

        <Button
            android:id="@+id/item_b_add"
            android:layout_width="42dp"
            android:layout_height="42dp"
            android:layout_marginStart="8dp"
            android:background="@color/colorForeground"
            android:stateListAnimator="@null"
            android:text="+"
            android:textColor="@android:color/black"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />


    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Below is a screenshot without a snackbar (Good)

enter image description here

Below is a screenshot with the snackbar (not good)

enter image description here

epic
  • 1,333
  • 1
  • 13
  • 27

1 Answers1

1

CoordinatorLayout is similar to FrameLayout, in the sense that views can overlap freely. So paddings cannot solve the problem.

If you don't want the recycler view to overlap with the bottom view, you should wrap them both in a vertical LinearLayout.

jmart
  • 2,769
  • 21
  • 36
  • Thank you for the answer but please correct me if i am wrong, to avoid the snackbar overlapping the bottom view, i need to place the `app:layout_dodgeInsetEdges="bottom"` at the LineraLayout and this will result the snackbar pushing the entire LinearLayout up behind the Toolbar and i will not see the first row until snackbar close. Is there anyway i can avoid that? – epic Mar 25 '20 at 20:08
  • If you want to avoid that then I'd go back to the previous setup (without the Linear Layout) and add a white background to the bottom view. That way, the bottom view is pushed up by the snackbar but the recyclerview stays in place (basically, this is what you did in the second screenshot but now the background of the bottom view hides the overlap). – jmart Mar 25 '20 at 20:57
  • I also thought of that but that will still overlap the last row when snackbar UP. That is so strange as it seems all tutorials suggest using Coordinator layout to avoid snackbar overlap but no good solution for views like recyclerView overlap – epic Mar 25 '20 at 21:06
  • Another option you can try is to leave the bottom view anchored to the bottom of the screen and make the snackbar appear over it. To achieve that you need to take the bottom view out of the CoordinatorLayout and wrap them both in a LinearLayout. But I don't know if that serves your goals. – jmart Mar 25 '20 at 21:20
  • I ended up changing back from `CoordinatorLayout` to `ConstraintLayout`. To avoid the snackbar overlaping the bottom view, i created a Callback function for the `onShown` and `onDismissed` snackbar. While the snackbar is UP, i add `layout_marginBottom` of `mSnackbar.getView().getHeight()` and then remove it. It seems to work well but i will keep testing, i mostly worried since i don't see any such approach online. – epic Mar 25 '20 at 22:23