Kształty, selektory i style w android studio

Tworzenie kształtów (shape) w Android Studio – wprowadzenie

W Android Studio możemy tworzyć własne kształty w plikach XML umieszczonych w folderze res/drawable. Kształty te służą przede wszystkim jako tła elementów UI, takich jak TextView, LinearLayout, ImageView, CardView, a także jako elementy selektorów (np. efekt kliknięcia). Nie działają one domyślnie na <Button/>, ponieważ Button korzysta z własnego stylu systemowego — dlatego częściej używa się ich z <android.widget.Button/>. Kształty opisujemy za pomocą elementu <shape>, a w jego wnętrzu określamy właściwości wizualne. Przykłady takich właściwości to: solid (kolor wypełnienia), stroke (obramowanie), corners (zaokrąglenia), padding (wewnętrzne marginesy), size (stała szerokość i wysokość), gradient (płynne przejście kolorów), shape (rodzaj figury: rectangle/oval/line/ring) oraz innerRadius i thickness przy pierścieniach. Dzięki tym właściwościom możemy tworzyć proste tła, zaokrąglone przyciski, panele, kapsułki, owalne pola, linie oddzielające sekcje, a nawet gradientowe paski.

Przykład pliku w res/drawable/rounded_box.xml z wieloma właściwościami:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 1. Kolor wypełnienia -->
    <solid android:color="#3F51B5" />

    <!-- 2. Obramowanie -->
    <stroke
        android:width="3dp"
        android:color="#1A237E" />

    <!-- 3. Zaokrąglenia -->
    <corners android:radius="16dp" />

    <!-- 4. Wewnętrzne marginesy -->
    <padding
        android:left="12dp"
        android:top="8dp"
        android:right="12dp"
        android:bottom="8dp" />

    <!-- 5. Gradient (opcjonalny, nadpisze solid, jeśli użyty) -->
    <!--
    <gradient
        android:startColor="#3F51B5"
        android:endColor="#1A237E"
        android:angle="90"/>
    -->

    <!-- 6. Rozmiar -->
    <size
        android:width="200dp"
        android:height="60dp" />

</shape>

Właściwości kluczowe:

  1. android:shape – typ kształtu: rectangle, oval, line, ring.
  2. solid – kolor wypełnienia tła.
  3. stroke – obramowanie: grubość + kolor.
  4. corners – zaokrąglenia rogów (radius).
  5. padding – marginesy wewnętrzne (odstęp między tekstem a brzegiem kształtu).
  6. size – ustalenie stałej szerokości i wysokości elementu.
  7. gradient – płynne przejście między kolorami (startColor, endColor, angle).
  8. innerRadius / thickness – właściwości dla kształtu typu „ring” (pierścień).

Selektory (selector) w Android Studio – kilka stanów elementu

Selektor (selector) to specjalny plik XML w folderze res/drawable, który pozwala zmieniać wygląd elementu interfejsu w zależności od jego stanu. Najczęściej używa się go do tworzenia efektów wizualnych dla „pseudo-przycisków”, czyli np. TextView pełniących rolę klikanych kafelków. W selektorze można zdefiniować wiele różnych stanów — nie tylko pressed. Typowe stany, które można wykorzystać to: focused (element wybrany np. klawiaturą), selected (zaznaczony), enabled (włączony), disabled (wyłączony), checked (zaznaczony w przypadku CheckBox / Switch), activated (aktywny w logice aplikacji) oraz default (gdy żaden stan nie pasuje). Każdy stan wskazuje osobny plik kształtu (shape) lub kolor tła.

Selekory działają najlepiej z elementami, które nie mają własnego stylu systemowego (np. TextView, ImageView, LinearLayout). W przypadku Button większość selektorów i kształtów nie działa bez wyłączenia stylów systemowych, dlatego w tym celu wykorzystujemy raczej TextView jako zamiennik przycisku.

Przykładowy selektor z 4 stanami (bez używania pressed)

Plik: res/drawable/menu_item_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 1. Stan: element wyłączony -->
    <item android:state_enabled="false"
        android:drawable="@drawable/bg_disabled" />

    <!-- 2. Stan: element wybrany (selected) -->
    <item android:state_selected="true"
        android:drawable="@drawable/bg_selected" />

    <!-- 3. Stan: element jest zaznaczony (checked) -->
    <item android:state_checked="true"
        android:drawable="@drawable/bg_focused" />

    <!-- 4. Stan domyślny -->
    <item android:drawable="@drawable/bg_default" />

</selector>

Omówienie wykorzystanych stanów

  1. state_enabled=”false” Element ma być wyszarzony lub nieaktywny. Często używa się słabszego koloru lub mniejszego kontrastu.

  2. state_selected=”true” Ten stan jest wygodny np. w menu, zakładkach, listach wyboru. Można podkreślić, które „pudełko” zostało kliknięte.

  3. state_checked=”true” Widoczne głównie wtedy, gdy obiekt zmieni swój stan na zaznaczony.

  4. domyślny Ten element wykonuje się zawsze wtedy, gdy pozostałe warunki nie zostały spełnione. To podstawowy wygląd.

