Wstawianie i skalowanie elementów i obrazów

1. Wstęp

W poprzedniej części poznałeś podstawy pracy z grafiką, ikonami i kolorami aplikacji w folderze res. Dziś rozszerzamy temat o kolejne ważne zagadnienia, które pozwolą Ci bardziej świadomie projektować wygląd aplikacji i lepiej organizować zasoby.

2. Nowe zagadnienia

2.1. Folder drawable – grafika rastrowa i wektorowa

W folderze drawable mogą znajdować się dwa główne typy plików:

a) Grafika rastrowa (PNG, JPG, WEBP)

Typowy obrazek, np. zdjęcie lub logo. Stosujemy głównie dla:

  • zdjęć,
  • grafik o dużej szczegółowości,
  • tekstur tła.

Wadą jest to, że powiększanie pogarsza jakość.

b) Grafika wektorowa (pliki XML)

To ikony tworzone jako Vector Drawable. Są skalowalne i zawsze wyglądają ostro, niezależnie od rozdzielczości.

Android Studio pozwala tworzyć je poprzez: New → Vector Asset → Clip Art.

Kiedy używać czego?

  • ikonki → wektory
  • zdjęcia → PNG/JPG/WEBP
  • tła drobne → raster
  • tła jednolite → lepiej zrobić style/kolor niż grafikę

2.2. Selectory – zmiana wyglądu elementu po kliknięciu

Czasem chcesz, aby przycisk zmieniał kolor po kliknięciu. Do tego służy selector, tworzony w drawable.

Przykład pliku button_selector.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@color/primaryDark" />
    <item android:drawable="@color/primaryColor" />
</selector>

Użycie w przycisku:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Kliknij"
    android:background="@drawable/button_selector"
        android:clickable="true"/>

2.3. Style – definiowanie wyglądu wielu elementów naraz

Aby nie powtarzać tych samych właściwości w wielu przyciskach, używamy stylów.

Przykład w styles.xml:


<resources>
    <style name="MainButtonStyle">
                <item name="android:textColor">@color/white</item>
                <item name="android:textSize">18sp</item>
                <item name="android:padding">10dp</item>
                <item name="android:background">@color/primaryColor</item>
        </style>
</resources>

Zastosowanie:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/MainButtonStyle"
    android:text="Zapisz" />

Zalety:

  • centralne zarządzanie wyglądem,
  • szybka zmiana stylistyki całej aplikacji,
  • porządkuje kod.

2.4. Tworzenie własnych kształtów (shape) w drawable

Możesz tworzyć własne kształty, np. zaokrąglone przyciski.

Przykład rounded_button.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@color/primaryColor"/>
    <corners android:radius="20dp"/>
    <padding android:left="20dp" android:right="20dp"
        android:top="10dp" android:bottom="10dp"/>
</shape>

Użycie w przycisku:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Start"
    android:background="@drawable/rounded_button"
        android:clickable="true"/>