Java

ile Native Android Eğitimi

Material Design

Kasım ADALAN
Elektronik ve Haberleşme Mühendisi
Freelance Software Developer
Eğitim İçeriği
• Material Design Kütüphanesinin Eklenmesi
• Arayüz Renklerinin düzenlenmesi
• Floating Action Button
• EditText için Floating Labels
• Giriş Kontrolleri
• ToolBar
• Özelleştirilmiş ToolBar
• ToolBar Menu Ekleme
• ToolBar Arama Özelliği
• RecyclerView & CardView
• Özelleştirilmiş RecyclerView
• Bottom Navigation View
• Tabs Layout
• Navigation Drawer
Kasım ADALAN 2
Material Design

Kasım ADALAN 3
Material Design Felsefesi Katmanlardan
Oluşmaktadır.

Android Lolipop ile gelmiştir.

API 21 sonrası gelmiştir

Kasım ADALAN 4
Material Design Kütüphanelerin yüklenmesi
Kullanmak istediğimiz
görsel nesneyi tasarım
ekranına sürükleyerek
veya indirme butonuna
basarak kütüphaneyi
ekleyebilirsiniz.

Kasım ADALAN 5
Arayüz Renklerinin Özelleştirilmesi
• Arayüz renklerinin düzenli bir yapısının olması için ve erişim
kolaylığı sağlamak adına renkler Color.xml dosyasında tutulur.
• Tema içerisinde kullanılacak renklere bu dosyadan erişilir.
style.xml

color.xml

Kasım ADALAN 6
Float Action Button - FAB

Kasım ADALAN 7
Float Action Button - FAB
• FAB, ekranda sabit durabilen diğer görsel
nesnelerin üzerinde durabilen bir nesnedir.
• FAB’ı kullanabilmek için gerekli kütüphaneler
indirilir.

fabsize : fab boyutu , normal ve mini olarak

backgrounTint : arka plan rengi
Kasım ADALAN 8
FAB Activity içerisinde kullanılması

Kasım ADALAN 9
FAB Animasyon
• FAB , animasyon eklemek için anim
klasörü oluşturulmalıdır.
• Oluşturulan klasöre nasıl bir animasyon
yapılacak ise ilgili xml dosyalar
oluşturulur.

Kasım ADALAN 10
 FAB Animasyon
• Bir fab her zaman
görünecek.
• Bu fab tıklanıldığın
görünmez olan diğer iki fab
ortaya çıkacaklar.
• Bu ortaya çıkma işlemi
animasyon ile
gerçekleşecek.

Kasım ADALAN 11
FAB Animasyon

Visibility özelliği ile

birinci ve ikinci fab
görünmez olurlar.
Yazılımsal olarak görünür
hale geleceklerdir.

fabIkinci

fabBirinci
fabMain
Kasım ADALAN 12
FAB’ın Activity içerisine bağlanması

Kasım ADALAN 13
fabMain’in açık mı
kapalı mı durum
kontrolü için
değişken.
Animasyonların
Activity’e
bağlanması.

Fab durumuna göre

animasyonların
başlatılması ve
tıklama özelliğinin
aktif edilmesi.

Kasım ADALAN 14
EditText için Floating Labels

Kasım ADALAN 15
• EditText üzerine tıklanıldığında edittext içerisindeki
placeholder’ın animasyolu olarak hareket etmesi.
• İlgili kütüphaneler indirilir.
• Activity içerisinde çalışırken normal EditText süreci
geçerlidir.
• Sadece animasyon kazandırmaktadır.

Kasım ADALAN 16
Android Giriş kontrolleri

• EditText girdileri Boş mu Dolu mu ?

• Girdi girilirken önüne ve arkasına white space – (beyaz boşluk ) konuldu
mu ? Kontrolleri yapılmasıdır.
• İlgili veri giriliyor mu ? Sadece sayısal giriş vb.

Kasım ADALAN 17
 Boş mu Dolu mu ? ve White Space ?

Return kullanmamızın anlamı hata olduğunda içerisinde bulunduğu metodun çalışmasını durdur..

