Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

enter image description here

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

enter image description here

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...

like image 916
Rob Avatar asked Jun 15 '18 17:06

Rob


2 Answers

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>
like image 151
Bertram Gilfoyle Avatar answered Oct 05 '22 22:10

Bertram Gilfoyle


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?

like image 23
Amir Hossein Mirzaei Avatar answered Oct 05 '22 21:10

Amir Hossein Mirzaei