Formularze, walidacja i wygląd elementów w Android Studio

Cele lekcji

Po zakończeniu tej lekcji uczeń:

potrafi stworzyć pole tekstowe do wpisywania hasła (ukrywanie znaków),
waliduje poprawność adresu e-mail,
porównuje zawartość pól tekstowych,
potrafi zmienić kolory, rozmiar i wygląd czcionki,
zna zasady działania EditText i InputType.

1. Wprowadzenie teoretyczne

W Androidzie dane użytkownika wpisuje się przez elementy EditText, które mogą mieć różne typy:

textEmailAddress — pole e-mail,
textPassword — pole hasła (ukrywa znaki),
textPersonName — imię,
number — liczba,
phone — numer telefonu.

Dzięki temu system Android sam dobiera odpowiednią klawiaturę, a programista może łatwo walidować dane.

Walidacja danych

Walidacja to sprawdzenie, czy dane wpisane przez użytkownika są poprawne. Przykładowo:

czy adres e-mail ma znak @,
czy dwa hasła są identyczne,
czy pole nie jest puste.

2. Przykład: Prosty formularz logowania

`activity_main.xml`

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="24dp"
    android:background="#ECEFF1">

    <EditText
        android:id="@+id/emailInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Wpisz adres e-mail"
        android:inputType="textEmailAddress"
        android:textColor="#000000"
        android:textSize="18sp"
        android:layout_marginBottom="12dp"/>

    <EditText
        android:id="@+id/passwordInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Wpisz hasło"
        android:inputType="textPassword"
        android:textColor="#000000"
        android:textSize="18sp"
        android:layout_marginBottom="12dp"/>

    <EditText
        android:id="@+id/passwordRepeatInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Powtórz hasło"
        android:inputType="textPassword"
        android:textColor="#000000"
        android:textSize="18sp"
        android:layout_marginBottom="12dp"/>

    <Button
        android:id="@+id/validateButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Zarejestruj się"
        android:textColor="#FFFFFF"
        android:background="#03A9F4"/>

    <TextView
        android:id="@+id/messageText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textColor="#D32F2F"
        android:layout_marginTop="20dp"/>

</LinearLayout>

`MainActivity.java`

package com.example.lesson5form;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import android.widget.EditText;
import android.widget.Button;
import android.widget.TextView;
import android.view.View;
import android.util.Patterns;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        EditText emailInput = findViewById(R.id.emailInput);
        EditText passwordInput = findViewById(R.id.passwordInput);
        EditText passwordRepeat = findViewById(R.id.passwordRepeatInput);
        Button validateButton = findViewById(R.id.validateButton);
        TextView messageText = findViewById(R.id.messageText);

        validateButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String email = emailInput.getText().toString();
                String pass1 = passwordInput.getText().toString();
                String pass2 = passwordRepeat.getText().toString();

                if (!Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
                    messageText.setText("Niepoprawny adres e-mail!");
                } else if (!pass1.equals(pass2)) {
                    messageText.setText("Hasła nie są takie same!");
                } else if (pass1.length() < 6) {
                    messageText.setText("Hasło jest za krótkie!");
                } else {
                    messageText.setTextColor(0xFF388E3C); // zielony
                    messageText.setText("Rejestracja zakończona sukcesem!");
                }
            }
        });
    }
}

3. Omówienie kodu

android:inputType="textPassword" – powoduje, że wpisywane znaki są ukryte.
Patterns.EMAIL_ADDRESS.matcher(email).matches() – sprawdza, czy adres e-mail ma poprawny format.
equals() – porównuje dwa teksty (tu: hasła).
messageText.setTextColor() – zmienia kolor komunikatu.
android:textSize="18sp" – ustawia rozmiar czcionki w jednostkach „sp” (skalowalne piksele).

4. Dodatkowe modyfikacje wyglądu

Możesz dowolnie stylizować pola:

android:textColor — kolor tekstu,
android:hintTextColor — kolor podpowiedzi,
android:background — zmiana tła (np. @drawable/custom_input_background),
android:textStyle="bold|italic" — pogrubienie lub kursywa.

5. Ćwiczenia dla uczniów

Ćwiczenie 1 Utwórz nowy projekt „Formularz”. Dodaj pola: imię, e-mail, hasło, powtórz hasło i przycisk. Zadbaj o czytelne rozmieszczenie i kolory.

Ćwiczenie 2 Dodaj walidację:

e-mail musi zawierać @,
hasło nie może być puste. Po błędzie ma się wyświetlać komunikat w TextView.

Ćwiczenie 3 Dodaj warunek, że hasło musi mieć co najmniej 8 znaków. Jeśli jest za krótkie — wyświetl tekst czerwony, jeśli poprawne — zielony.

Ćwiczenie 4 Zmieniaj kolor tła całego układu w zależności od poprawności danych:

czerwony — błędne dane,
zielony — poprawne dane.

Ćwiczenie 5 Dodaj osobny przycisk „Wyczyść pola”, który usuwa zawartość wszystkich EditText.

Ćwiczenie 6 (zaawansowane) Dodaj obrazek (np. ikonę kłódki) obok pola hasła, który zmienia się po poprawnym wpisaniu dwóch identycznych haseł. Podpowiedź: użyj ImageView.setVisibility(View.VISIBLE) i setVisibility(View.INVISIBLE).

6. Podsumowanie

Na tej lekcji nauczyłeś się:

tworzyć pola tekstowe i hasłowe (EditText),
stosować walidację danych,
porównywać wartości pól,
dostosowywać kolory i rozmiary czcionek,
oraz tworzyć prosty formularz rejestracyjny z komunikatami.