trim() metodu String ifadelerin önündeki ve sonundaki boşlukları temizler.

TextUtils.isEmpty() girilen verinin boş olup olmadığını kontrol eder..

Kasım ADALAN 18
Geri dönüş değeri isteyen bir metod olduğu için return’e false eklenmiştir.

Kasım ADALAN 19
 İlgili veri kontrolü

• EditText bize kolaylık sağlamaktadır.

• EditText’in inputType özelliği vardır. Hangi
özellik EditText’e verilmiş ise o özelliğe uygun
klavye açılmaktadır.

Kasım ADALAN 20
Toolbar

Kasım ADALAN 21
 ToolBar
icon Menü
• Toolbar, android sayfasının en üstünde
bulunan bir görsel nesnedir. Başlık
• Varsayılan olarak her sayfada Alt Başlık
gelmektedir.
• Toolbar üzerinde değişiklikler
yapabilmek için uygulama içerisinde
özel temamızı oluşturmalıyız.
• Özel tema oluşturulduktan sonra her
sayfa için kendimiz Toolbar eklemek
zorundayız.
Kasım ADALAN 22
Özel ToolBar Oluşturma
• 1. Tema içerisinde varsayılan olarak gelen Toolbar ve başlığı
kaldırılmalıdır.

Kasım ADALAN 23
2.Kendi ToolBar’ımızı ekleme

Kasım ADALAN 24
3. ToolBar’ımızı Activity’e bağlama

androidx
kütüphanesinden
import edildiğine
dikkat edilmelidir.

Kasım ADALAN 25
 ToolBar Menu Ekleme
• Menu davranışları app:showAsAction= “” ile belirlenir.
• ifRoom : Toolbar’da yer varsa görünür yer kalmaz ise ikinci önceliğe
düşer.
• always : Toolbar’da ne olursa olsun yer alır.
• never : Varsayılan olarak toolbar’da görünmez ama menü içerisinde
görünür. ifRoom

Never veya Varsayılan

Kasım ADALAN 26
Menu Tasarlama

Kasım ADALAN 27
Activity içerisinde Menu bağlama

1.ToolBar bağlama

2. Menu Bağlama

3. Menu
item’larına
tıklanarak olay
yakalama
Kasım ADALAN 28
Menu Olayının Yakalanması

Kasım ADALAN 29
 Toolbar Arama Özelliği

• Toolbar üzerindeki arama resmine

basıldığında arama için edittext
ortaya çıkaran bir yapıdır.
• Bir interfacedir.
• implements
SearchView.OnQueryTextListener
• İki adet override etmemiz gereken
sınıf vardır.
• 1. onQueryTextChange
• 2. onQueryTextSubmit

Kasım ADALAN 30
 ToolBar Arama Özelliği
• Toolbar oluşturulur.
• Toolbar’da arama resminin görünmesi için menu oluşturulmalıdır.
• ActionViewClass her zaman kodlama içindeki SearchView sınıfının import’u ile aynı
olmalıdır.

• Menu Item’ına
SearchView Sınıfı
eklenmelidir.
• Menu item’ı kayıp
olma özelliği
Kasım ADALAN
olmalıdır. 31
Activity İçeriği

Menu içerisindeki Arama

Item’ının SearchView’a
eklenmesi.

Arama için EditText’e harf

girildikçe veya silindikçe
arama sonucu bu metoda
aktarır.
Arama için EditText’e arama
kelimesini girdikten sonra
arama tuşuna basıldığında
Kasım ADALAN bu metod çalışır. 32
Collapse ToolBar Oluşturma
• Dokunma özelliğine duyarlı olarak ekranın çökmesi işlemidir.
• Bu işlem için CoordinateLayout, AppBarLayout gereklidir.
• Bu iki tasarım nesnesini kullanabilmek için gerekli kütüphane
indirilmelidir.

Kasım ADALAN 33
Collapse Toolbar ToolBar

AppBarLayout

CoordinateLayout , material design getirdiği

