1. ভূমিকা
মেটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়নে সহায়তা করে। Google-এ প্রকৌশলী এবং UX ডিজাইনারদের একটি দল দ্বারা তৈরি, MDC কয়েক ডজন সুন্দর এবং কার্যকরী UI উপাদান বৈশিষ্ট্যযুক্ত এবং এটি Android, iOS, ওয়েব এবং Flutter.material.io/develop-এর জন্য উপলব্ধ |
ম্যাটেরিয়াল কম্পোনেন্টস ফর অ্যান্ড্রয়েড (এমডিসি অ্যান্ড্রয়েড) কোনো নতুন সিস্টেম বা ফ্রেমওয়ার্ক নয় যার জন্য আপনার অ্যাপে প্যারাডাইম শিফটের প্রয়োজন। এমডিসি অ্যান্ড্রয়েড একই ক্লাস এবং এপিআইগুলির উপর তৈরি করা হয়েছে যা আপনি ইতিমধ্যেই Android-এ জানেন, যেমন AppCompat বোতাম এবং পাঠ্য ক্ষেত্র৷ এমডিসি অ্যান্ড্রয়েড দ্বারা প্রদত্ত উপাদানগুলি প্রয়োজন অনুসারে ব্যবহার করা যেতে পারে এবং আপনার বিদ্যমান অ্যাপে অবিলম্বে ডিজাইনের উন্নতি করতে পারে।
আপনি কি নির্মাণ করবেন
এই কোডল্যাবে, আপনি কিছু বিদ্যমান উপাদানকে একটি ফর্মে 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 স্টুডিওতে স্বাগতম উইন্ডোটি দেখানো হলে, একটি বিদ্যমান অ্যান্ড্রয়েড স্টুডিও প্রকল্প খুলুন ক্লিক করুন। যে ডিরেক্টরিতে আপনি নমুনা কোড ইনস্টল করেছিলেন সেখানে নেভিগেট করুন এবং শিপিং প্রকল্প খুলতে kotlin -> শিপিং (বা শিপিংয়ের জন্য আপনার কম্পিউটারে অনুসন্ধান করুন) নির্বাচন করুন।
- অ্যান্ড্রয়েড স্টুডিওর উইন্ডোর নীচে কার্যকলাপ নির্দেশক দ্বারা দেখানো হিসাবে, প্রকল্পটি তৈরি এবং সিঙ্ক করার জন্য কিছুক্ষণ অপেক্ষা করুন৷
- এই মুহুর্তে, Android স্টুডিও কিছু বিল্ড ত্রুটি বাড়াতে পারে কারণ আপনি Android SDK বা বিল্ড টুল মিস করছেন, যেমন নীচে দেখানো একটি। এগুলি ইনস্টল/আপডেট করতে এবং আপনার প্রকল্প সিঙ্ক করতে Android স্টুডিওতে নির্দেশাবলী অনুসরণ করুন।
স্টার্টার অ্যাপটি চালান
|
|
সফলতার ! আপনি অ্যাপ এবং এর ফর্ম দেখতে হবে.
3. পাঠ্য ক্ষেত্র আপডেট করুন
প্লেইন টেক্সট ফিল্ডের তুলনায় ম্যাটেরিয়াল ডিজাইন টেক্সট ফিল্ডের একটি বড় ব্যবহারযোগ্যতা রয়েছে। একটি রূপরেখা বা ব্যাকগ্রাউন্ড ফিল সহ হিট জোন সংজ্ঞায়িত করে, ব্যবহারকারীদের আপনার ফর্মের সাথে ইন্টারঅ্যাক্ট করার বা আরও জটিল বিষয়বস্তুর মধ্যে পাঠ্য ক্ষেত্র সনাক্ত করার সম্ভাবনা বেশি।
এমডিসি-অ্যান্ড্রয়েড আমদানি করুন
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() আপডেট করুন। এটি এই মত কিছু দেখা উচিত:
ShippingInfoActivity.kt
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!
}
}
}
নির্মাণ এবং চালান. SAVE টিপুন, কিন্তু অন্তত একটি পাঠ্য ক্ষেত্র খালি রাখুন:
যে পাঠ্য ক্ষেত্রগুলি খালি রয়েছে সেগুলি লাল এবং তাদের নীচে ত্রুটি পাঠ্য রয়েছে।
4. বোতামটি আপডেট করুন
MDC এর সাথে বোতাম রয়েছে:
- কালি ঢেউ
- বৃত্তাকার কোণগুলি
- থিমিং সমর্থন
- পিক্সেল-পারফেক্ট লেআউট এবং টাইপোগ্রাফি
- AppCompatButton (স্ট্যান্ডার্ড অ্যান্ড্রয়েড বোতাম ক্লাস) এর উপর নির্মিত যাতে আপনি জানেন কিভাবে আপনার কোডে সেগুলি ব্যবহার করতে হয়।
ঐচ্ছিকভাবে বাটন বর্গ প্রতিস্থাপন
ডিফল্টরূপে মেটেরিয়াল লাইব্রেরি স্বয়ংক্রিয়ভাবে নিয়মিত বোতামগুলিকে এমডিসি বোতামগুলিতে স্ফীত করে। যাইহোক, আপনি ঐচ্ছিকভাবে ম্যাটেরিয়ালবাটনের সাথে বোতামের সমস্ত রেফারেন্স প্রতিস্থাপন করতে পারেন যাতে আপনি অতিরিক্ত পদ্ধতিগুলি অ্যাক্সেস করতে পারেন যা শুধুমাত্র একটি উপাদান বোতামে উপলব্ধ যেমন কোণার ব্যাসার্ধ পরিবর্তন করা। 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" />
নির্মাণ এবং চালান:
5. কার্ড যোগ করুন
MaterialCardView হল একটি উপাদান যা CardView এ নির্মিত:
- সঠিক উচ্চতা এবং স্টাইলিং
- স্ট্রোক প্রস্থ এবং রঙ বৈশিষ্ট্য
একটি কার্ডে সামগ্রী মোড়ানো
একটি MaterialCardView উপাদান দিয়ে shipping_info_activity.xml এ আপনার বিষয়বস্তু সম্বলিত LinearLayout নিচের মতো করে মুড়ে দিন:
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>
নির্মাণ এবং চালান. পুরো ফর্মটি একটি কার্ডে মোড়ানো উচিত:
ম্যাটেরিয়াল কার্ড ভিউ কম্পোনেন্ট হল আপনার কন্টেন্টকে সহজেই একটি কার্ডে মোড়ানোর একটি পরিচিত কিন্তু নতুন উপায়।
6. রিক্যাপ
আপনি অবিলম্বে মান দেখানোর জন্য কিছু সাধারণ উপাদান প্রতিস্থাপন করেছেন: পাঠ্য ক্ষেত্র, বোতাম, কার্ড, এবং আপনাকে আপনার অ্যাপটির সম্পূর্ণ নতুন নকশা করতে হবে না। অন্যান্য উপাদানগুলিও একটি বড় পার্থক্য করতে পারে, যেমন শীর্ষ অ্যাপ বার এবং ট্যাবলেআউট৷
পরবর্তী পদক্ষেপ
আপনি অ্যান্ড্রয়েড উইজেট ক্যাটালগে গিয়ে MDC-Android-এ আরও বেশি উপাদান অন্বেষণ করতে পারেন।