Selamlar, yakın zamanda Jetpack Compose ile sıfırdan uygulama geliştirme deneyimini edindim. Süreç sonunda oluşan deneyimimi neden bir seri ile paylaşmıyorum diye düşündüm ve ilk olarak tema olarak başlamayı düşündüm.

Bu seride işlenecek konular;

1. Theming
2. Responsive Ekran Oluşturma
3. Navigation
4. Component Kullanımı

Giriş

Jetpack Compose, temayı kolayca uygulamaya uyarlayarak tutarlı bir görünüm elde etmenize olanak sağlar. Material Tasarımı uygulamanız için istediğiniz şekilde özelleştirilmiş bir temayı kullanmanıza olanak sağlar.

Material Theme ile temayı oluşturabilirsiniz Eğer projeye yeni başlıyorsanız ve tasarım ve renk paletleri belirli ise ilk olarak işe renk paletlerini tanımlamakla başlamak iyi bir tercih olabilir. Ui geliştirdikçe her bir view elemanı için tek tek recource a gidip font, renk, size, shape gibi bilgileri istemek mantıklı değil.

MaterialTheme

Material Theme’a bakacak olursak colors , typography , shape parametlerine sahip.

Bir compose projesi oluşturulduğunda ui paketi altında ilgili classlar sizi karşılaşamaktadır. Color.kt ile renk paletini, Shape.kt ile şekillerin radiusları, Theme.kt ile de light ve dark temasını, Type.kt ile de textlerin typolarını yöneteceğiniz classlardır.

Color

Primary color, uygulamanın ana rengidir. Primary variant ise ana rengin koyu rengi olarak seçilecek şekilde düzenlenmiştir. Eğer compose projesinde doğru bir şekilde temayı kullanmak istiyorsanız yukarıdaki görsele uygun şekilde primary, secondary, background olarak ana renkleri belirleyip sonrasında koyu ve açık tonları ekleyerek yönetmesi kolay bir renk temanız olacaktır. Compose’da ilk olarak light tema olarak tanımlanır renkler eğer elinizde dark tema içinde palet varsa yine aynı şekilde karşılık gelecek şekilde dark temayı rahatça ayarlabilirsiniz.

Bir compose projesi yarattığınzda aşağıdaki gibi standart bir renk paleti sizi karşılamaktadır.

Şimdi kendi temamızı oluşturma vakti.

İlk olarak colorhunt.co’dan bu renk paletini seçtim. bunu

Color.kt’a gelip öncelikle renkleri tanımlıyorum. Sonrasında yapacağımız şey ise Theme’dan bu renkleri kullanıp light ve dark temayı oluşturabiliriz.

Şimdi Theme’ya bakalım.

LightColorPalatte içerisinde light tema kullanılan uygulamanın temasını belirlenmekte. DarkColorPalette ise yine anlaşılacağı üzere dark tema için kullanılmakta. Burada önemli husus; belirtilen primary, primaryVariant gibi renk palet tiplerinin karşılıkları dark temayı karşılayabilecek şekilde aynı olmalıdır.

Color’ı Material Theme içinde kullanımı;

urada color parametresinde MaterialTheme.colors ile önceden temada belirtilen renklere ulaşabilirsiniz. Örneğin burada secondary ile belirlediğim DarkViolet rengini text rengi olarak verdim.

Typography

Jetpack Compose tipografi TextStlye ve yazı tipiyle ilgili sınıflara uygulamaktadır. Eğer özelleştirmek istemediğiniz bir yazı tipi varsa bu noktada Compose default olarak bir tipografi uygulamaktadır.

Uygulama içinde belirlenmiş bir tipografi var ise compose ile çok kolay bir şekilde ilk başta belirleyip, uygulama genelinde çok rahat bir şekilde kullanabilirsiniz. Üstteki görselde H1 ile başlayan overline ile biten önceden belirlenmiş bir tipografi vardır. Tipografiyi belirlerken bu görseli referans almak oldukça iyi olur.

