Android Studio ile Youtube Bottom Navigation View Yapımı

Android Studio ile Youtube Bottom Navigation View Yapımı

Youtube’nin telefon uygulamalarını altında bulunan anasayfa, trendler, abonelikler, etkinlikler, kitaplık arasında gezinme kolaylığı sağlayan ve uygulamanın alt tarafında bulunan navigasyon özelliğine bu makalede nasıl yapabileceğimize bakacağız.

Öncelikle yapılması gereken ayarları yapalım.

build.gradle dosyamıza dizayn için kullanacağımız aşağıdaki kodu ekleyelim.

build.gradle dosyamızın son hali aşağıdaki gibi olması gerekiyor.

build.gradle

colors.xml, strings.xml ve styles.xml dosyamızı aşağıdaki gibi düzenliyoruz.

colors.xml

strings.xml

styles.xml

Bu ayarlamalarımız yaptıktan sonra geriye uygulamada kullanacağımız iconları projemize dahil etmek kalıyor. Buraya tıklayarak indiriyoruz youtube_android_icon dosyasının içindekilerini res klasörünün altına atıyoruz.

Alt tarafta bulunan itemleri tanımlayamak için res klasörünün altına bir menu dosyası oluşturuyoruz. menu dosyasının altına da menu_navigation.xml dosyası oluşturuyoruz ve aşağıdaki gibi düzenliyoruz.

menu_navigation.xml

activity_main.xml dosyamız Fragment’i menülerle birlikte görüntülemek için kullanılan content_main.xml dosyasındaki bir FrameLayout ile birlikte BottomNavigationView widget’ına sahip bir Araç Çubuğuna sahiptir. activity_main.xml ve content_main.xml dosyamızı aşağıdaki gibi düzenliyoruz.

activity_main.xml

content_main.xml

Alt tarafta olan menülerimizi tanımladığımız xml dosyalarımızı aşağıdaki gibi düzenliyoruz.

fragment_abonelikler.xml

fragment_anasayfa.xml

fragment_etkinlikler.xml

fragment_kitaplik.xml

fragment_trendler.xml

Oluşturduğumuz fragmentleri java sınıflarımızla aşağıdaki gibi bağlıyoruz.

AnasayfaFragment.java

TrendlerFragment.java

AboneliklerFragment.java

EtkinliklerFragment.java

KitaplikFragment.java

Son olarak MainActivity.java sınıfımızı oluşturuyoruz.

MainActivity.java

Böylelikle Button Navigation View’i nasıl yapabileceğimizi öğrenmiş olduk. Artık sizde uygulamalarınıza navigasyon ekleyerek zenginleştirebilirsiniz. Projenenin kaynak kodlarını buraya tıklayarak indirebilirsiniz.

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir