{"id":38654,"date":"2026-02-04T21:40:38","date_gmt":"2026-02-04T18:40:38","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=38654"},"modified":"2026-02-04T21:40:38","modified_gmt":"2026-02-04T18:40:38","slug":"android-uygulama-gelistirmede-dugme-tasarimi-ozel-yuvarlak-ve-renkli-dugmeler","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/android-uygulama-gelistirmede-dugme-tasarimi-ozel-yuvarlak-ve-renkli-dugmeler\/","title":{"rendered":"Android Uygulama Geli\u015ftirmede D\u00fc\u011fme Tasar\u0131m\u0131: \u00d6zel, Yuvarlak ve Renkli D\u00fc\u011fmeler"},"content":{"rendered":"

<\/p>\n

Android Uygulama Geli\u015ftirmede D\u00fc\u011fme Tasar\u0131m\u0131: \u00d6zel, Yuvarlak ve Renkli D\u00fc\u011fmeler<\/h2>\n
Android uygulama geli\u015ftirme d\u00fcnyas\u0131nda kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) elemanlar\u0131, uygulaman\u0131n genel kullan\u0131c\u0131 deneyimi (UX) \u00fczerinde belirleyici bir etkiye sahiptir. Bu elemanlar aras\u0131nda d\u00fc\u011fmeler, kullan\u0131c\u0131lar\u0131n uygulamayla etkile\u015fim kurmas\u0131n\u0131 sa\u011flayan temel bile\u015fenlerden biridir. \u0130yi tasarlanm\u0131\u015f, sezgisel ve g\u00f6rsel olarak \u00e7ekici d\u00fc\u011fmeler, uygulaman\u0131n kullan\u0131labilirli\u011fini art\u0131r\u0131rken, k\u00f6t\u00fc tasarlanm\u0131\u015f d\u00fc\u011fmeler kullan\u0131c\u0131da hayal k\u0131r\u0131kl\u0131\u011f\u0131na ve kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131na yol a\u00e7abilir. Bu makale, Android platformunda d\u00fc\u011fme tasar\u0131m\u0131n\u0131n temellerinden ba\u015flayarak, \u00f6zel d\u00fc\u011fme olu\u015fturma tekniklerine, yuvarlak d\u00fc\u011fmelerin nas\u0131l tasarlanaca\u011f\u0131na ve renk y\u00f6netiminin \u00f6nemine derinlemesine bir bak\u0131\u015f sunmaktad\u0131r.<\/p>\n

Android D\u00fc\u011fmelerine Giri\u015f ve Temel \u00d6zellikleri<\/h3>\n
Android SDK, geli\u015ftiricilere \u00e7e\u015fitli haz\u0131r d\u00fc\u011fme t\u00fcrleri sunar. En temel d\u00fc\u011fme t\u00fcr\u00fc olan `Button<\/code> widget’\u0131, metin tabanl\u0131 etkile\u015fimler i\u00e7in kullan\u0131l\u0131rken, ImageButton<\/code> g\u00f6rsel tabanl\u0131 etkile\u015fimler i\u00e7in idealdir. Modern Android uygulamalar\u0131nda ise Google’\u0131n Material Design prensiplerini takip eden MaterialButton<\/code> daha s\u0131k tercih edilmektedir.<\/p>\n`
Bir d\u00fc\u011fme, genellikle bir metin etiketi, bir simge veya her ikisini birden i\u00e7erir. Kullan\u0131c\u0131 d\u00fc\u011fmeye dokundu\u011funda, d\u00fc\u011fme bir eylemi tetikler. Bu eylem, yeni bir ekran a\u00e7maktan, veri g\u00f6ndermeye veya bir i\u015flemi onaylamaya kadar de\u011fi\u015febilir. D\u00fc\u011fme tasar\u0131m\u0131nda dikkat edilmesi gereken en \u00f6nemli unsurlardan biri, d\u00fc\u011fmenin amac\u0131n\u0131n kullan\u0131c\u0131 taraf\u0131ndan an\u0131nda anla\u015f\u0131labilir olmas\u0131d\u0131r.<\/p>\n