animasyonları kullanmak için bir alt yapıdır.

CoordinateLayout

Kasım ADALAN 34
 ToolBar

AppBarLayout

CoordinateLayout

AppBar Altına eklenen

her görsel nesne Scroll
özelliğine sahip
olmalıdır.

Kasım ADALAN 35
Collapse Resim Ekleme
• Görsel animasyonu artırmak için toolBar’a
çöken bir resim eklenebilir.
• Bu işlemi gerçekleştirebilmek için
CollapsingToolbarLayout kullanılır.

Kasım ADALAN 36
Collapse Resim
Ekleme

Kasım ADALAN 37
Collapse Toolbar’ın Activity içerisinde bağlanması

Başlık genişlerken hangi renge dönüşeceği belirlenir

Kasım ADALAN 38
RecyclerView & CardView

Kasım ADALAN 39
 RecyclerView & CardView
• Bu görsel nesneleri kullanmak için ilgili
kütüphaneler indirilmelidir.
• CardView satır tasarımı nesnesidir.
• RecyclerView listeleme nesnesidir.
• Sayfa ve cardView tasarımları ayrı yapılır.

Kasım ADALAN 40
RecyclerView & CardView

Veri Kümesi Adapter

• Adapter, veri kümelerinin görsel

nesne içerisinde düzenli bir
şekilde tutulmasını sağlar.

• CardView Adapter içerisinde

bağlanır. Kasım ADALAN 41
 CardView Tasarımı

cardCornerRadious : köşelerin kıvrım miktarıdır.

Kasım ADALAN 42
Detaylı Tasarım Örnek

Kasım ADALAN 43
RecycleView Liste Sayfası

Kasım ADALAN 44
Adapter Oluşturma

Kasım ADALAN 45
 Dışarıdan veri alabilmek için Constructor
oluşturulur. Context Activity özelliklerine sahip
olmak için kullanılır.

CardView tasarımının Adapter’a

bağlanması ve tasarım üzerindeki görsel
nesnelerin tanıtılması.

Görsel nesnelerinin satır satır

doldurulması.
Görsel nesnelerin olaylarının
yakalanması.

Dışarıdan gelen verinin boyutu Kasım ADALAN 46

Activity İçerisindeki İşlemler

Kasım ADALAN 47
 RecycleView activity’ bağlanması.
RecycleView sayfa
üzerinde nasıl
görüneceği
belirlenir.

Veri Kümesinin Oluşturulması.

Veri Kümesinin ve Activity özelliklerinin this

aracılığıyla adapter’a yüklenmesi.

Adapter’ın RecycleView yüklenmesi.

Kasım ADALAN 48
Recycler’i verimli kullanma yöntemi

Kasım ADALAN 49
 RecycleView activity’ bağlanması. RecycleView sayfa
üzerinde nasıl
görüneceği
Veri Kümesinin ve Activity belirlenir.
özelliklerinin this aracılığıyla
adapter’a yüklenmesi.

Adapter’ın RecycleView
yüklenmesi.

• Notifydatasetchange() : Adapter’a eklenen veri

kümesi yani arrayList üzerinde değişiklik olursa
adapter içerisindeki bilgi yenilensin demektir.
• Clear() : Arraylist içerisindeki veri kümesini
temizler.

• Not : Bu metodlar ile çalışılmaz ise tasarımda

kaymalar ve boşluklar olmaktadır. Kasım ADALAN 50
RecycleView Görümün Tasarımları

Kasım ADALAN 51
LinearLayoutManager
• CardView’leri alt alta sıralar.

Kasım ADALAN 52
StaggeredGridLayoutManager
• CardView’leri GridView gibi sıralar.
• Bir satırda görünecek CardView miktarını
belirleyebiliriz.
• Dikey ve Yatay modu vardır.
• VERTICAL : Dikey
• HORIZONTAL : YATAY

Kasım ADALAN 53
StaggeredGridLayoutManager
• CardView’leri GridView gibi sıralar.
• Bir satırda görünecek CardView miktarını
belirleyebiliriz.
• Dikey ve Yatay modu vardır.
• VERTICAL : Dikey
• HORIZONTAL : YATAY

