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
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.