Android: How to put an EditText that's in a ScrollView above another view when focused?

Question

My app design makes me having this kind of layout for every form view: a floating button at the bottom of the view. I'm using ConstraintLayout to set dynamically the height of the button with always the same left/right margin no matter the screen width, and so I end up having this layout:

<ConstraintLayout>
    <ScrollView>
        <EditText/>
        <EditText/>
        <!-- ... -->
        <ConstraintLayout /> (1)
    </ScrollView>
    <Button/>
</ConstraintLayout>

(1) A clear view with the height of the bottom button in order not to hide the views at the bottom in the scroll view that would be hidden by the button

Basically, that's what it looks like:

Now the problem I encounter is when I tap an edit text at the bottom, for example here the 4th one:

The edit text moves up the keyboard, but not the floating button, and it often comes to be hidden by it. I know that I have to do something in the edit text's onFocusChanged() method, but I don't know what...

sorry i don't quit understand your problem are you saying when you click the edittext's keyboard gets over the button ? or button goes up and over the edittext and hides edittext's ? — Amir Hossein Mirzaei, Jun 18 '18 at 06:37
Hi, yeah the button goes up, it stays at the bottom of the layout (just above the keyboard) but sometimes comes over the edit text. — Rob, Jun 18 '18 at 06:43
I don’t have this problem when the edit text is somewhere at the top of the screen, but when it’s at the bottom, it scrolls up the keyboard but not the floating button and ends being hidden by it. — Rob, Jun 18 '18 at 06:45
Ok i have tow way to handle this one is to hide the button when keyboard goes up ! second one is to move the button and scroll view to above of your keyboard ! which on yo prefer — Amir Hossein Mirzaei, Jun 18 '18 at 06:46
have you tried setting `android:windowSoftInputMode="adjustPan"` under activity tag of Manifest.xml? — Sagar, Jun 18 '18 at 07:24
Consider using a list, so you can re-arrange at any given time. — RonTLV, Jun 18 '18 at 07:47
I tried `adjustPan` but I already had `adjustResize` before and it seemed to work better. — Rob, Jun 18 '18 at 12:14
Please clarify what the expected behaviour is e.g. "Button not floating on top of the keyboard" — ericn, Jun 22 '18 at 06:09

Bertram Gilfoyle · Answer 1 · 2018-06-26T05:50:08.660

I know that I have to do something in the edit text's onFocusChanged() method.

No. You don't have to do things manually. Simply add this attribute to the button. This will make the button positioned on the bottom of the parent layout rather that on the bottom of the EditText (You can skip this if are already doing it).

app:layout_constraintBottom_toBottomOf="parent"

And add this attribute to the activity tag which represent that specific activity. It will reduce the height of the viewable area by an amount which is equal to the height of the soft keyboard in such a way that it won't go behind the content.

android:windowSoftInputMode="adjustResize"

See the doc for more detailed explanation.

Also note that a ScrollView can host only one direct child as in the below example.

<ScrollView
    ...>
    <LinearLayout
    ...>
       <!-- You can place multiple views here -->
    </LinearLayout>
</ScrollView>

please take note that ```android:windowSoftInputMode="adjustPan"``` is generally not desirable because this will obscure the button below. As a result, user will need to close the softkeyboard first before he/she can press the button. — user1506104, Jun 23 '18 at 10:44

score 1 · Answer 2 · answered Jun 18 '18 at 07:24

1- you can move your edit text to top of the scrollView when they focus changed to true :

here is code :

java Code :

    LinearLayout containerOfScrollViewViews= findViewById(R.id.containerOfScrollViewViews);

        for (int i = 0; i < containerOfScrollViewViews.getChildCount(); i++) {

            containerOfScrollViewViews.getChildAt(i).setOnFocusChangeListener(new View.OnFocusChangeListener() {
                @Override
                public void onFocusChange(View v, boolean hasFocus) {

                    int[] xy = new int[2];
                    v.getLocationInWindow(xy);
                    if (hasFocus) ((ScrollView)findViewById(R.id.scrollView))
                            .smoothScrollBy(xy[0], xy[1]);
                }
            });

        }

My XML :

<?xml version="1.0" encoding="UTF-8"?>
<android.support.constraint.ConstraintLayout 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:orientation="vertical">

    <ScrollView
        app:layout_constraintTop_toBottomOf="parent"
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toTopOf="@id/btn">

        <LinearLayout
            android:id="@+id/ll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <EditText
               android:hint="A"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp" />

            <EditText
               android:hint="B"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp" />

            <EditText
               android:hint="C"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp" />

            <EditText
               android:hint="D"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp" />

            <EditText
               android:hint="E"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp" />

            <EditText
               android:hint="F"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp" />

            <EditText
               android:hint="H"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp" />

            <EditText
               android:hint="J"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp" />

            <EditText
               android:hint="K"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp" />

            <EditText
               android:hint="Z"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp" />


        </LinearLayout>
    </ScrollView>

    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="add"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

2 - or your can attach your button to bottom of the scroll view so when keyboard appears than scrollView and button both goes above the scrollView

3- you can listen to keyboard visibility Chang and hide/show your button

here is link for this solution : SoftKeyboard open and close listener in an activity in Android?

I can't choose the 3rd solution since having the floating button just above the keyboard is a design choice... I tried the 1st one but I'm having strange behaviors, when I select a first edit text, then a second one, the second one goes up the navigation bar... — Rob, Jun 18 '18 at 12:02
@Someday share your xml with me i think you need to app:layout_constraintTop_toBottomOf="parent" or app:layout_constraintTop_toBottomOf="@id/toolbar" in your xml file for your scrollView layout — Amir Hossein Mirzaei, Jun 18 '18 at 12:40

score 0 · Answer 3 · answered Jun 21 '18 at 09:34

0

AndroidManifest.xml add android:windowSoftInputMode="adjustPan|stateHidden"in your activity ;

Or, setKeyboardListener, changed your scrollview position

answered Jun 21 '18 at 09:34

Pings

1
1

score 0 · Answer 4 · answered Jun 22 '18 at 05:23

Use releative Layout and put in scrollview android:layout_above="floating button"

this should solve overlaping or hiding by that button.

also softinput adjust pan

Scoll view should contain only one view so put all edit text inside a linear or any layout inside scroll view

Viral Patel · Answer 5 · 2018-06-26T05:19:32.403

    <android.support.constraint.ConstraintLayout>
        <ScrollView .........> 
            <LinearLayout..........>
                <EditText .......  **//Add EditText around 6 to 7**
                ..............
               .............. />      
            </LinearLayout>
        </ScrollView>
        <RelativeLayout    **// Fix the button in bottom gravity.**
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="bottom">

            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Bottom Gravity" />

        </RelativeLayout>
    </android.support.constraint.ConstraintLayout>

And please set androidmanifest.xml file

<activity
  android:windowSoftInputMode="adjustPan"/>

I've solve this problem hope so it will help you.

Android: How to put an EditText that's in a ScrollView above another view when focused?

5 Answers5