Android ile Actionbar kullanımı ve Toolbar özelleştirme

Selamlar, ActionBar nedir ? ile başlayalım öncelikle,

  • Uygulamalardaki Başlık yazısı, icon, iconlar, menü, arkaplan rengi değiştirilebilir, geri butonu,navigator icon gibi özellikleri barındıran, Toolbar olarak da adlandırılan, uygulamanın en üst kısmında kaldırılmadığı sürece bulunan bir bar (çubuk, çizgi, kalıp). Aynı zamanda ilgili Activity'nin en üst kısmını belirtir, üst sınırı ifade eder.
  • Bakınız; App Bar olarak da geçer. https://developer.android.com/training/appbar/index.html

ActionBar neler içerebilir, neler özelleştirilebilir ?

  • Varsayılan olarak Title (Başlık) kısmı gelir.
  • Sub Title (Alt açıklama yazısı)
  • Application Icon
  • Navigation Icon (Yönlendirme ikonları. Back Icon, Next Icon, NavigatorDrawer Icon)
  • Menu Icon ve MenuItem'lar (Settings Icon,Search Icon, Search EditText, Menu Item Text'leri [Spinner Item gibi görünüme sahiptir.] )
  • Bar'ın Background Color'ı değiştirilebilir. (colors.xml)
  • Material Design projelerinde, Expand/Collapse with Animation (Genişletilebilir toolbar) örnekleri de görebilirsiniz.

Title değiştirilmesi

  • this.setTitle("Merhaba Android !");

Subtitle eklenmesi

  • this.getSupportActionBar().setSubtitle("Alt başlık");

App Icon eklenmesi

  • this.setLogo(R.drawable.ic_launcher);

Toolbar'ın kaldırılması

  • this.requestWindowFeature(Window.FEATURE_NO_TITLE);
  • Not: setContentView'den önce tanımlanmalıdır.
  • Not: Custom Toolbar kullanımlarında bu kullanım geçerli değildir.

MenuBar eklenmesi ve Seçilen Item'ların yakalanması

Öncelikle menü oluşturalım; res > menu (içerisine eğer yoksa menu adlı klasör oluşturup) içerisine activity_main_actions isimli bir .xml dosyası oluşturalım. (activity_main_actions.xml)

res > drawable klasörü içerisine ic_action_settings isimli png resim ekleyelim. 48x48px ve katları olmasına özen gösterelim.

activity_main_actions.xml içeriği aşağıdaki gibi olsun;

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">
    <item
        android:id="@+id/action_setting"
        android:title="Ayarlar"
        app:showAsAction="always"
        android:icon="@drawable/ic_action_settings"/>
    <item
        android:id="@+id/action_setting2"
        android:title="Merhaba"
        />
</menu>

Not:

  • showAsAction="always" item'in ayrı bir icon olarak gözükmesini sağlamaktadır.

İlgili Activity'e ekleyiniz;

@Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main_actions, menu);
        this.menu = menu;
        return true;
    }

activity_main_actions isimli menümüzü ilgili activity'de gösterdik.

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Take appropriate action for each action item click
        switch (item.getItemId()) {
            case R.id.action_setting:
                Intent myIntent = new Intent(MainActivity.this,SettingActivity.class);
                startActivity(myIntent);
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
}

Tıklanan id'yi yakalayıp işlem yaptırdık.

Sonuç;

Geri butonunun eklenmesi ve tıklamaların yakalanıp tetiklenmesi

  • this.getSupportActionBar().setDisplayHomeAsUpEnabled(true);
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    if (id == android.R.id.home) {
        super.onBackPressed();
    }
    return super.onOptionsItemSelected(item);
}

 

Custom Toolbar ve Centered Text kullanımı

App gradle'a ekleyiniz;

compile 'com.android.support:appcompat-v7:25.1.0'

Activity Layout'unuza ekleyiniz;

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:minHeight="?attr/actionBarSize"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:titleTextColor="@android:color/white"
    android:background="?attr/colorPrimary">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Toolbar Title"
        android:textColor="@android:color/white"
        style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
        android:layout_gravity="center"
        />

</android.support.v7.widget.Toolbar>

Activity üzerinde kullanılması

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
TextView mTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);
mTitle.setText("serifgungor.com");

Sonuç;

Bu makaleyi paylaşın:
İstanbul'da yaşıyorum.Web üzerinde Frontend/Backend Geliştirmenin yanı sıra, Android Geliştirme, PHP/ASP.NET, C# Yazılım Uzmanlığı ve Java konuları işliyorum. Kod Şiirdir, onları seviyorum.

Bir yorum bırakın