پیش تر در مطلب مفهوم متریال دیزاین با این سبک طراحی آشنا شدید. در این دوره قصد داریم به صورت اختصاصی به مبحث Material Design در اندروید بپردازیم.

این دوره در سطح مقدماتی می‌باشد و اگر با برنامه نویسی اندروید آشنا نیستید دوره زیر را از دست ندهید:

دوره آموزش اندروید

در قسمت اول دوره اندروید گفتیم هر ورژن اندروید به ترتیب با یک حرف انگلیسی شروع می‌شود. مثلا نسخه سوم اندروید Cupcake، و یا نسخه چهارم Donut نام دارد.

البته یک نام گذاری دیگر بر اساس API Level نیز وجود دارد که به شرح زیر است:

  • API 1: نسخه اندروید 1.0 : این نسخه اولین نسخه بود که برای اولین بار روی گوشی شرکت HTC اجرا شد. قابلیت‌های این نسخه عبارت بوده اند از:
    • برای اولین بار در این نسخه از مارکت اندروید برای نصب و بروز رسانی‌های نرم افزار استفاده شد.
    • مرورگر وب با قابلیت‌های پایه و بزرگنمایی صفحه
    • مدیریت Gmail و جستجوی اینترنتی
    • رونمایی از Google Map برای موقعیت یابی و GPS
    • دارا بودن نرم افزار YouTube برای مشاهده فیلم ها
    • و برنامه‌های کاربردی مانند مدیریت کاربران، آلارم و گالری تصاویر و فیلم ها
  • API 2: نسخه اندروید 1.1
  • API 3: نسخه اندروید 1.5 : از قابلیت‌های کلیدی این نسخه از اندروید می‌توان به موارد زیر اشاره کرد:
    • ضبط فیلم برای اولین بار و ارسال فیلم‌ها به YouTube
    • کیبورد با قابلیت حدس کلمات
    • شخصی سازی صفحه اصلی و دارا بودن انیمیشن حین جا به جایی در صفحات
  • API 4: نسخه اندروید 1.6 : قابلیت‌های این نسخه عبارتند از:
    • رابط کاربری منسجم برای تصویر برداری و گرفتن فیلم
    • امکان انتخاب کردن چند فایل برای حذف
    • پشتیبانی از VPN و صفحات با رزولوشن بالا
  • API 5: نسخه اندروید 2.0 : در این نسخه بهبود سرعت سخت افزار باعث افزایش قدرت این سیستم عامل شد. از دیگر قابلیت‌های این نسخه می‌توان به موارد زیر اشاره کرد:
    • پشتیبانی از Multi Touch و صفحات با رزولوشن بالاتر
    • پشتیبانی از مرورگرهای جدید با HTML5
    • داشتن امکان ارسال و دریافت فایل با BlueTooth
  • API 6: نسخه اندروید 2.0.1
  • API 7: نسخه اندروید 2.1
  • API 8: نسخه اندروید 2.2 : این نسخه از اندروید از نسخه‌های قبلی چهار تا پنج برابر سریع تر بود. از دیگر قابلیت‌های این نسخه می‌توان به موارد زیر اشاره کرد:
    • شماره گیری صوتی
    • امکان نصب برنامه‌ها روی حافظه جانبی
  • API 9: نسخه اندروید 2.3 : این نسخه نیز دارای بهبودهای مهمی از جمله موارد زیر بود:
    • پشتیبانی از تماس‌های VOIP
    • پشتیبانی از قابلیت NFC.
    • پشتیبانی از صفحات با رزولوشن بالاتر
  • API 10: نسخه اندروید 2.3.3
  • API 11: نسخه اندروید 3.0
  • API 12: نسخه اندروید 3.1
  • API 13: نسخه اندروید 3.2
  • API 14: نسخه اندروید 4.0 : این نسخه انقلابی قابلیت‌های بسیار بیشتری نسبت به نسخه‌های قبل اندروید داشت و بسیاری از بخش‌ها از جمله رابط کاربری در آن باز نویسی شدند. از قابلیت‌های جدید این نسخه می‌توان به موارد زیر اشاره کرد:
    • امکان استفاده از کلید‌های اصلی به صورت مجازی به جای فیزیکی، مانند کلید‌های Back و Home.
    • پشتیبانی از Widget ها
    • بهبود امکانات نرم افزار ایمیل
    • امکان گرفتن اسکرین شات از گوشی با فشردن همزمان کلیدهای پاور و صدا
    • اضافه شدن سیستم تشخیص چهره
    • پشتیبانی مرورگر داخلی از تب ها
    • مدیریت میزان مصرف دیتا
  • API 15: نسخه اندروید 4.0.3
  • API 16: نسخه اندروید 4.1 : در این نسخه رابط کاربری بهبود‌های مهمی را شاهد بود.
  • API 17: نسخه اندروید 4.2
  • API 18: نسخه اندروید 4.3
  • API 19: نسخه اندروید 4.4
  • API 20: نسخه اندروید 4.4W
  • API 21: نسخه اندروید 5.0 : کامپوننت‌های متریال دیزاین در این نسخه برای اولین بار رونمایی شدند. گوگل این نسخه از اندروید را شامل بزرگترین بروز رسانی‌ها دانست. در این نسخه از اندروید گوگل از دالویک برای سیستم عامل استفاده کرد که تغییر مهمی محسوب می‌شد. قابلیت‌های مهم این نسخه عبارتند از:
    • پشتیبانی از پردازنده‌های 64 بیتی
    • اضافه شدن حالت ذخیره انرژی
    • اضافه شدن امکان چند کاربره بودن و حالت مهمان برای استفاده از سیستم عامل.
  • API 22: نسخه اندروید 5.1
  • API 23: نسخه اندروید 6.0 : این نسخه از اندروید جهشی به سمت هوشمند سازی سیستم عامل داشته است. از قابلیت‌های این نسخه به موارد زیر اشاره می‌کنیم:
    • استفاده بهتر از Google Now
    • عمر بیشتر باطری در حالت Standby
    • بروز رسانی بهتر و موثرتر نرم افزارها
    • پیاده سازی امکان استفاده از سنسور اثر انگشت
  • API 24: نسخه اندروید 7.0 : این نسخه از اندروید نیز در راستای بهبود سیستم عامل پا به عرصه نهاد. از امکانات این نسخه به موارد زیر می‌توان اشاره کرد:
    • امکان تقسیم صفحه بین نرم افزارها
    • طراحی جدید منوی تنظیمات گوشی
    • اضافه شدن حالت شب به تم ها
    • بهینه سازی بیشتر استفاده از باطری
    • بهبود استفاده از دیتای اینترنت و کاهش مصرف آن
    • بهبود نرم افزار مدیریت فایل ها
  • API 25: نسخه اندروید 7.1 : این نسخه نیز به منظور بر طرف کردن ایرادات موجود در نسخه 7.0 اندروید و اضافه شدن قابلیت‌های جدید رو نمایی شد. از مهم ترین قابلیت‌های جدید اضافه شده به این نسخه پشتیبانی از امکانات واقعیت مجازی است. یک قابلیت مهم دیگر شناسایی میزان حافظه مصرف شده از طرف نرم افزارها می‌باشد.

