Use chips to show tags in metadata section

Clicking on chips opens the search fragment
Long clicking copies to clipboard

app/src/main/java/org/schabi/newpipe/fragments/detail/DescriptionFragment.java

@@ -12,13 +12,17 @@ import androidx.annotation.StringRes;
 import androidx.appcompat.widget.TooltipCompat;
 import androidx.core.text.HtmlCompat;
 
+import com.google.android.material.chip.Chip;
+
 import org.schabi.newpipe.BaseFragment;
 import org.schabi.newpipe.R;
 import org.schabi.newpipe.databinding.FragmentDescriptionBinding;
 import org.schabi.newpipe.databinding.ItemMetadataBinding;
+import org.schabi.newpipe.databinding.ItemMetadataTagsBinding;
 import org.schabi.newpipe.extractor.stream.Description;
 import org.schabi.newpipe.extractor.stream.StreamInfo;
 import org.schabi.newpipe.util.Localization;
+import org.schabi.newpipe.util.NavigationHelper;
 import org.schabi.newpipe.util.ShareUtils;
 import org.schabi.newpipe.util.TextLinkifier;
 
@@ -201,18 +205,34 @@ public class DescriptionFragment extends BaseFragment {
 
     private void addTagsMetadataItem(final LayoutInflater inflater, final LinearLayout layout) {
         if (streamInfo.getTags() != null && !streamInfo.getTags().isEmpty()) {
-            final StringBuilder tags = new StringBuilder();
+            final ItemMetadataTagsBinding itemBinding
-            for (int i = 0; i < streamInfo.getTags().size(); ++i) {
+                    = ItemMetadataTagsBinding.inflate(inflater, layout, false);
-                if (i != 0) {
+
-                    tags.append(", ");
+            for (final String tag : streamInfo.getTags()) {
-                }
+                final Chip chip = (Chip) inflater.inflate(R.layout.chip,
-                tags.append(streamInfo.getTags().get(i));
+                        itemBinding.metadataTagsChips, false);
+                chip.setText(tag);
+                chip.setOnClickListener(this::onTagClick);
+                chip.setOnLongClickListener(this::onTagLongClick);
+                itemBinding.metadataTagsChips.addView(chip);
             }
 
-            addMetadataItem(inflater, layout, false, R.string.metadata_tags, tags.toString());
+            layout.addView(itemBinding.getRoot());
         }
     }
 
+    private void onTagClick(final View chip) {
+        if (getParentFragment() != null) {
+            NavigationHelper.openSearchFragment(getParentFragment().getParentFragmentManager(),
+                    streamInfo.getServiceId(), ((Chip) chip).getText().toString());
+        }
+    }
+
+    private boolean onTagLongClick(final View chip) {
+        ShareUtils.copyToClipboard(requireContext(), ((Chip) chip).getText().toString());
+        return true;
+    }
+
     private void addPrivacyMetadataItem(final LayoutInflater inflater, final LinearLayout layout) {
         if (streamInfo.getPrivacy() != null) {
             @StringRes final int contentRes;

app/src/main/res/layout/chip.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This is used to inflate a chip with a Material theme, otherwise it would crash -->
+<!-- Theme.MaterialComponents.DayNight is used to guarantee auto day/night switching -->
+<com.google.android.material.chip.Chip xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:theme="@style/Theme.MaterialComponents.DayNight.Bridge"
+    tools:text="I'm a correctly themed chip!" />

app/src/main/res/layout/fragment_description.xml

@@ -88,9 +88,9 @@
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginStart="16dp"
-            android:layout_marginTop="8dp"
+            android:layout_marginTop="10dp"
             android:layout_marginEnd="16dp"
-            android:layout_marginBottom="16dp"
+            android:layout_marginBottom="10dp"
             android:orientation="vertical"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"

app/src/main/res/layout/item_metadata.xml

@@ -1,23 +1,23 @@
 <?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"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    xmlns:app="http://schemas.android.com/apk/res-auto">
+    android:paddingTop="6dp"
+    android:paddingBottom="6dp">
 
     <androidx.constraintlayout.widget.Guideline
         android:id="@+id/guideline"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:orientation="vertical"
-        app:layout_constraintGuide_percent="0.25" />
+        app:layout_constraintGuide_percent="0.23" />
 
     <TextView
         android:id="@+id/metadata_type_view"
         android:layout_width="0dp"
-        android:layout_height="0dp"
+        android:layout_height="wrap_content"
-        android:layout_marginTop="12dp"
-        android:layout_marginEnd="8dp"
         android:gravity="center_vertical|end"
         android:textAllCaps="true"
         android:textColor="?android:attr/textColorPrimary"
@@ -32,13 +32,11 @@
         android:id="@+id/metadata_content_view"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_marginStart="8dp"
+        android:layout_marginStart="16dp"
-        android:layout_marginTop="12dp"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="@+id/guideline"
         app:layout_constraintTop_toTopOf="parent"
         tools:text="Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ultricies ex. Integer sit amet sodales risus. Duis non mi et urna pretium bibendum." />
 
-
 </androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/layout/item_metadata_tags.xml

@@ -0,0 +1,45 @@
+<?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="wrap_content">
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guideline"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.23" />
+
+    <TextView
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:gravity="center_vertical|end"
+        android:text="@string/metadata_tags"
+        android:textAllCaps="true"
+        android:textColor="?android:attr/textColorPrimary"
+        android:textStyle="bold"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toStartOf="@+id/guideline"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <HorizontalScrollView
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="16dp"
+        android:layout_marginTop="-8dp"
+        android:layout_marginBottom="-8dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="@+id/guideline"
+        app:layout_constraintTop_toTopOf="parent">
+
+        <com.google.android.material.chip.ChipGroup
+            android:id="@+id/metadata_tags_chips"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:textAppearance="@style/TextAppearance.MaterialComponents.Chip"
+            app:singleLine="true" />
+    </HorizontalScrollView>
+</androidx.constraintlayout.widget.ConstraintLayout>