Android Material Design

موضوع جديد يخص التصميم في تطبيقات الأندرويد وخاصة في الأصدار 5

ومن خلاله تم أضافة مجموعة من العناصر الجديدة :-

Material Theme

new widgets

custom shadows

vector drawables

custom animations

في هذا المقال هنتعرف على خطوة من هذه الخطوات وهي كيفية التصميم واستخدام Navigation Drawer , RecyclerView .

لتختار تصميم والوان يمكنك الرجوع إلى الموقع التالي

أختار التصميم المناسب لك من هنا

كم أنه تم أستخدام مجموعة من الأيقونات ويمكنك الحصول علىها من هنا التي يتم حفظها بمجلد drawable

يتم أضافة الكود الآتي إلى ملف build.gradle

داخل ملف ال styles هيتم أضافة الكود التالي وهو عبارة عن تحديد التصميم والألوان الخاصة بكل جزء

داخل ملف string هنضيف الكود التالي وهو خاص بالمسميات داخل التطبيق

داخل ملف dimen هيتم إضافة الأبعاد التالية :-

إنشئ ملف color.xml داخل مجلد values

داخل الملف هنضيف الألوان المختلفة كالتالي والتي تم أستخدامها بالملف السابق

colorPrimaryDark تستخدم للون شريط الأشعارات

colorPrimary هيستخدم للون شريط الأدوات toolbar

textColorPrimary يستخدم للون الكتابة في شريط الأدوات

windowBackground لون خلفية التطبيق نفسه

إنشاء ملف toolbar.xml داخل مجلد layout  يتم إضافة الكود التالي وذلك ليظهر شريط الأدوات وهنتعرف على كيفية إضافته في الشكل النهائي للتطبيق ويمكننا أضافته إلى أكثر من Layout

إنشاء ملف _item_row .xml وذلك لتحديد مظهر كل صف ليحتوي على صورة بالأضافة إلى نص

إنشاء ملف header.xml وذلك لعرض الأسم الشخصي والأيميل وصورة

داخل ملف  activity_main.xml يتم إضافة شريط الأدوات من خلال

 وأضافة الصورة والنص من خلال

 الشكل النهائي للكود

لتحديد العناصر المختلفة التي ستظهر على شريط الأدوات يتم أضافتها بداخل ملف menu_main.xml كالتالي

 maa

كيف سيظهر الشكل العام وذلك يتم تحديده من خلال أنشاءAdapter كالتالي :-

تعريف متغيران متغير خاص item ومتغير خاص بال header

 

تعريف المتغيرات المختلفة التي سيتم أستخدامها وهي تتضمن الصور والعناصر والأسم والأيميل والصورة

أنشاء Constructor

إنشاء كلاس يتم فيها الحصول على ال id الخاص بكل من العناصر والصور

لربط item , header بصفحات التصميم الخاصة بيهم

الشكل النهائي للكود

بداخل ملف الجافا هيتم عمل أوبجت من كل العناصر وإدارج العناصر  والصور بداخل array وربط الملف بملف التصميم ووضع شريط الأدوات ووالربط ب adapter والكود النهائي كالتالي

 ليكون الشكل النهائي كالتالي

maamaلتحميل المشروع جروب عرب أندرويد

 

 

 

 

 

 

 

 

 

 

 

 

 

 

يرجي تقييم الموضوع

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather
The following two tabs change content below.

عهود على

Comments

comments

الوسوم

اترك تعليقاً

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