همانطور که در بالا با هم دیدیم متریال دیزاین در اندروید پنج و API 21 رونمایی شد، ولی در ایجاد پروژه‌های خود نا گذیریم Minimum SDK را روی ورژنی پایین تر از اندروید 21 انتخاب کنیم، تا نرم افزار نوشته شده توسط ما روی حد اکثر دستگاه‌ها بدون مشکل اجرا شود.

بنابراین لایه نمایش برای گوشی‌های با اندروید 5 به بالا با گوشی‌های دارای اندروید با نسخه پایین تر از 5 متفاوت خواهد بود. در ادامه قصد داریم پروژه خود را برای طراحی متریال دیزاین آماده کنیم.

برای داشتن قابلیت‌های طراحی متریال باید کتابخانه‌ای با نام com.android.support:design را به لیست وابستگی‌های برنامه خود اضافه کنید.

بعد از ایجاد پروژه اندروید در محیط اندروید استودیو به بخش Gradle Scripts رفته و از آن جا build.gradle (Module: app) را باز کنید. در این فایل و در بخش dependencies می‌توانید تمام کتاب خانه‌های اضافه شده به برنامه خود را مشاهده کنید.

از منو File گزینه Project Structure را انتخاب کنید. از منو سمت چپ گزینه app را انتخاب کرده و از Dependencies روی علامت مثبت کلیک کرده و Library Dependency را انتخاب کنید.

متریال دیزاین اندروید

در باکس جستجوی این بخش عبارت com.android.support:design را وارد کرده و Enter را فشار دهید تا جستجو انجام شود. پس از جستجو در لیست کتابخانه‌ها باید این کتابخانه را انتخاب کنید. طبعا پس از عبارت com.android.support:design ورژن کتابخانه موجود در sdk شما نمایان خواهد شد.

