CODEWITHSUNDEEP
androidandroid-layoutscrollableandroid-keypad
Narendra Singh
Narendra Singh

Reputation: 4001

android making layout scrollable when soft keyboard open, but not shifting it upwards

This is my screen, with one button hidden behind the keyboard.

I want exactly like this, but scrollable. -

keyboard open with one button hidden behind

Whenever, the keyboard gets opened, I want to make look it the same as in image. But, instead to make it scrollable, so that the user can scroll to view the bottom part of the screen (including button), even when the keyboard is open.

I tried -

android:windowSoftInputMode="adjustResize"

but, this shifts the bottom part upwards, whenever keyboard is opened.

as in this image -

I don't want this - (shifting of Create Account button upwards, when keypad is opened)

enter image description here

CREATE ACCOUNT button must be visible after scrolling.

Here is the layout - 

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:id="@+id/root_layout"
    android:fillViewport="true"

    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"

        android:weightSum="10"

        >
        <LinearLayout  android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="9"
            android:orientation="vertical"
            android:gravity="center_vertical|center_horizontal"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            android:paddingBottom="@dimen/activity_vertical_margin">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:orientation="vertical">


                <EditText
                    android:id="@+id/et_username_or_email"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/et_hint_username_or_email"
                    android:inputType="textEmailAddress"
                    android:singleLine="true"
                    />
                <EditText
                    android:id="@+id/et_pswd"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/et_hint_password"
                    android:password="true"
                    android:singleLine="true"
                    />

                <Button
                    android:id="@+id/btn_sign_in"
                    android:layout_marginTop="10dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/btn_sign_in"
                    android:background="@color/lighter_orange"
                    android:textColor="@android:color/white"/>

                <TextView
                    android:layout_marginTop="10dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/or"
                    android:gravity="center_horizontal"
                    android:textColor="@android:color/black"/>


                <Button
                    android:id="@+id/btn_take_a_peek"
                    android:layout_marginTop="10dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/btn_take_a_peek"
                    android:textColor="@android:color/white"
                    android:background="@color/button_gray"/>

                <TextView
                    android:layout_marginTop="15dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/forgot_password"
                    android:gravity="center_horizontal"
                    android:textColor="@color/text_gray"/>
            </LinearLayout>
        </LinearLayout>
        <LinearLayout  android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="vertical">


            <Button
                android:id="@+id/btn_create_account"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/btn_create_account"
                android:background="@color/button_very_light_orange"
                android:textColor="@android:color/white"/>


        </LinearLayout>
    </LinearLayout>
</ScrollView>

Please help me to fix this up.

Upvotes: 21

Views: 28666

Answers (9)

BabyishTank
BabyishTank

Reputation: 1472

If you want it to scroll (only when keyboard pop up), you will need adjustResize warped in scrollView, but adjustResize automatically shifted the page for you.

may be you could scroll the page to the desired position after the adjustResize occur

