How to stop Scrollview from moving background image to top while pressing EditText?

Question

I have one background image which have RelativeLayout as it's parent and sibling as ScrollView and ScrollView have one EditText. I am facing problem where background image moving top side when we are clicking Edittext. Please find below code snippet and attached screenshots. How we can restrict scrollview from doing this?

Code:

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:src="@drawable/dog"
        android:scaleType="centerCrop"/>

<ScrollView
        android:id="@+id/layout_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:visibility="visible">

    <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">


        <EditText
                android:id="@+id/postal_code"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Postcode"
        />


    </RelativeLayout>
</ScrollView>

Before:

After:

In your manifest's activity, add this line: android:windowSoftInputMode="adjustNothing" — private static, Jan 16 '20 at 17:28
But with this scrolling not works. I have 6 editText at the center of screen, so with this I am not able to see below editText. — Jitesh Mohite, Jan 16 '20 at 17:53
Setting background drawable to an entire activity helps you (via XML or programmatically). — Akaki Kapanadze, Jan 16 '20 at 19:16

score 5 · Accepted Answer · answered Jan 23 '20 at 04:19

5

Add this in Activity Manifest

android:windowSoftInputMode="adjustNothing"

answered Jan 23 '20 at 04:19

Chandan kushwaha

941
6
26

score 4 · Answer 2 · answered Jan 22 '20 at 17:50

4

Change ScrollView to androidx.core.widget.NestedScrollView if you use androidx or NestedScrollView from support package. If you didn't hide anything in the top of your xml this is gonna work(just checked it in test project).

answered Jan 22 '20 at 17:50

Eugene Troyanskii

855
6
15

score 0 · Answer 3 · answered Jan 19 '20 at 15:45

When soft keyboard opens, Activity height changes and the ImageView crop the image again. This is the problem.
Here is the idea to solve this issue: if ImageView crops the source image just from the bottom instead of both top and bottom, then the top of image will be fixed always and you won't see this problem anymore.
So, you need a custom ImageView that crops images only from the bottom. Thanks to @Dori and his great answer to provide ImageViewTopCrop.

/**
 * @author doriancussen
 */
public class ImageViewTopCrop extends ImageView
{
    public ImageViewTopCrop(Context context)
    {
        super(context);
        setScaleType(ScaleType.MATRIX);
    }

    public ImageViewTopCrop(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        setScaleType(ScaleType.MATRIX);
    }

    public ImageViewTopCrop(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        setScaleType(ScaleType.MATRIX);
    }

    @Override
    protected boolean setFrame(int l, int t, int r, int b)
    {
        Matrix matrix = getImageMatrix();
        float scaleFactor = getWidth()/(float)getDrawable().getIntrinsicWidth();
        matrix.setScale(scaleFactor, scaleFactor, 0, 0);
        setImageMatrix(matrix);
        return super.setFrame(l, t, r, b);
    }
}

Modify your xml layout like below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.doridori.lib.view.ImageViewTopCrop
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/dog" />

    <ScrollView
        android:id="@+id/layout_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:visibility="visible">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <EditText
                android:id="@+id/postal_code"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Postcode" />

        </RelativeLayout>
    </ScrollView>
</RelativeLayout>

Important: Be careful about dog image aspect ratio. Its height should be long enough to fill screen after scalling the image based on width of screen.

PS: If this answer is helpful don't forget to upvote @dori answer.

score 0 · Answer 4 · answered Jan 23 '20 at 04:11

<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.unicode.attax.Activity.LoginActivity">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/background_login_3x"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

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

I use this code to use background image in Scrollview. You can manage the ratio and scaletype.

score 0 · Answer 5 · answered Jan 25 '20 at 08:14

0

Add inside Activity tag in your manifest file

android:windowSoftInputMode="stateVisible|adjustPan"

answered Jan 25 '20 at 08:14

Siddarth Jain

304
1
6

score 0 · Answer 6 · answered Jan 25 '20 at 11:48

So, your problem is actually caused by layout resizing when keyboard shows up.

To avoid this you can add following line to your manifest (in activity tag)

android:windowSoftInputMode="adjustNothing"

Something like below

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.....">
<uses-permission ....
....
    <application
        android:allowBackup="true"
        ...>

         <activity android:name=".YourActivity" 
             ...
             android:windowSoftInputMode="adjustNothing">
             ....
         </activity>
    </application>

You may also refer to this question and this answer

How to stop Scrollview from moving background image to top while pressing EditText?

6 Answers6