چون در متریال دیزاین با پوسته‌ها و لایه‌های کاربری بسیار سرو کار داریم برای شروع باید استایل اصلی پروژه خود را به شکل مناسب در بیاوریم. فایل AndroidManifest.xml را باز کنید از خصوصیات تگ application خاصیتی به نام android:theme را بیابید. مقدار این خاصیت عبارت است از @style/AppTheme همانطور که در دوره اندروید گفتیم کاراکتر @ نشان دهنده مشتق شدن این مقدار از فایل styles.xml پوشه values موجود در مسیر res است. این فایل به شرح زیر است:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

بخش style با نام AppTheme را در بالا می‌بینید. مقدار parent اعلام می‌کند که والد این style یک قالب به نام Theme.AppCompat.Light.DarkActionBar است که یک قالب از قالب‌های سیستمی می‌باشد.

item‌های درون styles برای رنگ بندی اجزای صفحات مورد استفاده قرار می‌گیرند. نام این اجزا را در تصویر زیر ببینید:

طراحی متریال دیزاین اندروید

نکته: البته بخش‌های دیگری نیز هستند که در تصویر فوق نیامده اند. یکی از این بخش‌ها ACCENT نام دارد که برای تغییر رنگ برخی بخش‌ها مانند خط زیر باکس متن مورد استفاده قرار می‌گیرد.

برای تفکیک قالب‌های مخصوص برای گوشی‌های اندروید 5 به بالا و گوشی‌های با اندروید پایین تر از 5 روی پوشه res راست کلیک کرده و Show in Explorer را باز کنید. وارد پوشه res شده و در آن یک پوشه به نام values-v21 ایجاد کنید. درون این پوشه جدید فایلی با نام styles.xml ایجاد کنید.

در مسیر پروژه خود در اندروید استودیو خواهید دید که یک پوشه به نام styles.xml (2) ساخته شده است که در آن دو فایل وجود دارد که عبارتند از styles.xml و styles.xml (v21) .

آموزش طراحی متریال

از این به بعد اگر برنامه خود را در یک گوشی و یا ماشین مجازی با اندروید 5 به بالا اجرا کنید فایل styles.xml (v21) و اگر نسخه دستگاه شما پایین تر از 5 باشد فایل styles.xml استفاده خواهد شد.

سطرهای زیر را  درون فایل styles.xml (v21) قرار دهید:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">#ff00ff</item>
    </style>
</resources>

سطرهای زیر را نیز درون فایل styles.xml قرار دهید:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">#ffff00</item>
    </style>
</resources>

دو ماشین مجازی یکی با API 21 یا بالاتر و دومی کمتر از API 21 ایجاد کنید. می‌توانید ماشین مجازی خود را در محیط اندروید استودیو و یا Genymotion ایجاد کنید.

بهتر است از Genymotion استفاده کنید چون در دستگاه‌های ضعیف نیز عملکرد خوبی دارد، آموزش نصب و ایجاد ماشین مجازی Genymotion را در این مطلب ببینید.

در محیط اندروید استودیو روی کلید سبز رنگ اجرا کلیک کنید، با فشردن کلید کنترل روی دو ماشین مجازی در حال اجرا کلیک کرده و کلید OK را فشار دهید.

آموزش طراحی متریال دیزاین و اجرای برنامه در ماشین مجازی

نتیجه اجرا مانند زیر خواهد بود:

طراحی متریال و اجرای برنامه در ماشین مجازی

کد رنگ بخش colorPrimary فایل styles.xml (v21) برابر #ff00ff و فایل styles.xml برابر #ffff00 بود، به همین دلیل بخش بالای برنامه ما در هر دستگاه مجازی با ورژن بالا و پایین 5 رنگ متفاوتی خواهد داشت.

نکته: برخی بخش‌ها را در گوشی‌های قدیمی نمی‌توان ویرایش کرد، مانند تغییر رنگ بخش colorPrimaryDark.

نکته: سایت materialpalette.com برای انتخاب رنگ بندی لایه‌ها به شما کمک زیادی می‌کند. در این سایت می‌توانید دو رنگ انتخاب کنید سپس به شما رنگ بندی مناسب هر بخش پیشنهاد داده می‌شود:

طراحی متریال دیزاین و انتخاب رنگ بندی مناسب

در بالا دو رنگ PINK و DEEP ORANGE را انتخاب کردیم و هشت رنگ برای بخش‌های مختلف برنامه پیشنهاد داده شد. البته توجه داشته باشید ممکن است مایل نباشید از همه آن‌ها استفاده کنید و فقط موارد مهم را به کار ببرید.

تگ ها: android / اندرویدandroid studioGenymotionطراحی متریال