How can I design an app for all smartphone and tablet resolution?

Question

Hello this is my login form with a background seems like this image.

I want to display my content( all the edittext, button) only in the blue zone. With genymotion everything was OK but I was surprised by the result when I tested my app in a smartphone. The button and the textview were in the red zone. How can I correct my code to obtain an interface to all smartphone and tablet resolution

    <?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fitsSystemWindows="true"
    android:background="@drawable/login_full2">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="200dp"
        android:layout_marginLeft="60dp"
        android:layout_marginRight="60dp">
        <!--  Login Label -->

            <EditText android:id="@+id/et_login"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="text"
                android:drawableStart="@drawable/ic_account_circle_black_24dp"
                android:drawableLeft="@drawable/ic_account_circle_black_24dp"
                android:hint="@string/Login" />

        <!--  Password Label -->
            <EditText android:id="@+id/et_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword"
                android:drawableStart="@drawable/ic_lock_black_24dp"
                android:drawableLeft="@drawable/ic_lock_black_24dp"
                android:hint="@string/Password"/>


        <Button
            android:id="@+id/btn_valider"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            android:background="@drawable/colorbutton"
            android:padding="12dp"
            android:text="@string/Connexion"/>

        <TextView android:id="@+id/link_signup"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:text="Vous n'avez pas encore de compte ? Créez-en un !"
            android:textSize="12sp"/>
        <TextView android:id="@+id/pass_oub"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="J'ai oublié mon mot de passe"
            android:textSize="12sp"/>

    </LinearLayout>
</ScrollView>

thanks in advance

have you read the documentation? https://developer.android.com/training/multiscreen/index.html — tyczj, May 17 '16 at 12:37
yes I have an idea about this but I don't know what I should do to set my edittexts and button in the blue zone — clara, May 17 '16 at 13:01
Some people just make as much layout and dimens files as they see some device that does not fit well. others use the new layouts created to solve this (PercentLayout), others like me are pretty happy writing the UI from code. http://stackoverflow.com/questions/29956014/why-should-we-use-xml-layouts — Nanoc, May 17 '16 at 13:23

score 0 · Accepted Answer · answered May 17 '16 at 14:28

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:fitsSystemWindows="true"
 android:background="@drawable/login_full2">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:padding="10dp"
    android:orientation="vertical">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:layout_marginStart="40dp"
        android:layout_marginRight="40dp"
        android:layout_marginEnd="40dp">
        <!--  Login Label -->

        <EditText android:id="@+id/et_login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="text"
            android:drawableStart="@drawable/ic_account_circle_black_24dp"
            android:drawableLeft="@drawable/ic_account_circle_black_24dp"
            android:hint="@string/Login"  />

        <!--  Password Label -->
        <EditText android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:drawableStart="@drawable/ic_lock_black_24dp"
            android:drawableLeft="@drawable/ic_lock_black_24dp"
            android:hint="@string/Password"/>


        <Button
            android:id="@+id/btn_valider"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            android:padding="12dp"
            android:text="@string/Connexion"/>

        <TextView android:id="@+id/link_signup"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:layout_marginBottom="12dp"
            android:text="Vous n'avez pas encore de compte ? Créez-en un !"
            android:textSize="12sp"/>
        <TextView android:id="@+id/pass_oub"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:text="J'ai oublié mon mot de passe"
            android:textSize="12sp"/>

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

The above xml will work for mobile and Tab view but the size of the content will not be the same which is okay for mobile and get smaller to the screen get bigger. You have to create a layout separately for Tab on layout-sw680dp and make your alignment. — Franklyn, May 17 '16 at 14:31
with this code when I click in the edittext, the keyboard appears but the entire contents (editext, tetview and button) move up in the red zone — clara, May 19 '16 at 16:23
That is meant to happen when a layout is on a scroll view. Android SoftInput keyboard tends to move other views for the present focus to visible to the users. Try add this attribute (android:windowSoftInputMode="adjustPan") to your manifest activity where is being applied. There several options for this attribute try to which suit you. — Franklyn, May 20 '16 at 07:41
You need to accept the answer if it works. so it could be helpful to others — Franklyn, May 20 '16 at 08:33

How can I design an app for all smartphone and tablet resolution?

1 Answers1