Temel D\u00fc\u011fme T\u00fcrleri ve Kullan\u0131mlar\u0131<\/h4>\n*   Button<\/code>:<\/strong> Android’in ilk s\u00fcr\u00fcmlerinden beri var olan standart metin d\u00fc\u011fmesidir. Basit metin etiketli d\u00fc\u011fmeler i\u00e7in kullan\u0131l\u0131r.
\n*   ImageButton<\/code>:<\/strong> Sadece bir g\u00f6rsel (Drawable) i\u00e7eren d\u00fc\u011fmeler i\u00e7in kullan\u0131l\u0131r. Genellikle simgeleri temsil eder ve metin i\u00e7ermez.
\n*   MaterialButton<\/code>:<\/strong> Material Design k\u00fct\u00fcphanesinin bir par\u00e7as\u0131d\u0131r. Geli\u015fmi\u015f \u00f6zelle\u015ftirme se\u00e7enekleri, g\u00f6lge, dalgalanma efekti (ripple effect) ve kolay k\u00f6\u015fe yuvarlama gibi modern UI \u00f6zelliklerini destekler. Material Design prensiplerine uygun uygulamalar i\u00e7in \u00f6nerilir.<\/p>\n
Bir d\u00fc\u011fmeyi XML layout dosyas\u0131nda tan\u0131mlamak olduk\u00e7a basittir:<\/p>\n
<\/code><\/pre>\nYukar\u0131daki \u00f6rnekte android:text<\/code> ile d\u00fc\u011fme metni, android:backgroundTint<\/code> ile arka plan rengi ve android:textColor<\/code> ile metin rengi ayarlanm\u0131\u015ft\u0131r. Ancak, bu temel \u00f6zelle\u015ftirmeler \u00e7o\u011fu zaman yeterli olmaz. Uygulaman\u0131z\u0131n benzersiz kimli\u011fini yans\u0131tmak ve daha tutarl\u0131 bir kullan\u0131c\u0131 deneyimi sunmak i\u00e7in \u00f6zel d\u00fc\u011fme tasar\u0131mlar\u0131na ihtiya\u00e7 duyulur.<\/p>\n
\u00d6zel D\u00fc\u011fme Tasar\u0131m\u0131: Drawable XML Kullan\u0131m\u0131<\/h3>\nAndroid’de \u00f6zel d\u00fc\u011fme tasarlaman\u0131n en g\u00fc\u00e7l\u00fc ve esnek yolu, XML drawable kaynaklar\u0131n\u0131 kullanmakt\u0131r. Drawable XML dosyalar\u0131, d\u00fc\u011fmenin g\u00f6rsel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc (\u015fekil, renk, kenarl\u0131k, gradyan, durumlar aras\u0131 ge\u00e7i\u015fler vb.) tan\u0131mlamam\u0131za olanak tan\u0131r. Bu y\u00f6ntem, uygulaman\u0131z\u0131n tema ve stilini tamamen kontrol etmenizi sa\u011flar.<\/p>\n
Shape Drawable ile \u015eekil ve Renk Tan\u0131mlama<\/h4>\nshape<\/code> etiketi, bir d\u00fc\u011fmenin temel \u015feklini, arka plan rengini, kenarl\u0131klar\u0131n\u0131 ve k\u00f6\u015fe yuvarlakl\u0131\u011f\u0131n\u0131 tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r. Bu, \u00f6zel d\u00fc\u011fme tasar\u0131m\u0131n\u0131n temelini olu\u015fturur.<\/p>\n
Bir shape<\/code> drawable dosyas\u0131 genellikle res\/drawable<\/code> klas\u00f6r\u00fcnde olu\u015fturulur ve a\u015fa\u011f\u0131daki gibi bir yap\u0131ya sahiptir:<\/p>\n
\n\n     \n     \n     \n     \n<\/shape><\/code><\/pre>\nYukar\u0131daki \u00f6rnekte:
\n*   android:shape=\"rectangle\"<\/code>: D\u00fc\u011fmenin dikd\u00f6rtgen bir \u015fekle sahip olaca\u011f\u0131n\u0131 belirtir. Di\u011fer se\u00e7enekler aras\u0131nda oval<\/code>, line<\/code> ve ring<\/code> bulunur.
\n*   <\/code>: D\u00fc\u011fmenin d\u00fcz arka plan rengini ayarlar.
\n*   <\/code>: D\u00fc\u011fmenin t\u00fcm k\u00f6\u015felerinin belirli bir yar\u0131\u00e7apla yuvarlanmas\u0131n\u0131 sa\u011flar. Belirli k\u00f6\u015feleri yuvarlamak i\u00e7in android:topLeftRadius<\/code>, android:topRightRadius<\/code>, android:bottomLeftRadius<\/code> ve android:bottomRightRadius<\/code> nitelikleri kullan\u0131labilir.
\n*   <\/code>: D\u00fc\u011fmeye bir kenarl\u0131k ekler.
\n*   <\/code>: D\u00fc\u011fme i\u00e7eri\u011fi (metin veya simge) ile d\u00fc\u011fmenin kenarlar\u0131 aras\u0131ndaki bo\u015flu\u011fu tan\u0131mlar.<\/p>\n
Bu drawable dosyas\u0131n\u0131 bir Button<\/code> veya TextView<\/code>‘a uygulamak i\u00e7in android:background<\/code> niteli\u011fini kullan\u0131r\u0131z:<\/p>\n
 <\/code><\/pre>\nBurada android:padding<\/code> yerine android:paddingStart<\/code>, android:paddingEnd<\/code> gibi nitelikler kullanmak, RTL (sa\u011fdan sola) dillerde uyumluluk a\u00e7\u0131s\u0131ndan daha iyidir. stateListAnimator=\"@null\"<\/code> Material Design d\u00fc\u011fmelerinin varsay\u0131lan g\u00f6lge ve animasyonlar\u0131n\u0131 devre d\u0131\u015f\u0131 b\u0131rakmak i\u00e7in kullan\u0131labilir, b\u00f6ylece tamamen kendi tasar\u0131m\u0131m\u0131z kontrol edilir.<\/p>\n
