Jetpack Compose 3- Tema
Öncelikle Merhaba. Serimizin 3. yazısı olan bu yazımızda Jetpack Compose ile tema ayarlamalarını nasıl yapacağımızı öğreneceğiz. Yazılan uygulamaların nasıl stiller alacağını, hangi renk paletlerini kullanacağını, hangi text stylelarını uygulayacağını ..vb gibi kavramlara Jetpack Compose özelinde bakacağız ve uygulamaya çalışacağız.
✨Not: Eğer Jetpack Compose dünyasına yeni giriş yapmışsanız, serimizin ilk iki yazısını okuduktan sonra bu yazıyı okumanızda yarar var. Aşağıdaki linklerden bu yazılara ulaşabilirsiniz.
Material Theme
Jetpack Compose, dijital arayüzler oluşturmak için kapsamlı bir tasarım sistemi olan Material Design uygulamasını sunar. Material Design componentleri(buttons, cards, switches vb.), Materyal Tasarımını ürününüzün markasını daha iyi yansıtacak şekilde özelleştirmenin sistematik bir yolu olan Material Theming’in üzerine inşa edilmiştir. Material Theme; color, typography and shape attributelarını içerir. Bu attributeları özelleştirdiğinizde, değişiklikleriniz uygulamanızı oluşturmak için kullandığınız componentlere otomatik olarak yansıtılır.
Jetpack Compose’da da Material Theme composable fonksiyonunu kullanarak kendi temalarınızı özelleştirebilir ve bunları kullandığınız componentlere uygulayabilirsiniz.
Yukarıdaki ekte yeni bir compose projesi başlattığınızda default olarak gelen bir composable fonksiyon var. Bu fonksiyonun ismi sizin proje adınıza göre belirleniyor. Proje adınızın sonuna “Theme” ibaresi eklenerek oluşuyor. Bunu viewbinding kullanırken generate edilen binding sınıf isminin, xml layotunuzun ismine göre şekillenmesi gibi düşünebilirsiniz. Bu composable fonksiyon da iki parametre almakta. Dilerseniz oradan giriş yaparak Jetpack Compose ile nasıl kendi temalarımızı oluşturabileceğimize bakalım.
darkTheme parametresi, eğerki uygulamanızda dark tema desteği verecekseniz kullanılan bir parametre. Kullanılan renkler iki farklı temaya göre de değişeceği için bu parametre üzerinde kontrol sağlayarak hangi temaya göre hangi renk paletlerini kullanacağımızı kodluyoruz. Zaten hali hazırda fonskiyon içinde colors değişkeninin bu parametreye göre kontrol edilip sağlandığını görebilirsiniz.
İkinci parametre olarak da content diye bir composable fonksiyon istenmiş. Bu temayı uygulayacak composable fonksiyonlarınızı çağırmanız için oluşturulan bir yapı. Yine default olarak MainActivity.kt dosyanızda, uygulamanızın sayfaları için tasarladığınız composable fonskiyonlarınızı bu content parametresi olarak gönderirseniz tüm uygulama boyunca temayı kullanmış olursunuz.
Material Theme composable fonksiyonu da colors, typography ve shapes gibi 3 parametreye sahip. Bu parametreleri de kendi isteğimize göre uygulayıp, bu temayı kullanacak composable fonksyonların hangi renkleri, hangi yazı stillerini veya hangi şekilleri kullanacağını belirtiyoruz. Yeni proje oluşturduğunuzda, yukarıdaki ekte görüğünüz gib bu parametrelerin de sağlandığı dosyalar default olarak geliyor.
Color
Uygulama da kullanacağınız renkleri color dosyası üzerinden belirliyoruz. Burada kullanilacak renkleri Color sınıfını kullanarak tanımlıyoruz.
Renk tanımlamasını birkaç yolla yapabiliriz. Fakat genelde en çok kullanılan 2 tarzı var. Yukarıdaki gistte de bu iki tanımlamayı görebilirsiniz. Bu gistteki Color, direk sınıf değil de geriye Color sınıfı dönen fonksyionlar.
Xml formatında yeni bir renk tanımlarken genelde hex formatı kullanırdık. Buradaki tanımlama size biraz farklı gelmiş olabilir. Diyelim ki #0000 hex kodlu bir renk tanımlamak isteyelim. Bu noktada # yerine 0xFF ifadesi koyarsanız bu renk tanınmlamasını yapabilirsiniz.
Tanımladığınız bu renkleri yukarıdaki örnekteki gibi compenetlerinize verebilirsiniz.
Material Renk Sistemini modellemek için de Compose tarafından sunulan bir Colors sınıfı mevcut. Bu sınıf üzerinden material renk sisteminizi özelleştirerek, uygulamanızda kullanılacak renkleri tek bir palet tarafından yönetilmesini sağlayabiliriz. Bu yöntemi kullanmak android tarafından şiddetle tavsiye ediliyor. Sebebi ise, dark mode veya nested bir temayı destekleyceksek kolaylık sağlaması ve sayfalarca refactor gibi durumların önüne geçilmesi için.
Colors sınıfı da parametre olarak yukarıdaki ekte görülen material renk sisteminin her öğesini alır. Bu parametreler default olarak componentlerinizde kullanılır.
Yukarıdaki gistte uygulmamızda kullanacağımız renkleri material renk sitemi üzerinden tanımladık. Burada kullanılan darkColors ve lightColors fonskiyonları geriye Colors sınıfını verilen paramtrelerle dönen hali hazırda Compose tarafından sağlanan fonksiyonlar.
Buradan MaterialTheme composable fonksiyonuna dönersek, tanımladığımız renk palettlerini dark mode veya light mode parametresine göre colors paramteresine vererek uygulamamızdaki kullanılacak renkleri tema üzerinden belirtiyoruz.
Typography
Typography sınıfı uygulamanızda kullanılacak textlere stil vermenize yardımcı olur. Yukarıdaki Colors sınıfı mantığında düşünebilirsiniz. MaterailTheme composable fonksiyonu bizden uygulama boyunca kullanacağımız renkler için bir Colors sınıfı bekliyordu ve bu Colors sınıfı parametre olarak material renk sistemine göre Color sınıfından üretilmiş renkler alıyordu. Aynı şekilde ikinci parametre olarak da Typography parametresi bekliyor ve biz de uygulama boyunca ugulayacağımız text stillerini bu class üzerinden tanımlıyoruz. Typography sınıfı da material renk sistemi gibi Material Type sisteminin parametrelerini alır ve bu parametreler de TextStyle sınıfı üzerinden sağlanır. Aşağıdaki gistte de kullanımını görebilirsiniz.
Shapes
Temamızı oluşturmak için gereken son parametre ise shapes parametresi. Burada beklenen shapes parametresi Shpaes tipinde bir class. Bu class ile de componentlerimizin görünümlerini ayaralaybiliyoruz.
Shapes sınıfı da small, medium, large olmak üzere 3 parametre bekliyor. Burada kullanılan RoundendCornerShape gibi yine composedan gelen fonksiyonlar bize şekilleri oluşturmada yardımcı olan yapılar. Colors ve Typography gibi Shapes de default olarak kullandığımız componentleri etkiliyor. Buttons & Text Fields small , Cards and Dialogs medium ve Sheets large shape kullanır.
Buraya kadar özetlersek, uygulamamızda bir tema uygulayacaksak eğer, bunun için MaterailTheme composable fonksiyonu üzerinden, oluşturduğumuz colors, typograhpy ve shapes sınıflarını sağlayarak yapabiliyoruz. Son olarak content parametresi de bu temayı uygulayacak composable fonksiyonları göndererek uygulama boyunca ve yahut sayfa özelinde farklı temalar ile uyglamamızı şekillendiriyoruz.
Sonuç
Serimizin 3.yazısı olan bu yazı ile birlikte Jetpack Compose ile nasıl tema ayarlamalarını yapabileceğimizi öğrenmeye çalıştık. Uygulama boyunca kullanılacak renk tanımlamalarını, text stillerini ve şekilleri componentlere nasıl uyguladığımızı da örneklerle pekiştirdik. erinin bir sonraki yazısında görüşmek üzere. 👋👋
