Vin
Vin

Reputation: 823

Android - Struggiling to layout my application when virtual keyboard is visible

I'm struggling in a very annoying problem for my Android App. I created an Activity for registering to my App.

This is the Activity xml file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="myapplication.MainActivity">

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:theme="?attr/actionBarTheme"
        android:minHeight="?attr/actionBarSize"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/appTitleBar"
        android:elevation="4dp">

        <TextView
            android:text="@string/app_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/toolbarText"
            android:textAppearance="@style/TextAppearance.AppCompat.Title"
            android:textColor="?android:attr/textColorPrimaryInverse" />
    </android.support.v7.widget.Toolbar>

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:theme="?attr/actionBarTheme"
        android:minHeight="?attr/actionBarSize"
        android:id="@+id/activityTitleBar"
        android:layout_below="@+id/appTitleBar"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:elevation="4dp">

        <TextView
            android:text="@string/signinActivityTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Title"
            android:textColor="?android:attr/textColorPrimaryInverse" />
    </android.support.v7.widget.Toolbar>

    <TextView
        android:text="Welcome. bla bla bla bla bla bla bla bla bla bla"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/activityTitleBar"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="57dp"
        android:id="@+id/textView3"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textAlignment="center" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:layout_below="@+id/textView3"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="96dp"
        android:id="@+id/editText3"
        android:hint="password" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:layout_below="@+id/editText3"
        android:layout_alignRight="@+id/editText3"
        android:layout_alignEnd="@+id/editText3"
        android:layout_marginTop="49dp"
        android:id="@+id/editText4"
        android:hint="confirm" />

    <Button
        android:text="SIGN IN"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="22dp"
        android:id="@+id/button2"
        android:layout_alignRight="@+id/editText4"
        android:layout_alignEnd="@+id/editText4"
        android:layout_alignLeft="@+id/editText4"
        android:layout_alignStart="@+id/editText4" />
</RelativeLayout>

As you can seeת I'm using two Toolbars (I've selected a NoActionBar theme), one for the App name and one for the Activity title.

Then I placed a TextView that contains a welcome message and an introduction of the App.

Finally, there is the sign in form, composed of two EditText (for password and password confirmation) and one Button that submit the passwords in order to be processed later.

Here, it is how appears in the "normal state":

enter image description here

This, instead is the program when the virtual keyboard is on:

enter image description here

And here are the problems:

First problem is, that the toolbars disappear. And I don't want it. Second problem is, that I want that all the form (the two edit-text and the Button) must be above the keyboard. Instead, only the first edit-text is above. In addition the welcome TextView has to desappear.

In practice I would like that my App be like this when the virtual keyboard is up:

enter image description here

I tried to play with

<activity android:windowSoftInputMode="adjustResize">

Upvotes: 0

Views: 723

Answers (2)

Igor Fridman
Igor Fridman

Reputation: 1307

What I usually do is using ScrollView:

enter image description here

Define the ScroolView in your Layout like below (or just copy paste the code):

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.igor.test.MainActivity">

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:theme="?attr/actionBarTheme"
        android:minHeight="?attr/actionBarSize"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/appTitleBar"
        android:elevation="4dp">

        <TextView
            android:text="@string/app_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/toolbarText"
            android:textAppearance="@style/TextAppearance.AppCompat.Title"
            android:textColor="?android:attr/textColorPrimaryInverse" />
    </android.support.v7.widget.Toolbar>

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:theme="?attr/actionBarTheme"
        android:minHeight="?attr/actionBarSize"
        android:id="@+id/activityTitleBar"
        android:layout_below="@+id/appTitleBar"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:elevation="4dp">

        <TextView
            android:text="signinActivityTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Title"
            android:textColor="?android:attr/textColorPrimaryInverse" />
    </android.support.v7.widget.Toolbar>

    <ScrollView
        android:id="@+id/scroolView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/activityTitleBar">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >
    <TextView
        android:text="Welcome. bla bla bla bla bla bla bla bla bla bla"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"
        android:layout_marginTop="57dp"
        android:id="@+id/textView3"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textAlignment="center" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:layout_below="@+id/textView3"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="96dp"
        android:id="@+id/editText3"
        android:hint="password" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:layout_below="@+id/editText3"
        android:layout_alignRight="@+id/editText3"
        android:layout_alignEnd="@+id/editText3"
        android:id="@+id/editText4"
        android:hint="confirm" />

    <Button
        android:text="SIGN IN"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:id="@+id/button2"
        android:layout_below="@+id/editText4"
        android:layout_centerHorizontal="true" />
</RelativeLayout>
    </ScrollView>
</RelativeLayout>

In your Activity set the referance of the ScrollView and the main RelativeLayout Also set ViewTreeObserver.OnGlobalLayoutListener on your main RelativeLayout and implements the onGlobalLayout() method.

Take a look at the example below:

public class MainActivity extends AppCompatActivity implements ViewTreeObserver.OnGlobalLayoutListener {

    private ScrollView scrollView;
    private RelativeLayout activity_main_RL;

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

        scrollView = (ScrollView) findViewById(R.id.scroolView);
        activity_main_RL = (RelativeLayout) findViewById(R.id.activity_main);
        activity_main_RL.getViewTreeObserver().addOnGlobalLayoutListener(this);
    }


    @Override
    public void onGlobalLayout() {
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                int heightDiff = activity_main_RL.getRootView().getHeight() - activity_main_RL.getHeight();

                if (heightDiff > 100) {
                    scrollView.scrollBy(0, scrollView.getBottom());
                }
            }
        }, 500);
    }
}

Upvotes: 3

Vivek Av
Vivek Av

Reputation: 69

Try this

<activity android:windowSoftInputMode="adjustPan"/>

Upvotes: 0

Related Questions