Andrey Rankov
Andrey Rankov

Reputation: 2090

Soft keyboard in ViewPager

I have ViewPager, and couple of pages that contain EditText fields. The task is to open soft keyboard on page with first EditText (phone number), after click on Done button switch to another page and set focus on second EditText(verification code). Keyboard must be always opened, EditText field must be above. On second page it got covered.

<android.support.percent.PercentFrameLayout
    android:id="@+id/verification"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/superup_logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        app:layout_marginTopPercent="33%"
        app:layout_widthPercent="65%"
        app:srcCompat="@drawable/animated_superup_logo_white"/>

    <superup.onboarding.NonSwipeableViewPager
        android:id="@+id/verifyPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/transition">

        <android.support.percent.PercentRelativeLayout
            android:id="@+id/layout_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <android.support.v7.widget.AppCompatImageView
                android:id="@+id/superup_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                app:layout_marginTopPercent="67%"
                app:layout_widthPercent="50%"
                app:srcCompat="@drawable/superup_name"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/superup_name"
                android:layout_centerHorizontal="true"
                android:text="@string/layout_start_text"
                android:textColor="@color/white"
                android:textSize="18dp"
                android:textStyle="bold"/>

        </android.support.percent.PercentRelativeLayout>

        <android.support.percent.PercentRelativeLayout
            android:id="@+id/layout_number"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layoutDirection="ltr">

            <TextView
                android:id="@+id/txt_number"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:gravity="center"
                android:text="@string/layout_number_text"
                android:textColor="@color/white"
                android:textSize="18dp"
                android:textStyle="bold"
                app:layout_marginTopPercent="3%"/>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:gravity="center"
                app:layout_marginBottomPercent="23%"
                app:layout_widthPercent="75%">

                <superup.onboarding.CountryCodePicker
                    android:id="@+id/country_code"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:contentColor="@color/white"
                    app:countryPreference="IL"
                    app:defaultNameCode="IL"
                    app:hideNameCode="true"
                    app:textSize="24sp"/>

                <EditText
                    android:id="@+id/et_number"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:digits="1234567890"
                    android:gravity="center"
                    android:imeOptions="actionDone"
                    android:inputType="number"
                    android:maxLength="10"
                    android:textColor="@color/white"
                    android:textSize="24sp"/>
            </LinearLayout>

        </android.support.percent.PercentRelativeLayout>

        <android.support.percent.PercentRelativeLayout
            android:id="@+id/layout_otp"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <superup.onboarding.PinEntryEditText
                android:id="@+id/et_code"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:cursorVisible="false"
                android:digits="1234567890"
                android:imeOptions="actionDone"
                android:inputType="number"
                android:maxLength="4"
                android:textIsSelectable="false"
                android:textSize="50dp"
                android:textStyle="bold"
                app:layout_marginBottomPercent="23%"
                app:layout_marginLeftPercent="20%"
                app:layout_marginRightPercent="20%"/>

            <TextView
                android:id="@+id/txt_wrong"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_above="@+id/et_code"
                android:layout_centerHorizontal="true"
                android:padding="10dp"
                android:text="@string/wrong_number"
                android:textColor="@color/white"
                android:textSize="16dp"
                android:textStyle="bold"/>

            <TextView
                android:id="@+id/txt_phone"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_above="@+id/txt_wrong"
                android:layout_centerHorizontal="true"
                android:layoutDirection="ltr"
                android:textColor="@color/white"
                android:textSize="20dp"
                android:textStyle="bold"/>

        </android.support.percent.PercentRelativeLayout>

    </superup.onboarding.NonSwipeableViewPager>

</android.support.percent.PercentFrameLayout>

With page swipe it works perfect, but i need to switch pages with keyboard. After changing page with verifyPager.setCurrentItem, EditText is covered with keyboard over it.

et_number.setOnEditorActionListener(new TextView.OnEditorActionListener() {
        @Override
        public boolean onEditorAction(TextView textView, int actionId, KeyEvent keyEvent) {
            switch (actionId) {
                case EditorInfo.IME_ACTION_DONE:
                    verifyPager.setCurrentItem(verifyPager.getChildCount() - 1);
                    return true;
                default:
                    return false;
            }
        }
    });

Samsung with Android 6 has this bug, Nexus 5X/6P/Asus don't.

Upvotes: 1

Views: 677

Answers (1)

Harshad Pansuriya
Harshad Pansuriya

Reputation: 20960

I think this your First EditText

 <EditText
                    android:id="@+id/et_number"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:digits="1234567890"
                    android:gravity="center"
                    android:imeOptions="actionDone"
                    android:inputType="number"
                    android:maxLength="10"
                    android:textColor="@color/white"
                    android:textSize="24sp"/>

and this is Second

<superup.onboarding.PinEntryEditText
                android:id="@+id/et_code"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:cursorVisible="false"
                android:digits="1234567890"
                android:imeOptions="actionDone"
                android:inputType="number"
                android:maxLength="4"
                android:textIsSelectable="false"
                android:textSize="50dp"
                android:textStyle="bold"
                app:layout_marginBottomPercent="23%"
                app:layout_marginLeftPercent="20%"
                app:layout_marginRightPercent="20%"/>

just give the id of Second to First one like below way.

android:nextFocusDown="@+id/et_code"  

write above code in the First EditText.

Upvotes: 1

Related Questions