Android button overlapping text layout when typing

Question

I am programming an Android app which has an initial screen that works fine. The problem is that, when typing, a button overlaps the text, as you can see here:

Here is the code:

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

    <RelativeLayout 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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context="com.app.InitialActivity"
        tools:showIn="@layout/activity_initial">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Welcome to app"
            android:layout_marginTop="50dp"
            android:id="@+id/textViewTitle"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />

        <EditText
            android:id="@+id/editTextEmail"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/textViewTitle"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="50dp"
            android:layout_marginRight="15dp"
            android:inputType="textEmailAddress"
            android:textSize="17sp"
            android:hint="Enter your email"
            android:ems="10" />

        <EditText
            android:id="@+id/editTextPassword"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/editTextEmail"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="5dp"
            android:layout_marginRight="15dp"
            android:inputType="textPassword"
            android:textSize="17sp"
            android:hint="Enter your password"
            android:ems="10" />

        <Button
            android:id="@+id/loginButton"
            android:text="Login"
            android:layout_centerVertical="true"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/editTextPassword"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="25dp"
            android:layout_marginRight="15dp" />

        <Button
            android:id="@+id/registerButton"
            android:text="Register"
            android:layout_centerVertical="true"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/loginButton"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="20dp"
            android:layout_marginRight="15dp" />

        <Button
            android:id="@+id/forgotPasswordButton"
            android:text="Forgot Password?"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="35dp" />

    </RelativeLayout>
</ScrollView>

Any help will be much appreciated, thanks in advance.

score 1 · Answer 1 · answered Apr 04 '16 at 19:22

1

One way to overcome this problem would be to use android:windowSoftInputMode="adjustNothing" inside your activity tag.

<activity name="YourActivity"
        android:windowSoftInputMode="adjustNothing">
        ...
</activity>

However, keep in mind that in this case the register button will be covered by the keyboard.

answered Apr 04 '16 at 19:22

Dmitri Timofti

2,428
1
22
25

Thanks for your answer buddy, but, where should I place the activity tag? I am not using such tag – stack man Apr 04 '16 at 19:25
1

check your AndroidManifest.xml, find the desired activity and place this line inside like in the example. – Dmitri Timofti Apr 04 '16 at 19:26
Thanks mate, it´s working for the default mode, but still not behaving properly when I rotate the device; any hint? – stack man Apr 04 '16 at 20:03

score 1 · Answer 2 · answered Apr 04 '16 at 19:29

1

You have set each view relative to another in the page. You'd better place all of your elements in the page relative to one element or relative to main layout. This problem is because of using "Relative Layout". Another option is using an simpler layout like linear layout inside the relative layout to simplify things.

answered Apr 04 '16 at 19:29

klaymen

237
2
10

Thanks for the answer, buddy. What I am trying to do, above all, is to make the layout reorganize itself after turning the device in any direction. Do you know what is the best layout type/way to achieve this? – stack man Apr 04 '16 at 19:31
@stack man I think the best way for this is create separate layouts for portrait and landscape. This is easy in android studio. – klaymen Apr 04 '16 at 19:37
1

http://stackoverflow.com/questions/28815769/android-studio-creating-landscape-layouts. And http://stackoverflow.com/questions/4858026/android-alternate-layout-xml-for-landscape-mode are about this topic. – klaymen Apr 04 '16 at 19:40

score 1 · Accepted Answer · answered Apr 04 '16 at 20:33

When I was starting with Android development I was used to work with RelativeLayout too (I'm not an expert, I'm just telling my experience). At first, it looks like the most appropriate layout, but one thing that you should keep in mind is: let the system take care of the things to you, in other words, RelativeLayout is totally dependent from what you're saying, so with you don't think about new screen resolution, or an old one, the whole layout could become a mess.

The goal is, tell the Android what you want without using specific parameters (or at least try to avoid those). I agree with @klaymen: for different orientations you should use more than just one layout.

Just for an example, see the code below (it's a remake of your code):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.app.InitialActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Welcome to app"
        android:id="@+id/textViewTitle" />

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

        <EditText
            android:id="@+id/editTextEmail"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress"
            android:textSize="17sp"
            android:hint="Enter your email"
            android:ems="10" />

        <EditText
            android:id="@+id/editTextPassword"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:textSize="17sp"
            android:hint="Enter your password"
            android:ems="10" />

        <Button
            android:id="@+id/loginButton"
            android:text="Login"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/editTextPassword" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        android:weightSum="2"
        android:orientation="horizontal">

        <Button
            android:id="@+id/registerButton"
            android:text="Register"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>

        <Button
            android:id="@+id/forgotPasswordButton"
            android:text="Forgot Password?"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
    </LinearLayout>
</LinearLayout>

There's a little things here that are importants and could help you a lot in the next tries (look for these properties in the code above):

android:layout_gravity;

Standard gravity constant that a child supplies to its parent. Defines how the child view should be positioned, on both the X and Y axes, within its enclosing layout.
android:gravity;

Specifies how an object should position its content, on both the X and Y axes, within its own bounds.
android:weightSum;

Defines the maximum weight sum. If unspecified, the sum is computed by adding the layout_weight of all of the children. This can be used for instance to give a single child 50% of the total available space by giving it a layout_weight of 0.5 and setting the weightSum to 1.0. Must be a floating point value, such as "1.2". This may also be a reference to a resource (in the form "@[package:]type:name") or theme attribute (in the form "?[package:][type:]name") containing a value of this type. This corresponds to the global attribute resource symbol weightSum.
android:layout_weight;

LinearLayout also supports assigning a weight to individual children with the android:layout_weight attribute. This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. Default weight is zero.

I hope that helps you. One more thing use your IDE in favor, generate some examples and look how they work (they used to be dynamic), I'm pretty sure that you will learn a lot with this exercise.

Good Luck!

you´re a lifesaver, my friend! Your solution is working perfectly; I thought I was in the right path using ScrollViews, but I see the point right now. Thanks again pal! — stack man, Apr 05 '16 at 09:15

Android button overlapping text layout when typing

3 Answers3