Android Studio Relative layout and Linear layout does not fit in some devices

Question

I am trying to develop a simple app for project management. The problem is with the xml layout of the app screens. The app screens are proportionally not very well put in different devices. Some elements are even hidden in some devices due to lack of space.

I already tried using both linear layout and relative layout. I've always used the "Match_parent" attribute to both the width and height of the relative layout and linear layout parent block. But still in some screen sizes, some elements are not showing, they are below the display area.

  <RelativeLayout
android:id="@+id/layout1"
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:background="@color/white"
tools:context=".login"
android:paddingTop="20dp"
>

<ImageView
android:id="@+id/loginImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/login_logo"
android:layout_centerHorizontal="true"
/>
<TextView
    android:id="@+id/loginText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:text="LOGIN"
    android:textColor="@color/orange"
    android:textSize="50sp"
    android:layout_below="@id/loginImage"
    />

<EditText
    android:id="@+id/username"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/logintextbackground"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/loginText"
    android:hint="Username"
    android:textColorHint="@color/lightOrange"
    android:paddingLeft="40dp"
    android:paddingRight="40dp"
    android:textColor="@color/lightOrange"
    android:maxLength="15"
    />
<EditText
    android:id="@+id/password"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/logintextbackground"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/username"
    android:hint="Password"
    android:textColorHint="@color/lightOrange"
    android:paddingLeft="40dp"
    android:paddingRight="40dp"
    android:textColor="@color/lightOrange"
    android:inputType="textPassword"
    android:maxLength="16"
    />

<Button
    android:id="@+id/loginButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/login_button"
    android:layout_below="@id/password"
    android:layout_centerHorizontal="true"
    />

<TextView
    android:id="@+id/orText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="or"
    android:textSize="20dp"
    android:textColor="@color/orange"
    android:layout_below="@id/loginButton"
    android:layout_centerHorizontal="true"
    />

<Button
    android:id="@+id/signUpButtonLogin"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/signup"
    android:layout_below="@id/loginButton"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="30dp"
    />

Answer 1

Put a ScrollView as parent of your RelativeLayout and you should be fine. Refer code below :

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    <RelativeLayout
        android:id="@+id/layout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:paddingTop="20dp"
        tools:context=".login">

        <ImageView
            android:id="@+id/loginImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:src="@drawable/login_logo" />

        <TextView
            android:id="@+id/loginText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/loginImage"
            android:layout_centerHorizontal="true"
            android:text="LOGIN"
            android:textColor="@color/orange"
            android:textSize="50sp" />

        <EditText
            android:id="@+id/username"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/loginText"
            android:layout_centerHorizontal="true"
            android:background="@drawable/logintextbackground"
            android:hint="Username"
            android:maxLength="15"
            android:paddingLeft="40dp"
            android:paddingRight="40dp"
            android:textColor="@color/lightOrange"
            android:textColorHint="@color/lightOrange" />

        <EditText
            android:id="@+id/password"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/username"
            android:layout_centerHorizontal="true"
            android:background="@drawable/logintextbackground"
            android:hint="Password"
            android:inputType="textPassword"
            android:maxLength="16"
            android:paddingLeft="40dp"
            android:paddingRight="40dp"
            android:textColor="@color/lightOrange"
            android:textColorHint="@color/lightOrange" />

        <Button
            android:id="@+id/loginButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/password"
            android:layout_centerHorizontal="true"
            android:background="@drawable/login_button" />

        <TextView
            android:id="@+id/orText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/loginButton"
            android:layout_centerHorizontal="true"
            android:text="or"
            android:textColor="@color/orange"
            android:textSize="20dp" />

        <Button
            android:id="@+id/signUpButtonLogin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/loginButton"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="30dp"
            android:background="@drawable/signup" />
    </RelativeLayout>
</ScrollView>

For future development, I would suggest you to use ConstraintLayout instead of LinearLayout or RelativeLayout as it provides less nesting of the views.