১. ভূমিকা
ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়ন করতে সাহায্য করে। গুগলের একদল ইঞ্জিনিয়ার এবং ইউএক্স ডিজাইনার দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI কম্পোনেন্ট রয়েছে এবং এটি অ্যান্ড্রয়েড, আইওএস, ওয়েব এবং ফ্লাটারের জন্য উপলব্ধ। material.io/develop |
ম্যাটেরিয়াল কম্পোনেন্টস ফর অ্যান্ড্রয়েড (MDC Android) কোনো নতুন সিস্টেম বা ফ্রেমওয়ার্ক নয়, যার জন্য আপনার অ্যাপে আমূল পরিবর্তনের প্রয়োজন হবে। MDC Android অ্যান্ড্রয়েডের সেইসব ক্লাস এবং এপিআই-এর উপর ভিত্তি করে তৈরি, যা আপনি ইতিমধ্যেই জানেন, যেমন AppCompat বাটন এবং টেক্সট ফিল্ড। MDC Android দ্বারা প্রদত্ত কম্পোনেন্টগুলো প্রয়োজন অনুযায়ী ব্যবহার করা যেতে পারে এবং তা আপনার বিদ্যমান অ্যাপের ডিজাইনে তাৎক্ষণিক উন্নতি আনতে পারে।
আপনি যা তৈরি করবেন
এই কোডল্যাবে, আপনি MDC ব্যবহার করে একটি ফর্মের কিছু বিদ্যমান কম্পোনেন্টকে নতুন কম্পোনেন্ট দিয়ে প্রতিস্থাপন করবেন।
এই কোডল্যাবে MDC-অ্যান্ড্রয়েড উপাদানসমূহ
- টেক্সট ফিল্ড
- বোতাম
- মেনু
আপনার যা যা লাগবে
- অ্যান্ড্রয়েড ডেভেলপমেন্টের প্রাথমিক জ্ঞান
- অ্যান্ড্রয়েড স্টুডিও (আপনার কাছে না থাকলে এখান থেকে ডাউনলোড করুন)
- একটি অ্যান্ড্রয়েড এমুলেটর বা ডিভাইস (অ্যান্ড্রয়েড স্টুডিওর মাধ্যমে উপলব্ধ)
- নমুনা কোড (পরবর্তী ধাপ দেখুন)
অ্যান্ড্রয়েড অ্যাপ তৈরিতে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
২. আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করুন।
স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন
স্টার্টার অ্যাপটি material-components-android-codelabs-111-starter/java ডিরেক্টরিতে অবস্থিত। শুরু করার আগে অবশ্যই ওই ডিরেক্টরিতে cd ।
...অথবা গিটহাব থেকে এটি ক্লোন করুন
গিটহাব থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলো চালান:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 111-starter
অ্যান্ড্রয়েড স্টুডিওতে স্টার্টার কোড লোড করুন।
- সেটআপ উইজার্ড শেষ হয়ে গেলে এবং ' Welcome to Android Studio' উইন্ডোটি দেখা গেলে, 'Open an existing Android Studio project'-এ ক্লিক করুন। যে ডিরেক্টরিতে আপনি স্যাম্পল কোডটি ইনস্টল করেছিলেন সেখানে যান এবং শিপিং প্রজেক্টটি খোলার জন্য 'java -> shipping' নির্বাচন করুন (অথবা আপনার কম্পিউটারে 'shipping' লিখে সার্চ করুন)।
- অ্যান্ড্রয়েড স্টুডিও উইন্ডোর নিচের দিকে অ্যাক্টিভিটি ইন্ডিকেটরগুলোতে যেমনটা দেখানো হচ্ছে, প্রজেক্টটি বিল্ড ও সিঙ্ক হওয়ার জন্য কিছুক্ষণ অপেক্ষা করুন।
- এই পর্যায়ে, অ্যান্ড্রয়েড স্টুডিও কিছু বিল্ড এরর দেখাতে পারে, কারণ আপনার কাছে অ্যান্ড্রয়েড এসডিকে বা বিল্ড টুলস নেই, যেমনটি নিচে দেখানো হয়েছে। এগুলো ইনস্টল/আপডেট করতে এবং আপনার প্রজেক্ট সিঙ্ক করতে অ্যান্ড্রয়েড স্টুডিওর নির্দেশাবলী অনুসরণ করুন।
MDC-অ্যান্ড্রয়েড আমদানি করুন
app মডিউলের build.gradle ফাইলে যান এবং নিশ্চিত করুন যে dependencies ব্লকে MDC Android-এর উপর একটি ডিপেন্ডেন্সি অন্তর্ভুক্ত আছে:
api 'com.google.android.material:material:1.1.0-alpha06'
স্টার্টার অ্যাপটি চালান
|
|
সফল! আপনার অ্যাপটি এবং এর গঠন দেখা উচিত।
৩. টেক্সট ফিল্ডগুলো আপডেট করুন।
সাধারণ টেক্সট ফিল্ডের তুলনায় ম্যাটেরিয়াল ডিজাইন টেক্সট ফিল্ডের ব্যবহারযোগ্যতা অনেক বেশি। আউটলাইন বা ব্যাকগ্রাউন্ড ফিল দিয়ে হিট জোন নির্ধারণ করার ফলে, ব্যবহারকারীরা আপনার ফর্মের সাথে আরও সহজে ইন্টারঅ্যাক্ট করতে পারে অথবা আরও জটিল কন্টেন্টের মধ্যে থেকেও টেক্সট ফিল্ডগুলো শনাক্ত করতে পারে।
টেক্সট ফিল্ডের স্টাইলগুলি প্রতিস্থাপন করুন
shipping_info_activity.xml ফাইলে, সমস্ত TextInputLayout XML কম্পোনেন্টগুলিতে নিম্নলিখিত স্টাইলটি যোগ করুন:
শিপিং_ইনফো_অ্যাক্টিভিটি.এক্সএমএল
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
প্রতিটি TextInputLayout দেখতে নিম্নলিখিতের মতো হওয়া উচিত:
শিপিং_ইনফো_অ্যাক্টিভিটি.এক্সএমএল
<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.TextInputLayout
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.java তে, onCreate() মেথডটি নিচের মতো করে আপডেট করুন:
ShippingInfoActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.shipping_info_activity);
View rootView = findViewById(android.R.id.content);
final List<TextInputLayout> textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout.class);
Button button = findViewById(R.id.save_button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
boolean noErrors = true;
for (TextInputLayout textInputLayout : textInputLayouts) {
String editTextString = textInputLayout.getEditText().getText().toString();
if (editTextString.isEmpty()) {
textInputLayout.setError(getResources().getString(R.string.error_string));
noErrors = false;
} else {
textInputLayout.setError(null);
}
}
if (noErrors) {
// All fields are valid!
}
}
});
}
বিল্ড করে রান করুন। সেভ (SAVE) চাপুন, কিন্তু অন্তত একটি টেক্সট ফিল্ড খালি রাখুন:
যে টেক্সট ফিল্ডগুলো খালি আছে সেগুলো লাল রঙের এবং সেগুলোর নিচে ত্রুটির বার্তা লেখা রয়েছে।
৪. বাটনটি আপডেট করুন
MDC-তে নিম্নলিখিত বৈশিষ্ট্যযুক্ত বোতাম রয়েছে:
- কালির ঢেউ
- গোলাকার কোণ
- থিম সমর্থন
- পিক্সেল-পারফেক্ট লেআউট এবং টাইপোগ্রাফি
- AppCompatButton (স্ট্যান্ডার্ড অ্যান্ড্রয়েড বাটন ক্লাস)-এর উপর ভিত্তি করে তৈরি, তাই আপনি জানেন আপনার কোডে এগুলো কীভাবে ব্যবহার করতে হয়।
ঐচ্ছিকভাবে বোতামের শ্রেণী প্রতিস্থাপন করুন
ডিফল্টরূপে ম্যাটেরিয়াল লাইব্রেরি সাধারণ বাটনগুলোকে স্বয়ংক্রিয়ভাবে এমডিসি বাটনে রূপান্তরিত করে। তবে, আপনি চাইলে বাটনের সমস্ত রেফারেন্স ম্যাটেরিয়ালবাটন দিয়ে প্রতিস্থাপন করতে পারেন, যাতে আপনি এমন কিছু অতিরিক্ত মেথড ব্যবহার করতে পারেন যা শুধুমাত্র একটি ম্যাটেরিয়ালবাটনেই পাওয়া যায়, যেমন কর্নার রেডিয়াস পরিবর্তন করা। এমডিসি বাটন একটি সহজ প্লাগ-এন্ড-প্লে কম্পোনেন্ট। আপনাকে শুধু এক্সএমএল কম্পোনেন্টের নাম Button জায়গায় MaterialButton বসাতে হবে এবং MaterialButton ডিফল্ট MaterialButton স্টাইল প্রয়োগ করতে হবে।
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" />
প্রতি:
শিপিং_ইনফো_অ্যাক্টিভিটি.এক্সএমএল
<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 কম্পোনেন্ট দিয়ে মুড়ে দিন:
শিপিং_ইনফো_অ্যাক্টিভিটি.এক্সএমএল
<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-এর আরও অনেক উপাদান অন্বেষণ করতে পারেন।