آموزش متریال دیزاین در اندروید – نحوه استفاده از متریال دیزاین در اندروید استادیو همراه با مثال

در این پست از مجموعه آموزش های پی استور، به آموزش متریال دیزاین در اندروید خواهیم پرداخت. در این آموزش پس از توضیحات مختصری در رابطه با متریال دیزاین Material Design نحوه استفاده از متریال دیزاین در اندروید استادیو Android Studio را همراه با یک مثال توضیح خواهیم داد. لازمه استفاده از این آموزش این است که اصول اولیه برنامه نویسی در اندروید استادیو را برای اپلیکشن نویسی بلد باشید در صورتی که اطلاعات کمی در مورد برنامه نویسی اندروید دارید؛ باز جای نگرانی نیست. در خلال آموزش بهترین منابع آموزشی را برای مطالعه شما عزیزان معرفی خواهیم کرد.

متریال دیزاین چیست؟

قبل از اینکه به آموزش متریال دیزاین در اندروید بپردازیم بهتر است بدانیم متریال دیزاین چیست؟ متریال دیزاین Material Design یک زبان طراحی مبتنی بر اندروید Android است که توسط شرکت گوگل Google ایجاد شده است که از اشیاء واقعی که در دنیای واقعی ما وجود دارد؛ برای طراحی استفاده می کند. در متریال دیزاین از ویژگی‌های مهم در طراحی از جمله نور پردازی، جلوه های سه بعدی، جلوه های انیمیشنی و حرکات طبیعی اشیاء که در دنیای واقعی دارند؛ استفاده می شود.

متریال دیزاین زاییده تفکر گوگل در طراحی مدرن است که در اواسط سال 2014 با اسم رمز “کاغذ کوانتومی” و با نام طراحی به سبک “جوهر و قلم” ظاهر شد. در متریال دیزاین، هدف ارائه خروجی با کیفیت بالا به طور مداوم در همه پلتفرم‌ها است که به کاربران اجازه می‌دهد تا بر روی اجزا با ظاهر دلپذیر که به وضوح نشان داده شده‌اند و مانند اشیاء دنیای واقعی رفتار می‌کنند، کنترل داشته باشند. درست است که در ابتدا این نوع طراحی برای اندروید ساخته شده بود ولی اکثر پلتفرم ها از این نوع طراحی استفاده می کنند.

هدف مهم گوگل از ارائه سبک متریال دیزاین ایجاد تجربه کاربری همسان و منسجم در اپلیکشن های مختلف اندرویدی است. در واقع رویکرد اساسی در این نوع طراحی از ریسپانسیو بودن طراحی در انیمیشن های، لی‌اوت‌ها، Shadowها و غیره در کنار هم استفاده می شود تا یک طراحی استاندارد آماده شود و در برنامه های مختلف از آن استفاده شود.

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

در متریال دیزاین بیشترین توجه به سیستم Grid و Animation‌ها و عمق و سایه‌ها برای اشیا و المان ها است. ادعای گوگل در طراحی این سبک الهام از مرکب و کاغذ است به نوعی که گفته می شود همانطور که اشیا و اجسام در دنیای واقعی دارای حس هستند (طول و عرض و ارتفاع دارند) در این سبک طراحی نیز باید این حس ها به کاربر منتقل شوند. به طور کلی می توان گفت متریال دیزاین بر 5 اصل زیر استوار است.

• Graphic: گرافیک زیبا و استفاده از تصاویر خاص برای ایجاد یک احساس خوب برای کاربران و بازدیدکنندگان
• Metaphor: تعریف ارتباط بین فاصله‌ها و انیمیشن ها با تعیین سطح و لبه و انقلال یک حس فیزکی قابل لمس به کاربر
• Bold: دیده شدن تایپوگرافی برای انتقال مفاهیم و ارتباط بین قسمت های بصری
• Motion: افزایش UI برای بالا بردن حس جذابیت با ایجاد جلوه های بصبری مبتنی بر انیمیشن
• Intentional: یکسان سازی تجربه کاربری سراسری برای همه پلتفرم ها در دیوایس های مختلف

برای درک کامل متریال دیزاین پیام های بازرگانی دهه 70 تلویزیون را با الان در نظر بگیرید و تفاوت نوع طراحی در تبلیغات تلویزیونی را متوجه شوید. گوگل این اصول را برای طراحی اندروید به عنوان یک سبک و استاندارد طراحی مطرح کرده تا کاربران لذت استفاده از اپلیکشن های اندرویدی را همیشه بیاد داشته باشند. برای آشنایی بیشتر درباره ناگفته‌های متریال دیزاین و توضیحات تکمیلی درباره آن، می توانید از طریق این لینک (+) مقاله کامل متریال دیزاین را از سایت فرادرس مطالعه کنید.

پس از توضیحات مختصری در مورد متریال دیزاین بهتر است وارد آموزش متریال دیزاین در اندروید استادیو شویم پس با ادامه آموزش با ما همراه شوید تا نحوه استفاده از متریال دیزاین در اندروید استادیو را توضیح دهیم.

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

خوب در این بخش از آموزش متریال دیزاین در اندروید اصول لازم برای استفاده از متریال دیزاین در اندروید استادیو را شرح خواهیم داد و نحوه جاگذاری کدها و تنظیمات لازم برای بهره مندی از توابع کتابخانه ای Material و استفاده آن ها در پروژه را آموزش خواهیم داد. پس ابتدا با جایگذاری وابستگی ها شروع می کنیم.

افزودن کامپوننت‌ها و وابستگی های لازم برای استفاده از متریال دیزاین

برای اینکه بتوانیم از دستورالعمل های متریال دیزاین در پروژه های خود استفاده کنیم راه ساه ای وجود دارد. کامپوننت های متریال Material Components برای اندروید از طریق مخزن Maven Google در دسترس است برای استفاده از این مخزن لازم است فایل build.gradle پروژه اندروید استادیو را برای برنامه خود باز کنید و اطمینان حاصل کنید که بخش مخازن شامل Maven Repository Google باشد. مثلا:

allprojects {
  repositories {
    google()
    jcenter()
  }
}

همچنین در بخش dependencies یا وابستگی ها، کتابخانه material را بایستی به بخش وابستگی ها اضافه کنید. البته ممکن است بسته به پروژه شما ورژن متریال متفاوت باشد به همین دلیل در کد پایین قسمت ورژن را قرار ندادیم.

dependencies {
  // ...
  implementation 'com.google.android.material:material:<version>'
  // ...
}

اگر برنامه شما در حال حاضر به کتابخانه اصلی پشتیبانی طراحی وابسته است، می توانید از گزینه Refactor to AndroidX… ارائه شده توسط Android Studio استفاده کنید. با انجام این کار، وابستگی‌ها و کدهای برنامه شما برای استفاده از کتابخانه‌های جدید بسته‌بندی‌شده androidx و com.google.android.material به‌روزرسانی می‌شوند.

اگر هنوز نمی‌خواهید به بسته‌های جدید androidx و com.google.android.material تغییر دهید، می‌توانید از Material Components از طریق وابستگی com.android.support:design:28.0.0 استفاده کنید.

توجه: نباید از وابستگی های com.android.support و com.google.android.material به طور همزمان در برنامه خود استفاده کنید.

• مجموعه آموزش برنامه نویسی اندروید __ کلیک کنید

کامپایل برنامه در اندروید استادیو

حتماً برنامه خود را با اندروید 10 کامپایل کنید. برای استفاده از Material Components برای اندروید و آخرین نسخه‌های پشتیبانی کتابخانه‌ها، باید Android Studio 3.5 یا بالاتر را برای ساخت با Android 10 نصب کنید و کامپایل SdkVersion برنامه خود را به 29 به‌روزرسانی کنید. موراد اشاره شده برای کامپایل و در نهایت اجرای برنامه در اندروید استادیو لازم و ضروری می باشد.

استفاده از از AppCompatActivity

مطمئن شوید که از AppCompatActivity استفاده می کنید استفاده از AppCompatActivity اطمینان حاصل می کند که همه اجزا به درستی کار می کنند. اگر نمی توانید از AppCompatActivity گسترش یا Extend داشته باشید، Activityهای خود را برای استفاده از AppCompatDelegate به روز کنید. این باعث می‌شود که نسخه‌های AppCompat اجزاء در میان سایر موارد مهم باد شوند.

ارث بری برنامه از طرح های زمینه Material Components

