How to add recyclerview with Edittext and a button which is bottom aligned?

Question

This codes works fine when the items in the recycler view are 3 or 4. When the items in recycler view are more then 4 then the edit text field goes out of the screen.Like in image https://i.stack.imgur.com/Kb4ut.jpg

EditText should not go below Bottom aligned button when there will be multiple items in recyclerview. How can I achieve this? https://i.stack.imgur.com/0IkA6.jpg

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
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"
android:orientation="vertical"
android:background="@color/colorWhitex"
tools:context=".Fragments.RecordOdometerFragments.RecordOdometer">

<!-- TODO: Update blank fragment layout -->
<RelativeLayout
    android:id="@+id/linear"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:orientation="vertical">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/layout">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/car_selection_rv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:descendantFocusability="beforeDescendants"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginTop="16dp"/>
        <RelativeLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/odometer_view"
            android:layout_below="@+id/car_selection_rv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginTop="16dp"
            android:background="@drawable/edittext_red_corners">

            <EditText
                android:id="@+id/odometer_edittext"
                android:layout_height="35dp"
                android:layout_width="fill_parent"
                android:inputType="number"
                android:layout_margin="1dp"
                android:paddingEnd="64dp"
                android:maxLines="9"
                android:imeOptions="actionDone"
                android:hint="Input meter reading"
                android:background="@null"
                android:paddingStart="16dp" />
            <ImageButton
                android:id="@+id/imageButton1"
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:clickable="true"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:src="@drawable/ic_mic_none_black_24dp"/>

            <ImageButton
                android:id="@+id/imageButton2"
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:clickable="true"
                android:layout_toLeftOf="@+id/imageButton1"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_photo_camera_black_24dp"
                android:background="?attr/selectableItemBackgroundBorderless" />
        </RelativeLayout>
    </RelativeLayout>
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_margin="32dp"
        android:layout_alignParentBottom="true"
        android:background="@drawable/button_corner_radius"
        style="@style/Widget.AppCompat.CompoundButton.RadioButton"
        android:gravity="center"
        android:text="Done"
        android:textAllCaps="false"
        android:textColor="@color/colorWhite" />
</RelativeLayout>

Firstly, this Xml layout should have a closing tag ` ` you have given `` — Akhila, Jan 24 '19 at 18:17
The RelativeLayout holds the RecyclerView and the RelativeLayout that holds the EditText but only is not relatively positioned to anything. My guess is as the recyclerview is filled with content, the height increases and there is no constraint to prevent it from extending to the bottom of the view. — charliebeckwith, Jan 24 '19 at 18:23
@AkhilaMadari, the closing tag he has actually does match up, he's just missing another closing tag for the linearlayout in the code shown. — charliebeckwith, Jan 24 '19 at 18:25
@charliebeckwith Agree, kindly tell me how to set that constraint to prevent it from extending to the bottom of the view. — Syed Muntazir Imam Mehdi, Jan 24 '19 at 20:00
I have also tried layout weight property to solve this issue but fails. — Syed Muntazir Imam Mehdi, Jan 25 '19 at 04:32

score 1 · Answer 1 · answered Jan 24 '19 at 18:22

1

I highly recommend that you use the ConstraintLayout. You are able to create complex layouts relatively easily without having to nest multiple layouts.

answered Jan 24 '19 at 18:22

ChillBroDev

154
1
7

I have also tried this with constraint layout but fails – Syed Muntazir Imam Mehdi Jan 24 '19 at 20:03

TWL · Accepted Answer · 2019-01-25T19:34:38.473

The recommended way is to use ConstraintLayout and to prevent your RecyclerView from pushing out your odometer_view, explore something like How to set RecyclerView Max Height

But taking note of your updated requirement, you can still hack it with some creative padding here. Since it seems like you know the height of your odometer_view, based on its contents, @ 35dp+2x16dp, you can give your RecyclerView the same bottom padding, and then just align their bottoms together.

(I've stripped out the extra code)

<RelativeLayout
    android:id="@+id/linear"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_above="@id/button" >

        <android.support.v7.widget.RecyclerView
            android:id="@+id/car_selection_rv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="67dp" />

        <RelativeLayout
            android:id="@+id/odometer_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/car_selection_rv" >

            <EditText
                android:id="@+id/odometer_edittext"
                android:layout_height="35dp"
                android:layout_width="fill_parent" />
            <ImageButton
                android:id="@+id/imageButton1"
                android:layout_width="32dp"
                android:layout_height="32dp" />
            <ImageButton
                android:id="@+id/imageButton2"
                android:layout_width="32dp"
                android:layout_height="32dp" />
        </RelativeLayout>
    </RelativeLayout>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true" />
</RelativeLayout>

So really just two items:

android:paddingBottom="67dp"
android:layout_alignBottom="@id/car_selection_rv"

Now your odometer_view will essentially float above the bottom padding of your recyclerview, wherever it goes.

Thanks for your reply. Actually I want the recycler View attached with edit text in the case of 1 or 2 items in recycler View. But in this case you have aligned edit text to alignParentBottom. — Syed Muntazir Imam Mehdi, Jan 25 '19 at 04:31
I want the edit text to be stick with recycler View. When the size of recycler view increases, edit text shouldn't extend to the bottom of the view(button) — Syed Muntazir Imam Mehdi, Jan 25 '19 at 04:46
Then like JonMan08 mentioned, you'll have to look into ConstraintLayout to control the height growth of your recyclerview so it does not push out your odometer_view, explore something like this: https://stackoverflow.com/questions/42694355/how-to-set-recyclerview-max-height — TWL, Jan 25 '19 at 19:20
I've also updated my answer with a different way to do what you want. — TWL, Jan 25 '19 at 19:35
Thank you very much for your working answer. Highly appreciated. Have a happy and blessed life Elahi Ameen. — Syed Muntazir Imam Mehdi, Jan 27 '19 at 07:52

How to add recyclerview with Edittext and a button which is bottom aligned?

2 Answers2