إضافة toolbar إلى تطبيقك عوض actionbar | دورة aide

بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين.

في هذا الدرس سنتعرف على طريقة اضافة toolbar لتطبيقك عوض actionbar وما الفرق بينهما 

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

والفرق الموجود بينها أن Toolbar نتعامل معها على أساس أنها widget نتحكم بها في ملف xml حيث يمكننا التحكم في الطول والعرض وإضافة داخله أشياء وغير ذلك بينما هذه الأمور غير موجودة في actionbar

نمر الآن إلى الشرح وكيف نقوم بإضافة toolbar 

1) أول شيء نقوم بالذهاب لملف build.gradle ثم نقوم بإضافة appcompat داخل dependencies وذلك بوضع هذا السطر داخل قائمة compile

compile 'com.android.support:appcompat-v7:27.+'

 2) الخطوة الثانية أننا سنقوم بإضافة الثيم theme الخاص بالتطبيق داخل ملف styles الموجود داخل مجلد values حيث سنقوم بإضافة هذا السطر 

Theme.AppCompat.Light.NoActionBar

 ليكون بهذا الشكل

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

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

</style>

</resources>

بعد ذلك نقوم بإضافة تولبار داخل ملف xml وذلك بوضع الكود الخاص به وهو على الشكل التالي

<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">
</android.support.v7.widget.Toolbar>

لا تنسى أيضا أن تضع هذا السطر داخل layout الأول الذي استخدمته

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

يجب أن تضعه بعد هذا الكود 

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

ليكون ملف xml بهذا الشكل

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" android:fitsSystemWindows="true"
android:orientation="vertical">
<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">
</android.support.v7.widget.Toolbar>
<!-- Layout for content is here. This can be a RelativeLayout -->
</LinearLayout>