5

I have a RelativeLayout with an EditText that has a Button below it. Ideally as the user clicks the EditText and fills in multiple lines of text, the RelativeLayout would also expand as the lines increase. However, the behavior I have now is that after the first line of the EditText is filled, the keyboard begins to cover the Button below it and after 3-4 lines of text in the EditText, the Button is gone below the keyboard. Is there any way to have it so that as I type in text, the entire layout increases in size so that the button stays above the keyboard? Here is my code:

AndroidManifest.xml:

    <activity
        android:name="<Name of project>.activity.Comments"
        android:configChanges="orientation|keyboardHidden"
        android:label="Comments"
        android:screenOrientation="portrait"
        android:theme="@style/AppTheme.NoActionBar"
        android:windowSoftInputMode="stateHidden|adjustResize" />

Comments.xml:

<RelativeLayout
        android:id="@+id/send_message"
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_margin="4dp"
        android:layout_alignParentBottom="true">

        <EditText
            android:fontFamily="sans-serif"
            android:id="@+id/write_comment"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="12dp"
            android:gravity="left"
            android:textSize="16sp"
            android:textColor="@color/black"
            android:cursorVisible="false"
            android:textColorHint="@color/material_color_grey_300"
            android:hint="@string/commentBack"
            android:background="@drawable/edittext_bg"
            android:inputType="textMultiLine"
            android:isScrollContainer="true"
            android:maxLength="200"
            android:scrollHorizontally="false" />

        <Button
            android:fontFamily="sans-serif-medium"
            android:id="@+id/send_comment"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:textColor="@color/colorPrimary"
            android:layout_marginTop="8dp"
            android:text="@string/send"
            android:background="@null"
            android:layout_below="@id/write_comment"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:textAllCaps="false" />
    </RelativeLayout>

I've tried to add android:isScrollContainer="true" thinking that it would create a scroll container to the EditText so that it would help expand the layout but that didn't seem to work. Any help would be appreciated. Thanks!

Edit: Added in entire layout based on answer below:

<?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:id="@+id/comments_layout">

    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/comments_appbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:layout_alignParentTop="true"
            android:layout_marginTop="?attr/actionBarSize"
            android:layout_width="match_parent"
            android:id="@+id/comments_listview"
            android:layout_height="match_parent">

            <ListView
                android:scrollbars="vertical"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/rv_view_comments">
            </ListView>

            <TextView
                android:layout_below="@id/rv_view_comments"
                android:gravity="center_horizontal"
                android:padding="16dp"
                android:textSize="16sp"
                android:id="@+id/empty_list_item"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:visibility="gone"
                android:text="@string/noComments" >
            </TextView>

            <include layout="@layout/include_progress_overlay"/>

        </RelativeLayout>

        <RelativeLayout
    android:id="@+id/send_message"
    android:layout_width="match_parent"
    android:layout_height="90dp"
    android:layout_margin="4dp"
    android:layout_alignParentBottom="true">

    <EditText
        android:fontFamily="sans-serif"
        android:id="@+id/write_comment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="12dp"
        android:gravity="left"
        android:textSize="16sp"
        android:textColor="@color/black"
        android:cursorVisible="false"
        android:textColorHint="@color/material_color_grey_300"
        android:hint="@string/commentBack"
        android:background="@drawable/edittext_bg"
        android:inputType="textMultiLine"
        android:isScrollContainer="true"
        android:maxLength="200"
        android:scrollHorizontally="false" />

    <Button
        android:fontFamily="sans-serif-medium"
        android:id="@+id/send_comment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="@color/colorPrimary"
        android:layout_marginTop="8dp"
        android:text="@string/send"
        android:background="@null"
        android:layout_below="@id/write_comment"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:textAllCaps="false" />
</RelativeLayout>

    </RelativeLayout>

</android.support.design.widget.CoordinatorLayout>

Edit: As per Jaydroider's request, I have included a photo to show my problem. If I could make a GIF or something, if I add more text to my EditText field, the Send button will disappear under the keyboard and unless I remove text from the EditText, the `Send cannot be pushed:

Image showing problem

Edit: I have also shown how I scroll to the bottom of my ListView when I click on the EditText here if this helps.

public void setupComment(final EditText comment) {
        //Once we send the post, we want to scroll to bottom of listview
        comment.setOnEditorActionListener(new TextView.OnEditorActionListener() {

            @Override
            public boolean onEditorAction(TextView v, int actionId,
                                          KeyEvent event) {
                if (event != null && (event.getKeyCode() == KeyEvent.KEYCODE_ENTER)) {
                    comment.setImeOptions(EditorInfo.IME_ACTION_DONE);
                    resetKeyboardSettings();
                }
                return false;
            }
        });

        //Hide the cursor until view is clicked on
        View.OnTouchListener onTouchListener = new View.OnTouchListener(){
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                System.out.println("Touched");
                if (v.getId() == comment.getId()) {
                    comment.setCursorVisible(true);
                }
                commentsView.postDelayed(new Runnable() {
                    @Override
                    public void run() {

                        commentsView.smoothScrollToPosition(commentsView.getAdapter().getCount());
                    }
                }, 750);
                return false;
            }
        };
        comment.setOnTouchListener(onTouchListener);
    }
