Handling a big interface

57 Views Asked by At

I'm currently programming an app, but I'm still new to android studio.

![Interface]: https://i.stack.imgur.com/tv9L2.jpg

That's the interface I'm working on, but it seems to be too large to use it properly (there are still fields like address, phone, etc. and 2 buttons under the last one that can't be seen). I already tried emulating the app in my android device, and it won't move to show the fields under the last one. Here's the xml code I'm using:

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

        <ImageView android:id="@+id/Fondo"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/imagina"
            android:contentDescription="@string/background"
            android:scaleType="fitCenter"
            android:alpha="0.9"/>

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/LinLContenedor"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <ImageView android:id="@+id/ImgUsuario"
                android:layout_width="160dp"
                android:layout_height="160dp"
                android:layout_margin="15dp"
                android:clickable="true"
                android:contentDescription="@string/usuario" />

            <TextView android:id="@+id/LblDatos"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/datos"
                android:layout_marginLeft="35dp"
                android:layout_marginTop="20dp"
                android:textColor="#000000"
                android:textStyle="bold"
                android:textSize="20sp"/>

            <EditText android:id="@+id/TxtEmail"
                android:layout_width="220dp"
                android:layout_height="45dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="60dp"
                android:hint="@string/email"
                android:textColorHint="#CFCFCF"
                android:inputType="textEmailAddress" />

            <EditText android:id="@+id/TxtClave"
                android:layout_width="220dp"
                android:layout_height="45dp"
                android:hint="@string/clave"
                android:textColorHint="#CFCFCF"
                android:layout_marginLeft="60dp"
                android:layout_marginTop="5dp"
                android:inputType="textPassword"/>

            <TextView android:id="@+id/LblInfo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000000"
                android:text="@string/info"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="35dp"
                android:textSize="20sp"
                android:textStyle="bold"/>

            <EditText android:id="@+id/TxtNombres"
                android:layout_width="220dp"
                android:layout_height="45dp"
                android:layout_marginTop="15dp"
                android:layout_marginLeft="60dp"
                android:hint="@string/nombres"
                android:textColorHint="#CFCFCF"
                android:inputType="text"/>

            <EditText android:id="@+id/TxtApellidoPaterno"
                android:layout_width="220dp"
                android:layout_height="45dp"
                android:hint="@string/apellidop"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="60dp"
                android:textColorHint="#CFCFCF"
                android:inputType="text"/>

            <EditText android:id="@+id/TxtApellidoMaterno"
                android:layout_width="220dp"
                android:layout_height="45dp"
                android:layout_marginLeft="60dp"
                android:layout_marginTop="5dp"
                android:hint="@string/apellidom"
                android:textColorHint="#CFCFCF"
                android:inputType="text"/>

            <EditText android:id="@+id/TxtDireccion"
                android:layout_width="220dp"
                android:layout_height="45dp"
                android:layout_marginLeft="60dp"
                android:layout_marginTop="5dp"
                android:hint="@string/direccion"
                android:textColorHint="#CFCFCF"
                android:inputType="text"/>

            <EditText android:id="@+id/TxtTelefono"
                android:layout_width="220dp"
                android:layout_height="45dp"
                android:hint="@string/telefono"
                android:textColorHint="#CFCFCF"
                android:layout_marginLeft="60dp"
                android:layout_marginTop="5dp"
                android:inputType="phone"/>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <Button android:id="@+id/BtnRegistrarse"
                    android:layout_width="140dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="15dp"
                    android:layout_marginLeft="40dp"
                    android:layout_marginRight="10dp"
                    android:text="@string/registrarse" />

                <Button android:id="@+id/BtnCancelar"
                    android:layout_width="140dp"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@+id/BtnRegistrarse"
                    android:layout_marginTop="15dp"
                    android:layout_marginRight="40dp"
                    android:layout_marginLeft="10dp"
                    android:onClick="Volver02"
                    android:text="@string/cancelar"/>
            </RelativeLayout>
        </LinearLayout>
    </FrameLayout>

Does anyone know how can I move the screen through the interface? Or should I try to reduce the size?

1

There are 1 best solutions below

0
On BEST ANSWER

Put your LinearLayout with all of your form items inside of a ScrollView, then the user will be able to scroll through your layout. Like this:

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

    <ImageView android:id="@+id/Fondo"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/imagina"
        android:contentDescription="@string/background"
        android:scaleType="fitCenter"
        android:alpha="0.9"/>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/LinLContenedor"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <ImageView android:id="@+id/ImgUsuario"
                android:layout_width="160dp"
                android:layout_height="160dp"
                android:layout_margin="15dp"
                android:clickable="true"
                android:contentDescription="@string/usuario" />

            <TextView android:id="@+id/LblDatos"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/datos"
                android:layout_marginLeft="35dp"
                android:layout_marginTop="20dp"
                android:textColor="#000000"
                android:textStyle="bold"
                android:textSize="20sp"/>

            <EditText android:id="@+id/TxtEmail"
                android:layout_width="220dp"
                android:layout_height="45dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="60dp"
                android:hint="@string/email"
                android:textColorHint="#CFCFCF"
                android:inputType="textEmailAddress" />

            <EditText android:id="@+id/TxtClave"
                android:layout_width="220dp"
                android:layout_height="45dp"
                android:hint="@string/clave"
                android:textColorHint="#CFCFCF"
                android:layout_marginLeft="60dp"
                android:layout_marginTop="5dp"
                android:inputType="textPassword"/>

            <TextView android:id="@+id/LblInfo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000000"
                android:text="@string/info"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="35dp"
                android:textSize="20sp"
                android:textStyle="bold"/>

            <EditText android:id="@+id/TxtNombres"
                android:layout_width="220dp"
                android:layout_height="45dp"
                android:layout_marginTop="15dp"
                android:layout_marginLeft="60dp"
                android:hint="@string/nombres"
                android:textColorHint="#CFCFCF"
                android:inputType="text"/>

            <EditText android:id="@+id/TxtApellidoPaterno"
                android:layout_width="220dp"
                android:layout_height="45dp"
                android:hint="@string/apellidop"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="60dp"
                android:textColorHint="#CFCFCF"
                android:inputType="text"/>

            <EditText android:id="@+id/TxtApellidoMaterno"
                android:layout_width="220dp"
                android:layout_height="45dp"
                android:layout_marginLeft="60dp"
                android:layout_marginTop="5dp"
                android:hint="@string/apellidom"
                android:textColorHint="#CFCFCF"
                android:inputType="text"/>

            <EditText android:id="@+id/TxtDireccion"
                android:layout_width="220dp"
                android:layout_height="45dp"
                android:layout_marginLeft="60dp"
                android:layout_marginTop="5dp"
                android:hint="@string/direccion"
                android:textColorHint="#CFCFCF"
                android:inputType="text"/>

            <EditText android:id="@+id/TxtTelefono"
                android:layout_width="220dp"
                android:layout_height="45dp"
                android:hint="@string/telefono"
                android:textColorHint="#CFCFCF"
                android:layout_marginLeft="60dp"
                android:layout_marginTop="5dp"
                android:inputType="phone"/>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <Button android:id="@+id/BtnRegistrarse"
                    android:layout_width="140dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="15dp"
                    android:layout_marginLeft="40dp"
                    android:layout_marginRight="10dp"
                    android:text="@string/registrarse" />

                <Button android:id="@+id/BtnCancelar"
                    android:layout_width="140dp"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@+id/BtnRegistrarse"
                    android:layout_marginTop="15dp"
                    android:layout_marginRight="40dp"
                    android:layout_marginLeft="10dp"
                    android:onClick="Volver02"
                    android:text="@string/cancelar"/>
            </RelativeLayout>
        </LinearLayout>
    </ScrollView>
</FrameLayout>