Adil Saiyad
Adil Saiyad

Reputation: 1592

Android: how to scroll scrollview to show next field when keyboard appears

i use scrollview and set WindowSoftInputMode = SoftInput.AdjustResize but my scrollview not scroll when keyboard appears.

hide my edittext when keyboard appears. below is my code with scrollview.

   <ScrollView
        android:id="@+id/scrollView"    
        android:clipToPadding="false"   
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:isScrollContainer="true"
        android:fillViewport="true">
        <RelativeLayout
            android:layout_width="match_parent"
            android:paddingLeft="@dimen/padding_30"
            android:paddingRight="@dimen/padding_30"
            android:paddingBottom="@dimen/padding_30"
            android:layout_height="wrap_content" >
            <RelativeLayout 
                android:layout_width="match_parent"                 
                android:id="@+id/TopWelcomeLayout"
                android:layout_height="wrap_content">
                <ImageView
                    android:id="@+id/signupImg"
                    android:layout_marginTop="25dp"
                    android:scaleType="fitCenter"
                    android:layout_height="wrap_content"
                    android:layout_width="match_parent"
                    android:src="@drawable/splitssignuplogo"  />
                <TextView
                    android:layout_width="match_parent"
                    android:id="@+id/welcomeText"
                    android:layout_below="@id/signupImg"
                    android:layout_marginTop="22dp"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorGray"
                    android:lines="3"
                    android:textSize="@dimen/textSize_16"
                    android:gravity="center"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:text="When it comes to owning your songs importan"/>
            </RelativeLayout>
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_marginTop="20dp"
                android:layout_below="@id/TopWelcomeLayout"
                android:id="@+id/avtarLayout"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:gravity="center">
                <refractored.controls.CircleImageView
                    android:id="@+id/avtar"
                    android:layout_height="110dp"
                    android:layout_width="110dp"
                    android:transitionName="EXTRA_IMAGE"
                    android:src="@drawable/signupuser"/>
                <ImageView
                    android:id="@+id/cameraIcon"
                    android:layout_height="40dp"
                    android:layout_width="40dp"
                    android:src="@drawable/CameraSignUp"
                    android:tint="#9195aa"
                    android:layout_marginLeft="35dp"
                    android:layout_marginTop="35dp"  />


            </RelativeLayout>
            <RelativeLayout 
                android:layout_width="match_parent"
                android:id="@+id/emailUpdateLayout"
                android:layout_below="@id/avtarLayout"
                android:layout_height="wrap_content">                       
                    <TextView 
                        android:layout_width="match_parent"
                        android:gravity="center"
                       android:id="@+id/emailTextForUpdateAccount"
                        android:layout_marginTop="13dp"
                        android:layout_marginBottom="40dp"
                        android:text="[email protected]"
                        android:textColor="#9195AA"
                        android:layout_below="@+id/avtar"
                        android:textSize="@dimen/textSize_14"
                        android:layout_height="wrap_content"/>
            </RelativeLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/emailUpdateLayout"
                android:id="@+id/nameLayout"
                android:layout_marginTop="@dimen/margin_17"
                android:weightSum="100">
                <android.support.design.widget.TextInputLayout
                    android:layout_width="match_parent"
                    android:layout_marginRight="@dimen/margin_10"
                    android:layout_height="wrap_content"
                    android:id="@+id/FirstNameWrapper"
                    app:errorTextAppearance="@style/ErrorText"
                    android:layout_marginTop="@dimen/margin_10"
                    android:theme="@style/CommonTextStyleTheme"
                    android:layout_weight="50">
                    <EditText
                        android:id="@+id/efirstname"
                        android:nextFocusDown="@+id/elastname"
                        android:textColor="@color/colorLightBlue"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:inputType="textCapWords"
                        android:textSize="@dimen/textSize_14"
                        android:paddingBottom="@dimen/padding_20"
                        android:hint="FIRST NAME *" />
                </android.support.design.widget.TextInputLayout>
                <android.support.design.widget.TextInputLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="50"
                    app:errorTextAppearance="@style/ErrorText"
                    android:id="@+id/LastNameWrapper"
                    android:theme="@style/CommonTextStyleTheme"
                    android:layout_marginLeft="@dimen/margin_10"
                    android:layout_marginTop="@dimen/margin_10">
                    <EditText
                        android:id="@+id/elastname"
                        android:nextFocusDown="@+id/eemail"
                        android:textColor="@color/colorLightBlue"
                        android:textSize="@dimen/textSize_14"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:inputType="textCapWords"
                        android:paddingBottom="@dimen/padding_20"
                        android:hint="LAST NAME *" />
                </android.support.design.widget.TextInputLayout>
            </LinearLayout>
            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/nameLayout"
                app:errorTextAppearance="@style/ErrorText"
                android:id="@+id/emailLayout"
                android:theme="@style/CommonTextStyleTheme"
                android:layout_marginTop="@dimen/margin_15">
                <EditText
                    android:id="@+id/eemail"
                    android:nextFocusDown="@+id/epassword"
                    android:textColor="@color/colorLightBlue"
                    android:layout_width="match_parent"
                    android:textSize="@dimen/textSize_14"
                    android:paddingBottom="@dimen/padding_20"
                    android:layout_height="wrap_content"
                    android:inputType="textEmailAddress"
                    android:hint="EMAIL *" />
            </android.support.design.widget.TextInputLayout>
            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/emailLayout"
                app:errorTextAppearance="@style/ErrorText"
                android:id="@+id/confirmemailLayout"
                android:theme="@style/CommonTextStyleTheme"
                android:layout_marginTop="@dimen/margin_15">
                <EditText
                    android:id="@+id/econfirmemail"
                    android:nextFocusDown="@+id/epassword"
                    android:textColor="@color/colorLightBlue"
                    android:layout_width="match_parent"
                    android:textSize="@dimen/textSize_14"
                    android:paddingBottom="@dimen/padding_20"
                    android:layout_height="wrap_content"
                    android:inputType="textEmailAddress"
                    android:hint="CONFIRM EMAIL *" />
            </android.support.design.widget.TextInputLayout>


            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/phoneLayout"
                android:layout_below="@id/confirmemailLayout"
                android:layout_marginTop="@dimen/margin_15"
                android:paddingBottom="5sp">

                    <TextView
            android:id="@+id/lblphonenumber"    
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:textColor="#9195aa"
            app:fontFamily="@font/lato_regular"
            android:textSize="@dimen/textSize_12"   
            android:text="PHONE NUMBER *" />

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:layout_marginLeft="3dp"
                android:layout_centerVertical="true"
                android:layout_below="@+id/lblphonenumber"
                android:id="@+id/CountryDropLayout">

                   <TextView
                         android:id="@+id/countrySpinner"
                         android:layout_width="wrap_content"
                         android:layout_height="match_parent"
                         android:paddingRight="15dp"
                         android:textColor="#4C5375"
                         android:layout_centerVertical="true"
                         android:textSize="@dimen/textSize_14"
                         android:gravity="center_vertical"
                         android:maxLines="1"
                         android:text="US"
                         android:singleLine="true"
                         android:background="@null"
                         android:textCursorDrawable="@null"
                         android:inputType="textPhonetic" />

                    <ImageButton
                          android:layout_width="10dp"
                          android:layout_height="10dp"
                          android:src="@drawable/downarrow"
                          android:background="@null"
                          android:layout_toRightOf="@+id/countrySpinner"
                          android:id="@+id/btnDropDown"
                          android:layout_centerVertical="true"
                           />

                    <TextView
                        android:id="@+id/lblcountrycode"    
                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:layout_centerVertical="true"
                        android:paddingLeft="@dimen/margin_15"  
                        android:layout_toRightOf="@+id/countrySpinner"
                        android:layout_marginLeft="8dp"
                        android:paddingTop="11sp"   
                        android:textColor="#9195aa"
                        android:textSize="@dimen/textSize_14"   
                        android:text="+1" />
            </RelativeLayout>

            <EditText
                android:id="@+id/ephone"
                android:layout_width="match_parent"
                android:nextFocusDown="@+id/einstagram"
                android:textSize="@dimen/textSize_14"
                android:layout_height="40dp"
                android:background="@null"
                android:paddingLeft="@dimen/margin_10"  
                android:gravity="center_vertical"
                android:layout_below="@+id/lblphonenumber"
                android:layout_toRightOf="@+id/CountryDropLayout"
                android:textColor="@color/colorLightBlue"
                android:inputType="number"
                android:hint="PHONE NUMBER *" />

            <TextView
            android:id="@+id/lbldivider"
            android:layout_width="match_parent"
            android:layout_marginLeft="3dp"
            android:layout_marginTop="2sp"
            android:layout_below="@+id/CountryDropLayout"
            android:layout_height="1dp"
            android:background="#efeff2"/>

            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Phone Number is required."
            android:id="@+id/textViewError"
            android:layout_below="@+id/lbldivider"
            android:textSize="10sp"
            android:paddingTop="5dp"            
            android:visibility="gone"
            android:textColor="#f81353"
             />
            </RelativeLayout>


            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/phoneLayout"
                android:id="@+id/passwordLayout"
                app:errorTextAppearance="@style/ErrorText"
                android:theme="@style/CommonTextStyleTheme"
                android:layout_marginTop="@dimen/margin_15">
                <EditText
                    android:id="@+id/epassword"
                    android:imeOptions="actionDone"
                    android:textColor="@color/colorLightBlue"
                    android:layout_width="match_parent"
                    android:textSize="@dimen/textSize_14"
                    android:layout_height="wrap_content"
                    android:inputType="textPassword"
                    android:paddingBottom="@dimen/padding_20"
                    android:hint="CREATE PASSWORD *" />
            </android.support.design.widget.TextInputLayout>    

            <TextView 
                android:layout_width="match_parent"
                android:visibility="invisible"
                android:layout_below="@id/passwordLayout"
                android:layout_marginTop="@dimen/margin_30"
                android:id="@+id/errorText"
                android:textColor="#f81353"
                android:text="swgdsfwgdfwfdgwfdfdf"
                android:textSize="@dimen/textSize_13"
                android:layout_height="wrap_content"/>
            <RelativeLayout
                android:layout_width="match_parent"
                 android:layout_below="@id/errorText"
                android:id="@+id/btnLayout"
                android:layout_height="wrap_content">

                <Button
                    android:text="SIGN UP"
                    android:visibility="visible"
                    android:alpha="0.5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/rounded_greenbutton"
                    android:layout_marginTop="@dimen/margin_20"
                    android:textColor="@color/colorWhite"
                    android:padding="@dimen/padding_20"
                    android:textSize="@dimen/textSize_16"
                    android:textStyle="bold"
                    android:id="@+id/btnSignUp" />
            </RelativeLayout>



        </RelativeLayout>
    </ScrollView>

