1. ভূমিকা
ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়নে সাহায্য করে। গুগলের ইঞ্জিনিয়ার এবং UX ডিজাইনারদের একটি দল দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI উপাদান রয়েছে এবং এটি অ্যান্ড্রয়েড, iOS, ওয়েব এবং Flutter.material.io/develop-এর জন্য উপলব্ধ। |
ম্যাটেরিয়াল কম্পোনেন্টস ফর অ্যান্ড্রয়েড (MDC Android) কোনও নতুন সিস্টেম বা ফ্রেমওয়ার্ক নয় যার জন্য আপনার অ্যাপে একটি নতুন পরিবর্তনের প্রয়োজন হবে। MDC Android আপনার অ্যান্ড্রয়েডে ইতিমধ্যেই পরিচিত একই ক্লাস এবং API-এর উপর তৈরি, যেমন AppCompat বোতাম এবং টেক্সট ফিল্ড। MDC Android দ্বারা প্রদত্ত কম্পোনেন্টগুলি প্রয়োজন অনুসারে ব্যবহার করা যেতে পারে এবং আপনার বিদ্যমান অ্যাপের নকশায় তাৎক্ষণিক উন্নতি করতে পারে।
তুমি কী তৈরি করবে
এই কোডল্যাবে, আপনি MDC দ্বারা কিছু বিদ্যমান উপাদানকে একটি ফর্মে নতুন উপাদান দিয়ে প্রতিস্থাপন করবেন।
এই কোডল্যাবে MDC-Android উপাদানগুলি
- টেক্সট ফিল্ড
- বোতাম
- মেনু
তোমার যা লাগবে
- অ্যান্ড্রয়েড ডেভেলপমেন্টের প্রাথমিক জ্ঞান
- অ্যান্ড্রয়েড স্টুডিও (যদি আপনার কাছে ইতিমধ্যে না থাকে তবে এখান থেকে ডাউনলোড করুন)
- একটি অ্যান্ড্রয়েড এমুলেটর বা ডিভাইস (অ্যান্ড্রয়েড স্টুডিওর মাধ্যমে উপলব্ধ)
- নমুনা কোড (পরবর্তী ধাপ দেখুন)
অ্যান্ড্রয়েড অ্যাপ তৈরিতে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
2. আপনার উন্নয়ন পরিবেশ সেট আপ করুন
স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন
স্টার্টার অ্যাপটি material-components-android-codelabs-111-starter/kotlin ডিরেক্টরিতে অবস্থিত। শুরু করার আগে সেই ডিরেক্টরিতে cd করতে ভুলবেন না।
...অথবা GitHub থেকে ক্লোন করুন
GitHub থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলি চালান:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 111-starter
অ্যান্ড্রয়েড স্টুডিওতে স্টার্টার কোড লোড করুন
- সেটআপ উইজার্ডটি শেষ হয়ে গেলে এবং "ওয়েলকাম টু অ্যান্ড্রয়েড স্টুডিও" উইন্ডোটি প্রদর্শিত হলে, "একটি বিদ্যমান অ্যান্ড্রয়েড স্টুডিও প্রকল্প খুলুন" এ ক্লিক করুন। আপনি যেখানে নমুনা কোডটি ইনস্টল করেছিলেন সেই ডিরেক্টরিতে নেভিগেট করুন এবং "কোটলিন -> শিপিং " নির্বাচন করুন (অথবা শিপিংয়ের জন্য আপনার কম্পিউটার অনুসন্ধান করুন)।
- অ্যান্ড্রয়েড স্টুডিও উইন্ডোর নীচের দিকে কার্যকলাপ নির্দেশকগুলি যেমনটি দেখায়, অ্যান্ড্রয়েড স্টুডিওটি প্রকল্পটি তৈরি এবং সিঙ্ক করার জন্য কিছুক্ষণ অপেক্ষা করুন।
- এই মুহুর্তে, Android Studio-তে কিছু বিল্ড ত্রুটি দেখা দিতে পারে কারণ আপনার Android SDK বা বিল্ড টুলগুলি, যেমন নীচে দেখানো হয়েছে, অনুপস্থিত। এগুলি ইনস্টল/আপডেট করতে এবং আপনার প্রকল্প সিঙ্ক করতে Android Studio-তে নির্দেশাবলী অনুসরণ করুন।
স্টার্টার অ্যাপটি চালান
|
|
সফল! তুমি অ্যাপটি এবং এর ফর্মটি দেখতে পাবে।
৩. টেক্সট ফিল্ড আপডেট করুন
প্লেইন টেক্সট ফিল্ডের তুলনায় মেটেরিয়াল ডিজাইন টেক্সট ফিল্ডের ব্যবহারযোগ্যতা অনেক বেশি। হিট জোনকে আউটলাইন বা ব্যাকগ্রাউন্ড ফিল দিয়ে সংজ্ঞায়িত করার মাধ্যমে, ব্যবহারকারীরা আপনার ফর্মের সাথে ইন্টারঅ্যাক্ট করার বা জটিল কন্টেন্টের মধ্যে টেক্সট ফিল্ড সনাক্ত করার সম্ভাবনা বেশি থাকে।
MDC-Android আমদানি করুন
app মডিউলের build.gradle ফাইলে যান এবং নিশ্চিত করুন যে dependencies ব্লকে MDC Android এর উপর নির্ভরতা রয়েছে:
api 'com.google.android.material:material:1.1.0-alpha05'
টেক্সট ফিল্ড স্টাইল প্রতিস্থাপন করুন
shipping_info_activity.xml তে, সকল TextInputLayout XML উপাদানগুলিতে নিম্নলিখিত স্টাইলটি যোগ করুন:
shipping_info_activity.xml সম্পর্কে
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
প্রতিটি TextInputLayout দেখতে এইরকম হওয়া উচিত:
shipping_info_activity.xml সম্পর্কে
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_text_input"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_name" />
</com.google.android.material.textfield.TextInputLayout>
তৈরি করুন এবং চালান:
MDC-তে নতুন ডিজাইন ব্যবহার করার জন্য টেক্সট ফিল্ডগুলি আপডেট করা হয়েছে।
একটি ত্রুটি যোগ করুন
MDC টেক্সট ফিল্ডে বিল্ট-ইন এরর প্রেজেন্টেশন থাকে। MDC আপনার টেক্সট ফিল্ডের নিচে লাল টেক্সট যোগ করে এবং ডেকোরেশনও লাল করে।
ShippingInfoActivity.kt তে, onCreate() আপডেট করে টেক্সট ইনপুট পরীক্ষা করুন এবং যথাযথভাবে ত্রুটি সেট করুন। এটি দেখতে এরকম কিছু হওয়া উচিত:
শিপিংইনফোঅ্যাক্টিভিটি.কেটি
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.shipping_info_activity)
val rootView = findViewById<View>(android.R.id.content)
val textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout::class.java)
save_button.setOnClickListener {
var noErrors = true
for (textInputLayout in textInputLayouts) {
val editTextString = textInputLayout.editText!!.text.toString()
if (editTextString.isEmpty()) {
textInputLayout.error = resources.getString(R.string.error_string)
noErrors = false
} else {
textInputLayout.error = null
}
}
if (noErrors) {
// All fields are valid!
}
}
}
তৈরি করুন এবং চালান। সংরক্ষণ করুন টিপুন, তবে কমপক্ষে একটি পাঠ্য ক্ষেত্র খালি রাখুন:
খালি থাকা টেক্সট ফিল্ডগুলি লাল রঙের এবং তাদের নীচে ত্রুটির টেক্সট রয়েছে।
৪. বোতামটি আপডেট করুন
MDC-তে বোতাম আছে যার মধ্যে রয়েছে:
- কালির ঢেউ
- গোলাকার কোণ
- থিমিং সাপোর্ট
- পিক্সেল-নিখুঁত লেআউট এবং টাইপোগ্রাফি
- AppCompatButton (স্ট্যান্ডার্ড অ্যান্ড্রয়েড বোতাম ক্লাস) এর উপর তৈরি যাতে আপনি আপনার কোডে এগুলি কীভাবে ব্যবহার করবেন তা জানতে পারেন।
ঐচ্ছিকভাবে বোতাম ক্লাস প্রতিস্থাপন করুন
ডিফল্টরূপে, ম্যাটেরিয়াল লাইব্রেরি স্বয়ংক্রিয়ভাবে নিয়মিত বোতামগুলিকে MDC বোতামগুলিতে স্ফীত করে। তবে, আপনি ঐচ্ছিকভাবে বোতামের সমস্ত রেফারেন্সকে MaterialButton দিয়ে প্রতিস্থাপন করতে পারেন যাতে আপনি কেবলমাত্র MaterialButton-এ উপলব্ধ অতিরিক্ত পদ্ধতিগুলি অ্যাক্সেস করতে পারেন যেমন কোণার ব্যাসার্ধ পরিবর্তন করা। MDC বোতামগুলি একটি সহজ প্লাগ-এন্ড-প্লে উপাদান। আপনি কেবল XML উপাদান নাম Button MaterialButton দিয়ে প্রতিস্থাপন করুন এবং MaterialButton এ ডিফল্ট MaterialButton শৈলী প্রয়োগ করুন।
shipping_info_activity.xml তে, আপনার বোতামটি এই থেকে পরিবর্তন করুন:
shipping_info_activity.xml সম্পর্কে
<Button
android:id="@+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
প্রতি:
shipping_info_activity.xml সম্পর্কে
<com.google.android.material.button.MaterialButton
android:id="@+id/save_button"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
তৈরি করুন এবং চালান:
৫. কার্ড যোগ করুন
MaterialCardView হল CardView তৈরি একটি উপাদান যার সাহায্যে:
- সঠিক উচ্চতা এবং স্টাইলিং
- স্ট্রোকের প্রস্থ এবং রঙের বৈশিষ্ট্য
কার্ডে কন্টেন্ট মোড়ানো
shipping_info_activity.xml এ আপনার কন্টেন্ট ধারণকারী LinearLayout একটি MaterialCardView কম্পোনেন্ট দিয়ে মুড়ে নিন, নিম্নরূপ:
shipping_info_activity.xml সম্পর্কে
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:contentPadding="16dp">
<!-- LinearLayout goes here -->
</com.google.android.material.card.MaterialCardView>
তৈরি করুন এবং চালান। সম্পূর্ণ ফর্মটি একটি কার্ডে মুড়িয়ে রাখা উচিত:
ম্যাটেরিয়াল কার্ড ভিউ কম্পোনেন্টটি আপনার কন্টেন্টকে সহজেই একটি কার্ডে মোড়ানোর একটি পরিচিত কিন্তু নতুন উপায়।
৬. সংক্ষিপ্তসার
আপনি কিছু সাধারণ উপাদান প্রতিস্থাপন করেছেন যাতে তাৎক্ষণিক মান দেখা যায়: টেক্সট ফিল্ড, বোতাম, কার্ড, এবং আপনাকে আপনার অ্যাপের সম্পূর্ণ নতুন নকশা করতে হয়নি। অন্যান্য উপাদানগুলিও একটি বড় পার্থক্য আনতে পারে, যেমন টপ অ্যাপ বার এবং ট্যাবলেইট।
পরবর্তী পদক্ষেপ
আপনি অ্যান্ড্রয়েড উইজেটস ক্যাটালগ পরিদর্শন করে MDC-Android-এর আরও উপাদান অন্বেষণ করতে পারেন।