How to move up my controls when they would be hidden by the soft keyboard?

Question

OK, so I have this very basic layout:

As you can see, the edit texts and the login button are centered in the area below the icon. They are not aligned with the bottom. And I want to keep it this way.

Now, when the soft keyboard is shown, all I want is that the whole view is pushed upwards, so that the login button is above the soft keyboard but takes into account its lower margin.

My activity has windowSoftInputMode set to adjustPan, but it just assures that the currently focused control is visible, not all three of them:

Question: What do I need to change so that all three controls are visible as soon as the keyboard is visible?

This is my view:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res/Recson.Apps.Android"
    style="@style/Theme.Recson.NoActionBar"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/LoginViewRoot">
    <ImageView
        android:src="@drawable/Logo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/Icon"
        android:layout_marginBottom="30dp"
        android:layout_marginTop="30dp"
        android:layout_gravity="top" />
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/Credentials"
        android:layout_gravity="center_vertical"
        android:gravity="center_vertical"
        android:layout_below="@id/Icon">
        <EditText
            android:inputType="textEmailAddress"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            local:MvxBind="Text Username"
            android:hint="@string/Username"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:textColorHint="@color/text_hint" />
        <EditText
            android:inputType="textPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            local:MvxBind="Text Password"
            android:hint="@string/Password"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:textColorHint="@color/text_hint" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/Login"
            local:MvxBind="Click Login;Enabled CanLogin"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="30dp" />
    </LinearLayout>
</RelativeLayout>

As per my Opinion add your layout into `ScrollView` and also set `android:windowSoftInputMode="stateHidden"` to your Activity — M D, Feb 26 '14 at 13:01

score 2 · Answer 1 · answered Feb 26 '14 at 13:01

2

Try to use ScrollView and put your main layout inside it. I think it will do the job.

answered Feb 26 '14 at 13:01

MSaudi

4,442
2
40
65

No change except that my controls are no longer centered. – Daniel Hilgarth Feb 26 '14 at 13:12
1

If I additionally change `windowSoftInputMode` to `adjustResize`, the user can manually scroll down. If I could now tell the ScrollView to automatically scroll down, it would solve my problem. – Daniel Hilgarth Feb 26 '14 at 13:22
Looks like scrolling isn't possible in the XML file. But it is possible in code: http://stackoverflow.com/a/22043546/572644 – Daniel Hilgarth Feb 26 '14 at 13:57

score 0 · Answer 2 · answered Feb 26 '14 at 13:07

0

Try this in Manifest file.

<activity name="ActivityName"
        android:windowSoftInputMode="stateVisible|adjustResize">
        ...
    </activity>

answered Feb 26 '14 at 13:07

Gaurav Gupta

4,586
4
39
72

Without a `ScrollView`, `adjustResize` is even worse. It just shows half of the first input field. – Daniel Hilgarth Feb 26 '14 at 13:35

score 0 · Answer 3 · answered Feb 26 '14 at 13:31

As you're experiencing, adjustPan, adjustResize etc will only try to ensure the currently focused input field is visible.

What you could try to do is remove the LinearLayout then position your username password and login views in such a way that the system thinks they occupy the same space by using layout_marginTop and layout_marginBottom.

score 0 · Answer 4 · answered Feb 26 '14 at 13:36

Just put this in your activity tag of your menifest file:

android:configChanges="screenSize"

And Use ScrollView in your Xml file something like below: (I have changed your layout a bit):

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

    <ImageView
        android:id="@+id/Icon"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:layout_marginBottom="30dp"
        android:layout_marginTop="30dp"
        android:src="@drawable/ic_launcher" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/btnLogin"
        android:layout_below="@id/Icon" >

        <LinearLayout
            android:id="@+id/Credentials"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center_vertical"
            android:orientation="vertical" >

            <LinearLayout
                android:id="@+id/Credentials1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:gravity="center_vertical"
                android:orientation="vertical" >

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="30dp"
                    android:layout_marginRight="30dp"
                    android:inputType="textEmailAddress" />

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="30dp"
                    android:layout_marginRight="30dp"
                    android:inputType="textPassword" />
            </LinearLayout>
        </LinearLayout>
    </ScrollView>

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="30dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="20dp"
        android:text="Login" />

</RelativeLayout>

Thanks for your effort, but this doesn't work. Basically, because the Icon doesn't move, there is not enough space between the icon and the keyboard to display the controls. Furthermore, only the login button is visible: http://screencast.com/t/ad8Be53F — Daniel Hilgarth, Feb 26 '14 at 13:49
Okay np, but post your answer if you get any proper solution. — Sagar Shah, Feb 26 '14 at 13:56
Not really a proper solution, but one that works: http://stackoverflow.com/a/22043546/572644 — Daniel Hilgarth, Feb 26 '14 at 13:57

score 0 · Accepted Answer · edited May 23 '17 at 12:33

At least, the answers here show that I wasn't missing anything obvious.

I now solved it like that:

windowSoftInputMode set to adjustResize
Complete layout inside a ScrollView

On layout change, I simply scroll down the ScrollView to the bottom:

public class LoginView : MvxActivity, ViewTreeObserver.IOnGlobalLayoutListener
{
    private ScrollView _activityRootView;

    public void OnGlobalLayout()
    {
        var focusedControl = Window.CurrentFocus;
        _activityRootView.FullScroll(FocusSearchDirection.Down);
        if (focusedControl != null)
            focusedControl.RequestFocus();
        else if (Window.CurrentFocus != null)
            Window.CurrentFocus.ClearFocus();
    }

    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);
        SetContentView(Resource.Layout.LoginView);

        _activityRootView = FindViewById<ScrollView>(Resource.Id.LoginViewRoot);
        _activityRootView.ViewTreeObserver.AddOnGlobalLayoutListener(this);
    }
}

(this is C# code using Xamarin.Android and MvvmCross. It is based on this answer)

This solution has one drawback: The controls are no longer centered in the area below the icon, but right now, I am OK with that:

See it in action

score 0 · Answer 6 · answered Nov 08 '19 at 16:10

0

Used This Code :

 public MainPage()
    {
        InitializeComponent();
        App.Current.On<Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);

    }

answered Nov 08 '19 at 16:10

amir ameri

11
3

How to move up my controls when they would be hidden by the soft keyboard?

6 Answers6