একটি কার্ড-ভিত্তিক লেআউট তৈরি করুন

রচনা পদ্ধতি চেষ্টা করুন

জেটপ্যাক কম্পোজ হল Android এর জন্য প্রস্তাবিত UI টুলকিট। কম্পোজে লেআউটের সাথে কীভাবে কাজ করবেন তা শিখুন।

উপাদান 3 → কার্ড

অ্যাপ্লিকেশানগুলিকে প্রায়শই অনুরূপ স্টাইলযুক্ত পাত্রে ডেটা প্রদর্শন করতে হয়, যেমন কন্টেইনার যা একটি তালিকার আইটেমগুলির বিষয়ে তথ্য রাখে৷ প্ল্যাটফর্ম জুড়ে একটি সামঞ্জস্যপূর্ণ চেহারা কার্ডগুলিতে তথ্য দেখানোর জন্য সিস্টেমটি CardView API প্রদান করে। উদাহরণ স্বরূপ, কার্ডের একটি ডিফল্ট উচ্চতা তাদের ধারণকৃত ভিউ গ্রুপের উপরে থাকে, তাই সিস্টেম তাদের নীচে ছায়া আঁকে। ধারকটির জন্য একটি সামঞ্জস্যপূর্ণ শৈলী প্রদান করার সময় কার্ডগুলি একটি গোষ্ঠীর ভিউ ধারণ করার একটি উপায় প্রদান করে৷

নির্ভরতা যোগ করুন

CardView উইজেটটি AndroidX এর অংশ। আপনার প্রকল্পে এটি ব্যবহার করতে, আপনার অ্যাপ মডিউলের build.gradle ফাইলে নিম্নলিখিত নির্ভরতা যোগ করুন:

dependencies {
    implementation "androidx.cardview:cardview:1.0.0"
}

dependencies {
    implementation("androidx.cardview:cardview:1.0.0")
}

কার্ড তৈরি করুন

একটি CardView ব্যবহার করতে, এটি আপনার লেআউট ফাইলে যোগ করুন। অন্যান্য ভিউ ধারণ করতে এটি একটি ভিউ গ্রুপ হিসাবে ব্যবহার করুন। নিম্নলিখিত উদাহরণে, ব্যবহারকারীর কাছে কিছু তথ্য প্রদর্শন করার জন্য CardView একটি ImageView এবং কয়েকটি TextViews রয়েছে:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="16dp"
    android:background="#E0F7FA"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:padding="4dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/header_image"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@drawable/logo"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/title"
                style="@style/TextAppearance.MaterialComponents.Headline3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a title"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/header_image" />

            <TextView
                android:id="@+id/subhead"
                style="@style/TextAppearance.MaterialComponents.Subtitle2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a subhead"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/title" />

            <TextView
                android:id="@+id/body"
                style="@style/TextAppearance.MaterialComponents.Body1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a supporting text. Very Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/subhead" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

পূর্ববর্তী কোড স্নিপেট নিম্নলিখিত অনুরূপ কিছু উত্পাদন করে, ধরে নিচ্ছি আপনি একই Android লোগো চিত্র ব্যবহার করেন:

এই উদাহরণের কার্ডটি একটি ডিফল্ট উচ্চতা সহ স্ক্রিনে আঁকা হয়, যার ফলে সিস্টেমটি এটির নীচে একটি ছায়া আঁকতে পারে। আপনি card_view:cardElevation বৈশিষ্ট্য সহ একটি কার্ডের জন্য একটি কাস্টম উচ্চতা প্রদান করতে পারেন। একটি উচ্চ উচ্চতায় একটি কার্ডের একটি আরও উচ্চারিত ছায়া থাকে এবং একটি নিম্ন উচ্চতায় একটি কার্ডের একটি হালকা ছায়া থাকে৷ CardView অ্যান্ড্রয়েড 5.0 (এপিআই স্তর 21) এবং উচ্চতর তে বাস্তব উচ্চতা এবং গতিশীল ছায়া ব্যবহার করে।

CardView উইজেটের চেহারা কাস্টমাইজ করতে এই বৈশিষ্ট্যগুলি ব্যবহার করুন:

• আপনার লেআউটে কোণার ব্যাসার্ধ সেট করতে, card_view:cardCornerRadius অ্যাট্রিবিউট ব্যবহার করুন।
• আপনার কোডে কোণার ব্যাসার্ধ সেট করতে, CardView.setRadius পদ্ধতি ব্যবহার করুন।
• একটি কার্ডের ব্যাকগ্রাউন্ড কালার সেট করতে, card_view:cardBackgroundColor অ্যাট্রিবিউট ব্যবহার করুন।