Compose olmayan bir Android projesinde bilindiği gibi font klasörü içinden font dosyasını atıp sonrasında style.xml içinden veya her bir viewı yarattığımız xml dosyasından android:fontFamily=”@font/roboto_medium”şeklinde fontu belirleyebiliyoruz.

Compose’da tipografiyi oluşturalım.

1. res klasörü içinde font dosyasını oluşturup, dosyanın içine yazı fontu dosyasını atalım. Not: Font ismi büyük harf veya arada bir boşluk içermemelidir, önerilen isimlendirme aşağıdaki gibidir.

2. Type.kt içinde fontu tanımlayalım.

Örnek olması açısından her bir tipografi stlini kullandım. Burada fontFamily, fontWeigtht, fontSize, letterSpacing gibi parametreleri kullanıp tipografiyi özelleştirebilirsiniz.

Peki burada oluşturduğum Typography nesnesini nerede ve nasıl kullanacağız?

Theme içerisinde generate edilen MaterialTheme içerisinde tanımlamak yeterlidir. typography = Typography olarak oluşturulan tipografiyi MaterialTheme içerisinde tanımlamış olduk.

MaterialTheme içerisinde tipografi kullanımı;

style içerisinde MaterialTheme.typography dedikten sonra üstte oluşturmuş olduğum tipografi elementlerinden birisin seçebilirsiniz. Böylelikle bu text view ı tanımlanan fontta ve size da oluşturulmuş oldu.

Peki ya ben belirli bir tipografi içerisinde farklı bir font tipi seçmek istiyorsam ne yapmalıyım diye bir soru sorduğunuzu duyar gibiyim. Yani örnek vermek gerekirse bir başlık textinde body1 olarak bir font tipi seçtiniz. Boydy1’deki yazı kalınlığı ve size ı kullanmak istiyorsunuz ama poppins semi bold olmasını istiyorsunuz. Bu durumda merge ederek daha da özelleştirebilir bir font elde edebilirsiniz.

Burada merge içerisinde bir TextStyle belirtip istediğim yazı fontu belirtiyorum. Burada daha farklı bir fontWeith, fontSize belirleyeyip daha da özelleştirebilirsiniz. Compose ile fontları yönetmek bu kadar kolay!

via GIPHY

Shape

Compose’da büyük, orta ve küçük şekiller tanımlamanıza olanak sağlayan bir Shape sistemi vardır.

Shapes, üç farklı boyutta şekillerin kenarlarını ayarlayan bir sınıftır. RoundedCornerShape ile örneği bir card ın köşelerini oval yapmayı sağlar. Yüzdelik, dp veya float olarak değer atayabilirsiniz.

Shape kullanımı;

Örneğin projede standart bir kenarları hafif oval bir buton var. Her bir butonda shape parametesine MaterialTheme.shapes. ile Shapes a ulaşarak istediğiniz boyutu verebilirsiniz.

Sonuç

Android’de Jetpack Compose ile bir uygulama geliştirmek istiyorsanız geliştirme evresinin ilk adımlarından birisi tema yapısının oluşturulmasıdır. Proje büyüdükçe, ekranlar çoğaldıkça ve custom olarak componentler yazılmaya başlandıkça tema yönetimini yapmak oldukça zorlaşıcaktır. Eğer ilk başta bu yapı kurulursa proje büyüse dahi yönetimi oldukça kolay olacaktır. Bu sebeple Jetpack Compose serisinin ilk yazısını tema yönetimini ele alarak başlamayı uygun buldum. Yazıda da belirttiğim gibi xml’den sıyrıldığımız için temayı oluşturmak ve yönetmek oldukça rahat. Compose kullanarak bir uygulama geliştirirken ilk olarak tema yapısını oluşturduğumuz için projenin ilerleyen zamanlarında bir zorluk çekmedik ve rahatça özelleştirebildik.

Github Reposu:

https://github.com/merttoptas/compose-series

Kaynaklar

1. https://developer.android.com/jetpack/compose/themes
2. Jetpack Theming Codelabs