if click on first name how can show my next field like e-mail.

enter image description here

Upvotes: 5

Views: 1380

Answers (5)

Sina
Sina

Reputation: 2883

Ankit has part of the answer. The problem with his answer is your view gets scrolled even if it is currently visible in the screen. With this code you would get rid of bad user experience with wrong scrolls of the view.

import android.content.res.Resources;
import android.graphics.Rect;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.EditText;
import android.widget.ScrollView;

public class MainActivity extends AppCompatActivity {

    private ScrollView sView;
    private int heightDiff;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        sView = findViewById(R.id.scrollView);
        //Here we get the height of soft keyboard by observing changes of the scrollView's height.
        sView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            public void onGlobalLayout() {
                heightDiff = sView.getRootView().getHeight() - sView.getHeight();
            }
        });


        final EditText email = findViewById(R.id.eemail);
        EditText firstName = findViewById(R.id.efirstname);
        firstName.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                if (!isVisibleWhileSoftKeyboardShowing(email) && hasFocus) {
                    sView.postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            sView.smoothScrollBy(0, 200);
                        }
                    }, 500);
                }

            }
        });
    }

    /**
     * check if a view is currently visible in the screen or not
     *
     * @param view
     * @return
     */
    public boolean isVisibleWhileSoftKeyboardShowing(final View view) {
        if (view == null) {
            return false;
        }
        if (!view.isShown()) {
            return false;
        }
        final Rect actualPosition = new Rect();
        view.getGlobalVisibleRect(actualPosition);
        final Rect screen = new Rect(0, 0, getScreenWidth(), getScreenHeight() - heightDiff);
        return actualPosition.intersect(screen);
    }


    /**
     * to get screen width
     *
     * @return
     */
    public static int getScreenWidth() {
        return Resources.getSystem().getDisplayMetrics().widthPixels;
    }

    /**
     * to get screen height
     *
     * @return
     */
    public static int getScreenHeight() {
        return Resources.getSystem().getDisplayMetrics().heightPixels;
    }
} 

