Folder „res” – zasoby aplikacji (grafika, teksty, kolory)

1. Wstęp

Każda aplikacja Android oprócz kodu źródłowego zawiera także zasoby, czyli pliki, które wpływają na wygląd i treść interfejsu użytkownika. Do zasobów zaliczamy między innymi:

  • grafikę i ikony,
  • teksty i napisy,
  • kolory i style.

Wszystkie te elementy przechowywane są w folderze res (skrót od resources). Dzięki nim aplikacja może być łatwo modyfikowana, tłumaczona na inne języki i wizualnie dopasowana do różnych urządzeń.

Dzisiejsza lekcja pokaże Ci, jak dodać obraz do aplikacji, jak korzystać z ikon Android Studio oraz jak zmieniać wygląd elementów w pliku activity_main.xml.

2. Cele lekcji

Uczeń po lekcji:

  • zna przeznaczenie folderu res,
  • potrafi dodać grafikę lub ikonę do projektu,
  • rozumie sposób korzystania z zasobów w kodzie XML,
  • potrafi zmienić podstawowe właściwości stylu elementów interfejsu.

3. Folder „res” – omówienie zasobów aplikacji

W folderze res znajdują się różne podfoldery. Dziś skupimy się na trzech z nich:

  • drawable – tu umieszczamy grafiki (np. obrazy, ilustracje, tła),
  • mipmap – zawiera ikony aplikacji (np. ic_launcher),
  • values – przechowuje pliki XML z tekstami (strings.xml), kolorami (colors.xml) i stylami (styles.xml).

4. Dodawanie obrazu do aplikacji

Aby dodać własny obraz do aplikacji:

  1. W panelu Project rozwiń folder: app > res > drawable.

  2. Kliknij prawym przyciskiem myszy na folder drawable → wybierz: Reveal in Explorer (lub „Pokaż w Eksploratorze plików”).

  3. Skopiuj do tego folderu wybrany plik graficzny, np. logo.png.

  4. Wróć do Android Studio – grafika pojawi się w folderze drawable.

  5. Otwórz plik activity_main.xml i wstaw obraz do interfejsu:

    <ImageView
    android:id="@+id/logoImage"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_gravity="center"
    android:src="@drawable/logo" />

    android:src – określa, z którego pliku drawable ma zostać wczytany obraz. Nazwa pliku nie zawiera rozszerzenia .png.

5. Wykorzystanie ikon z Android Studio

Android Studio zawiera zestaw gotowych ikon (np. strzałki, przyciski, symbole ustawień), które można łatwo dodać do projektu:

  1. Kliknij prawym przyciskiem myszy na folder drawable.
  2. Wybierz New → Vector Asset.
  3. Kliknij Clip Art, aby otworzyć bibliotekę ikon.
  4. Wybierz np. ikonę „home” i kliknij Next → Finish. Ikona zostanie zapisana jako plik XML (np. ic_home.xml) w folderze drawable.

Aby dodać ikonę do interfejsu (np. przycisku), wpisz w activity_main.xml:

<ImageButton
    android:id="@+id/homeButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_home"
    android:background="@android:color/transparent"
    android:contentDescription="@string/home_icon" />

Warto wiedzieć: Ikony wektorowe w Android Studio są skalowalne, dzięki czemu wyglądają dobrze na różnych rozdzielczościach ekranu.

6. Właściwości zmieniające styl w activity_main.xml

Każdy element interfejsu (np. przycisk, tekst, obraz) może mieć swoje właściwości stylu. Oto kilka podstawowych atrybutów, które warto znać:

a) Rozmiar i położenie

  • android:layout_width i android:layout_height – szerokość i wysokość (np. wrap_content, match_parent, 200dp),
  • android:layout_gravity – wyrównanie w układzie (np. center, left, right),
  • android:padding – wewnętrzny odstęp od krawędzi.

b) Tekst i kolory

  • android:text – treść napisu,
  • android:textColor – kolor tekstu (np. @color/primaryColor lub #FFFFFF),
  • android:textSize – rozmiar czcionki (np. 18sp),
  • android:background – tło (może być kolor lub grafika, np. @drawable/logo).

c) Przykład – przycisk ze zmienionym stylem:

<Button
    android:id="@+id/buttonStart"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/start"
    android:textColor="@color/white"
    android:textSize="18sp"
    android:backgroundTint="@color/primaryColor"
    android:layout_gravity="center" />

d) Kolory z pliku colors.xml

Plik colors.xml (w folderze res/values) może wyglądać tak:

<color name="primaryColor">#3F51B5</color>
<color name="white">#FFFFFF</color>

Dzięki temu możesz zmieniać kolor całej aplikacji, edytując tylko jeden plik.

7. Ćwiczenia wprowadzające

Zadanie 1: Dodaj do folderu res/drawable własny plik graficzny (np. logo.png). Wstaw go do interfejsu aplikacji jako obraz w activity_main.xml i dopasuj jego rozmiar.

Zadanie 2: Dodaj ikonę wektorową z Android Studio (np. „home” lub „info”) do folderu drawable. Umieść ją na ekranie aplikacji jako ImageButton.

Zadanie 3: W pliku colors.xml dodaj dwa nowe kolory (primaryColor, accentColor) i zmień tło przycisku i kolor tekstu w activity_main.xml korzystając z kolorów z pliku colors.xml.

Zadanie4: Dodaj do przycisku właściwości android:padding oraz android:textSize, aby poprawić jego wygląd.

Zadanie 5 : Połącz ikonę i tekst w jednym przycisku, używając android:drawableLeft (ikona po lewej stronie napisu). Przykład:

<Button
    android:id="@+id/infoButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Informacje"
    android:drawableLeft="@drawable/ic_info"
    android:backgroundTint="@color/primaryColor"
    android:textColor="@color/white" />

8. Podsumowanie

Folder res to serce zasobów wizualnych aplikacji. To właśnie tu znajdują się obrazy, ikony, kolory i teksty, które budują wygląd interfejsu użytkownika. Dzięki rozdzieleniu kodu od zasobów możesz łatwo zmieniać wygląd aplikacji bez ingerencji w jej logikę. Na następnych zajęciach nauczymy się łączenia elementów interfejsu XML z kodem w języku Kotlin lub Java, aby aplikacja reagowała na działania użytkownika.