user1871869
  • 3,317
  • 13
  • 56
  • 106
  • When i have checked your layout i only able to see `List View` no any other widgets. Please elaborate more. – Jay Rathod Sep 09 '16 at 08:42
  • @jaydroider I have updated the above code to demonstrate my problem. Hopefully that helps. It is under the edit that says `Edit: Added in entire layout based on answer below:` – user1871869 Sep 09 '16 at 08:53
  • Yes i have already checked that layout my side i need clarification about where `edit text` and `button` will shown. with that layout currently i can only be able to see `List View`. – Jay Rathod Sep 09 '16 at 08:56
  • Could you provide a screen shot what your design looks like exactly ? – Jay Rathod Sep 09 '16 at 10:36
  • @jaydroider I have provided a screen show showing my design. Hope that helps. – user1871869 Sep 09 '16 at 17:18
  • Check my answer below and let me know if you face any issue. – Jay Rathod Sep 12 '16 at 06:50

4 Answers4

3

I have tried with your Layout everything is perfect with that not an issue.

But you need to make changes to your manifest where you declared your activity using more properties to android:configChanges.

Do this inside your android manifest.xml file.

     <activity
            android:name="<Name of project>.activity.Comments"
            android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
            android:label="Comments"
            android:screenOrientation="portrait"
            android:theme="@style/AppTheme.NoActionBar"
            android:windowSoftInputMode="stateHidden|adjustResize"/>

Here is XML which i used.

<?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:id="@+id/comments_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.PopupOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/comments_appbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:id="@+id/comments_listview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/send_message"
            android:layout_alignParentTop="true"
            android:layout_marginTop="?attr/actionBarSize">

            <ListView
                android:id="@+id/rv_view_comments"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_toEndOf="@+id/empty_list_item"
                android:scrollbars="vertical"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />

            <TextView
                android:id="@+id/empty_list_item"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/rv_view_comments"
                android:gravity="center_horizontal"
                android:padding="16dp"
                android:text="No Comments"
                android:textSize="16sp"
                android:visibility="gone" />


        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/send_message"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_margin="4dp">

            <EditText
                android:id="@+id/write_comment"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#FFFFFF"
                android:cursorVisible="false"
                android:fontFamily="sans-serif"
                android:gravity="left"
                android:hint="Comment Back"
                android:inputType="textMultiLine"
                android:isScrollContainer="true"
                android:maxLength="200"
                android:padding="12dp"
                android:scrollHorizontally="false"
                android:textColor="#000000"
                android:textColorHint="@android:color/holo_red_dark"
                android:textSize="16sp" />

            <Button
                android:id="@+id/send_comment"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_below="@id/write_comment"
                android:layout_marginTop="8dp"
                android:background="@null"
                android:fontFamily="sans-serif-medium"
                android:gravity="center|center_vertical"
                android:text="Send"
                android:textAllCaps="false"
                android:textColor="@color/colorPrimary"
                android:textSize="16sp" />
        </RelativeLayout>

    </RelativeLayout>

</android.support.design.widget.CoordinatorLayout>

I have tested with above changes and it's just working fine you can see below.

enter image description here

Hope this will help you to solve your problem.

Community
  • 1
  • 1
Jay Rathod
  • 11,131
  • 6
  • 34
  • 58
  • Hey, do you mind posting your code just so that I could mimic it? I tried to listen to your changes on the `Manifest` file but that didn't seem to fix it for me. – user1871869 Sep 12 '16 at 07:19
  • Your XML layout code that you used to create the image above? – user1871869 Sep 12 '16 at 07:23
  • 1
    Hey I actually tried out your code and it seemed to work for me. Thanks for all your help! I think I had to fix a few things on the button gravity and also had to make the `RelativeLayout` `wrap_content`. Thanks! – user1871869 Sep 12 '16 at 07:38
  • @user1871869 Cheers. Upvote the answer also so will be helpful to others in future. – Jay Rathod Sep 12 '16 at 07:40
0

Try this:

<RelativeLayout
        android:id="@+id/send_message"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:layout_alignParentBottom="true">

        <EditText
            android:fontFamily="sans-serif"
            android:id="@+id/write_comment"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="12dp"
            android:gravity="left"
            android:textSize="16sp"
            android:textColor="@color/black"
            android:cursorVisible="false"
            android:textColorHint="@color/material_color_grey_300"
            android:hint="@string/commentBack"
            android:background="@drawable/edittext_bg"
            android:inputType="textMultiLine"
            android:isScrollContainer="true"
            android:maxLength="200"
            android:scrollHorizontally="false" />

        <Button
            android:fontFamily="sans-serif-medium"
            android:id="@+id/send_comment"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:textColor="@color/colorPrimary"
            android:layout_marginTop="8dp"
            android:text="@string/send"
            android:background="@null"
            android:layout_below="@id/write_comment"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:textAllCaps="false" />
    </RelativeLayout>
Dipali Shah
  • 3,742
  • 32
  • 47
  • Hey, I tried to follow your code. It seems like you just added `android:layout_height = wrap_content` in the `RelativeLayout` tag. I have tried to implement your suggestion but that didn't seem to work and now the `ListView` I have covers my `EditText` I posted my entire layout above in hopes that it would be more clear and could help me fix this problem. I tried what you mentioned above but because the `EditText` was hidden, I wasn't sure how to fix it. – user1871869 Sep 06 '16 at 17:32
0

Put all your edit texts and button in a scroll view.

<ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
               <Edittext
               <EditText
               <EditText
               <Btn
             </LinearLayout
        </scrollview
prsandroid
  • 88
  • 2
  • 10
0

My solution would be adding ScrollView as a root view in your layout and Override View's onSizeChanged method. If height of EditText increases and Keyboard is blocking your button, Smooth Scroll to your button.

Hope this helps.

Community
  • 1
  • 1
Vygintas B
  • 1,624
  • 13
  • 31
  • How would I have a `ScrollView` with a nested `ListView` in it though? I see what you are saying but I feel like that would not work in my case. – user1871869 Sep 10 '16 at 08:19