Rozszerzona edycja wyglądu aplikacji w Android Studio (kontrolki i LinearLayout)

Wstęp

Na poprzedniej lekcji stworzyliśmy aplikację z napisem i przyciskami. Teraz nauczymy się projektować bardziej rozbudowany interfejs w Android Studio, korzystając z LinearLayout oraz dodatkowych kontrolek.

Cele lekcji

  1. Poznać i wykorzystać LinearLayout do układu pionowego i poziomego.
  2. Umieć dodawać nowe kontrolki (EditText, Switch, ImageView).
  3. Tworzyć interfejs reagujący na działania użytkownika.

Sprawozdanie

  • wykonane w edytorze tekstowym np. Word, Google Docs
  • dla każdego zadania screen kodu i screen działania aplikacji
  • wysłane do końca zajęć na mail: zajecia@tsadowski.pl

1. Przygotowanie pliku graficznego

  1. Wybierz obrazek w formacie .png lub .jpg (najlepiej w rozdzielczości odpowiedniej do aplikacji mobilnych).
  2. Nazwij plik małymi literami i bez spacji (np. logo.png).
  3. Skopiuj plik.

2. Wklejenie obrazka do projektu

  1. W Android Studio otwórz zakładkę Project (po lewej stronie).
  2. Przełącz widok na Android.
  3. Wejdź do folderu: app > res > drawable
  4. Wklej swój plik do folderu drawable.
  5. Android Studio zapyta, czy chcesz skopiować plik – wybierz OK.

(Folder drawable służy do przechowywania obrazków i ikon.)

3. Dodanie ImageView w XML

W pliku activity_main.xml umieść element ImageView. Na przykład:

<ImageView
    android:id="@+id/myImage"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:src="@drawable/logo"
    android:contentDescription="Logo aplikacji" />
  • @drawable/logo oznacza plik logo.png w folderze drawable.
  • layout_width i layout_height określają rozmiar (możesz użyć wrap_content lub konkretnej wartości w dp).
  • contentDescription to opis obrazka (ważny dla dostępności).

4. Sterowanie obrazkiem w Javie

W pliku MainActivity.java możesz sterować obrazkiem np. ukrywać/pokazywać:

ImageView imageView = findViewById(R.id.myImage);

// Ukrywanie obrazka
imageView.setVisibility(View.INVISIBLE);

// Pokazywanie obrazka
imageView.setVisibility(View.VISIBLE);

Możesz też zmieniać obrazek w trakcie działania aplikacji:

imageView.setImageResource(R.drawable.inny_obrazek);

5. Uruchomienie aplikacji

  • Uruchom projekt w emulatorze lub na telefonie.
  • Sprawdź, czy obrazek pojawia się na ekranie.
  • Spróbuj dodać przycisk, który będzie pokazywał/ukrywał obrazek (ćwiczenie z poprzedniej lekcji).

Przykłady do wzorowania się

Przykład A: LinearLayout pionowy

<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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Przykładowy napis" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Przykładowy przycisk" />

</LinearLayout>

(Zwróć uwagę na orientation="vertical" – elementy ułożą się jeden pod drugim.)

Przykład B: LinearLayout poziomy

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Lewy" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Prawy" />

</LinearLayout>

(Tutaj orientation="horizontal" – elementy będą obok siebie.)

Przykład C: Pobieranie tekstu z EditText

EditText editText = findViewById(R.id.myEditText);
Button button = findViewById(R.id.myButton);

button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        String wpisanyTekst = editText.getText().toString();
        // teraz możesz użyć zmiennej wpisanyTekst
    }
});

(Metoda getText().toString() służy do pobrania wpisanego tekstu.)

Przykład D: Obsługa przełącznika (Switch)

Switch mySwitch = findViewById(R.id.mySwitch);

mySwitch.setOnCheckedChangeListener((buttonView, isChecked) -> {
    if (isChecked) {
        // Tryb włączony
    } else {
        // Tryb wyłączony
    }
});

(Metoda setOnCheckedChangeListener pozwala reagować na zmianę stanu przełącznika.)

Przykład E: Ukrywanie i pokazywanie obrazka

ImageView imageView = findViewById(R.id.myImage);
Button button = findViewById(R.id.toggleButton);

button.setOnClickListener(v -> {
    if (imageView.getVisibility() == View.VISIBLE) {
        imageView.setVisibility(View.INVISIBLE);
    } else {
        imageView.setVisibility(View.VISIBLE);
    }
});

(Metoda setVisibility pozwala ukrywać i pokazywać elementy.)

Ćwiczenia

Ćwiczenie 1. LinearLayout pionowy

Stwórz interfejs z TextView, EditText i Buttonem ułożonymi jeden pod drugim i wyśrodkowanymi. Skorzystaj ze wzorca z Przykładu A.

Ćwiczenie 2. LinearLayout poziomy

Dodaj do aplikacji drugi LinearLayout wewnątrz pierwszego i ustaw jego orientację na horizontal. Umieść w nim dwa przyciski obok siebie. Skorzystaj ze wzorca z Przykładu B.

Ćwiczenie 3. EditText i powitanie

Dodaj EditText (pole tekstowe) i przycisk „Pokaż powitanie”. Po kliknięciu, w TextView ma pojawić się tekst: „Witaj, [imię]!”. Skorzystaj ze wzorca z Przykładu C.

Ćwiczenie 4. Tryb ciemny (Switch)

Dodaj kontrolkę Switch z podpisem „Tryb ciemny”. Jeśli jest włączony → zmień kolor tła na ciemny, a tekst na jasny. Jeśli wyłączony → wróć do jasnego motywu. Skorzystaj ze wzorca z Przykładu D.

Ćwiczenie 5. Obrazek

Dodaj do aplikacji obrazek (ImageView). Następnie stwórz przycisk, który będzie pokazywał i ukrywał obrazek. Skorzystaj ze wzorca z Przykładu E.

Podsumowanie

Na tej lekcji:

  • poznałeś LinearLayout w wersji pionowej i poziomej,
  • nauczyłeś się korzystać z EditText, Switch, ImageView,
  • zobaczyłeś przykłady w Javie, które pomogą Ci w implementacji,
  • dostałeś zadania, które wymagają wykorzystania tych wzorców w praktyce.