Projeyi yaparken Material Design kullanacağız. Bunun için projeye Material Design kütüphanesini eklememiz gerekiyor. Android Studio’da projemizi açıyoruz. App build.gradle dosyasını açıyoruz. com.android.support:design:x kütüphanesini ekliyoruz. X yazan yere sizin diğer support kütüphaneleriniz hangi versiyonda ise onu yazmanız gerekmektedir. Daha önce de bahsettiğim gibi versiyon çakışmasını önlemek için bunu yapmamız gereklidir. Kütüphaneyi ekledikten sonra projeyi sync ediyoruz. Res klasörünün altındaki values klasöründeki styles dosyasını açıyoruz. Ben uygulamanın genel temasını Material Design ile değiştireceğim. Siz yapmak zorunda değilsiniz. Bunun için AppCombat yazan yeri slip MaterialComponents ile değiştiriyoruz.
1
2
3
4
5
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
Uygulamamızda toplam 3 tane sayfa olacak. Bu sayfalar bütün film önerilerinin bulunduğu öneriler sayfası, uygulamada arama yapmamıza izin veren arama sayfası ve kullanıcının favorilere eklediği filmleri gösteren favoriler sayfasıdır.
Android Studio’da projemizi açıyoruz. Java dosyalarının bulunduğu klasöre sağ tıklayıp new diyip fragment seçeneğine geliyoruz. Açılan pencereden blank seçeneğini seçip devam ediyoruz. Fragment’ımıza HistoryFragment adını yazıyoruz. Altında layout dosyası oluşturulsun mu seçeneği var. Biz oluşturulmasını istediğimiz için işaretli bırakacağız. Onun altında layout dosyasının isminin yazılı olduğu bölüm var. Onu aynı şekilde bırakıp devam ediyoruz. İşlem sonunda bir tane java dosyası ve bir tane layout dosyası oluşturuldu. Aynı işlemi 3 kere daha yapıyoruz. İsimleri SearchFragment ve FavoritesFragment olacaktır.
Şimdi sayfamızın tasarımını yapacacağız. Bunun için MainActivity’nin tasarım dosyasını açıyoruz. Bu dosya res klasörünün altındaki layouts klasörünün altında bulunur. Aşağıda Text ve Design diye iki tane seçenek var. Design kısmında sayfa dizaynını sürükle bırak şeklinde yapabilirsiniz. Text kısmında sayfa tasarımını kendiniz elle yazarak yapıyorsunuz. Biz tasarımımızı Text kısmını kullanarak yapacağız. Eğer xml dosyasını ilk oluşturulduğundan beri değiştirmediyseniz sayfa içerisinde bir tane ConstraintLayout olması gerek. Onun olduğu yazıyı tamamen seçip RelativeLayout yazıyoruz. İçine bir tane FrameLayout ekliyoruz. Bunun için başına < koyup yazmanız gereklidir. IDE size öneri sunacaktır. Doğru öneriyi seçip devam ediyoruz. Bizden layout_width ve layout_height istiyor. Bunlar eklenen tasarım ögesinin yükseklik ve genişlik değerleridir. İsterseniz herhangi bir rakam yazıp sonuna dp koyup spesifik bir değer girebilirsiniz. Mesela 50dp gibi. İsterseniz match_parent diyerek onun bir üstündeki tasarım ögesi ile aynı değerlere sahip olmasını sağlayabilirsiniz. İsterseniz wrap_content diyip içene koyacağınız ögesinin boyutuna göre değerlere sahip olmasını sağlayabilirsiniz. Framelayout için match_parent kullanacağız. Framelayout ögesine id eklememiz gerekmektedir. Bu id bize kodu yazarken tasarım ögesine ulaşma imkanı sunuyor. Bunun için id yazıyoruz ve çıkan seçeneği seçiyoruz. @+id/x diyip id ataması yapıyoruz. X yazan yere siz istediğiniz id’yi yazabilirsiniz. Biz id olarak main_frame kullanacağız.
1
2
3
4
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/main_frame"/>
Altına bottomnavigationview ekleyeceğiz bu bizim sayfalarımızın menüsü olacak. Buradan kullanıcı istediği ikona tıklayıp ilgili sayfaya gidecektir. Bottomnavigationview ekleyip genişlik için match_parent, yükseklik için wrap_content değerlerini giriyoruz. ID olarak main_nav değerini giriyoruz. Sayfasının aşağısında görünmesi için alignParentBottom özelliğini kullanacağız. AlignParentBottom yazıp değer olarak true giriyoruz. İkonların isimlerinin görünmesi veya görünmemesi için labelVisibilityMode özelliğini kullanacağız. Görünmesi için labeled, görünmemesi için unlabeled yapacağız. Biz görünmesini istiyoruz. Arka plan rengi vermemiz gerekiyor. Bunun için önce colors dosyasına istediğimiz rengi eklememiz gereklidir. İstersek direk tasarım dosyası içinden de renk verebiliriz ama colors dosyasından verirsek kodumuz daha okunaklı olur. Colors dosyasını açıyoruz. Bu dosya res klasörünün altındaki values klasöründe bulunuyor. Herhangi bir color etiketinin altına gelip yeni bir tane ekliyoruz. İsim olarak colorWhite verip değer olarak #FFF veriyoruz. Tasarım dosyasına geri dönüp bottomNavigationView içine background özelliği ekliyoruz. Değer olarak colorWhite yazıyoruz. Altta çıkan öneriyi seçiyoruz. Gösterilecek ikonların tutulduğu bir menu dosyası oluşturmamız gereklidir.
Menu dosyası oluşturmak için res klasörü altında yeni bir klasör oluşturmamız gereklidir. Res klasörüne sağ tıklayıp new diyip android resource directory seçeneğini seçiyoruz. Penceredeki resource type bölümünden menu seçeneğini seçip devam ediyoruz. Oluşturulan menu klasörüne sağ tıklayıp new diyip menu resource file seçeneğini seçiyoruz. Açılan pencerede isim olarak menu girip devam ediyoruz. Açılan sayfada menu içine item ögesi ekliyoruz. ID değeri vermemiz gereklidir. ID olarak nav_history diyoruz. İkon vermemiz gereklidir. Drawable klasörüne sağ tıklayıp new’e gelip vector asset seçeneğini seçiyoruz. Burada image asset seçeneğide var. İkisi arasında çok büyük bir fark yoktur. Hangisini kullanacağınız size kalmıştır. Açılan sayfada clip art yazan yerin yanındaki kutuya tıklıyoruz. Açılan sayfada kullanabileceğimiz simgeler gözüküyor. Arama kısmına history yazıyoruz. Karşımıza çıkan simgelerden istediğimizi seçiyoruz. İsterseniz adını değiştirebilirsiniz. Next diyip devam ediyoruz. Finish diyip ekleme işlemini bitiriyoruz. Bu simgelerin dışında sizde internetten simge bulup ekleyebilirsiniz. Ama eklerken ekleyeceğiniz dosyanın vector şeklinde olmasına dikkat edin. Bulduğunuz dosyaları vector şekline bu adresteki aracı kullanarak çevirebilirsiniz. Aynı işlemi arama ikonu için search yazıp ve favoriler için favorites yazıp tekrarlıyoruz.
Menu dosyasın geri dönüp item ögesinin içine icon yazıp karşısına history yazıyoruz. Alttaki seçeneklerden uygun olanı seçiyoruz. İkon isimleri için String dosyasına ekleme yapacağız. Bu dosya values klasörünün içinde bulunur. Herhangi bir string değerinin altına gelip yeni string değeri oluşturuyoruz. Değer olarak nav_history girip isim olarak Öneriler diyoruz. Aynı şekilde diğerlerini de oluşturuyoruz.
1
2
3
<string name="nav_history">Öneriler</string>
<string name="nav_seach">Arama</string>
<string name="nav_favorites">Favoriler</string>
Menu dosyasına gelip item içine title özelliği ekliyoruz. Değer olarak nav_history yazıyoruz. İtem’i kapatıyoruz. Bu itemle işimiz bitti. Diğerlerine de aynı işlemleri yapıyoruz. Sonuçta 3 tane item olması lazım.
1
2
3
4
5
6
7
8
9
10
11
12
<item
android:id="@+id/nav_history"
android:icon="@drawable/ic_history_black_24dp"
android:title="@string/nav_history" />
<item
android:id="@+id/nav_search"
android:icon="@drawable/ic_search_black_24dp"
android:title="@string/nav_seach" />
<item
android:id="@+id/nav_favorites"
android:icon="@drawable/ic_favorite_border_black_24dp"
android:title="@string/nav_favorites" />
Layout dosyasına geri dönüyoruz. BottomNavigationView içine menu özelliği ekliyoruz. Değer olarak menu yazıyoruz. FrameLayout içine gelip above özelliği ekliyoruz. Değer olarak bottomnavigaitonview ögesinin id’sini giriyoruz. Böylece fragmentlarımız bottomnavigationview’ın üstünde gözükecektir.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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=".MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/main_frame"/>
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/main_nav"
android:layout_gravity="bottom"
app:labelVisibilityMode="labeled"
android:background="@color/colorWhite"
app:menu="@menu/menu"/>
</android.support.design.widget.CoordinatorLayout>
Oluşturduğumuz fragment java dosyalarında bazı işimize yaramayacak kodlar bulunuyor. Android bunları kendisi otomatik ekliyor. Bunların ne işe yaradığını veya hangilerini sileceğimizi yazmayacağım sadece kodlarını atacağım.
1
2
3
4
5
6
7
8
9
10
11
12
13
public class FavoritesFragment extends Fragment {
public FavoritesFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_favorites, container, false);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
public class HistoryFragment extends Fragment {
public HistoryFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_history, container, false);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
public class SearchFragment extends Fragment {
public SearchFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_search, container, false);
}
}
MainActivity java dosyamızı açıyoruz. Karşımızdaki kodlardan biraz bahsedeceğim. En yukarıda import kısmında eklediğimiz kütüphaneler var. Bunlar bütün projeye değil sadece o sayfaya eklediğimiz kütüphanelerdir. Onun altında extends kısmı ile başka bir class’dan kalıtım alıyoruz. Böylece o sınıfın özelliklerini kendi sınıfımızda kullanabiliyoruz. super.onCreate kısmı ile kendi kodumuzu sistemde var olan onCreate koduna ilave ederek çalıştırıyoruz. Bunu her activity’de yapmamız gerekmektedir. setContentView ile bu kod ile hangi tasarım dosyasını kullanacağımızı belirliyoruz.
Global değişken olarak, oluşturduğumuz fragment sınıflarına ait 3 tane nesne oluşturuyoruz.
1
2
3
private HistoryFragment historyFragment;
private FavoritesFragment favoritesFragment;
private SearchFragment searchFragment;
OnCreate içinde bottomnavigationview ögesine erişiyoruz. Bunun için bottomnavigationview sınıfından bir nesne oluşturuyoruz. Bu nesneyi layout dosyasındaki tasarım ögesine bağlıyoruz. Global olarak oluşturduğumuz fragment nesnelerini de method içinde fragment’lara bağlıyoruz. R ile res kalsörü altındaki bütün dosyalara erişebiliriz. R sınıfı bizim için res altındaki bütün dosyaları indeksler.
1
2
3
4
BottomNavigationView bottomNavigationView = findViewById(R.id.main_nav);
historyFragment = new HistoryFragment();
favoritesFragment = new FavoritesFragment();
searchFragment=new SearchFragment();
Bottomnavigationview için dinleme işlemi yapmamız gereklidir. Bunun için aşağıdaki kodu kullanırız. Bunu yazmak için hepsini yazmamıza gerek yok. Zaten IDE bize belli bir yerden sonra kendisi önderide bulunuyor ve seçtiğimiz seçeneğe göre kodu kendi tamamlıyor. OnNavigationItemSelected içine herhangi bir ikona tıklanıldığı zaman ne yapılmasını istediğimizi yazıyoruz.
1
2
3
4
5
6
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
return false;
}
});
OnNavigationItemSelected içini doldurmadan önce fragment değiştirme kodunu yazacağız. Bunu oncreate dışında başka bir methodun içinde yapacağız. Oncrete dışına gelip boş bir yerde private tipinde setFragment adında bir method oluşturuyoruz. Bu method Fragment değişkeni alacaktır. Bir tane fragmentmanager nesnesi oluşturuyoruz. Fragmentmanager bizim activity içinden fragment’lara müdahale etmemize olanak sağlıyor. Bir tane fragmenttransaction nesnesi oluşturuyoruz. FragmentTransaction bizim fragment işlemleri yapmamıza olanak sağlıyor. Sonra fragmenttransaction yardımı ile istediğimiz fragment’ı tasarım ile eklediğimiz framelayout ile değiştiriyoruz. Eğer varsa yığındaki diğer bekleyen fragment’ları boşaltıyoruz. Sonra bunu ekrana gönderiyoruz. Fragment değiştirme işlemimiz bu kadardır.
1
2
3
4
5
6
7
private void setFragment(Fragment fragment){
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.main_frame,fragment);
fragmentManager.popBackStack();
fragmentTransaction.commit();
}
OnNavigationItemSelected içini doldurmaya devam ediyoruz. Hangi ikona tıklandığını belirlemek için onnavigationitemselected içinde switch case kullanacağız. Switch içine menuItem.getItemId diyoruz. MenuItem menüdeki itemler oluyor. GetItemId ise o ögenin id’si olutor. Case kısmına menu dosyasındaki itemlerin id’sini yazıyoruz. Case içinden az önce oluşturduğumuz methoda gidiyoruz. Değişken olarakta hangi id’li case’de isek o id’e ait fragment değişkenini veriyoruz.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
switch(menuItem.getItemId()){
case R.id.nav_history:
setFragment(historyFragment);
return true;
case R.id.nav_search:
setFragment(searchFragment);
return true;
case R.id.nav_favorites:
setFragment(favoritesFragment);
return true;
default:
return false;
}
}
});
Uygulamamızın genel tasarımı bitti. Uygulamamızı telefonumuzda çalıştırarak test ediyoruz.