Material Design – Toolbar Kullanımı
Merhaba, bu dersimizde Material Design a giriş yapıp Toolbar ve kullanımından bahsedeceğiz. Ders boyunca uygulamalı örnekler olacak, dersin sonunda dersle alakalı tüm örneklerimize ait kaynak kodu indirebilirsiniz.
Material Design Nedir?
Material Design Google tarafından geliştirilmiş bir görsel dildir. Temelde iyi tasarımın klasik prensipleri ve teknoloji ila bilimin olanakları ve inovasyonu ile sentezlemeyi hedeflemişlerdir. Android in 5.0 sürümü ile birlikte gelmiştir. Sonuçta ortaya çıkan görsel dil Material Design gerçekten övgüyü hak ediyor.
Hızlıca şöyle bir arama yapıp görsel manada Material Design ı birçok farklı örneği ile birlikte inceleyebilirsiniz.
Material Design hakkında daha fazla bilgiye resmi sitesinden ulaşabilirsiniz.
Toolbar Nedir?
Toolbar Material Design ila birlikte Actionbar veya Appbar dediğimiz bileşenin yerine gelmiştir. Toolbar ın kullanım rahatlığı Actionbar ın çok daha ötesindedir. Örneklerimiz ile birlikte nedenini tecrübe etmiş olacaksınız.
Material Design da kullanım kuralları, prensipleri vardır. Uygulamanızı bu inovatif görsel dile göre tasarlamak ve yazmak istiyorsanız resmi siteden her bileşen için kullanım kuralları, prensipleri, yapılması gerekenler, yapılmaması gerekenler vs. gibi bir sürü bilgiye ulaşabilirsiniz.
Material Design Android 5.0 Altı Sürümlerde Kullanılabilir mi?
5.0 öncesi cihazlarda Material Design içeriği büyük denebilecek oranda kullanılabilir. Nasıl mı? Tabiki destek kütüphaneler ile. Bunlardan bazılarına aşağıdaki linklerden ulaşabilirsiniz.
Yukarıda verdiklerim Google tarafından hazırlanıp yayınlanmıştır. Tabi ki bunlardan ayrı yine material design ın 5.0 öncesi cihazlarda desteklenebilmesi için birçok kütüphane var. Bunlardan bazıları:
Toolbar Kullanımı Uygulama Örneği
Uygulama örneği yazılırken Android Studio 1.5.1 sürümü kullanılmıştır.
Testlerde PREVIEW – Galaxy Nexus 5X API 23 – Genymotion Emülatörü kullanılmıştır.
1. Android Studio yu açın. Start a new Android Studio project seçeneği ile yeni bir projeye başlayın.
2. Uygulama adı, paket adı için aşağıdaki değerleri kullandım. Siz keyfinize göre başka şeyler kullanabilirsiniz.
Uygulama Adı : Toolbar
Paket Adı : com.androidevreni.toolbar
3. Next diyerek ilerleyin sonraki ekranda Telefon ve Tabletler kısmına MinSDK için 14 u seçin. Next ile ilerleyin.
4. Empty Activity i seçin Next > Finish ile bitirin. Bu noktada idenin projeyi oluşturmasını bekleyin.
5. Projeyi emülatör veya gerçek cihazda bir kez çalıştırın. Menüden Run –> Run 'app' veya Shift + F10 kısayolu ile de çalıştırabilirsiniz. Çalıştırdığınızda ekran görüntüsü şöyle olmalıdır :
6. Şimdi öncelikle ekranda gördüğünüz app barı kaldrıp yerine kendimizin xml ve java üzerinden kullanımı ve özelleştirilmesi rahat toolbar i ekleyeceğiz.
res/values/ klasörü altındaki styles.xml dosyasını açın aşağıdaki değişikliği yapın.
`parent="Theme.AppCompat.Light.DarkActionBar"` --> `parent="Theme.AppCompat.Light.NoActionBar"`
Bu şekilde Actionbar i kaldırmış olacaksınız.
7. res/layout/ klasörü altında bulunan activity_main.xml dosyasını açın. Ve içeriğini aşağıda verdiğimle değiştirin.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.androidevreni.toolbar.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"></android.support.v7.widget.Toolbar>
</RelativeLayout>
Bu adımda AppCompat destek kütüphanesinden Toolbar bileşenini layout a ekledik.
Toolbar Gölge Efekti
Ekran görüntüsünde de gördüğünüz gibi destek kütüphanedeki Toolbar bileşeni normalde 5.0/Lolipop sürümü ile gelen Toolbar ın altında bulunan gölge efektini içermemekte. Şimdi bu gölge efektini kendimiz oluşturup ekleyeceğiz. Tam olarak Toolbar da bulunan orjinal gölge efekti olmasa da yeterince iyi göründüğünü az sonra kendiniz tecrübe edeceksiniz.
8. res/drawable klasörü içine toolbar_shadow.xml adında bir xml dosyası oluşturun ve aşağıda verdiğim içeriği ekleyin.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="-90"
android:endColor="#00000000"
android:startColor="#60000000" />
<corners android:radius="0dp" />
</shape
Burada temelde bir shape drawable tanımladık. Arkaplanı bir gradient, köşeleri kıvrılmamış. Gradient arkaplana dikkat ederseniz yukarıdan aşağıya %35-40(rengin başındaki 60 değerini kullanarak tam değeri hesap edebilirsiniz) civarı transparanlığı olan siyah renkten tamamen transparan olan bir renge doğrudur. Şimdi bu tanımladığımız dikdörtgen şekli toolbar ın altına yerleştirmeye geldik.
9. activity_main.xml dosyasını açın ve şunları toolbar bileşeninden sonrasına ekleyin.
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_below="@+id/toolbar"
android:background="@drawable/toolbar_shadow" />
Bir View bileşeni ekleyip 8. adımda tanımladığımız dikdörtgen şekli bu bileşenin arkaplanı yaptık. Bileşeni de tam olarak toolbar in altına yerleştirdik. Şimdi çalıştırırsanız emülatörde göreceğiniz çıktı şöyle olmalıdır:
10. MainActivity.java dosyasını açın, onCreate metodu öncesinde bir toolbar nesnesi değişkeni ekleyin.
Toolbar toolbar;
setContentView(R.layout.activity_main); metodu altına şunları ekleyin:
toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar);
Bu adımlarla eklediğimiz toolbar bileşeninin bir actionbar olarak davranmasını istediğimizi android e iletmiş olduk.
Şimdi projeyi çalıştırırsanız toolbar a uygulama adının yazıldığını göreceksiniz.
Toolbar İçin Dark/Karanlık Tema
11. Ekran görüntüsünde gördüğünüz gibi uygulama adı toolbar a siyah renk ile yazılmış. Bu toolbar temasından kaynaklanıyor. Temayı bir dark temaya çevirdiğimizde başlık için beyaz rengin kullanıldığını göreceksiniz.
activity_main.xml dosyanızı açın ve toolbar bileşenine şu satırı ekleyip uygulamayı yeniden çalıştırın.
`app:theme="@style/ThemeOverlay.AppCompat.Dark"`
Sonuç :
Bu dersimiz buraya kadar :). Bir sonraki dersimizde aşağıdaki konu başlıklarından bahsedecek ve yine uygulamalı örnekler ile bitireceğim.
- Toolbar a Overflow menü Ekleme
- Toolbar a Geri Butonu Eklemek
- Toolbar a Herhangi Bir Buton Eklemek
- Uygulama Başlığını Ortalamak
- Toolbar a Herhangi Bir View Bileşeni Eklemek
Takipte kalın uygulamalı dersler ile öğrenin :).
Peyam – Gazeteler
Peyam ile gündemi kolay, akıllı,
ücretsiz ve hızlı yoldan yakalayın.
Kaynak Kod
Bunun gibi birçok ders hazırlayıp yayınlamak istiyoruz ancak bunun için gerçekten ciddi desteğe ihtiyacımız var arkadaşlar. Lütfen 1 dakikanızı ayırıp bu dersi facebook veya twitter hesabınız üzerinden paylaşarak bize destek olun.
Yeni bir derste görüşmek üzere,
İyi Çalışmalar.