Selector Drawable ile Durum Tabanl\u0131 Tasar\u0131m<\/h4>\nBir d\u00fc\u011fmenin kullan\u0131c\u0131 etkile\u015fimlerine (bas\u0131l\u0131, odaklanm\u0131\u015f, devre d\u0131\u015f\u0131 vb.) farkl\u0131 g\u00f6rsel tepkiler vermesi, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. selector<\/code> drawable, d\u00fc\u011fmenin farkl\u0131 durumlar\u0131 i\u00e7in farkl\u0131 drawable’lar\u0131 tan\u0131mlamam\u0131z\u0131 sa\u011flar.<\/p>\n
\n\n    \n    \n        \n             \n            \n            \n        <\/shape>\n    <\/item>\n    \n    \n        \n             \n            \n            \n        <\/shape>\n    <\/item>\n    \n    \n        \n             \n            \n            \n        <\/shape>\n    <\/item>\n<\/selector><\/code><\/pre>\nBu selector<\/code> drawable’\u0131 d\u00fc\u011fmeye atad\u0131\u011f\u0131m\u0131zda, d\u00fc\u011fme bas\u0131ld\u0131\u011f\u0131nda veya odakland\u0131\u011f\u0131nda otomatik olarak farkl\u0131 bir g\u00f6r\u00fcn\u00fcme b\u00fcr\u00fcnecektir:<\/p>\n
<\/code><\/pre>\nselector<\/code> i\u00e7inde item<\/code> etiketlerinin s\u0131ras\u0131 \u00f6nemlidir. Android, listeyi yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru tarar ve ilk e\u015fle\u015fen durumu uygular. Bu nedenle, daha spesifik durumlar (\u00f6rne\u011fin state_pressed<\/code>) genellikle daha genel durumlardan (\u00f6rne\u011fin varsay\u0131lan durum) \u00f6nce gelmelidir.<\/p>\n
Layer List Drawable ile Katmanl\u0131 Tasar\u0131m<\/h4>\nDaha karma\u015f\u0131k d\u00fc\u011fme tasar\u0131mlar\u0131 i\u00e7in layer-list<\/code> drawable kullan\u0131labilir. Bu, birden fazla drawable’\u0131 \u00fcst \u00fcste katmanlaman\u0131za olanak tan\u0131r. \u00d6rne\u011fin, bir d\u00fc\u011fmenin arka plan\u0131na bir gradyan ve \u00fczerine bir simge eklemek i\u00e7in kullan\u0131labilir. Ancak, \u00e7o\u011fu \u00f6zel d\u00fc\u011fme ihtiyac\u0131 shape<\/code> ve selector<\/code> ile kar\u015f\u0131lanabilir.<\/p>\n
Yuvarlak D\u00fc\u011fmeler Tasarlamak<\/h3>\nYuvarlak d\u00fc\u011fmeler, Material Design’\u0131n pop\u00fclerle\u015fmesiyle birlikte Android uygulamalar\u0131nda s\u0131k\u00e7a kar\u015f\u0131m\u0131za \u00e7\u0131kan bir tasar\u0131m \u00f6\u011fesidir. Tamamen dairesel d\u00fc\u011fmeler (Floating Action Buttons – FABs gibi) veya sadece k\u00f6\u015feleri yuvarlat\u0131lm\u0131\u015f dikd\u00f6rtgen d\u00fc\u011fmeler olabilirler.<\/p>\n
Shape Drawable ile Yuvarlak K\u00f6\u015feler<\/h4>\nDaha \u00f6nce bahsedilen shape<\/code> drawable’\u0131 kullanarak k\u00f6\u015feleri yuvarlatmak olduk\u00e7a kolayd\u0131r. Tamamen dairesel bir d\u00fc\u011fme elde etmek i\u00e7in, d\u00fc\u011fmenin geni\u015fli\u011fini ve y\u00fcksekli\u011fini e\u015fit ayarlamal\u0131 ve corners<\/code> etiketindeki android:radius<\/code> de\u011ferini, geni\u015fli\u011fin veya y\u00fcksekli\u011fin yar\u0131s\u0131na e\u015fitlemeliyiz.<\/p>\n
\u00d6rne\u011fin, 56dp geni\u015flik ve y\u00fcksekli\u011fe sahip bir daire i\u00e7in:<\/p>\n
\n \n    \n    \n<\/shape><\/code><\/pre>\nVe layout’ta:<\/p>\n
<\/code><\/pre>\nE\u011fer sadece k\u00f6\u015feleri yuvarlat\u0131lm\u0131\u015f bir dikd\u00f6rtgen d\u00fc\u011fme isteniyorsa, android:shape=\"rectangle\"<\/code> kullan\u0131l\u0131p android:radius<\/code> de\u011feri istenilen yuvarlakl\u0131k derecesine g\u00f6re ayarlan\u0131r. \u00d6rne\u011fin, android:radius=\"999dp\"<\/code> gibi \u00e7ok y\u00fcksek bir de\u011fer vermek, d\u00fc\u011fmenin geni\u015fli\u011fine veya y\u00fcksekli\u011fine ba\u011fl\u0131 olarak tam kapsayan bir yuvarlakl\u0131k sa\u011flar.<\/p>\n
\n\n    \n     \n<\/shape><\/code><\/pre>\nBu, genellikle “pill-shaped” (hap \u015feklinde) d\u00fc\u011fmeler olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n
MaterialButton ile Yuvarlak K\u00f6\u015feler<\/h4>\nMaterialButton<\/code>, yuvarlak d\u00fc\u011fmeler olu\u015fturmay\u0131 \u00e7ok daha kolay hale getirir. app:cornerRadius<\/code> niteli\u011fi ile do\u011frudan XML \u00fczerinden k\u00f6\u015fe yuvarlakl\u0131\u011f\u0131n\u0131 ayarlayabilirsiniz. Bu, shape<\/code> drawable dosyas\u0131 olu\u015fturma ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r veya basitle\u015ftirir.<\/p>\n
<\/code><\/pre>\nTamamen dairesel bir MaterialButton<\/code> olu\u015fturmak i\u00e7in, layout_width<\/code> ve layout_height<\/code> de\u011ferlerini e\u015fit ve app:cornerRadius<\/code> de\u011ferini bu boyutun yar\u0131s\u0131na ayarlaman\u0131z yeterlidir. \u00d6rne\u011fin, 56dp boyutunda bir d\u00fc\u011fme i\u00e7in app:cornerRadius=\"28dp\"<\/code> kullan\u0131l\u0131r.<\/p>\n
MaterialButton<\/code> ayr\u0131ca app:strokeColor<\/code> ve app:strokeWidth<\/code> gibi niteliklerle kenarl\u0131k eklemeyi de kolayla\u015ft\u0131r\u0131r.<\/p>\n
Renk Y\u00f6netimi ve En \u0130yi Uygulamalar<\/h3>\nD\u00fc\u011fme tasar\u0131m\u0131nda renkler, sadece estetik bir tercih olman\u0131n \u00f6tesinde, kullan\u0131labilirlik ve eri\u015filebilirlik a\u00e7\u0131s\u0131ndan kritik bir rol oynar. Do\u011fru renk paleti, uygulaman\u0131n marka kimli\u011fini g\u00fc\u00e7lendirirken, yanl\u0131\u015f renk se\u00e7imleri kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir.<\/p>\n
colors.xml ile Merkezi Renk Tan\u0131mlar\u0131<\/h4>\nT\u00fcm renkleri res\/values\/colors.xml<\/code> dosyas\u0131nda merkezi olarak tan\u0131mlamak en iyi uygulamad\u0131r. Bu, renklerin uygulaman\u0131z boyunca tutarl\u0131 bir \u015fekilde kullan\u0131lmas\u0131n\u0131 sa\u011flar ve bir rengi de\u011fi\u015ftirmek istedi\u011finizde t\u00fcm referanslar\u0131 tek bir yerden g\u00fcncelleyebilmenizi kolayla\u015ft\u0131r\u0131r.<\/p>\n
\n\n    #FFBB86FC<\/color>\n    #FF6200EE<\/color>\n    #FF3700B3<\/color>\n    #FF03DAC5<\/color>\n    #FF018786<\/color>\n    #FF000000<\/color>\n    #FFFFFFFF<\/color>\n\n    \n    #4CAF50<\/color>\n    #388E3C<\/color>\n    #FF9800<\/color>\n    #F57C00<\/color>\n<\/resources><\/code><\/pre>\nBu renkleri XML layout’larda @color\/my_color<\/code> \u015feklinde veya Kotlin\/Java kodunda ContextCompat.getColor(context, R.color.my_color)<\/code> \u015feklinde kullanabilirsiniz.<\/p>\n
Material Design Renk Paleti<\/h4>\nMaterial Design, birincil (primary), ikincil (secondary), y\u00fczey (surface), hata (error) ve “on” renkleri gibi belirli bir renk sistemi \u00f6nerir. Bu sistem, uygulaman\u0131z\u0131n genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc tutarl\u0131 hale getirmek i\u00e7in tasarlanm\u0131\u015ft\u0131r.<\/p>\n
*   Primary Color:<\/strong> Uygulaman\u0131z\u0131n ana rengidir. \u00c7o\u011fu UI eleman\u0131nda kullan\u0131l\u0131r.
\n*   Secondary Color:<\/strong> Uygulaman\u0131z\u0131n ikincil rengidir, genellikle vurgu veya etkile\u015fimli elemanlarda kullan\u0131l\u0131r.
\n*   “On” Colors:<\/strong> Birincil, ikincil, y\u00fczey ve hata renkleri \u00fczerinde g\u00f6r\u00fcnen metin ve simgeler i\u00e7in kullan\u0131lan renklerdir. Yeterli kontrast\u0131 sa\u011flamak i\u00e7in genellikle beyaz veya siyah olurlar.<\/p>\n
Bu renkleri themes.xml<\/code> dosyas\u0131nda tan\u0131mlamak, uygulaman\u0131z\u0131n genel temas\u0131n\u0131 belirler ve d\u00fc\u011fmeler gibi bir\u00e7ok bile\u015fenin varsay\u0131lan renklerini otomatik olarak etkiler.<\/p>\n
\n