Kasım ADALAN 54
 Pop Up Menu Oluşturma
Pop Up Menu için öncelikle menu tasarımı oluşturulmalıdır

Kasım ADALAN 55
Pop Up Menu Oluşturma
Adapter içerisinde Pop Up Menu oluşturulur.

Menu tasarımının tanıtılması ve

PopUp Menu Oluşturup
Gösterilmesi

PopUp Item’larına basıldığını

yakalamak için sınıf oluşturulur.
Constructor’ı tıklanıldığı
cardview’in posizyonu alır.
Bu posizyon ile tıklanılan
cardview içeriğine ulaşılır.
Kasım ADALAN 56
Tabs Layout

Kasım ADALAN 57
Tabs Layout
• Her bir Tab içeriği Fragment’lardan oluşan
bir tasarım nesnesidir.

Kasım ADALAN 58
Tabs Layout Constraint Layout

Oluşturma ToolBar

TabLayout

ViewPager TabsLayout
içerisinde kullanılacak
Fragment’ları
tutmaktadır. CoordinateLayout

ViewPager

Kasım ADALAN 59
 Constraint Layout

ToolBar

TabLayout

CoordinateLayout

ViewPager

Sayfa genişlediğinde match_parent gibi

sayfayı kaplar. Aksi takdirde hep ortada
durur sayfa genişliğine duyarlı
olmaz.Sayfayı dikey ve yatay yaparak farkı
Kasım ADALAN 60
görebilirsiniz.
Tabs layout
1. Öncelikle style.xml’den varsayılan Toolbar’ı kaldırıyoruz.
2. TabsLayout için bir sayfa tasarımı oluşturuyoruz.
3. ViewPager içinde tutulacak Fragment’ların sınıflarını ve bu
Fragment’ların tasarımlarını oluşturuyoruz.
4. ViewPager’ın Fragment’ları tutabilmesi için Adapter oluşturulur.
5. Activity içerisinde oluşturulan Fragment’lar ViewPagerAdapter’a
yüklenir.
6. ViewPagerAdapter’da ViewPager’a yüklenir.
7. ViewPager’da TabsLayout’a yüklenir.
Kasım ADALAN 61
Tabs Layout Çalışma Yapısı

ViewPager
Fragment’lar ViewPager TabsLayout
Adapter

Kasım ADALAN 62
Fragmet Layout Oluşturma
• Fragment’lar için bir sınıf ve bir adet Layout
oluşturuyoruz.

Kasım ADALAN 63
Fragmet Sınıfı Oluşturma
İmport edilecek Fragment sınıfı aşağıdadır.

Kasım ADALAN 64
Tabs Layout ViewPager Adapter oluşturma

İmport edilecek Fragment sınıflarına dikkat edilmelidir.

Kasım ADALAN 65
Activity İçerisinde Kod Yazımı
Fragment’lar

ViewPager
Adapter

Fragment’ın
Adapter’a
yükleniyor ViewPager

Tab indeksine göre TabsLayout

Resim eklenebilir.
Kasım ADALAN 66
Bottom Navigation View

Kasım ADALAN 67
 Bottom Navigation View
Bottom navigation view , tab layout gibi çalışan bir yapıdır.
Sayfanın altında çalışacak şekilde tasarlanmıştır.
Tablayout gibi parmak hareketi ile yapılan kaydırma işlemine duyarlı değildir.

Kasım ADALAN 68
 Bottom Navigation View
1. Bottom navigation için menu oluşturulmalıdır.
bottombarmenu.xml

Kasım ADALAN 69
 Bottom Navigation View
2. Bottom navigation tasarıma yerleştirilir ve menu bottom navigation’a eklenir.

Kasım ADALAN 70
Fragmet Layout Oluşturma
• Fragment’lar için bir sınıf ve bir adet Layout
oluşturuyoruz.

