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

কম্পোজ পদ্ধতিটি চেষ্টা করুন
অ্যান্ড্রয়েডের জন্য Jetpack Compose হলো প্রস্তাবিত UI টুলকিট। Compose-এ কীভাবে লেআউট নিয়ে কাজ করতে হয় তা শিখুন।

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

কার্ড-ভিত্তিক একটি অ্যাপ UI-এর ঝলক দেখানো একটি ছবি।
চিত্র ১. কার্ড-ভিত্তিক একটি অ্যাপ ইউআই।

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

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>

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

একটি ছবিতে একটি একক কার্ড দেখানো হচ্ছে
চিত্র ২. কার্ডভিউ-ভিত্তিক লেআউটের একটি সাধারণ উদাহরণ।

এই উদাহরণে কার্ডটি একটি ডিফল্ট এলিভেশন সহ স্ক্রিনে আঁকা হয়েছে, যার ফলে সিস্টেম এর নিচে একটি শ্যাডো তৈরি করে। আপনি card_view:cardElevation অ্যাট্রিবিউটের মাধ্যমে একটি কার্ডের জন্য কাস্টম এলিভেশন নির্ধারণ করতে পারেন। বেশি এলিভেশনের কার্ডের শ্যাডো আরও স্পষ্ট হয় এবং কম এলিভেশনের কার্ডের শ্যাডো হালকা হয়। অ্যান্ড্রয়েড ৫.০ (এপিআই লেভেল ২১) এবং এর পরবর্তী সংস্করণগুলোতে CardView আসল এলিভেশন এবং ডাইনামিক শ্যাডো ব্যবহার করে।

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

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