Floating Action Button – Material Design

في المقال هنتعرف على كيفية إنشاء زرار عائم أو زرار المهام الصعبة كما يطلق عليها ويستخدم في كثير من التطبيقات كتشغيل الفيديوهات – الصور – مواقع التواصل الأجتماعي لأبد من التأكيد على أن الأصدار المستخدم 5.0

وهذا المقال يقع ضمن مجموعة مقالات عن Material Design

وهناك طريقتين تسخدمان في إنشائه:-

1- طريقة عادية وهي التي سنتخدمها اليوم وتسخدم عادة إذا كنت في حاجة إلى إنشاء زرار مخصص .

2- الطريقة الثانية وهي من خلال إستخدام مكتبة معدة لذلك وهي الطريقة الأسهل .

هنتاول كيفية إنشائه وكيفية إضافة إيفنت إليه.

في البداية داخل ملف drawable هننشئ ملف circle.xml كالتالي ومن خلاله هنحدد شكل الزرار وفي حالتنا دائرة

 داخل نفس المجلد هنضع أيقونة لأستخدامها على الززار ليظهر بهذا الشكل تستطيع تغيير الأيقونة بأي واحدة أخري

3داخل مجلد layout هننشئ ملف   tool_bar.xml لعمل شريط الأدوات ويتم أستخدامه في التطبيق كله يتم إضافته إلى كل ملف layout

 داخل ملف activity_main هنضيف الكود الآتي وفيه يتم إضافة نص بسيط

بالأضافة إلى زرار وهذا الزرار يوضع عليه الدائرة التي تم إنشائه بالأضافة إلى الأيقونة

ليظهر الشكل النهائي كالتالي

bالملف الثاني الموجود بمجلد layout وهو activity_second وهو الشاشة الثانية التي تظهر بعد الضغط على الزرار وبه مجموعة من النصوص بالأضافة إلى أماكن لأضافة الأسم – العنوان – الموبيل وأخيراً زرار للحفظ

 ليظهر الشكل النهائي كالتالي

b2داخل مجلد values هيتم إنشاء ملف color.xml ويتم وضع الأولوان الأتية يمكنك تغيرها بالأولوان التي تريدها :-

 داخل ملف strings.xml هنضع المسميات الآتية :-

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

 داخل ملف الجافا MainActivity هنربط الملف بملف التصميم وربط شريط الأدوات ليظهر على شاشة التصميم وأخيراً وضع إيفنت على الزرار لينتقل إلى الأكتفتي الثانية :-

 داخل الأكتفتي الثانية SecondActivity هنضيف الكود الآتي وفيه يتم ربط الملف بملف التصميم بالأضافة إلى إظهار رسالة تم الحفظ

 ملف manifests هيظهر بالشكل التالي لأضافة الأكتفتي المختلفة وتحديد الأكتفي الرئيسية للتطبيق :-

لابد من التأكد من build.gradle

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

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

 

 

 

 

 

 

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

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather
The following two tabs change content below.

عهود على

Comments

comments

الوسوم

3 تعليقات علي “Floating Action Button – Material Design

  1. الله يعطيك ألف عافية

    مجهود متميز انه تشتغل وتشرح باللغة العربية كمان

اترك تعليقاً

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