در این قسمت قصد داریم تولبار ایجاد شده در قسمت قبل را ویرایش کرده و آن را شخصی سازی کنیم.

ایجاد منو در طراحی متریال

ایجاد منو برای طراحی متریال

ابتدا روی res راست کلیک کرده و از New گزینه Android resource directory را انتخاب می‌کنیم.

Directory name را menu و Resource Type را از لیست روی menu تنظیم می‌کنیم:

متریال دیزاین

روی دایرکتوری تازه ایجاد شده menu نیز راست کلیک کرده و از New گزینه Menu resource file را انتخاب می‌کنیم و نام آن را top_menu قرار می‌دهیم:

طراحی متریال و منو کاستومایز شده

فایل تازه ایجاد شده top_menu.xml را به صورت زیر ویرایش می‌کنیم:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/setting" android:title="setting"></item>
    <item android:id="@+id/aboutus" android:title="aboutus"></item>
    <item android:id="@+id/contactus" android:title="contactus"></item>
</menu>

در فایل فوق سه item درون تگ menu ایجاد کردیم که هر کدام یک id و یک نام برای خود دارند. این سه آیتم قرار است منو نرم افزار ما را تشکیل دهند.

به منظور ایجاد منو و تشخیص آیتم کلیک شده در فایل MainActivity باید دو متد اضافه کنیم. متد اول متد onCreateOptionsMenu است که وظیفه اضافه کردن منو به تولبار را بر عهده دارد. متد دوم onOptionsItemSelected است که وظیفه تشخیص آیتم کلیک شده را بر عهده دارد. این متد‌ها را در زیر می‌بینید:

public class MainActivity extends AppCompatActivity {

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

    toolbar= (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.top_menu, menu);
    return true;
  }

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();

    switch (id){
      case R.id.setting:
        Toast.makeText(this, "setting", Toast.LENGTH_SHORT).show();
        return true;

      case R.id.aboutus:
        Toast.makeText(this, "aboutus", Toast.LENGTH_SHORT).show();
        return true;

      case R.id.contactus:
        Toast.makeText(this, "contactus", Toast.LENGTH_SHORT).show();
        return true;
    }
    return true;
  }
}

در سطر 14 متد onCreateOptionsMenu را اضافه کردیم. ورودی این متد یک متغیر از نوع Menu است.

در سطر 15 با استفاده از getMenuInflater().inflate منو موجود در مسیر res->menu->top_menu را به برنامه اضافه می‌کنیم، و متغیر ایجاد شده از نوع Menu سطر قبل را به آن می‌دهیم.

متد onCreateOptionsMenu باید یک خروجی از نوع بولین داشته باشد بنابر این با return true; این خروجی را انجام می‌دهیم.

در سطر 20 متد onOptionsItemSelected را اضافه می‌کنیم. ورودی این متد یک متغیر از نوع MenuItem است.

در سطر 21 متغیر ساخته شده از نوع MenuItem سطر قبل را به متغیری از نوع int و با نام id می‌دهیم. در واقع این متغیر id آیتم کلیک شده را در خود نگاه می‌دارد.

در سطر 23 تا 35 با استفاده از switch case تشخیص می‌دهیم که روی چه آیتمی کلیک شده است و پیام Toast مناسب با آیتم را نمایش می‌دهیم.

متد onOptionsItemSelected نیز باید یک خروجی از نوع بولین داشته باشد بنابر این در سطر 36 با return true; این خروجی را ایجاد می‌کنیم.

ویرایش منو در Toolbar

به تولبار می‌توان یک استایل اختصاص داد و آن را ویرایش کرد. به عنوان مثال در فایل styles.xml یک استایل جدید با نام toolbar_theme و با parent‌ای برابر ThemeOverlay.AppCompat.Dark ایجاد می‌کنیم:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    </style>
    <style name="toolbar_theme" parent="ThemeOverlay.AppCompat.Dark">
    </style>
</resources>

در فایل toolbar.xml به تگ android.support.v7.widget.Toolbar یک خاصیت با نام app:theme با آدرس @style/toolbar_theme می دهیم:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
                                   android:layout_width="match_parent"
                                   android:layout_height="wrap_content"
                                   xmlns:app="http://schemas.android.com/apk/res-auto"
                                   android:background="#F44336"
                                   android:elevation="5dp"
                                   app:theme="@style/toolbar_theme">
</android.support.v7.widget.Toolbar>

نتیجه اجرای برنامه فوق به شکل زیر خواهد بود:

ایجاد منو برای طراحی

در تصویر فوق سیستم مجازی سمت راست API 23 و سمت چپ API 16 می‌باشد و همانطور که می‌بینید منو در آن‌ها تقریبا ظاهر یکسانی دارد. تفاوت عمده این دو منو در نحوه باز شدن آن است. در متریال دیزاین باز شدن منو حرکت خاصی دارد که باید خودتان در ماشین مجازی امتحان کنید و تفاوت باز شدن منو در گوشی‌های با نسخه 5 و بالاتر و یا پایین تر از 5 را ببینید.

البته به استایل toolbar_theme می‌توان خواص دیگری با نام android:textColorPrimary برای تغییر رنگ نام نرم افزار و android:textColorSecondary برای تغییر رنگ نقاط سه گانه منو اضافه کرد:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    </style>
    <style name="toolbar_theme" parent="ThemeOverlay.AppCompat.Dark">
        <item name="android:textColorPrimary">#ffff00</item>
        <item name="android:textColorSecondary">#00ffff</item>
    </style>
</resources>

نتیجه اجرای کدهای فوق به شکل زیر خواهد بود:

طراحی متریال دیزاین

در تصویر بالا نام نرم افزار و نقطه‌های سه گانه تغییر رنگ دادند.