5

Im trying to add a vertical divider in chipgroup to separate primary chip from other chips. Just like YouTube: Image from Youtube

I have attempted to add it through this method. In the Activity:

<HorizontalScrollView
    android:id="@+id/hscroll_categories"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="10dp"
    android:scrollbars="none">
    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chipgroup_categories"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:orientation="horizontal"
        app:singleSelection="true"
        app:selectionRequired="true"
        app:singleLine="true" />
</HorizontalScrollView>

item_chip_category.xml:

<com.google.android.material.chip.Chip xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    app:chipStartPadding="18dp"
    app:chipEndPadding="18dp"
    app:chipMinHeight="40dp"
    android:textColor="@color/txt_category_chip_light"
    app:chipBackgroundColor="@color/bg_category_chip_light"
    app:chipStrokeWidth="1dp"
    app:chipStrokeColor="@color/stroke_category_chip_light"
    style="@style/Widget.MaterialComponents.Chip.Choice"
    android:textAppearance="?android:attr/textAppearance" />

vertical_div.xml:

<View xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:background="#424242"/>

And adding the chips and divider dynamically:

Chip chip = (Chip) this.getLayoutInflater().inflate(R.layout.item_chip_category, null, false);

LinearLayout.LayoutParams layoutParams= new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(5,5,5,5);
chip.setLayoutParams(layoutParams);
chip.setText(some_var);

//adding chip
chipgroup_categories.addView(chip);

//adding divider
View div = (View) this.getLayoutInflater().inflate(R.layout.vertical_div, null, false);
chipgroup_categories.addView(div);

//adding more chips using loop

Output:

Output

In the output, there was no line but just empty space, am I missing anything? Any help to find valid way to add it is appreciated.

Amitoj
  • 171
  • 2
  • 15
  • 1
    I'm going to agree with Zain regarding the use of the chip group. If you want to continue with what you have, try setting the second parameter of the call to the inflater with the chip group to specify how tall the line should be. If you are curious about what is happening now, check out the layout with the AS Layout Inspector. – Cheticamp Dec 31 '21 at 16:22

1 Answers1

4

Im trying to add a vertical divider in chipgroup to separate primary chip from other chips. Just like YouTube:

The ChipGroup should hold only chip elements; the Explore button & the vertical line should not be chip elements.

So, you can just simplify that with a horizontal LinearLayout that has: the Explore button, the vertical line, the ChipGroup, and optionally "Send Feedback" button wrapped in HorizontalScrollView like YouTube:

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <HorizontalScrollView
        android:id="@+id/horizontal_scroll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#212121"
        android:overScrollMode="never"
        android:scrollbars="none"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal">

            <Button
                android:id="@+id/btn_explore"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginLeft="8dp"
                android:backgroundTint="#373737"
                android:drawableLeft="@drawable/ic_baseline_explore_24"
                android:drawableTint="#fff"
                android:text="Explore" />

            <View
                android:id="@+id/vertical_line"
                android:layout_width="1dp"
                android:layout_height="50dp"
                android:layout_marginHorizontal="16dp"
                android:background="#424242" />

            <com.google.android.material.chip.ChipGroup
                android:id="@+id/chipgroup"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="10dp"
                app:chipSpacing="16dp"
                app:chipSpacingHorizontal="40dp"
                app:chipSpacingVertical="4dp"
                app:singleLine="true"
                app:singleSelection="true"/>

            <TextView
                android:id="@+id/btn_end"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="8dp"
                android:text="SEND FEEDBACK"
                android:textColor="#2AA9E3"
                android:textSize="16sp" />

        </LinearLayout>
    </HorizontalScrollView>


</androidx.constraintlayout.widget.ConstraintLayout>

And programmatically add chips to the ChipGroup, here is a demo:

ChipGroup chipGroup = findViewById(R.id.chipgroup);

String[] chipArr = new String[]{"Arabic", "English", "Hindu", "German", "French", "Italian", "Urdu", "Spanish"};

for (String text : chipArr) {
    Chip chip = new Chip(this);
    chip.setLayoutParams(new LinearLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT));
    chip.setText(text);
    chipGroup.addView(chip);
}


for (Chip chip : chips) chipGroup.addView(chip);

Zain
  • 37,492
  • 7
  • 60
  • 84
  • Or another way of it doing it might be setting the chip width to 1 or something and then disabling it. – Amitoj Jan 04 '22 at 11:26