Android Dersleri 33 - Action Bar(App Bar), Toolbar

13 - Action Bar(App Bar), Toolbar

Bu dersin tamamının pdf'ini şu link'ten indirebilirsiniz :

https://drive.google.com/open?id=1cxpNh98_BbKX5jHEQlwjb83_HFpj8aGh

http://www.androidhive.info/2013/11/android-working-with-action-bar/

Overview of Action Bar

Action bar mainly contains four functional areas. They are app icon, view control, action buttons and action overflow. ( Action bar şu alanları içerir: )

App Icon – App branding logo or icon will be displayed here. ( Uygulamanın logosu veya icon gösterilecektir burada. )

View Control – A dedicated space to display app title. Also provides option to switch between views by adding spinner or tabbed navigation. ( Bu kısımda uygulamanın title'ı gösterilir. Eğer action bar'ımıza spinner veya tabbed navigation eklersek bu kısımda view'ler gösterilir. Bu kısmı kullanarak view'ler arasında geçiş yapabiliriz. )

Action Buttons – Some important actions of the app can be added here. ( Uygulama için önemli olan bazı action'ları buraya ekleriz. Bir listeye action'ları ekleriz, ekrana sığan action'lar bu kısımda gösterilir, ekrana sığmayan action'lar ise action overflow kısmında gösterilir.  )

