Interaktywna aplikacja — obrazek, tekst i przyciski

Cele lekcji

• Utrwalenie umiejętności pracy z plikiem activity_main.xml.
• Poznanie sposobu rozmieszczania i grupowania elementów za pomocą LinearLayout.
• Sterowanie różnymi elementami (tekst, obrazek, tło) za pomocą kodu w Javie.
• Tworzenie prostych reakcji na kliknięcia różnych przycisków.

---

Wprowadzenie teoretyczne

W poprzednich lekcjach poznałeś podstawy interfejsu użytkownika w Android Studio — dodawanie przycisków, zmienianie tekstu i koloru tła. Teraz rozszerzymy to o interakcję między kilkoma elementami:

• obrazkiem (ImageView),
• tekstem (TextView),
• przyciskami (Button),
• i kontenerem (LinearLayout).

Nauczysz się:

1. Jak sterować kilkoma kontrolkami jednocześnie.
2. Jak zmieniać wygląd aplikacji dynamicznie.
3. Jak budować prosty, logiczny układ graficzny.

---

Przykład, na którym możesz się wzorować

Poniższy przykład pokazuje aplikację, w której:

• wyświetlany jest obrazek,
• tekst zmienia się po kliknięciu jednego przycisku,
• inny przycisk zmienia tło,
• trzeci przycisk ukrywa/pokazuje obrazek.

activity_main.xml

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

    <TextView
        android:id="@+id/infoText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Kliknij przycisk!"
        android:textSize="22sp"
        android:textColor="#000000"
        android:layout_marginBottom="16dp"/>

    <ImageView
        android:id="@+id/myImage"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/logo"
        android:contentDescription="Logo aplikacji"
        android:layout_marginBottom="16dp"/>

    <Button
        android:id="@+id/changeTextButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Zmień tekst" />

    <Button
        android:id="@+id/changeColorButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Zmień kolor tła" />

    <Button
        android:id="@+id/toggleImageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ukryj / pokaż obrazek" />

</LinearLayout>

---

MainActivity.java

package com.example.lesson4app;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import android.widget.TextView;
import android.widget.Button;
import android.widget.ImageView;
import android.view.View;
import android.graphics.Color;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    private boolean imageVisible = true;

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

        LinearLayout layout = findViewById(R.id.mainLayout);
        TextView text = findViewById(R.id.infoText);
        ImageView image = findViewById(R.id.myImage);
        Button textButton = findViewById(R.id.changeTextButton);
        Button colorButton = findViewById(R.id.changeColorButton);
        Button toggleButton = findViewById(R.id.toggleImageButton);

        textButton.setOnClickListener(v -> {
            text.setText("Super! Kliknąłeś przycisk!");
        });

        colorButton.setOnClickListener(v -> {
            layout.setBackgroundColor(Color.parseColor("#FFCDD2")); // jasnoczerwony
        });

        toggleButton.setOnClickListener(v -> {
            if (imageVisible) {
                image.setVisibility(View.INVISIBLE);
                imageVisible = false;
            } else {
                image.setVisibility(View.VISIBLE);
                imageVisible = true;
            }
        });
    }
}

---

Ćwiczenia

Ćwiczenie 1: Utwórz w nowym projekcie podobny układ jak w przykładzie powyżej. Zmień kolory, rozmiary i rozmieszczenie elementów według własnego pomysłu.

Ćwiczenie 2: Zamiast jednego przycisku „Zmień kolor tła” stwórz trzy różne przyciski, które zmieniają tło na różne kolory.

Ćwiczenie 3: Dodaj nowy tekst (TextView), który będzie wyświetlał komunikat „Obrazek ukryty” lub „Obrazek widoczny” — aktualizowany po każdym kliknięciu przycisku „Ukryj / pokaż obrazek”.

Ćwiczenie 4: Spróbuj ułożyć wszystkie elementy poziomo (orientation="horizontal") i zobacz, jak zmieni się wygląd aplikacji.

---

Podsumowanie

Dzięki tej lekcji nauczyłeś się:

• tworzyć interaktywne układy z wieloma kontrolkami,
• rozmieszczać i stylizować elementy za pomocą LinearLayout,
• reagować na kliknięcia różnych przycisków,
• oraz modyfikować wygląd i zachowanie aplikacji w czasie działania.