Android ChipGroup Center Alignment – কেন Center কাজ করে না এবং সঠিক সমাধান (XML + Java)

Android অ্যাপ ডেভেলপমেন্টে Material ChipGroup ব্যবহার করার সময় অনেক Developer একটি সাধারণ সমস্যার সম্মুখীন হন। ChipGroup-কে Center করতে চাইলেও Chip-গুলো বাম (Left) দিক থেকে শুরু হয়। এই টিউটোরিয়ালে আমরা জানব কেন এমন হয় এবং কীভাবে খুব সহজে এর সমাধান করা যায়।

সমস্যাটি

নিচের Layout-এ লক্ষ্য করুন।

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexWrap="wrap"
    app:justifyContent="center">

   <com.google.android.material.chip.ChipGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ABC"/>

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="DEF"/>

    </com.google.android.material.chip.ChipGroup>

</com.google.android.flexbox.FlexboxLayout>

এখানে আশা করা হয়েছিল Chip-গুলো Center-এ থাকবে। কিন্তু বাস্তবে Chip-গুলো Left Align হয়ে যায়।

কেন এমন হয়?

মূল কারণ হলো নিচের লাইনটি।

android:layout_width="match_parent"

ChipGroup সম্পূর্ণ Screen Width দখল করে নেয়। ফলে বাইরের Layout তাকে আর Center করতে পারে না।

অর্থাৎ Center হচ্ছে ChipGroup, কিন্তু ChipGroup যেহেতু পুরো Screen জুড়ে রয়েছে, তাই Chip-গুলো দেখতে Left Align মনে হয়।

সমাধান ১ (সবচেয়ে সহজ)

শুধু match_parent পরিবর্তন করে wrap_content করে দিন।

আগে

android:layout_width="match_parent"

পরে

android:layout_width="wrap_content"

এতেই অধিকাংশ ক্ষেত্রে সমস্যার সমাধান হয়ে যায়।

সম্পূর্ণ XML Code

<com.google.android.material.chip.ChipGroup
    android:id="@+id/chipGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"

    app:singleSelection="true"
    app:selectionRequired="true"

    app:chipSpacingHorizontal="8dp"
    app:chipSpacingVertical="8dp">

   <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Java"/>

    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android"/>

   <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="XML"/>

    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Material"/>

</com.google.android.material.chip.ChipGroup>

Chip-এর মাঝে Spacing যোগ করা

app:chipSpacingHorizontal="8dp"
app:chipSpacingVertical="8dp"

Single Selection চালু করা

app:singleSelection="true"

সবসময় একটি Chip Selected রাখতে

app:selectionRequired="true"

যদি অনেক Chip থাকে?

ChipGroup নিজে থেকেই পরবর্তী লাইনে চলে যায়। কিন্তু একটি সীমাবদ্ধতা রয়েছে।

• প্রথম লাইন Center হবে না।
• দ্বিতীয় লাইনও Center হবে না।
• প্রতিটি Wrapped Line Left Align থাকবে।

এটি ChipGroup-এর Built-in আচরণ।

এই সমস্যার স্থায়ী সমাধান

যদি প্রতিটি Wrapped Line-ও Center করতে চান তাহলে ChipGroup ব্যবহার না করে সরাসরি FlexboxLayout ব্যবহার করুন।

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"

    app:flexWrap="wrap"
    app:justifyContent="center">

    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Java"/>

    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android"/>

    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="XML"/>

</com.google.android.flexbox.FlexboxLayout>

ChipGroup এবং FlexboxLayout-এর পার্থক্য

কখন কোনটি ব্যবহার করবেন?

• Filter Chip তৈরি করলে ChipGroup ব্যবহার করুন।
• Choice Chip তৈরি করলে ChipGroup ব্যবহার করুন।
• Single Selection দরকার হলে ChipGroup ব্যবহার করুন।
• Multiple Selection দরকার হলে ChipGroup ব্যবহার করুন।
• প্রতিটি Wrapped Row Center করতে চাইলে FlexboxLayout ব্যবহার করুন।
• Custom Chip Design তৈরি করলে FlexboxLayout সবচেয়ে ভালো।

উপসংহার

Android-এর ChipGroup Center না হওয়ার প্রধান কারণ হলো android:layout_width="match_parent"। এটি পরিবর্তন করে wrap_content ব্যবহার করলে অধিকাংশ ক্ষেত্রে সমস্যার সমাধান হয়ে যায়।

তবে যদি আপনার Layout-এ অনেক Chip থাকে এবং প্রতিটি Wrapped Line-কে Center করতে চান, তাহলে ChipGroup-এর পরিবর্তে FlexboxLayout ব্যবহার করাই সবচেয়ে ভালো সমাধান।

এই টিউটোরিয়াল থেকে যা শিখলেন

• ChipGroup Center কেন কাজ করে না।
• match_parent এবং wrap_content-এর পার্থক্য।
• ChipGroup Center করার সহজ উপায়।
• FlexboxLayout কখন ব্যবহার করবেন।
• Chip Spacing যোগ করার নিয়ম।
• Single Selection এবং Selection Required ব্যবহার।
• Professional Layout তৈরির Best Practice।