استخدم 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);
            
        }
    }

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

    device-2015-08-13-164848

  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>

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

    Screen Shot 2015-08-13 at 5.00.47 PM

     

  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>
    

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

    Screen Shot 2015-08-13 at 5.08.52 PM

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *