Inside a CoordinatorLayout with AppBarLayout, how to set ScrollView or RecyclerView above an EditText that is fixed to bottom?

284 views Asked by At

I need to use a RecyclerView inside a CoordinatorLayout with AppBarLayout. Below AppBarLayout, I have a RecyclerView. But, I would also like to fix a LinearLayout at the bottom of screen. The LinearLayout contains an EditText. When I scroll items in RecyclerView, they are superimposed with the EditText. I don't know how to set my RecyclerView items above LinearLayout or EditText.

Any suggestion will be appreciated!

I put below an image of my screen

enter image description here

Here below my XML code

<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="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:openDrawer="start"
android:id="@+id/drawerLayout_channel_chat"
tools:context=".view.MyActivity">

<com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view_channel_chat"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:background="#0E66B9"
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/my_menu"
    app:itemIconTint="#fff"
    app:itemHorizontalPadding="40dp"
    app:itemTextAppearance="@style/TextViewStyle"
    app:itemBackground="@drawable/menu_item_padding"/>

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/channel_chat_app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="300dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="@color/colorPrimary"
            app:toolbarId="@id/toolbar_channel_chat">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <ImageView
                    android:id="@+id/img_theme_channel_chat"
                    android:layout_width="match_parent"
                    android:layout_height="170dp"
                    android:src="@drawable/ic_baseline_image_24"
                    android:scaleType="centerCrop"
                    android:fitsSystemWindows="true"
                    app:layout_collapseMode="parallax"
                    />

                <TextView
                    android:id="@+id/txt_theme_channel_chat"
                    android:layout_below="@+id/img_theme_channel_chat"
                    android:layout_width="match_parent"
                    android:layout_height="60dp"
                    android:padding="1dp"
                    android:text="@string/channel_chat_txt"
                    android:textColor="#FFFFFF"
                    android:textStyle="bold"
                    android:textSize="15sp"
                    android:background="@drawable/text_view_border"
                    />

                <View
                    android:layout_below="@+id/txt_theme_channel_chat"
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1dp"
                    android:layout_marginStart="2dp"
                    android:layout_marginEnd="2dp"
                    android:layout_marginBottom="1dp"
                    android:background="#FFFFFF"/>

            </RelativeLayout>

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar_channel_chat"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"
                />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_channel_chat"
            android:padding="1dp"
            android:layout_marginTop="6dp"
            app:stackFromEnd="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        </androidx.recyclerview.widget.RecyclerView>
    </LinearLayout>
    </ScrollView>

        <LinearLayout
            android:id="@+id/channel_chat_layout"
            android:layout_gravity="bottom"
            app:layout_insetEdge="bottom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/img_preview_channel_chat"
                android:layout_width="290dp"
                android:layout_height="220dp"
                android:layout_centerInParent="true"
                android:layout_marginStart="4dp"
                android:layout_marginEnd="4dp"
                android:src="@drawable/ic_baseline_image_24"
                android:visibility="gone"
                />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginStart="2dp"
                android:layout_marginEnd="60dp"
                android:layout_marginBottom="10dp"
                android:background="@drawable/input_background">

                <ImageView
                    android:id="@+id/img_send_channel_chat"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_marginTop="1dp"
                    android:layout_marginStart="10dp"
                    android:layout_marginBottom="4dp"
                    android:layout_gravity="bottom"
                    android:background="@drawable/send_btn_rounded"
                    android:src="@drawable/ic_send"
                    />

                <androidx.appcompat.widget.AppCompatEditText
                    android:id="@+id/edt_channel_chat"
                    android:hint="Votre message ..."
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="1dp"
                    android:paddingStart="10dp"
                    android:paddingEnd="17dp"
                    android:paddingTop="10dp"
                    android:paddingBottom="10dp"
                    android:background="@android:color/transparent"
                    />
            </LinearLayout>

        </LinearLayout>

        <com.github.clans.fab.FloatingActionMenu
            android:id="@+id/channel_chat_floating_action_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_gravity="bottom|end"
            fab:menu_animationDelayPerItem="55"
            fab:menu_backgroundColor="@android:color/transparent"
            fab:menu_buttonSpacing="0dp"
            fab:menu_colorNormal="@color/colorPrimary"
            fab:menu_colorPressed="#dc4b3f"
            fab:menu_colorRipple="#99d4d4d4"
            fab:menu_fab_size="normal"
            fab:menu_icon="@drawable/fab_add"
            fab:menu_labels_colorNormal="#333"
            fab:menu_labels_colorPressed="#444"
            fab:menu_labels_colorRipple="#66efecec"
            fab:menu_labels_cornerRadius="3dp"
            fab:menu_labels_ellipsize="none"
            fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
            fab:menu_labels_margin="0dp"
            fab:menu_labels_maxLines="-1"
            fab:menu_labels_padding="4dp"
            fab:menu_labels_position="left"
            fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
            fab:menu_labels_showShadow="true"
            fab:menu_labels_singleLine="false"
            fab:menu_labels_textColor="#f2f1f1"
            fab:menu_labels_textSize="15sp"
            fab:menu_openDirection="up"
            fab:menu_shadowColor="#66aff198"
            fab:menu_shadowRadius="4dp"
            fab:menu_shadowXOffset="1dp"
            fab:menu_shadowYOffset="4dp"
            fab:menu_showShadow="true">

            <com.github.clans.fab.FloatingActionButton
                android:id="@+id/btn_parametre_channel_chat_floatingActionButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_settings"
                fab:fab_label="Paramètres"
                fab:fab_size="mini" />

            <com.github.clans.fab.FloatingActionButton
                android:id="@+id/btn_camera_channel_chat_floatingActionButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_baseline_photo_camera_24"
                fab:fab_label="Camera"
                fab:fab_size="mini" />

            <com.github.clans.fab.FloatingActionButton
                android:id="@+id/btn_pick_image_channel_chat_floatingActionButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_baseline_image_24"
                fab:fab_label="Gallerie"
                fab:fab_size="mini" />

        </com.github.clans.fab.FloatingActionMenu>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

</androidx.drawerlayout.widget.DrawerLayout>

1

There are 1 answers

3
Patrick On

To achieve this, you need to wrap the LinearLayout and RecyclerView inside a NestedScrollView and use app:layout_behavior="@string/appbar_scrolling_view_behavior" on the NestedScrollView.

Also, remove the ScrollView that is wrapping your LinearLayout and RecyclerView.