طرح زمینه برنامه خود را تغییر دهید تا از یک طرح زمینه Material Components را به ارث ببرد. انجام یک انتقال در سراسر برنامه با تغییر طرح زمینه برنامه به ارث بردن از طرح زمینه Material Components، یک رویکرد توصیه شده از طرف گوگل است. با این حال، مطمئن شوید که پس از این ارث بری هیچ خطایی برای اجرای برنامه وجود نداشته باشد، زیرا اجزای موجود در طرح‌بندی‌های موجود ممکن است ظاهر و طرح بندی را تغییر دهد. اگر نمی توانید theme خود را تغییر دهید، می توانید یکی از موارد زیر را انجام دهید:

• از یکی از تم های Material Components Bridge ارث بری انجام دهید.
• به ارث بردن از یک تم AppCompat ادامه دهید و برخی از ویژگی های تم جدید را به طرح زمینه خود اضافه کنید.

تم های متریال کامپوننت Material Components

در زیر لیستی از تم های Material Components آمده است که می توانید از آنها برای دریافت جدیدترین سبک های مؤلفه و ویژگی های تم استفاده کنید.

Theme.MaterialComponents
Theme.MaterialComponents.NoActionBar
Theme.MaterialComponents.Light
Theme.MaterialComponents.Light.NoActionBar
Theme.MaterialComponents.Light.DarkActionBar
Theme.MaterialComponents.DayNight
Theme.MaterialComponents.DayNight.NoActionBar
Theme.MaterialComponents.DayNight.DarkActionBar

theme برنامه خود را به‌روزرسانی کنید تا از یکی از این طرح‌ها را به ارث ببرد، به عنوان مثال:

<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight">
    <!-- ... -->
</style>

تم های Bridge

اگر نمی توانید طرح زمینه خود را به ارث بردن از یک طرح زمینه Material Components تغییر دهید، می توانید از یک طرح زمینه Material Components Bridge ارث بری کنید.

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light.Bridge">
    <!-- ... -->
</style>

هر دو Theme.MaterialComponents و Theme.MaterialComponents.Light دارای تم های Bridge هستند:

Theme.MaterialComponents.Bridge
Theme.MaterialComponents.Light.Bridge
Theme.MaterialComponents.NoActionBar.Bridge
Theme.MaterialComponents.Light.NoActionBar.Bridge
Theme.MaterialComponents.Light.DarkActionBar.Bridge

تم‌های Bridge از تم‌های AppCompat ارث بری می کنند، اما ویژگی‌های تم جدید Material Components را نیز برای شما تعریف می‌کنند. اگر از یک تم Bridge استفاده می‌کنید، می‌توانید بدون تغییر تم برنامه، از اجزای طراحی متریال استفاده کنید.

• آموزش برنامه نویسی جاوا (Java) __ کلیک کنید

تم های AppCompat

همچنین می‌توانید بدون تغییر تم برنامه، مؤلفه‌های جدید Material را به‌صورت تدریجی آزمایش کنید. این کار به شما این امکان را می‌دهد که طرح‌بندی‌های موجود خود را یکسان نگه دارید و در عین حال اجزای جدیدی را یکی یکی به طرح‌بندی خود وارد کنید. با این حال، باید ویژگی های تم جدید زیر را به طرح زمینه برنامه فعلی خود اضافه کنید، در غیر این صورت با خطاهای ThemeEnforcement مواجه خواهید شد:

<style name="Theme.MyApp" parent="Theme.AppCompat">

  <!-- Original AppCompat attributes. -->
  <item name="colorPrimary">@color/my_app_primary_color</item>
  <item name="colorSecondary">@color/my_app_secondary_color</item>
  <item name="android:colorBackground">@color/my_app_background_color</item>
  <item name="colorError">@color/my_app_error_color</item>

  <!-- New MaterialComponents attributes. -->
  <item name="colorPrimaryVariant">@color/my_app_primary_variant_color</item>
  <item name="colorSecondaryVariant">@color/my_app_secondary_variant_color</item>
  <item name="colorSurface">@color/my_app_surface_color</item>
  <item name="colorOnPrimary">@color/my_app_color_on_primary</item>
  <item name="colorOnSecondary">@color/my_app_color_on_secondary</item>
  <item name="colorOnBackground">@color/my_app_color_on_background</item>
  <item name="colorOnError">@color/my_app_color_on_error</item>
  <item name="colorOnSurface">@color/my_app_color_on_surface</item>
  <item name="scrimBackground">@color/mtrl_scrim_color</item>
  <item name="textAppearanceHeadline1">@style/TextAppearance.MaterialComponents.Headline1</item>
  <item name="textAppearanceHeadline2">@style/TextAppearance.MaterialComponents.Headline2</item>
  <item name="textAppearanceHeadline3">@style/TextAppearance.MaterialComponents.Headline3</item>
  <item name="textAppearanceHeadline4">@style/TextAppearance.MaterialComponents.Headline4</item>
  <item name="textAppearanceHeadline5">@style/TextAppearance.MaterialComponents.Headline5</item>
  <item name="textAppearanceHeadline6">@style/TextAppearance.MaterialComponents.Headline6</item>
  <item name="textAppearanceSubtitle1">@style/TextAppearance.MaterialComponents.Subtitle1</item>
  <item name="textAppearanceSubtitle2">@style/TextAppearance.MaterialComponents.Subtitle2</item>
  <item name="textAppearanceBody1">@style/TextAppearance.MaterialComponents.Body1</item>
  <item name="textAppearanceBody2">@style/TextAppearance.MaterialComponents.Body2</item>
  <item name="textAppearanceCaption">@style/TextAppearance.MaterialComponents.Caption</item>
  <item name="textAppearanceButton">@style/TextAppearance.MaterialComponents.Button</item>
  <item name="textAppearanceOverline">@style/TextAppearance.MaterialComponents.Overline</item>

</style>

اضافه کردن Material Component به برنامه

برای اضافه کردن Material Component به برنامه از فیلدهای متنی استفاده می کنیم به عنوان مثال برای پیاده سازی یک فیلد متنی از طریق XML به صورت زیر تعریف استفاده می شود:

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/textfield_label">

  <com.google.android.material.textfield.TextInputEditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>

توجه: اگر از theme استفاده نمی‌کنید که از یک Material Components ارث بری نمی کند، باید سبک فیلد متن را نیز از طریق style=”@style/Widget.MaterialComponents.TextInputLayout.FilledBox” مشخص کنید. برای مثال، اگر می‌خواهید یک فیلد متنی مشخص در طرح‌بندی خود داشته باشید، می‌توانید سبک مشخص شده Material Components را در قسمت متن در XML اعمال کنید:

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/textfield_label">

  <com.google.android.material.textfield.TextInputEditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>

مثال نحوه استفاده از متریال دیزاین در اندروید استادیو

در این بخش از آموزش متریال دیزاین در اندروید یک مثال کامل از نحوه استفاده متریال دیزاین در اندروید استادیو را ارائه می دهیم. مراحل گفته شده را می توانید مرحله به مرحله در اندروید استادیو انجام دهید تا نحوه استفاده از مولفه‌های طراحی متریال را در برنامه اندروید مشاهده کنید.

مرحله 1 – یک پروژه جدید در Android Studio ایجاد کنید، به File ⇒ New Project بروید و تمام جزئیات مورد نیاز را برای ایجاد یک پروژه جدید کامل کنید.

