استخدم ToolBar بدلا عن ActionBar

من الاضافات الجديدة والجميلة في تصميم الماتيريال هو استبدال ActionBar بـToolbar وقد اعطى هذا التغيير مرونة في التعامل مع ActionBar وايضا اعطاء طابع جميل على مظهر التطبيق .

قبل البدء في هذا الدرس سنحتاج الى اضافة هذا السطر في dependencies في ملف build.grade 

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

*اذا كان التطبيق لديك يدعم الانظمة القديمة ستجد هذا السطر موجود مسبقا .

1. انشاء Layout باسم toolbar.xml .

   سنقوم بانشاء Layout جديد وسنقوم بكتابة كود Toolbar  . كما سيأتي

   <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       android:background="@color/material_deep_teal_500"
       android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
       android:elevation="4dp" />

   ستلاحظ اننا قمنا باضافة theme وايضا خصصنا الطول كـactionBarSize

2. اضافة toolbar.xml الى activity_tool_bar.xml .

   سنقوم الان باضافة toolbar.xml الى شاشة activity_tool_bar.xml باستخدام include وسيكون الكود تقريبا بهذا الشكل

   <LinearLayout 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"
       android:orientation="vertical"
       tools:context="tatbigy.recyclerviewcardview.ToolBarActivity">
   
       <include layout="@layout/toolbar" />
   
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@string/welcome_toolbar"
           android:textSize="30sp" />
   
   </LinearLayout>
   

3. استبدال ActionBar بـToolBar.

   تبقى لدينا خطوة اخيرة وهي استبدال ActionBar واضافة Toolbar بخطوة بسيطة جدا وراح تلاحظ الفرق في تصميم التطبيق .

   public class ToolBarActivity extends AppCompatActivity {
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_tool_bar);
           
           Toolbar appbar = (Toolbar) findViewById(R.id.toolbar);
           setSupportActionBar(appbar);
           
       }
   }

   ستكون النتيجة بهذا الشكل

   

4. اضافة القائمة الى ToolBar .

   سنقوم اولا بانشاء عناصر للقائمة ونقوم باضافة ايقونات تعبر عن عناصر القائمة .
   راجع كل مايخص الايقونات في ماتيريال ديزان هنا

   سيكون ملف menu.xml بهذا الشكل :

   <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="tatbigy.recyclerviewcardview.ToolBarActivity">
       <item
           android:id="@+id/action_settings"
           android:orderInCategory="100"
           android:icon="@drawable/ic_search_white_24dp"
           android:title="@string/action_settings"
           app:showAsAction="ifRoom" />
   
       <item
           android:id="@+id/action_person"
           android:orderInCategory="100"
           android:icon="@drawable/ic_person_white_24dp"
           android:title="@string/action_person"
           app:showAsAction="ifRoom" />
   
   </menu>

   عند تشغيل التطبيق سنحصل على هذه النتيجة

   

    

5. اضافة صورة داخل Toolbar.

   عند النظر الى كلاس toolbar سنجدة عبارة عن ViewGroup اي بامكاننا استخدامة كاي من ViewGroup الموجودة سابقا في اندرويد .
   سنقوم الان باضافة ImageView داخل كود Toolbar وسيكون بهذا الشكل .

   <?xml version="1.0" encoding="utf-8"?>
   <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       android:background="?colorPrimary"
       android:elevation="4dp"
       android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
   
       <ImageView
           android:layout_width="45dp"
           android:layout_height="45dp"
           android:layout_gravity="center"
           android:src="@drawable/unnamed" />
   
   
   </android.support.v7.widget.Toolbar>
   

   النتيجة عند تشغيل التطبيق :

   

   يوجد الكثير من الخصائص للـToolbar اكتشفها بنفسك وشاركنا في التعليقات