Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Softkeyboard hides button below multi-line EditText?

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);
    }
like image 363
user1871869 Avatar asked Oct 18 '22 02:10

user1871869


1 Answers

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.

like image 167
Jay Rathod RJ Avatar answered Oct 21 '22 01:10

Jay Rathod RJ