Style w Android Studio – czym są i jak ich używać

Style w Android Studio to zestawy właściwości wizualnych, które można nadać elementom interfejsu, aby zachować spójny wygląd w całej aplikacji. Style zapisuje się w plikach XML w folderze res/values, najczęściej w styles.xml. Każdy styl może definiować wygląd takich elementów jak TextView, Button, Switch, CardView czy ImageButton – ważne tylko, aby dobrać właściwości pasujące do typu elementu. Dzięki stylom możesz jednym ustawieniem zmienić wygląd wielu elementów naraz, bez powtarzania kodu w każdym widoku. W stylu definiujesz właściwości takie jak kolor tekstu, wielkość czcionki, marginesy, wypełnienia, tło czy rodzaj czcionki. Można również dziedziczyć style po innych stylach, co pozwala tworzyć całe hierarchie estetyczne w aplikacji.

Najważniejsze właściwości używane w stylach (8 przykładów)

  1. android:textColor – ustawia kolor tekstu.
  2. android:textSize – określa wielkość czcionki (np. 16sp, 20sp).
  3. android:fontFamily – nadaje rodzinę czcionki (np. sans-serif, monospace).
  4. android:padding – ustawia wewnętrzne odstępy elementu.
  5. android:layout_margin – określa marginesy zewnętrzne elementu.
  6. android:background – nadaje tło, np. kolor, selector lub shape.
  7. android:gravity – ustawia wyrównanie tekstu wewnątrz elementu (center, left, right).
  8. android:width / android:height – pozwalają zmienić domyślny rozmiar elementu (np. 200dp, wrap_content, match_parent).

Przykładowy styl z wieloma właściwościami

Plik: res/values/styles.xml

<style name="MenuItemStyle">
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textSize">18sp</item>
    <item name="android:fontFamily">sans-serif-medium</item>
    <item name="android:padding">16dp</item>
    <item name="android:layout_margin">8dp</item>
    <item name="android:background">@drawable/menu_item_selector</item>
    <item name="android:gravity">center</item>
    <item name="android:layout_width">match_parent</item>
</style>

ĆWICZENIA

Ćwiczenie 1

Utwórz w folderze res/drawable plik o nazwie rounded_blue.xml. Ma to być prostokątny shape z następującymi cechami: – zaokrąglenie rogów 20dp, – kolor tła #2196F3, – obramowanie 2dp koloru #0D47A1, – padding wewnętrzny min. 10dp. Następnie zastosuj ten shape jako tło <android.widget.Button/> pełniącego rolę przycisku.

Ćwiczenie 2

Stwórz drugi shape o nazwie rounded_blue_dark.xml, który ma być ciemniejszą wersją poprzedniego (dowolny ciemniejszy kolor). Zastosuj inne zaokrąglenie (np. 4dp), aby efekt był widoczny. Przygotuj go do wykorzystania później w selektorze.

Ćwiczenie 3

Utwórz shape o nazwie oval_marker.xml, który będzie okrągłym markerem: – przypisz android:shape="oval", – wypełnienie np. #FF5722, – rozmiar 48dp na 48dp, – obramowanie 3dp koloru #E64A19. Użyj go jako tło małego ImageView.

Ćwiczenie 4

Stwórz selektor o nazwie rounded_blue_selector.xml korzystający z shape’ów z ćwiczeń 1 i 2. Powinien zawierać dwa stany: – state_pressed=”true” → rounded_blue_dark.xml, – default → rounded_blue.xml. Podłącz selektor do <android.widget.Button/>.

Ćwiczenie 5

Stwórz selektor dla <Switch/>, o nazwie toggle_selector.xml. Użyj dwóch różnych shape’ów: – wersja „ON”: prostokąt z gradientem (np. zielony → ciemny zielony), – wersja „OFF”: prostokąt jednolity, szary. Stan, jaki obsługujesz: – state_checked=”true” → ON, – default lub state_checked=”false” → OFF.

Ćwiczenie 6

Znajdz selektor który działa z 2 stanami state_focused i default W każdym stanie zastosuj inny shape stworzony przez Ciebie (może być prostokąt, owal, ring – dowolnie).

Ćwiczenie 7

Utwórz styl o nazwie ClickableBoxStyle, który ustawia: – textSize 20sp, – padding 16dp, – textColor biały, – gravity center, – background → selektor z ćwiczenia 4. Zastosuj styl do przynajmniej dwóch TextView w layoucie.

Ćwiczenie 8

Stwórz styl ToggleStyle, który nadaje TextView wygląd przełącznika: – background → selektor z ćwiczenia 5, – textStyle=”bold”, – minWidth=”120dp”, – padding=”10dp”. Zastosuj styl do swojego „przełącznika”.

Ćwiczenie 9

Utwórz styl EditTextStyle i zastosuj go do EditText. Styl powinien ustawiać: – width i height (np. 60dp), – padding 8dp, – background → selektor z ćwiczenia 6, – tint dowolnego koloru, – focusable=”true”. Sprawdz jak element działa ze stylem.