// this is the edittext
        this.setOnFocusChangeListener(new OnFocusChangeListener() {

            @Override
            public void onFocusChange(View view, boolean hasFocus) {
                int[] absLocation = new int[2];
                int absHeight = absLocation[1];

                if (hasFocus) {
                        ScrollView sv = // get the id of your scroll view

                        if (sv != null){
                            view.postDelayed(new Runnable() {

                                @Override
                                public void run() {
                                    sv.smoothScrollBy(0, number); // how much you want to scroll to
                                }
                            }, 700);  // some delay after the adjust Resize

                        }
                    }
                }
            }
        });
    }
    ```

Upvotes: 0

Vijay Pal
Vijay Pal

Reputation: 181

I may be late to answer, but may help someone.

I was also facing this issue and ended up hiding button which we don't want to be visible on keyboard up. So in this case it's "create account" which is to be hidden on keyboard up and show on keyboard down.

Upvotes: 0

Dinesh Solanki
Dinesh Solanki

Reputation: 114

old questioned with which I struggled today, What worked for me was to remove "android:windowSoftInputMode" from manifest and activity XML and, instead of making the root scroll view, make the scroll view child of root-

    <androidx.coordinatorlayout.widget.CoordinatorLayout 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:id="@+id/FrameLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MyActivity"
        >
        <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/my_scrollview"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            >
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
  <!-- your xml code here. -->
    </RelativeLayout>
    </ScrollView>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

Upvotes: 0

Lalit Sharma
Lalit Sharma

Reputation: 1150

Add this input mode in your manifest file.

android:windowSoftInputMode="stateHidden|adjustResize"

Upvotes: 14

Joyal
Joyal

Reputation: 412

I tried your code and also I have the same issue Here

Here I make some correction in your code and values were codes as dummy(strings, colors ect)... Code Snippet is:

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

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical|center_horizontal"
        android:orientation="vertical"
        android:padding="10dp" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:orientation="vertical" >

            <EditText
                android:id="@+id/et_username_or_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="HAI"
                android:inputType="textEmailAddress"
                android:singleLine="true" />

            <EditText
                android:id="@+id/et_pswd"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="HH"
                android:password="true"
                android:singleLine="true" />

            <Button
                android:id="@+id/btn_sign_in"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:background="#5465"
                android:text="sigin"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center_horizontal"
                android:text="ORR"
                android:textColor="@android:color/black" />

            <Button
                android:id="@+id/btn_take_a_peek"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:background="#ff8f43"
                android:text="sfse"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:gravity="center_horizontal"
                android:text="Forgot"
                android:textColor="#ec0974" />
        </LinearLayout>
    </LinearLayout>

    <Button
        android:id="@+id/btn_create_account"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#ffd250"
        android:text="Create Accounr"
        android:textColor="@android:color/white" />
</RelativeLayout>
 </ScrollView>

Also set the below parameter to your activity in you Manifest

android:windowSoftInputMode="adjustPan"

**Edited as in view outer layer is Relative layout inside a scrollview and i managed the Create Account button as parent bottom.

Please try it in a real device.

Try this and give your feedback !! Happy Coding..

Upvotes: 0

korunos
korunos

Reputation: 798

I had the same Problem and solved it.

Add this to your class inside the <activity> tags in the AndroidManifest in your Class:

android:windowSoftInputMode="stateHidden|adjustResize">

or:

<activity
        android:name="com.app.app.RegisterScreen"
        android:parentActivityName="com.app.app.LogInScreen"
        android:windowSoftInputMode="stateHidden|adjustPan">

    </activity>

Example:

<activity
        android:name="com.app.yourapp.LogInScreen"
        android:windowSoftInputMode="stateHidden|adjustPan">

</activity>

This works for me.

Upvotes: 11

Ajit Kumar Dubey
Ajit Kumar Dubey

Reputation: 1563

I hope it will helpful for you Already I have designed such type of layout. I did not edited your layout.

<?xml version="1.0" encoding="utf-8"?>
 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res/com.clearfly.groupfone"
 android:id="@+id/registration_view"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@android:color/white"
 android:fillViewport="true"
 android:orientation="vertical" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="@dimen/activity_horizontal_margin"
        android:orientation="vertical"
        android:weightSum="1" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_marginTop="40dp"
            android:layout_weight="0.4"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/ivProfilePicture"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/ic_launcher" >
            </ImageView>
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_marginTop="20dp"
            android:layout_weight="0.6"
            android:orientation="vertical"
            android:weightSum="1" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_weight="0.2"
                android:orientation="vertical" >

                <EditText
                    android:id="@+id/firstname_edit"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:cursorVisible="true"
                    android:hint="First Name"
                    android:inputType="textCapWords|textPersonName|textNoSuggestions"
                    android:maxLength="50"
                    android:paddingLeft="40dp"
                    android:singleLine="true"
                    android:textColor="@android:color/black"
                     />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_weight="0.2"
                android:orientation="vertical" >

                <EditText
                    android:id="@+id/lastname_edit"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:cursorVisible="true"
                    android:hint="Last Name"
                    android:inputType="textCapWords|textPersonName|textNoSuggestions"
                    android:maxLength="50"
                    android:paddingLeft="40dp"
                    android:singleLine="true"
                    android:textColor="@android:color/black"
                     />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_weight="0.2"
                android:orientation="vertical" >

                <EditText
                    android:id="@+id/email_edit"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:cursorVisible="true"
                    android:hint="email"
                    android:inputType="textEmailAddress"
                    android:maxLength="255"
                    android:paddingLeft="40dp"
                    android:singleLine="true"
                    android:textColor="@android:color/black"
                     />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_weight="0.2"
                android:orientation="vertical" >

                <EditText
                    android:id="@+id/password_edit"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:cursorVisible="true"
                    android:hint="Password"
                    android:inputType="textPassword"
                    android:maxLength="20"
                    android:paddingLeft="40dp"
                    android:singleLine="true"
                    android:textColor="@android:color/black"
                    />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_weight="0.2"
                android:orientation="vertical" >

                <EditText
                    android:id="@+id/verify_password_edit"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:cursorVisible="true"
                    android:hint="Verify pwd"
                    android:inputType="textPassword"
                    android:maxLength="20"
                    android:paddingLeft="40dp"
                    android:singleLine="true"
                    android:textColor="@android:color/black"/>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
  </LinearLayout>
</ScrollView>

Upvotes: 0

Mudit Dangi
Mudit Dangi

Reputation: 46

Refer this to choose the appropriate mode for your screen https://developer.android.com/guide/topics/manifest/activity-element.html#wsoft

Upvotes: 0

bendaf
bendaf

Reputation: 3031

Make the root of your view 

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    ...

</ScrollView>

Upvotes: 0

Related Questions