{"id":627,"date":"2025-12-04T01:04:22","date_gmt":"2025-12-04T00:04:22","guid":{"rendered":"https:\/\/zajecia.tsadowski.pl\/?p=627"},"modified":"2025-12-04T13:14:33","modified_gmt":"2025-12-04T12:14:33","slug":"627","status":"publish","type":"post","link":"https:\/\/zajecia.tsadowski.pl\/index.php\/2025\/12\/04\/627\/","title":{"rendered":"Kszta\u0142ty, selektory i style w android studio"},"content":{"rendered":"

Tworzenie kszta\u0142t\u00f3w (shape) w Android Studio \u2013 wprowadzenie<\/h2>\n

W Android Studio mo\u017cemy tworzy\u0107 w\u0142asne kszta\u0142ty w plikach XML umieszczonych w folderze res\/drawable<\/code>. Kszta\u0142ty te s\u0142u\u017c\u0105 przede wszystkim jako t\u0142a element\u00f3w UI, takich jak TextView<\/strong>, LinearLayout<\/strong>, ImageView<\/strong>, CardView<\/strong>, a tak\u017ce jako elementy selektor\u00f3w (np. efekt klikni\u0119cia). Nie dzia\u0142aj\u0105 one domy\u015blnie na <Button\/><\/code>, poniewa\u017c Button korzysta z w\u0142asnego stylu systemowego \u2014 dlatego cz\u0119\u015bciej u\u017cywa si\u0119 ich z <android.widget.Button\/><\/code>. Kszta\u0142ty opisujemy za pomoc\u0105 elementu <shape><\/code>, a w jego wn\u0119trzu okre\u015blamy w\u0142a\u015bciwo\u015bci wizualne. Przyk\u0142ady takich w\u0142a\u015bciwo\u015bci to: solid<\/code> (kolor wype\u0142nienia), stroke<\/code> (obramowanie), corners<\/code> (zaokr\u0105glenia), padding<\/code> (wewn\u0119trzne marginesy), size<\/code> (sta\u0142a szeroko\u015b\u0107 i wysoko\u015b\u0107), gradient<\/code> (p\u0142ynne przej\u015bcie kolor\u00f3w), shape<\/code> (rodzaj figury: rectangle\/oval\/line\/ring) oraz innerRadius<\/code> i thickness<\/code> przy pier\u015bcieniach. Dzi\u0119ki tym w\u0142a\u015bciwo\u015bciom mo\u017cemy tworzy\u0107 proste t\u0142a, zaokr\u0105glone przyciski, panele, kapsu\u0142ki, owalne pola, linie oddzielaj\u0105ce sekcje, a nawet gradientowe paski.<\/p>\n

\n

Przyk\u0142ad pliku w res\/drawable\/rounded_box.xml<\/code> z wieloma w\u0142a\u015bciwo\u015bciami:<\/h3>\n
<?xml version="1.0" encoding="utf-8"?>\n<shape xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android"\n    android:shape="rectangle">\n    <!-- 1. Kolor wype\u0142nienia -->\n    <solid android:color="#3F51B5" \/>\n\n    <!-- 2. Obramowanie -->\n    <stroke\n        android:width="3dp"\n        android:color="#1A237E" \/>\n\n    <!-- 3. Zaokr\u0105glenia -->\n    <corners android:radius="16dp" \/>\n\n    <!-- 4. Wewn\u0119trzne marginesy -->\n    <padding\n        android:left="12dp"\n        android:top="8dp"\n        android:right="12dp"\n        android:bottom="8dp" \/>\n\n    <!-- 5. Gradient (opcjonalny, nadpisze solid, je\u015bli u\u017cyty) -->\n    <!--\n    <gradient\n        android:startColor="#3F51B5"\n        android:endColor="#1A237E"\n        android:angle="90"\/>\n    -->\n\n    <!-- 6. Rozmiar -->\n    <size\n        android:width="200dp"\n        android:height="60dp" \/>\n\n<\/shape><\/code><\/pre>\n
\n
W\u0142a\u015bciwo\u015bci kluczowe:<\/h2>\n
    \n
  1. android:shape<\/strong> \u2013 typ kszta\u0142tu: rectangle, oval, line, ring.<\/li>\n
  2. solid<\/strong> \u2013 kolor wype\u0142nienia t\u0142a.<\/li>\n
  3. stroke<\/strong> \u2013 obramowanie: grubo\u015b\u0107 + kolor.<\/li>\n
  4. corners<\/strong> \u2013 zaokr\u0105glenia rog\u00f3w (radius).<\/li>\n
  5. padding<\/strong> \u2013 marginesy wewn\u0119trzne (odst\u0119p mi\u0119dzy tekstem a brzegiem kszta\u0142tu).<\/li>\n
  6. size<\/strong> \u2013 ustalenie sta\u0142ej szeroko\u015bci i wysoko\u015bci elementu.<\/li>\n
  7. gradient<\/strong> \u2013 p\u0142ynne przej\u015bcie mi\u0119dzy kolorami (startColor, endColor, angle).<\/li>\n
  8. innerRadius \/ thickness<\/strong> \u2013 w\u0142a\u015bciwo\u015bci dla kszta\u0142tu typu \u201ering\u201d (pier\u015bcie\u0144).<\/li>\n<\/ol>\n
    Selektory (selector) w Android Studio \u2013 kilka stan\u00f3w elementu<\/h2>\n
    Selektor (selector<\/code>) to specjalny plik XML w folderze res\/drawable<\/code>, kt\u00f3ry pozwala zmienia\u0107 wygl\u0105d elementu interfejsu w zale\u017cno\u015bci od jego stanu. Najcz\u0119\u015bciej u\u017cywa si\u0119 go do tworzenia efekt\u00f3w wizualnych dla „pseudo-przycisk\u00f3w”, czyli np. TextView pe\u0142ni\u0105cych rol\u0119 klikanych kafelk\u00f3w. W selektorze mo\u017cna zdefiniowa\u0107 wiele r\u00f3\u017cnych stan\u00f3w \u2014 nie tylko pressed<\/code>. Typowe stany, kt\u00f3re mo\u017cna wykorzysta\u0107 to: focused<\/code> (element wybrany np. klawiatur\u0105), selected<\/code> (zaznaczony), enabled<\/code> (w\u0142\u0105czony), disabled<\/code> (wy\u0142\u0105czony), checked<\/code> (zaznaczony w przypadku CheckBox \/ Switch), activated<\/code> (aktywny w logice aplikacji) oraz default<\/code> (gdy \u017caden stan nie pasuje). Ka\u017cdy stan wskazuje osobny plik kszta\u0142tu (shape<\/code>) lub kolor t\u0142a.<\/p>\n
    Selekory dzia\u0142aj\u0105 najlepiej z elementami, kt\u00f3re nie maj\u0105 w\u0142asnego stylu systemowego (np. TextView, ImageView, LinearLayout). W przypadku Button<\/code> wi\u0119kszo\u015b\u0107 selektor\u00f3w i kszta\u0142t\u00f3w nie dzia\u0142a bez wy\u0142\u0105czenia styl\u00f3w systemowych, dlatego w tym celu wykorzystujemy raczej TextView jako zamiennik przycisku.<\/p>\n
    \n
    Przyk\u0142adowy selektor z 4 stanami (bez u\u017cywania pressed)<\/h2>\n
    Plik: res\/drawable\/menu_item_selector.xml<\/code><\/p>\n
    <?xml version="1.0" encoding="utf-8"?>\n<selector xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android">\n\n    <!-- 1. Stan: element wy\u0142\u0105czony -->\n    <item android:state_enabled="false"\n        android:drawable="@drawable\/bg_disabled" \/>\n\n    <!-- 2. Stan: element wybrany (selected) -->\n    <item android:state_selected="true"\n        android:drawable="@drawable\/bg_selected" \/>\n\n    <!-- 3. Stan: element jest zaznaczony (checked) -->\n    <item android:state_checked="true"\n        android:drawable="@drawable\/bg_focused" \/>\n\n    <!-- 4. Stan domy\u015blny -->\n    <item android:drawable="@drawable\/bg_default" \/>\n\n<\/selector><\/code><\/pre>\n
    \n
    Om\u00f3wienie wykorzystanych stan\u00f3w<\/h2>\n
      \n
    1. \n
      state_enabled=”false”<\/strong>\nElement ma by\u0107 wyszarzony lub nieaktywny. Cz\u0119sto u\u017cywa si\u0119 s\u0142abszego koloru lub mniejszego kontrastu.<\/p>\n<\/li>\n
    2. \n
      state_selected=”true”<\/strong>\nTen stan jest wygodny np. w menu, zak\u0142adkach, listach wyboru. Mo\u017cna podkre\u015bli\u0107, kt\u00f3re „pude\u0142ko” zosta\u0142o klikni\u0119te.<\/p>\n<\/li>\n
    3. \n
      state_checked=”true”<\/strong>\nWidoczne g\u0142\u00f3wnie wtedy, gdy obiekt zmieni sw\u00f3j stan na zaznaczony.<\/p>\n<\/li>\n
    4. \n
      domy\u015blny<\/strong>\nTen element wykonuje si\u0119 zawsze wtedy, gdy pozosta\u0142e warunki nie zosta\u0142y spe\u0142nione. To podstawowy wygl\u0105d.<\/p>\n<\/li>\n<\/ol>\n
      \n
      Style w Android Studio \u2013 czym s\u0105 i jak ich u\u017cywa\u0107<\/h2>\n
      Style w Android Studio to zestawy w\u0142a\u015bciwo\u015bci wizualnych, kt\u00f3re mo\u017cna nada\u0107 elementom interfejsu, aby zachowa\u0107 sp\u00f3jny wygl\u0105d w ca\u0142ej aplikacji. Style zapisuje si\u0119 w plikach XML w folderze res\/values<\/code>, najcz\u0119\u015bciej w styles.xml<\/code>. Ka\u017cdy styl mo\u017ce definiowa\u0107 wygl\u0105d takich element\u00f3w jak TextView, Button, Switch, CardView czy ImageButton \u2013 wa\u017cne tylko, aby dobra\u0107 w\u0142a\u015bciwo\u015bci pasuj\u0105ce do typu elementu. Dzi\u0119ki stylom mo\u017cesz jednym ustawieniem zmieni\u0107 wygl\u0105d wielu element\u00f3w naraz, bez powtarzania kodu w ka\u017cdym widoku. W stylu definiujesz w\u0142a\u015bciwo\u015bci takie jak kolor tekstu, wielko\u015b\u0107 czcionki, marginesy, wype\u0142nienia, t\u0142o czy rodzaj czcionki. Mo\u017cna r\u00f3wnie\u017c dziedziczy\u0107 style po innych stylach, co pozwala tworzy\u0107 ca\u0142e hierarchie estetyczne w aplikacji.<\/p>\n
      \n
      Najwa\u017cniejsze w\u0142a\u015bciwo\u015bci u\u017cywane w stylach (8 przyk\u0142ad\u00f3w)<\/h2>\n
        \n
      1. android:textColor<\/strong> \u2013 ustawia kolor tekstu.<\/li>\n
      2. android:textSize<\/strong> \u2013 okre\u015bla wielko\u015b\u0107 czcionki (np. 16sp, 20sp).<\/li>\n
      3. android:fontFamily<\/strong> \u2013 nadaje rodzin\u0119 czcionki (np. sans-serif, monospace).<\/li>\n
      4. android:padding<\/strong> \u2013 ustawia wewn\u0119trzne odst\u0119py elementu.<\/li>\n
      5. android:layout_margin<\/strong> \u2013 okre\u015bla marginesy zewn\u0119trzne elementu.<\/li>\n
      6. android:background<\/strong> \u2013 nadaje t\u0142o, np. kolor, selector lub shape.<\/li>\n
      7. android:gravity<\/strong> \u2013 ustawia wyr\u00f3wnanie tekstu wewn\u0105trz elementu (center, left, right).<\/li>\n
      8. android:width \/ android:height<\/strong> \u2013 pozwalaj\u0105 zmieni\u0107 domy\u015blny rozmiar elementu (np. 200dp, wrap_content, match_parent).<\/li>\n<\/ol>\n
        \n
        Przyk\u0142adowy styl z wieloma w\u0142a\u015bciwo\u015bciami<\/h2>\n
        Plik: res\/values\/styles.xml<\/code><\/p>\n
        <style name="MenuItemStyle">\n    <item name="android:textColor">@android:color\/white<\/item>\n    <item name="android:textSize">18sp<\/item>\n    <item name="android:fontFamily">sans-serif-medium<\/item>\n    <item name="android:padding">16dp<\/item>\n    <item name="android:layout_margin">8dp<\/item>\n    <item name="android:background">@drawable\/menu_item_selector<\/item>\n    <item name="android:gravity">center<\/item>\n    <item name="android:layout_width">match_parent<\/item>\n<\/style><\/code><\/pre>\n
        \u0106WICZENIA<\/h2>\n
        \u0106wiczenie 1<\/h3>\n
        Utw\u00f3rz w folderze res\/drawable<\/code> plik o nazwie rounded_blue.xml<\/code>.\nMa to by\u0107 prostok\u0105tny shape z nast\u0119puj\u0105cymi cechami:\n\u2013 zaokr\u0105glenie rog\u00f3w 20dp,\n\u2013 kolor t\u0142a #2196F3,\n\u2013 obramowanie 2dp koloru #0D47A1,\n\u2013 padding wewn\u0119trzny min. 10dp.\nNast\u0119pnie zastosuj ten shape jako t\u0142o <android.widget.Button\/><\/code><\/strong>  pe\u0142ni\u0105cego rol\u0119 przycisku.<\/p>\n
        \u0106wiczenie 2<\/h3>\n
        Stw\u00f3rz drugi shape o nazwie rounded_blue_dark.xml<\/code>, kt\u00f3ry ma by\u0107 ciemniejsz\u0105 wersj\u0105 poprzedniego (dowolny ciemniejszy kolor).\nZastosuj inne zaokr\u0105glenie (np. 4dp), aby efekt by\u0142 widoczny.\nPrzygotuj go do wykorzystania p\u00f3\u017aniej w selektorze.<\/p>\n
        \u0106wiczenie 3<\/h3>\n
        Utw\u00f3rz shape o nazwie oval_marker.xml<\/code>, kt\u00f3ry b\u0119dzie okr\u0105g\u0142ym markerem:\n\u2013 przypisz android:shape="oval"<\/code>,\n\u2013 wype\u0142nienie np. #FF5722,\n\u2013 rozmiar 48dp na 48dp,\n\u2013 obramowanie 3dp koloru #E64A19.\nU\u017cyj go jako t\u0142o ma\u0142ego ImageView<\/strong>.<\/p>\n
        \n
        \u0106wiczenie 4<\/h3>\n
        Stw\u00f3rz selektor o nazwie rounded_blue_selector.xml<\/code> korzystaj\u0105cy z shape\u2019\u00f3w z \u0107wicze\u0144 1 i 2.\nPowinien zawiera\u0107 dwa stany:\n\u2013 state_pressed=”true” \u2192 rounded_blue_dark.xml<\/code>,\n\u2013 default \u2192 rounded_blue.xml<\/code>.\nPod\u0142\u0105cz selektor do <android.widget.Button\/><\/code>.<\/p>\n
        \u0106wiczenie 5<\/h3>\n
        Stw\u00f3rz selektor dla <Switch\/><\/code>, o nazwie toggle_selector.xml<\/code>.\nU\u017cyj dw\u00f3ch r\u00f3\u017cnych shape\u2019\u00f3w<\/strong>:\n\u2013 wersja \u201eON\u201d: prostok\u0105t z gradientem (np. zielony \u2192 ciemny zielony),\n\u2013 wersja \u201eOFF\u201d: prostok\u0105t jednolity, szary.\nStan, jaki obs\u0142ugujesz:\n\u2013 state_checked=”true” \u2192 ON,\n\u2013 default lub state_checked=”false” \u2192 OFF.<\/p>\n
        \u0106wiczenie 6<\/h3>\n
        Znajdz selektor kt\u00f3ry dzia\u0142a z 2 stanami state_focused i default\nW ka\u017cdym stanie zastosuj inny shape stworzony przez Ciebie (mo\u017ce by\u0107 prostok\u0105t, owal, ring \u2013 dowolnie).<\/p>\n
        \n
        \u0106wiczenie 7<\/h3>\n
        Utw\u00f3rz styl o nazwie ClickableBoxStyle<\/code>, kt\u00f3ry ustawia:\n\u2013 textSize 20sp,\n\u2013 padding 16dp,\n\u2013 textColor bia\u0142y,\n\u2013 gravity center,\n\u2013 background \u2192 selektor z \u0107wiczenia 4.\nZastosuj styl do przynajmniej dw\u00f3ch TextView w layoucie.<\/p>\n
        \u0106wiczenie 8<\/h3>\n
        Stw\u00f3rz styl ToggleStyle<\/code>, kt\u00f3ry nadaje TextView wygl\u0105d prze\u0142\u0105cznika:\n\u2013 background \u2192 selektor z \u0107wiczenia 5,\n\u2013 textStyle=”bold”,\n\u2013 minWidth=”120dp”,\n\u2013 padding=”10dp”.\nZastosuj styl do swojego \u201eprze\u0142\u0105cznika\u201d i poka\u017c, \u017ce wraz ze zmian\u0105 checked<\/code> wygl\u0105d r\u00f3wnie\u017c si\u0119 zmienia.<\/p>\n
        \u0106wiczenie 9<\/h3>\n
        Utw\u00f3rz styl EditTextStyle<\/code> i zastosuj go do EditText<\/code>.\nStyl powinien ustawia\u0107:\n\u2013 width i height (np. 60dp),\n\u2013 padding 8dp,\n\u2013 background \u2192 selektor z \u0107wiczenia 6,\n\u2013 tint dowolnego koloru,\n\u2013 focusable=”true”.\nSprawdz jak element dzia\u0142a ze stylem i selektorem.<\/p>\n
        Termin wys\u0142ania sprawozdania  dla nieobecnych na lekcji 04.12 to 05.12 (pi\u0105tek) 23:59<\/p>","protected":false},"excerpt":{"rendered":"
        Tworzenie kszta\u0142t\u00f3w (shape) w Android Studio \u2013 wprowadzenie W Android Studio mo\u017cemy tworzy\u0107 w\u0142asne kszta\u0142ty w plikach XML umieszczonych w folderze res\/drawable. Kszta\u0142ty te s\u0142u\u017c\u0105 przede wszystkim jako t\u0142a element\u00f3w UI, takich jak TextView, LinearLayout, ImageView, CardView, a tak\u017ce jako elementy selektor\u00f3w (np. efekt klikni\u0119cia). Nie dzia\u0142aj\u0105 one domy\u015blnie na