Kasım ADALAN 71
Fragmet Sınıfı Oluşturma
İmport edilecek Fragment sınıfı aşağıdadır.

Kasım ADALAN 72
Activity içerisinde bar button’ların dinlenmesi

Kasım ADALAN 73
Fragment’ların geçişlerinin yapılması

Kasım ADALAN 74
Navigation Drawer

Kasım ADALAN 75
 Navigation Drawer

• Elimizin kaydırma hareketiyle ortaya çıkan bir

menüdür.
• Menü item’larına tıklanıldığında Fragmentlar
açılmaktadır.
• Varsayılan ToolBar’ı kaldırarak , kendi
özelleştirilmiş ToolBar’ımızı eklememiz
gereklidir.
• Toolbar üzerindeki buttona tıklayarak navigation
drawer açılır.

Kasım ADALAN 76
Navigation Drawer
• Menu Oluşturma 1
nav_menu.xml

Kasım ADALAN 77
 Navigation Drawer

Sayfa İçeriğinin Oluşturulması

Kasım ADALAN 78
2 Navigation Drawer
Tasarım içinde navigation
açılmasını test için kullanılır.

FrameLayout Navigation
Itemlarına tıklandıkça açılacak
fragmentları gösterecek yapıdır.

Menu ekleme
Kasım ADALAN 79
 Navigation Drawer’ın Açılması 3
• Bu aşamada navigation drawer toolbar üzerindeki butona basılarak
veya elimiz ile kaydırarak açıldığını test edebiliriz.

Kasım ADALAN 80
Navigation Drawer’ın Geri Tuşu İle Kapanması
• Daha iyi bir kullanıcı deneyimi için 4
Navigation Drawer açık ise geri tuşuna basılınca kapanması ,
kapalı ise uygulamadan çıkılmasını sağlamamız gereklidir.

Kasım ADALAN 81
 Navigation View Menu Itemlerına
Tıklanılmasını Dinleme 5
• Oluşturduğumuz menu itemlarına tıklanınca fragment açılması gereklidir.
• Bu işlemi yapabilmek için itemların listener ile dinlenilmesi ve tıklanılmasının
yakalanması gereklidir.

Kasım ADALAN 82
Navigation View Menu Itemlerına
Tıklanılmasını Dinleme

Kasım ADALAN 83
Fragmet Layout Oluşturma
• Fragment’lar için bir sınıf ve bir adet Layout
oluşturuyoruz.

Kasım ADALAN 84
Fragmet Sınıfı Oluşturma
İmport edilecek Fragment sınıfı aşağıdadır.

Kasım ADALAN 85
 Navigation View Menu Itemlerına
7
Tıklanıldığında Fragmentların Açılması

Kasım ADALAN 86
Kasım ADALAN 87
 Başlık Oluşturma
• Navigation view üzerinde görünecek başlık ekleyebiliriz. 8
• Ayrı bir tasarım olarak hazırlanır.
• Kodlama yoluyla navigation üzerinde aktif hale getirilir.
navigation_baslik.xml

Kasım ADALAN 88
Başlığı Kodlama ile Ekleme

Kasım ADALAN 89
Shortcut

Kasım ADALAN 90
Shortcut

Kasım ADALAN 91
Res folder altında xml klasörü oluşturulur.

Kasım ADALAN 92
Oluşturulan res klasörü içerisine shorcuts.xml
dosyası oluşturulur.
• Xml klasörüne sağ tıklayarak new >> xml resource file

Kasım ADALAN 93
shortcuts.xml Not : Label’lar string dosyasından çekilmek zorundadır.

Her bir kısayol için

bir eleman
oluşturulur.

Kısayola tıklanıldığında
hangi activity’e
gideceğinin belirtilmesi

proje paketi yolu

Acitivity
Kasım ADALAN 94
Android manifest

Oluşturduğumuz shortcut.xml dosyasını

mainacitivity içerisinde aktif hale geliyor.

Kasım ADALAN 95
 Teşekkürler...

kasım-adalan kasimadalan@gmail.com kasimadalan