مرحله 2 – کد زیر را در پروژه خود به res/layout/activity_main.xml اضافه کنید.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="#F95E5E"
   android:orientation="vertical"
   android:paddingTop="80dp"
   tools:context=".LoginActivity">
   <ImageView
      android:id="@+id/loginLogo"
      android:layout_width="240dp"
      android:layout_height="222dp"
      android:layout_gravity="center"
      android:contentDescription="@string/login_logo"
      android:paddingStart="8dp"
      android:paddingLeft="250dp"
      android:paddingTop="50dp"
      android:paddingEnd="8dp"
      android:src="@drawable/read_my_blog" />
   <EditText
      android:id="@+id/emailText"
      android:layout_width="350dp"
      android:layout_height="60dp"
      android:ems="10"
      android:autofillHints="@string/email_hint"
      android:hint="@string/email_hint"
      android:textColor="#FFFF"
      android:layout_gravity="center"
      android:layout_marginTop="20dp"
      android:layout_marginBottom="10dp"/>
   <EditText
      android:id="@+id/pwdText"
      android:layout_width="350dp"
      android:layout_height="60dp"
      android:layout_gravity="center"
      android:textColor="#FFFF"
      android:layout_marginBottom="25dp"
      android:ems="10"
      android:hint="@string/pass_hint"
      android:inputType="textPassword"/>
   <Button
      android:id="@+id/buttonLogin"
      android:layout_width="260dp"
      android:layout_height="60dp"
      android:layout_gravity="center"
      android:backgroundTint="@color/colorPrimary"
      android:text="@string/login_btn_txt"
      android:textColor="@android:color/white"
      android:layout_marginBottom="20dp"/>
   <ProgressBar
      android:id="@+id/loginProgress"
      style="?android:attr/progressBarStyleHorizontal"
      android:layout_width="400dp"
      android:layout_height="20dp"
      android:layout_gravity="center"
      android:visibility="invisible"
      android:indeterminate="true"
      android:layout_marginBottom="30dp" />
   <Button
      android:id="@+id/buttonRegister"
      android:layout_width="260dp"
      android:layout_height="60dp"
      android:layout_gravity="center"
      android:backgroundTint="@android:color/white"
      android:text="@string/login_reg_btn_txt"
      android:textColor="@color/colorPrimary" />
</LinearLayout>

مرحله 3 – در ادامه آموزش متریال دیزاین در اندروید کد زیر را به src/MainActivity.java اضافه کنید:

package com.app.sample;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
   }
}

مرحله 4 – کد زیر را به Module dependencies در قسمت gradle برنامه خود اضافه کنید:

apply plugin: 'com.android.application'
android {
   compileSdkVersion 29
   defaultConfig {
      applicationId "com.app.sample"
      minSdkVersion 21
      targetSdkVersion 29
      versionCode 1
      versionName "1.0"
      testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
   }
   buildTypes {
      release {
         minifyEnabled false
         proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
      }
   }
}
dependencies {
   ///
   implementation "com.google.android.material:material:1.1.0-alpha02"
}

مرحله 5 – در قسمت Manifest نیز کد زیر را به Manifests/AndroidManifest.xml اضافه کنید:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.app.sample">
   <application
      android:allowBackup="true"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:supportsRtl="true"
      android:theme="@style/AppTheme">
      <activity android:name=".MainActivity">
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      </activity>
   </application>
</manifest>

خوب حالا وقت آن رسیده که برنامه خودتان را اجرا کنید. فرض می کنیم که شما دستگاه موبایل Android واقعی خود را به کامپیوتر خود متصل کرده اید. برای اجرای برنامه از استودیو اندروید، یکی از فایل های activity پروژه خود را باز کنید و روی نماد Run از نوار ابزار کلیک کنید. دستگاه موبایل خود را به عنوان یک گزینه برای شبیه سازی انتخاب کنید و سپس دستگاه موبایل خود را بررسی کنید تا صفحه پیش فرض شما نمایش داده شود:

برای استفاده از آموزش کاملاً کاربردی در زمینه استفاده از متریال دیزاین در اندروید استادیو می توانید فیلم آموزش Material Design را از طریق این لینک (+) از سایت فرادرس تهیه کرده و مطلاعه کنید.

سخن پایانی در مورد آموزش متریال دیزاین در اندروید

در این پست به آموزش متریال دیزاین در اندروید پرداخته شد. اگر علاقه مند به برنامه نویسی اندروید هستید و دوست دارید اپلیکشن های جذاب و بروز ایجاد کنید، لازم است در پروژه های خودتان از قابلیت های متریال دیزاین استفاده کنید تا برنامه های کاربرپسند و خوش فرمی را ارائه کنید. متریال دیزاین به شما این امکان را می دهد که پروژه های شما هم از لحاظ ساختاری و هم از لحاظ ظاهری، استانداردهای رایج یک اپلیکشن به‌روز را داشته باشد. با امکاناتی که در اندروید استادیو برای استفاده از متریال دیزاین گذاشته شده براحتی می توانید به با آن کار کنید. اگر تمایل داشتید از آخرین مقالات و آموزش های برنامه نویسی ما را مطالعه کنید و نظرات و پیشنهادات خود را با ما در میان بگذارید. موفق و پیروز باشید.