Action Overflow – All unimportant action will be shown as a menu. ( Uygulama için daha az önemli olan bazı action'ları buraya ekleriz.  )

Check out the following diagram for complete overview about action bar. (Action bar ile ilgili aşağıdaki diagramı incelyelim. View control kısmında spinner navigation veya tab navigation göstermek mümkündür. Back navigation icon'a tıklarsak current activity'nin tanımladığmız parent activity'si başlatılır.  )

Android version support below 3.0

Action bar is introduced in android 3.0 (API level 11), but if you want your app to support action bar in older versions too, then use Support Library to make it compatible with older versions (Android 2.1 and above).  ( Action bar, Android 3.0 ile birlikte geldi, uygulamanızı daha önceki android versiyonlarının da desteklemesini istiyorsanız, Support library kullanmalısınız. )

Yeni bir proje yaratalım. Android.com adresinde action bar için kullanabileceğimiz icon'lar mevcuttur. Action Bar icon set'i şu adresten indirdim : http://developer.android.com/downloads/design/Android_Design_Icons_20130926.zip

Copy each icon with all resolutions (xxhdpi, xhdpi, hdpi, mdpi) into respected folders in Eclipse project under res ⇒ drawable- folders. ( Gerekli icon'ları projeme kopyaladım. Herbir icon'un tüm resolution'lar için olanlarını projemdeki uygun klasörlere kopyaladım. )

Adding Action Bar Icons

Here each <item> indicates each action item. ( res/menu klasörü altında menu_main_action.xml dosyası oluşturalım, bu dosyanın içeriği aşağıdadır. Bu xml dosyasında, <item> element kullanılarak action bar'a action item eklenir. root element, <menu> 'dür. Örneğin 2. item element'i inceleyelim, android:icon attribute'Ü kullanılarak bir icon(resim) belirlenir action item için, action item yeterli alan olursa action buttons alanında gösterilir, yeterli alan olmazsa bu icon gösterilmez, action item overflow alanında gösterilir. android:title attribute'ünü kullanarak action item için bir başlık belirleriz. android:showAsAction attribute'ünü ifroom olarak set ederek şunu sağlarız, ekranda yeterli alan varsa action item gösterilir, yoksa overflow kısmında gösterilir. )

menu_main.xml

<?xml version="1.0" encoding="utf-8"?>

<menu ...  xmlns:app="http://schemas.android.com/apk/res-auto"

>

   <!-- Search will display always cunku ilk sirada yazdik. -->

   <item android:id="@+id/action_search"

         android:icon="@drawable/ic_action_search"

         android:title="@string/action_search"

         android:showAsAction="ifRoom"/>

    

   <!-- Location Found -->

   <item android:id="@+id/action_location_found"

         android:icon="@drawable/ic_action_location_found"

         android:title="@string/action_location_found"

         android:showAsAction="ifRoom" />

    

   <!-- Refresh -->

   <item android:id="@+id/action_refresh"

         android:icon="@drawable/ic_action_refresh"

         android:title="@string/action_refresh"

         android:showAsAction="ifRoom" />

    

   <!-- Help -->

   <item android:id="@+id/action_help"

         android:icon="@drawable/ic_action_help"

         android:title="@string/action_help"

         android:showAsAction="never"/>

    

   <!-- Check updates -->

   <item android:id="@+id/action_check_updates"

         android:icon="@drawable/ic_action_refresh"

         android:title="@string/action_check_updates"

         android:showAsAction="never" />

</menu>

Yukarıda kullandığımız xml attribute'lerini açıklayalım :

android:icon – Defines the icon of the action item.

android:title – Title for the icon.

android:showAsAction – Defines the visibility of the action item. It accepts following values.

ifRoom Displays the icon if there is space available on the screen( Ekranda yer varsa icon gösterilir yoksa icon gösterilmeyip overflow'da action title gösterilir. )

never Never places this icon on the action bar( icon asla gösterilmez, overflow'da action title gösterilir. )

always Forces to display the icon always irrespective of space available. This way is not suggested. ( Icon'u zorla ekranda gösterir, ekranda yer olup olmamasına bakmaz. )

withText Displays a text along with the icon. Normally the text value defined by android:title will be displayed. ( Hem icon'u hem de action title'ı gösterir. )

collapseActionView Defines the action layout associated with it. This action view is defined using android:actionLayout or android:actionViewClass(?)

main activity class'ının onCreateOptionsMenu() method'unu aşağıdaki gibi implement etmeliyiz.

public class MainActivity extends Activity{

   @Override

   protected void onCreate(Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);

       setContentView(R.layout.activity_main);

   }

   @Override

   public boolean onCreateOptionsMenu(Menu menu) {

       MenuInflater inflater = getMenuInflater();

       inflater.inflate(R.menu.menu_main_actions, menu);

       return super.onCreateOptionsMenu(menu);

   }

}

Now if you run the project, you can see the action bar with action icons. You can also notice that an overflow icon shown which opens the unimportant action items as a drop down menu. ( Bu uygulamayı çalıştırdığımızda aşağıdaki gibi bir action bar elde ederiz, action item'lar gösterilir ancak tıklanırsa ne yapılacağını henüz implement etmedik. Bu uygulamayı 15_ActionBar_1 isimli projede implement ettim. )

15_ActionBar_1 isimli projede bu örneği implement ettim. Bu projenin çıktısı aşağıda gösterilmiştir.

Yukarıda actionbar kullanmayı çok kabataslak anlattık. ActionBar'ı tüm Android versiyonlarında düzgün bir şekilde kullanabilmek için konfigurasyon ayarlarını düzgün bir şekilde yapmak zorundayız aşağıda bunlardan bahsedeceğiz.

What is toolbar, AppBar, ActionBar? What is the difference between them?

Toolbar is much more flexible than standard ActionBar, you can add much more tools in a Toolbar (as it extends ViewGroup), and follow Material Design Guidelines. ( Toolbar bir Widget'dir yani bir ViewGroup'dur. Dolayısıyla Toolbar'a istediğimiz view'leri ekleyebiliriz, istediğimiz gibi customize edebiliriz, sonra ise bu toolbar'ı action bar olarak set edebiliriz. Toolbar Material Design kurallarına uyar. ActionBar ise esnek değildir çok fazla customization yapmak mümkün değildir. )

Örneğin bir Toolbar kullanarak aşağıdaki gibi bir appbar(eski adıyla actionbar) tasarlayabiliriz:

A regular ActionBar isn't intended to be expanded this way. (Yukarıdaki appbar(toolbar) genişletilibilir olduğu için tüm ekranı kaplamıştır, normal bir ActionBar ise yukarıdaki gibi genişletilemez. )

<toolbar> element'ini activity'nin layout xml'ine yazabildiğimiz için, activity'de istediğimiz yere koyabiliriz toolbar'ı.

Google Support Library yayınlamıştır. Eğer tüm sürümlerde çalışan düzgün bir action bar tasarlamak istiyorsak bu support library'yi kullanmak zorundayız.

You should replace ActionBar with new toolbar. ( Önceden doğrudan ActionBar implement ederdik. Ama artık gelen support library'yi kullanarak bir toolbar tanımlayıp bu toolbar'ı actionBar olarak set ederiz, yani google'ın yeni yayınladığın material design kurallarını uygularız. )

Reasons

1) It looks modern and it follows new material design. ( Toolbar kullanarak geliştirdiğimiz actionBar daha modern görünür ve material design kurallarına uyar. )

2) Unlike Action bar , toolbar is not part of window decor. You define it and place it just like any other widget...therefor you have freedom to place it anywhere in the parent layout. ( Toolbar'ı herhangi bir view group gibi düşünebiliriz. Toolbar'ı tanımladıktan sonra herhangibir view'i layout'a eklediğimiz gibi aynı şekilde toolbar'ı da layout'a ekleriz. Toolbar'ı layout'da istediğimiz yere koyabiliriz. )

3) You can place other widgets(views) inside toolbar. ( Toolbar'In içerisine istediğimiz widget'i(istediğimiz view'i) koyabiliriz. )

4) You can define multiple toolbars. ( Birden fazla toolbar tanımlayabiliriz. )

Create a separate layout file for the toolbar(good for reusability).In my case file name is main_toolbar . ( Ayrı bir layout xml yaratıp root element olarak Toolbar kullanırız. Tabi support library içerisindeki Toolbar element'İ kullanırız burada dikkat! Support library'yi kullanabilmek için aşağıdaki dependency'yi yazmalıyız build.gradle dosyasında. Veya sdk manager'dan support library'yi install etmeliyiz android studio'dan(https://developer.android.com/topic/libraries/support-library/setup.html).

dependencies {
   compile 'com.android.support:appcompat-v7:24.2.1'
}

build.gradle dosyasına yukarıdaki satırı ekledikten sonra, belirttiğimiz support library Android Studio'muzda yüklü değilse hemen bir uyarı çıkar karşımıza, bu uyarıdaki talimatları takip ederek support library'yi indiririz. Artık support library'deki android.support.v7.widget.Toolbar element'i kullanabiliriz. Toolbar element'in içeriğini yani layout'Unu bu şekilde tanımlarız. Toolbar'ın içine br TextView koyduk bu örnekte. )

   <?xml version="1.0" encoding="utf-8"?>

   <android.support.v7.widget.Toolbar

       xmlns:android="http://schemas.android.com/apk/res/android"

       xmlns:tools="http://schemas.android.com/tools"

       xmlns:App="http://schemas.android.com/apk/res-auto"

       xmlns:segmentedgroup="http://schemas.android.com/apk/res-auto"

       android:id="@+id/toolbar"

       android:layout_width="match_parent"

       App:theme="@style/ToolbarColoredBackArrow"

       android:layout_height="56dp"

       android:background="@color/primary_color" >

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:textSize="@dimen/drawer_fntsize"

            android:text="Title"

            android:id="@+id/lbl_title"

            android:textColor="@color/title_text_color"

            android:layout_gravity="center" />

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

Then include this toolbar in your main layout like this. ( Sonra layout'umuza, toolbar element'i tanımladığımız layout'u include ederiz aşağıdaki gibi. )

<RelativeLayout

   xmlns:android="http://schemas.android.com/apk/res/android"

   android:layout_width="match_parent"

   android:layout_height="match_parent">

<include

   android:id="@+id/toolbar"

   layout="@layout/main_toolbar"/>

<FrameLayout

   android:id="@+id/content_frame"

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   android:layout_below="@+id/toolbar" />

Önceki yazdığımız MainActivity kodu eskidir, o kodu unut. Artık toolbar tanımlayıp toolbar'ı action bar olarak set ediyoruz yeni material desgin kurallarına göre. 15_ActionBar_1 isimli projenin full source kodları :

MainActivity.java

public class MainActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);

       Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); //toolbar view object'i elde ederiz.
       setSupportActionBar(toolbar); // toolbar view object'i action bar olarak set ederiz.

       getSupportActionBar().setDisplayShowHomeEnabled(true);
       getSupportActionBar().setLogo(R.drawable.omer);
       getSupportActionBar().setDisplayUseLogoEnabled(true);

   }

   public boolean onCreateOptionsMenu(Menu menu) {
       // Inflate the menu; this adds items to the action bar if it is present.
       // getMenuInflater().inflate(R.menu.menu_main_actions, menu);// boyle de diyebilirdik.

       MenuInflater inflater = getMenuInflater();
       inflater.inflate(R.menu.menu_main_actions, menu);

       return true;
   }

   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
// tıklanınca yapılacak şeyi implement ederiz.
       return super.onOptionsItemSelected(item);
   }

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout >

   <TextView  android:text="Hello World!" />

   <android.support.v7.widget.Toolbar
       android:id="@+id/toolbar"

       android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</RelativeLayout>

styles.xml

<resources>
   <!-- Base application theme. -->
   <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
   </style>
</resources>

AndroidManifest.xml : Aşağıda highlight ettiğim satırı eklemek zorunludur. Burada application element'in theme attribute'ünü set ediyoruz, threme attribute'ünü AppTheme olarak set edip, styles.xml dosyasında name'i AppTheme olan parent'ı Theme.AppCompat.Light.NoActionBar olan bir style element tanımlayabilirdik.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="oiyioz.com.a15ac1">

   <application
       android:allowBackup="true"
       android:icon="@mipmap/ic_launcher"
       android:label="@string/app_name"
       android:supportsRtl="true"
       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
       <activity android:name=".MainActivity">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />

               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
       </activity>
   </application>

</manifest>

menu_main_actions.xml : Aşağıda hightlight ettiğimiz satırı eklemek zorunludur. item element'in showAsAction attribute'üne bu namespace'den erişiriz, yanlışlıkla android:showAsAction diye erişmeye çalıştığım için 1 gün boyunca akşama kadar uğraştım sorun nerde diye.

<?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="oiyioz.com.a15_actionbar_1.MainActivity" >

<!-- Search / will display always -->
<item android:id="@+id/action_search"
   android:icon="@drawable/ic_action_search"
   android:title="@string/action_search"
   app:showAsAction="always"/>

<!-- Location Found -->
<item android:id="@+id/action_location_found"
   android:icon="@drawable/ic_action_location_found"
   android:title="@string/action_location_found"
   app:showAsAction="always" />

<!-- Refresh -->
<item android:id="@+id/action_refresh"
   android:icon="@drawable/ic_action_refresh"
   android:title="@string/action_refresh"
   app:showAsAction="ifRoom" />

<!-- Help -->
<item android:id="@+id/action_help"
   android:icon="@drawable/ic_action_help"
   android:title="@string/action_help"
   app:showAsAction="never"/>

<!-- Check updates -->
<item android:id="@+id/action_check_updates"
   android:icon="@drawable/ic_action_refresh"
   android:title="@string/action_check_updates"
   app:showAsAction="never" />
</menu>

---

In its most basic form, the action bar displays the title for the activity on one side and an overflow menu on the other. Even in this simple form, the app bar provides useful information to the users, and helps to give Android apps a consistent look and feel. ( En basit bir action bar, bir tarafta uygulamanın ismini diğer tarafta ise bir overflow menü gösterir. Bu basit haliyle bile appbar kullanıcıya yararlı bilgiler sağlar ve Android uygulamalarının daha güzel gözükmelerini sağlar. )

Figure 1. An app bar with the app title and overflow menu. ( Yukarıdaki appbar uygulama ismi ve overflow menüsü içerir. )

You should use the support library's Toolbar class to implement your activities' app bars. Using the support library's toolbar helps ensure that your app will have consistent behavior across the widest range of devices. For example, the Toolbar widget provides a material design experience on devices running Android 2.1 (API level 7) or later, but the native action bar doesn't support material design unless the device is running Android 5.0 (API level 21) or later. ( Activity'leriniz için appbar implement etmek için, support library'deki Toolbar class'ını kullanmalısınız. Bu yolla geliştirdiğiniz bir Toolbar çoğu cihazda düzgün çalışır. Ancak eski usul action bar kullanırsanız, bu action bar material design'ı Android 5.0'ın altındaki cihazlarda desteklemez. Dolayısıyla material design'ı destekleyen actionbar'ı, yani support library'deki toolbar'ı kullanmalısınız. )

Add a Toolbar to an Activity

These steps describe how to set up a Toolbar as your activity's app bar. (  Bir toolbar'ı, bir activity'nin appbar'ı(action bar'ı) olarak set etmek için şu adımları izlemeliyiz : )

1. Add the v7 appcompat support library to your project, as described in Support Library Setup. ( sdk manager'dan support library'yi install etmeliyiz android studio'dan(https://developer.android.com/topic/libraries/support-library/setup.html).
2. Make sure the activity extends AppCompatActivity: ( actionbar gösterilmesini istediğimiz activity, AppCompatActivity class'ının extend etmek zorundadır.  )

public class MyActivity extends AppCompatActivity {
  // ...
}

Note: Make this change for every activity in your app that uses a Toolbar as an app bar. ( Uygulamanızda bir toolbar'ı action bar olarak set edecek, yani bir actionbar'a sahip olacak tüm activity'ler AppCompatActivity class'ını extend etmek zorundadır.  )

3. In the app manifest, set the <application> element to use one of appcompat's NoActionBar themes. Using one of these themes prevents the app from using the native ActionBar class to provide the app bar. For example: ( AndroidManifest.xml dosyasındaki <application> element'in theme attribbute'ü, appcompat'ın NoActionBar theme'lerinden biri olmalıdır. Bu temalardan birini kullanarak şunu sağlarız : uygulamada actionbar için native ActionBar(eski usul action bar) class'ının kullanılmasını engellemiş oluruz bu şekilde. Örneğin aşağıdaki theme'i kullanabiliriz. )

<application
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"
    />

4. Add a Toolbar to the activity's layout. For example, the following layout code adds a Toolbar and gives it the appearance of floating above the activity: ( activity'nin layout'unda toolbar'ın yani actionbar'ın nerede gösterilmesini istiyorsak, support library'deki toolbar element'i activity layout'un uygun yerine koyarız. Veya ayrı bir layout xml dosyasında toolbar element'i tanımlayıp sonra bu toolbar element'i istediğimiz activity layout'una include edebiliriz. Aşağıdaki örnekte activity layout'a koyulacak bir Toolbar element gösterilmiştir, bu toolbar activity'nin üzerinde yüzüyor gibi bir efekte sahip olacaktır. )

<android.support.v7.widget.Toolbar
   android:id="@+id/my_toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:background="?attr/colorPrimary"
   android:elevation="4dp"
   android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
   app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

The Material Design specification recommends that app bars have an elevation of 4 dp. ( App bar'ın 4 dp elevation'a(yüksekliğe) sahip olması tavsiye edilir. Yani sanki ekrandan yukarıdaymış gibi düşün, z ekseninde 4 dp gibi düşün. Aşağıdaki ilk örnekte elevation vardır, dolayısıyla kenarlarda gölegeleme vardır, sanki kutucuk yukarıda da aşağıya gölgesi düşüyor gibidir. Aşağıdaki kutucukta ise elevation sıfırdır, gölge mölge yoktur. )

Position the toolbar at the top of the activity's layout, since you are using it as an app bar.( Toolbar'ı bir appbar olarak kullanmak istediğimiz için toolbar'ı activity'nin en üst kısmına koyarız. )

5. In the activity's onCreate() method, call the activity's setSupportActionBar() method, and pass the activity's toolbar. This method sets the toolbar as the app bar for the activity. For example: ( Activity'nin onCreate() method'Unda, toolbar view object'i elde ederiz, sonra setSupportActionBar(myToolbar)  method'unu çağırarak bu toolbar'ı activity'nin actionbar'ı olarak set ederiz. )

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
    setSupportActionBar(myToolbar);
    }

Your app now has a basic action bar. By default, the action bar contains just the name of the app and an overflow menu. ( Bu 5 adımı uyguladıktan sonra uygulamamız artık basit bir action bar'a sahiptir. Default olarak action bar, sadece uygulamanızın ismini ve overflow menü içerir. App bar 'da gösterilmesini istediğimiz action item'lar varsa bunları ayrı res/menu klasörü altında bir dosya yaratıp bu dosyada tanımlamalıyız, sonra onCreateOptionsMenu() method'unda getMenuInflater().inflate(R.menu.menu_main_actions, menu); diyerek action item'ları action bar'a eklemeliyiz. Bu action'ları tıklayınca ne tepki verileceğini ise onOptionsItemSelected() method'unda tanımlamalıyız.

Use App Bar Utility Methods

Once you set the toolbar as an activity's app bar, you have access to the various utility methods provided by the v7 appcompat support library's ActionBar class. This approach lets you do a number of useful things, like hide and show the app bar. ( Bir toolbar'ı, bir activity'nin app bar'ı olarak set edince, support library'deki ActionBar class'ındaki method'lara erişim yetkisine sahip oluruz. support library'deki ActionBar class'ındaki method'ları kullanarak çok işimize yarayacak işler yapabiliriz, örneğin appbar'ı göstermek veya gizlemek için ActionBar class'Inın show()/hide() method'larını çağırabiliriz. )

To use the ActionBar utility methods, call the activity's getSupportActionBar() method. This method returns a reference to an appcompat ActionBar object. Once you have that reference, you can call any of the ActionBar methods to adjust the app bar. For example, to hide the app bar, call ActionBar.hide(). ( Support library'deki ActionBar class'ının method'larını kullanabilmek için, activity'nin getSupportActionBar() method'unu çağırarak ActionBar object elde etmeliyiz önce. Artık bu ActionBar object'in method'larını çağırarak app bar üzerinde değişiklikler yapabiliriz. Örneğin ActionBar.hide() method'unu çağırarak appbar'ı gizleyebiliriz. )

---

The app bar allows you to add buttons for user actions. This feature lets you put the most important actions for the current context right at the top of the app. For example, a photo browsing app might show share and create album buttons at the top when the user is looking at their photo roll; when the user looks at an individual photo, the app might show crop and filter buttons. ( App bar'a butonlar(action item'lar) koyabiliriz. Activity'deki en önemli butonları appbar'a koyarız. Örneğin, fotoğraf uygulamasında fotoğrafı paylaşma ve album yaratma butonlarını appbar'a koyarız. Kullanıcı bir fotoğrafa tıklayınca yani single bir fotoğrafa bakarken ise appbar'a crop/filter butonlarını koyabiliriz. )

Space in the app bar is limited. If an app declares more actions than can fit in the app bar, the app bar send the excess actions to an overflow menu. The app can also specify that an action should always be shown in the overflow menu, instead of being displayed on the app bar. ( Appbar'daki alan sınırlıdır. Dolayısıyla appbar sığabileceğinden daha fazla action(button) eklersek, appbar'a sığmayan action'lar appbar'ı overflow menüsünde gösterilir. Ayrıca bir action'ının sadece overflow menü'de gösterilmesini sağlamak da mümkündür. )

Figure 1. An app bar with a single action button and an overflow menu.

Add Action Buttons

---

All action buttons and other items available in the action overflow are defined in an XML menu resource. To add actions to the action bar, create a new XML file in your project's res/menu/ directory. ( Tüm action butonları ve overflow menü'deki item'lar, menü klasörü altındaki bir xml dosyasında tanımlanır. Action bar'a bir action item eklemek için res/menü klasörü altında bir XML dosyası yaratırız. onCreateOptionsMenu() method'unda getMenuInflater().inflate(R.menu.menu_main_actions, menu) diyerek bu xml'deki action item'ları appbar'da gösteririz. )

Add an <item> element for each item you want to include in the action bar, as shown in this code example of a menu XML file: ( App bar'a eklemek istediğimiz her action item için, bu XML dosyasına <item> element ekleriz. Aşağıda bir menü xml dosyası içeriği gösterilmiştir. )

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- "Mark Favorite", should appear as action button if possible -->
    <item
        android:id="@+id/action_favorite"
        android:icon="@drawable/ic_favorite_black_48dp"
        android:title="@string/action_favorite"
        app:showAsAction="ifRoom"/>

    <!-- Settings, should always be in the overflow -->
    <item android:id="@+id/action_settings"
          android:title="@string/action_settings"
          app:showAsAction="never"/>

</menu>

The app:showAsAction attribute specifies whether the action should be shown as a button on the app bar. If you set app:showAsAction="ifRoom" (as in the example code's favorite action), the action is displayed as a button if there is room in the app bar for it; if there is not enough room, excess actions are sent to the overflow menu. If you set app:showAsAction="never" (as in the example code's settings action), the action is always listed in the overflow menu, not displayed in the app bar. ( item element'in app:showAsAction attribute'ü, action item'ın appbar'da bir buton olarak mı gösterileceğini yoksa overflow menü'de mi gösterileceğini belirtir. app:showAsAction attribute'ünü ifRoom olarak set edersek, appbar'da yer varsa action item'ı appbar'da göster demiş oluruz, bu durumda app bar'da yer olmazsa overflow menü'de gösterilir bu action item. app:showAsAction = "never" dersek, bu action item'ın action bar'da değil action bar'ın overflow menüsünde gösterilmesini sağlarız. )

The system uses the action's icon as the action button if the action is displayed in the app bar. You can find many useful icons on the Material Icons page. ( Eğer action item, appbar'da gösterilirse, action item'ın icon'u gösterilir action butonu olarak. İlgili linkten icon'lar indirebilirsiniz. )

Respond to Actions

---

When the user selects one of the app bar items, the system calls your activity's onOptionsItemSelected() callback method, and passes a MenuItem object to indicate which item was clicked. In your implementation of onOptionsItemSelected(), call the MenuItem.getItemId() method to determine which item was pressed. The ID returned matches the value you declared in the corresponding <item> element's android:id attribute. ( Kullanıcı appbar'daki action item'lardan birine tıklayınca, sistem ilgili activity'nin onOptionsItemSelected(MenuItem item) method'unu çağırır. Bu method'un aldığı parametrenin getItemId() method'unu çağırırız, return eden değer menü xml'deki hangi item element'in id'si diye bakarız, böylece kullanıcının hangi action item'a tıkladığını anlarız.  )

For example, the following code checks to see which action the user selected. If the method does not recognize the user's action, it invokes the superclass method: ( Örneğin aşağıdaki kodda, kullanıcının action bar'daki hangi action item'a tıkladığını check ederiz. Eğer kullanıcının tıkladığı item tanınmazsa, mesela kullanıcı back tuşuna basarsa, superclass'ın method'u invoke edilir. )

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_settings:
            // User chose the "Settings" item, show the app settings UI...
            return true;

        case R.id.action_favorite:
            // User chose the "Favorite" action, mark the current item
            // as a favorite...
            return true;

        default:
            // If we got here, the user's action was not recognized.
            // Invoke the superclass to handle it.
            return super.onOptionsItemSelected(item);

    }
}