0

I've 3 chips, and what I want to achieve is to align the 1st chip to be at the start, the 2nd in middle and 3rd at the end of screen horizontally.

I also want to ask how can I add new line in chipgroup, like adding 3 chips in 1st line then TextView in 2nd line and another 3 chips at the 3rd line.

Edit: I solved the second issue by wrapping my TextView with LinearLayout

<com.google.android.material.chip.ChipGroup
            android:id="@+id/chipGroup"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:chipSpacingHorizontal="40dp"
            app:singleSelection="true">


            <com.google.android.material.chip.Chip
                android:id="@+id/chip_1"
                style="@style/CustomChipChoice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
                android:text="8:30 AM"
                app:chipCornerRadius="7dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_2"
                style="@style/CustomChipChoice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
                android:text="9:00 AM"
                app:chipCornerRadius="7dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_3"
                style="@style/CustomChipChoice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
                android:text="9:30 AM"
                app:chipCornerRadius="7dp" />

            <TextView
                android:id="@+id/TextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:fontFamily="@font/poppins_bold"
                android:text="TextView"
                android:textSize="18sp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_4"
                style="@style/CustomChipChoice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
                android:text="8:30 AM"
                app:chipCornerRadius="7dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_5"
                style="@style/CustomChipChoice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
                android:text="8:30 AM"
                app:chipCornerRadius="7dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_6"
                style="@style/CustomChipChoice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
                android:text="8:30 AM"
                app:chipCornerRadius="7dp" />
</com.google.android.material.chip.ChipGroup>
lawayben
  • 33
  • 1
  • 8
  • https://stackoverflow.com/questions/51199787/android-how-to-center-align-chips-in-chipgroup – gtxtreme Sep 12 '21 at 16:29
  • @gtxtreme I saw that post, I don't want to use FlexboxLayout, I want to achieve this without any external library – lawayben Sep 12 '21 at 16:39

1 Answers1

0

You can achieve that without libraries. For that you make LinearLayouts that are wrapping every line. To give equal space we use android:layout_weight=".1" for every chip in the group. If you give it the same weight it will be balanced and vice versa. That's what I came up with:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chipGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:chipSpacingHorizontal="40dp"
        app:singleSelection="true">
        
        <LinearLayout
            android:id="@+id/ll1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_marginEnd="20dp"
                android:layout_weight=".1"
                android:checked="false"
                android:text="8:30 AM"
                android:textAlignment="center"
                app:chipCornerRadius="7dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_marginEnd="20dp"
                android:layout_weight=".1"
                android:checked="false"
                android:text="9:00 AM"
                android:textAlignment="center"
                app:chipCornerRadius="7dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_marginEnd="20dp"
                android:layout_weight=".1"
                android:checked="false"
                android:text="9:30 AM"
                android:textAlignment="center"
                app:chipCornerRadius="7dp" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/TextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="10dp"
                android:text="MyTextisHere"
                android:textSize="18sp" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_marginEnd="20dp"
                android:layout_weight=".1"
                android:checked="false"
                android:text="10:00 AM"
                android:textAlignment="center"
                app:chipCornerRadius="7dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_marginEnd="20dp"
                android:layout_weight=".1"
                android:checked="false"
                android:text="10:30 AM"
                android:textAlignment="center"
                app:chipCornerRadius="7dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_marginEnd="20dp"
                android:layout_weight=".1"
                android:checked="false"
                android:text="11:00 AM"
                android:textAlignment="center"
                app:chipCornerRadius="7dp" />

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

Result:

enter image description here

Ole Pannier
  • 3,208
  • 9
  • 22
  • 33
  • if I wrap chips with LinearLayout, `singleSelection` won't work, is there any workaround? – lawayben Sep 12 '21 at 17:17
  • You gave every Chip an ID, so it is possible to do single action with one Chip. But that wasn't your question in the post. Please avoid multiquestions in one post. Your Main question is answered :) As I set, go over ID as I saw in other post doing so. Hope I could help. Cheers :) – Ole Pannier Sep 12 '21 at 17:28
  • if you read the code, you can see `app:singleSelection="true"` there, using IDs, I've to implement singleSelection by myself which I'm avoiding it. – lawayben Sep 12 '21 at 17:45
  • I saw that. If you hover over the singleSelection you will see that it can't be used for all only if you add more chips into the group. So, it wouldn't be possible even you don't use linearlayout :) Anyways, I hope it helped with aligning. Feel free to tick it as correct. Cheers and good luck with your project :) Further help: https://stackoverflow.com/questions/53155035/chipgroup-single-selection – Ole Pannier Sep 12 '21 at 17:54