What is the best method to create forms in Adroid?

Asked

Viewed 2,285 times

3

I am creating a registration form, to add and edit SQL records.

I found a place that indicated to do through ScrollView, so that the form has a scrolling, and in my case it would be really necessary, because the fields exceed the screen size.

But my result is getting very ugly:

Print da tela de design de layout do Android Studio

I found very interesting the schematics shown in the documentation of Material Design:

https://material.io/guidelines/components/text-fields.html

But it displays only the measurements, does not show examples in XML, and I have no idea yet how to make it more presentable.

Could someone give me some tips for better form layouts, or layouts overall??

Does anyone know if there is anywhere with free XML layouts examples for android studio??

Below is the code of the layout I’ve made so far: 

    <ScrollView 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/colorBackground"
android:scrollbars="vertical"
tools:context="br.com.teste.ActivityEmpresaCad">

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

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <EditText
        android:id="@+id/EstEndereco"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/formendereco"
        android:inputType="textPostalAddress"></EditText>

    <EditText
        android:id="@+id/EstEndNum"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:hint="@string/formendnumero"
        android:inputType="textPersonName"></EditText>

    </LinearLayout>

    <EditText
        android:id="@+id/EstEndCompl"
        android:layout_height="wrap_content"
        android:hint="@string/formcomplemento"
        android:inputType="textPersonName"
        android:layout_width="fill_parent">
    </EditText>

    <EditText
        android:id="@+id/EstEndBairro"
        android:layout_height="wrap_content"
        android:hint="@string/formbairro"
        android:inputType="textPersonName"
        android:layout_width="fill_parent">
    </EditText>

    <EditText
        android:id="@+id/EstEndLat"
        android:layout_height="wrap_content"
        android:hint="@string/formlatitude"
        android:inputType="textPersonName"
        android:layout_width="fill_parent">
    </EditText>

    <EditText
        android:id="@+id/EstEndLng"
        android:layout_height="wrap_content"
        android:hint="@string/formlongitude"
        android:inputType="textPersonName"
        android:layout_width="fill_parent">
    </EditText>

    <Spinner
        android:id="@+id/ExibEndereco"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:entries="@array/exibEndlist"
        android:prompt="@string/formexibirendereo"
        android:spinnerMode="dialog"></Spinner>

    <EditText
        android:id="@+id/EmprNome"
        android:layout_height="wrap_content"
        android:hint="@string/formnomempresa"
        android:inputType="textPersonName"
        android:layout_width="fill_parent">
    </EditText>

    <EditText
        android:id="@+id/DescBasica"
        android:layout_height="wrap_content"
        android:hint="@string/formdescricaobasica"
        android:inputType="textMultiLine"
        android:lines="2"
        android:layout_width="fill_parent">
    </EditText>

    <EditText
        android:id="@+id/DescSobre"
        android:layout_height="wrap_content"
        android:hint="@string/formsobrempresa"
        android:inputType="textMultiLine"
        android:lines="5"
        android:layout_width="fill_parent">
    </EditText>

    <EditText
        android:id="@+id/DescProdServicos"
        android:layout_height="wrap_content"
        android:hint="@string/fomrsobreprodservicos"
        android:inputType="textMultiLine"
        android:lines="5"
        android:layout_width="fill_parent">
    </EditText>

    <EditText
        android:id="@+id/EmprRazaoSocial"
        android:layout_height="wrap_content"
        android:hint="@string/formrazaosocial"
        android:inputType="textPersonName"
        android:layout_width="fill_parent">
    </EditText>

    <EditText
        android:id="@+id/EmprCNPJ"
        android:layout_height="wrap_content"
        android:hint="@string/formcnpj"
        android:inputType="textPersonName"
        android:layout_width="fill_parent">
    </EditText>

    <EditText
        android:id="@+id/EmprWebsite"
        android:layout_height="wrap_content"
        android:hint="@string/formwebsite"
        android:inputType="textPersonName"
        android:layout_width="fill_parent">
    </EditText>

    <EditText
        android:id="@+id/EmprEmail"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/formemail"
        android:inputType="textEmailAddress"></EditText>

    <EditText
        android:id="@+id/TelefonePri"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/formtelprincipal"
        android:inputType="phone"></EditText>

    <EditText
        android:id="@+id/TelefoneOutrs"
        android:layout_height="wrap_content"
        android:hint="@string/formoutrostels"
        android:inputType="textPersonName"
        android:layout_width="fill_parent">
    </EditText>

    <Spinner
        android:id="@+id/ExibTelefone"
        android:layout_height="wrap_content"
        android:prompt="@string/formexibirtelefone"
        android:layout_width="fill_parent"
        android:entries="@array/exibTellist">
    </Spinner>

    <Button
        android:id="@+id/BtnSaveEmpresa"
        android:layout_height="wrap_content"
        android:text="@string/formbtnsalvar"
        android:onClick="saveEmpresa"
        android:layout_width="fill_parent">
    </Button>

</LinearLayout>

</ScrollView>

---- UPDATED ----

At @regmoraes' suggestion to use ConstraintLayout, remade the form and it’s getting much better. I decided to change the colors tbm.

Below is the result of the new layout:

Formulário com ConstraintLayout

A thousand times better and more organized.

android android-layout form

1 answer

2


Frankly, this is a matter of UX+UI. You can even use the components of Material Design to follow Uideline, but how these components will be organized and their style is up to you to decide.

Regarding the form creation tips, I suggest dividing it into sections in the scrollview or different screens. This way the filling is divided into categorized steps ( Personal Data, Address, Contact etc.) and is not so dull.

As for the examples, you can find some on Uplabs

  • Thanks for answering, about the organization and style of the form I already have idea of how I want, just do not know how to perform in android studio in xml. Creating an idea in photoshop for me is super easy, now make this idea turn code is that I have difficulty understand? I looked at the site of Uplabs q vc passed me, and there are only ideas for photoshop and PSD files, there is nothing in XML, at least not found. About splitting sections, it would be with Linearlayout, as I’m doing inside Scrollview??

  • 1

    In that case, I suggest you use the Constraintlayout. This way, you would have a scrollview with a layout Constraint inside, and within that Constraint, all other views. Remember that using this layout, in the beginning, n is necessary to use relative layouts or linear layouts

  • Face the Constraintlayout is very good, I believe it should be even the best way for the forms layouts. I took a look at the link you passed, I’m already restructuring my form, and it’s getting much more organized and elegant. Thank you so much for this tip.

  • I edited the question by placing the result of the new form with Constraintlayout. Thank you!!

Browser other questions tagged android android-layout form

You are not signed in. Login or sign up in order to post.