Android App Bar Layout Tutorial

Android App Bar Layout Tutorial

App Bar Layout, Android uygulamalarında bir başlık çubuğu ve gezinme sekmeleri içeren bir düzen öğesidir. Kullanıcıların uygulama içinde gezinmesini ve başlık çubuğundaki öğelerle etkileşim kurmasını sağlar.

App Bar Layout’u Kullanma

App Bar Layout’u kullanmak için öncelikle XML düzen dosyanıza eklemeniz gerekir. Bunu aşağıdaki gibi yapabilirsiniz:

“`xml

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:title="App Bar Layout" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed" />

</com.google.android.material.appbar.AppBarLayout>

<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />


“`

Yukarıdaki kodda, App Bar Layout’u bir CoordinatorLayout’un altına ekledik. CoordinatorLayout, App Bar Layout’un diğer düzen öğeleriyle koordineli bir şekilde çalışmasını sağlar.

App Bar Layout’un içinde bir Toolbar ve bir TabLayout öğesi ekledik. Toolbar, başlık çubuğunu oluştururken, TabLayout, gezinme sekmelerini oluşturur.

Toolbar’u Kullanma

Toolbar, başlık çubuğunu oluşturan bir düzen öğesidir. Başlık, alt başlık, logo ve menü öğeleri gibi öğeleri içerebilir.

Toolbar’u kullanmak için öncelikle XML düzen dosyanıza eklemeniz gerekir. Bunu aşağıdaki gibi yapabilirsiniz:

xml
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="App Bar Layout" />

Yukarıdaki kodda, Toolbar’u App Bar Layout’un altına ekledik. Toolbar’un genişliğini ve yüksekliğini ayarladık ve arka plan rengini belirledik. Ayrıca, başlık metnini “App Bar Layout” olarak ayarladık.

Toolbar’a menü öğeleri eklemek için aşağıdaki gibi kod kullanabilirsiniz:

java
Toolbar toolbar = findViewById(R.id.toolbar);
toolbar.inflateMenu(R.menu.main_menu);

Yukarıdaki kodda, Toolbar’a main_menu.xml adlı menü dosyasını ekledik. main_menu.xml dosyası aşağıdaki gibi olabilir:

“`xml

“`

Yukarıdaki kodda, menüye bir “Settings” öğesi ekledik. Bu öğe, her zaman görünür olacak ve tıklandığında SettingsActivity adlı bir aktiviteyi başlatacaktır.

TabLayout’u Kullanma

TabLayout, gezinme sekmelerini oluşturan bir düzen öğesidir. Sekmeler, kullanıcıların uygulama içinde farklı sayfalar arasında gezinmesini sağlar.

TabLayout’u kullanmak için öncelikle XML düzen dosyanıza eklemeniz gerekir. Bunu aşağıdaki gibi yapabilirsiniz:

xml
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed" />

Yukarıdaki kodda, TabLayout’u App Bar Layout’un altına ekledik. TabLayout’un genişliğini ve yüksekliğini ayarladık ve sekme modunu “fixed” olarak ayarladık. Bu, sekmelerin sabit genişlikte olacağı anlamına gelir.

TabLayout’a sekmeler eklemek için aşağıdaki gibi kod kullanabilirsiniz:

java
TabLayout tabLayout = findViewById(R.id.tabs);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

Yukarıdaki kodda, TabLayout’a üç adet sekme ekledik. Bu sekmeler, “Tab 1”, “Tab 2” ve “Tab 3” olarak adlandırılır.

ViewPager’ı Kullanma

ViewPager, farklı sayfalar arasında gezinmeyi sağlayan bir düzen öğesidir. Sayfalar, ViewPager’a eklenen Fragment’lardan oluşur.

ViewPager’ı kullanmak için öncelikle XML düzen dosyanıza eklemeniz gerekir. Bunu aşağıdaki gibi yapabilirsiniz:

xml
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Yukarıdaki kodda, ViewPager’ı App Bar Layout’un altına ekledik. ViewPager’ın genişliğini ve yüksekliğini ayarladık ve davranışını “appbar_scrolling_view_behavior” olarak ayarladık. Bu, ViewPager’ın App Bar Layout ile koordineli bir şekilde çalışmasını sağlayacaktır.

ViewPager’a Fragment’lar eklemek için aşağıdaki gibi kod kullanabilirsiniz:

java
ViewPager viewPager = findViewById(R.id.viewpager);
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new Fragment1());
adapter.addFragment(new Fragment2());
adapter.addFragment(new Fragment3());
viewPager.setAdapter(adapter);

Yukarıdaki kodda, ViewPager’a üç adet Fragment ekledik. Bu Fragment’lar, Fragment1, Fragment2 ve Fragment3 olarak adlandırılır.

Faydalı Siteler ve Dosyalar

Yayımlandı

kategorisi