I hope this is the exact thing you are looking for.

Upvotes: 0

Kourosh
Kourosh

Reputation: 2299

You cannot increase the distance between soft keyboard and Edittext, But you can do this manually by scrolling the page, which is dirty way

efirstname.setOnFocusChangeListener(new OnFocusChangeListener() {
@Override
public void onFocusChange(View v, boolean hasFocus) {
    if (hasFocus) {
            Handler(Looper.getMainLooper()).postDelayed({
                scrollView.scrollBy(0, 200)
            }, 100)
        }
    });
}

And you need to add in your ScrollView the next lines:

android:paddingBottom="200dp"
android:clipToPadding="false"

Upvotes: 0

Kishita Variya
Kishita Variya

Reputation: 810

in Android Manifest put:

 <activity
                android:name=".YourActivity"
                android:windowSoftInputMode="stateAlwaysHidden|adjustResize" />

In ScrollView, set layout_height and fillViewport as follows:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

Upvotes: 2

Ankit Kesarwani
Ankit Kesarwani

Reputation: 1

You can achieve the similar functionality by using setOnFocusChangeListener function to call OnFocusChange() on a view object.

 sView = findViewById(R.id.scrollView);
    email = findViewById(R.id.eemail);
    fname = findViewById(R.id.efirstname);
    fname.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            boolean b =  sView.postDelayed(new Runnable() {
                @Override
                public void run() {
                    sView.smoothScrollBy(0,300);
                }
            },800) ;


        }
    });

    email.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            boolean b =  sView.postDelayed(new Runnable() {
                @Override
                public void run() {
                    sView.smoothScrollBy(0,300);
                }
            },800) ;
        }
    });

Another thing that I noticed is you are using EditText with TextInputLayout. You can use TextInputEditText.

Upvotes: 0

Jignesh Mayani
Jignesh Mayani

Reputation: 7213

In my deivce it's working fine i have nothing added in manifest also not added this one WindowSoftInputMode = SoftInput.AdjustResize

I have just only android:fitsSystemWindows="true" in main layout

enter image description here

Upvotes: 2

Related Questions