Im trying to add a vertical divider in chipgroup to separate primary chip from other chips. Just like 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:
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.
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);