Add icons to VideoDetailFragment tab layout for better accessibility

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

@@ -29,6 +29,7 @@
 import android.widget.FrameLayout;
 import android.widget.RelativeLayout;
 
+import androidx.annotation.AttrRes;
 import androidx.annotation.DrawableRes;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
@@ -45,6 +46,7 @@
 import com.google.android.exoplayer2.PlaybackParameters;
 import com.google.android.material.appbar.AppBarLayout;
 import com.google.android.material.bottomsheet.BottomSheetBehavior;
+import com.google.android.material.tabs.TabLayout;
 import com.nostra13.universalimageloader.core.assist.FailReason;
 import com.nostra13.universalimageloader.core.listener.ImageLoadingListener;
 import com.nostra13.universalimageloader.core.listener.SimpleImageLoadingListener;
@@ -96,6 +98,7 @@
 import org.schabi.newpipe.util.ShareUtils;
 import org.schabi.newpipe.util.ThemeHelper;
 
+import java.util.ArrayList;
 import java.util.Iterator;
 import java.util.LinkedList;
 import java.util.List;
@@ -147,9 +150,11 @@ public final class VideoDetailFragment
     private static final String RELATED_TAB_TAG = "NEXT VIDEO";
     private static final String DESCRIPTION_TAB_TAG = "DESCRIPTION TAB";
 
+    // tabs
     private boolean showRelatedStreams;
     private boolean showComments;
     private String selectedTabTag;
+    @AttrRes @NonNull final List<Integer> tabIcons = new ArrayList<>();
 
     private int updateFlags = 0;
 
@@ -493,7 +498,7 @@ public void onClick(final View v) {
                 openVideoPlayer();
                 break;
             case R.id.detail_title_root_layout:
-                toggleTitleAndDescription();
+                toggleTitleAndSecondaryControls();
                 break;
             case R.id.overlay_thumbnail:
             case R.id.overlay_metadata_layout:
@@ -564,7 +569,7 @@ public boolean onLongClick(final View v) {
         return true;
     }
 
-    private void toggleTitleAndDescription() {
+    private void toggleTitleAndSecondaryControls() {
         if (binding.detailSecondaryControlPanel.getVisibility() == View.GONE) {
             binding.detailVideoTitleView.setMaxLines(10);
             binding.detailToggleDescriptionView.setImageResource(
@@ -907,19 +912,23 @@ private void initTabs() {
             selectedTabTag = pageAdapter.getItemTitle(binding.viewPager.getCurrentItem());
         }
         pageAdapter.clearAllItems();
+        tabIcons.clear();
 
         if (shouldShowComments()) {
             pageAdapter.addFragment(
                     CommentsFragment.getInstance(serviceId, url, title), COMMENTS_TAB_TAG);
+            tabIcons.add(R.drawable.ic_comment_white_24dp);
         }
 
         if (showRelatedStreams && binding.relatedStreamsLayout == null) {
             //temp empty fragment. will be updated in handleResult
             pageAdapter.addFragment(new Fragment(), RELATED_TAB_TAG);
+            tabIcons.add(R.drawable.ic_art_track_white_24dp);
         }
 
-        //temp empty fragment. will be updated in handleResult
+        // temp empty fragment. will be updated in handleResult
         pageAdapter.addFragment(new Fragment(), DESCRIPTION_TAB_TAG);
+        tabIcons.add(R.drawable.ic_description_white_24dp);
         pageAdapter.notifyDataSetUpdate();
 
         if (pageAdapter.getCount() < 2) {
@@ -930,9 +939,45 @@ private void initTabs() {
                 binding.viewPager.setCurrentItem(position);
             }
             binding.tabLayout.setVisibility(View.VISIBLE);
+            updateTabIcons();
         }
     }
 
+    /**
+     * To be called whenever {@link #pageAdapter} is modified, since that triggers a refresh in
+     * {@link FragmentVideoDetailBinding#tabLayout} resetting all tab's icons. This reads icons from
+     * {@link #tabIcons}, which are set in {@link #initTabs()}
+     */
+    private void updateTabIcons() {
+        for (int i = 0; i < tabIcons.size(); ++i) {
+            final TabLayout.Tab tab = binding.tabLayout.getTabAt(i);
+            if (tab != null) {
+                tab.setIcon(tabIcons.get(i));
+            }
+        }
+    }
+
+    private void updateTabs(@NonNull final StreamInfo info) {
+        if (showRelatedStreams) {
+            if (binding.relatedStreamsLayout == null) { // phone
+                pageAdapter.updateItem(RELATED_TAB_TAG,
+                        RelatedVideosFragment.getInstance(info));
+            } else { // tablet
+                getChildFragmentManager().beginTransaction()
+                        .replace(R.id.relatedStreamsLayout,
+                                RelatedVideosFragment.getInstance(info))
+                        .commitAllowingStateLoss();
+                binding.relatedStreamsLayout.setVisibility(
+                        player != null && player.isFullscreen() ? View.GONE : View.VISIBLE);
+            }
+        }
+
+        pageAdapter.updateItem(DESCRIPTION_TAB_TAG,
+                new DescriptionFragment(info));
+        pageAdapter.notifyDataSetUpdate();
+        updateTabIcons();
+    }
+
     private boolean shouldShowComments() {
         try {
             return showComments && NewPipe.getService(serviceId)
@@ -1339,22 +1384,7 @@ public void handleResult(@NonNull final StreamInfo info) {
         currentInfo = info;
         setInitialData(info.getServiceId(), info.getOriginalUrl(), info.getName(), playQueue);
 
-        if (showRelatedStreams) {
-            if (binding.relatedStreamsLayout == null) { //phone
-                pageAdapter.updateItem(RELATED_TAB_TAG,
-                        RelatedVideosFragment.getInstance(info));
-            } else { //tablet
-                getChildFragmentManager().beginTransaction()
-                        .replace(R.id.relatedStreamsLayout,
-                                RelatedVideosFragment.getInstance(info))
-                        .commitAllowingStateLoss();
-                binding.relatedStreamsLayout.setVisibility(
-                        player != null && player.isFullscreen() ? View.GONE : View.VISIBLE);
-            }
-        }
-        pageAdapter.updateItem(DESCRIPTION_TAB_TAG,
-                new DescriptionFragment(info));
-        pageAdapter.notifyDataSetUpdate();
+        updateTabs(info);
 
         animate(binding.detailThumbnailPlayButton, true, 200);
         binding.detailVideoTitleView.setText(title);

app/src/main/java/org/schabi/newpipe/player/event/CustomBottomSheetBehavior.java

@@ -27,7 +27,7 @@ public CustomBottomSheetBehavior(final Context context, final AttributeSet attrs
     private boolean skippingInterception = false;
     private final List<Integer> skipInterceptionOfElements = Arrays.asList(
             R.id.detail_content_root_layout, R.id.relatedStreamsLayout,
-            R.id.itemsListPanel, R.id.view_pager, R.id.bottomControls,
+            R.id.itemsListPanel, R.id.view_pager, R.id.tab_layout, R.id.bottomControls,
             R.id.playPauseButton, R.id.playPreviousButton, R.id.playNextButton);
 
     @Override

app/src/main/res/drawable/ic_art_track_white_24dp.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M22,13h-8v-2h8v2zM22,7h-8v2h8L22,7zM14,17h8v-2h-8v2zM12,9v6c0,1.1 -0.9,2 -2,2L4,17c-1.1,0 -2,-0.9 -2,-2L2,9c0,-1.1 0.9,-2 2,-2h6c1.1,0 2,0.9 2,2zM10.5,15l-2.25,-3 -1.75,2.26 -1.25,-1.51L3.5,15h7z"/>
+</vector>

app/src/main/res/drawable/ic_comment_white_24dp.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M21.99,4c0,-1.1 -0.89,-2 -1.99,-2L4,2c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h14l4,4 -0.01,-18zM18,14L6,14v-2h12v2zM18,11L6,11L6,9h12v2zM18,8L6,8L6,6h12v2z"/>
+</vector>

app/src/main/res/drawable/ic_description_white_24dp.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M14,2L6,2c-1.1,0 -1.99,0.9 -1.99,2L4,20c0,1.1 0.89,2 1.99,2L18,22c1.1,0 2,-0.9 2,-2L20,8l-6,-6zM16,18L8,18v-2h8v2zM16,14L8,14v-2h8v2zM13,9L13,3.5L18.5,9L13,9z"/>
+</vector>

app/src/main/res/layout-large-land/fragment_video_detail.xml

@@ -603,11 +603,10 @@
                 <com.google.android.material.tabs.TabLayout
                     android:id="@+id/tab_layout"
                     android:layout_width="match_parent"
-                    android:layout_height="30dp"
+                    android:layout_height="wrap_content"
                     android:layout_gravity="bottom|center"
-                    app:tabBackground="@drawable/tab_selector"
-                    app:tabGravity="center"
-                    app:tabIndicatorHeight="0dp" />
+                    app:tabIconTint="?attr/colorAccent"
+                    app:tabGravity="fill" />
 
             </androidx.viewpager.widget.ViewPager>
 

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

@@ -586,11 +586,10 @@
             <com.google.android.material.tabs.TabLayout
                 android:id="@+id/tab_layout"
                 android:layout_width="match_parent"
-                android:layout_height="30dp"
+                android:layout_height="wrap_content"
                 android:layout_gravity="bottom|center"
-                app:tabBackground="@drawable/tab_selector"
-                app:tabGravity="center"
-                app:tabIndicatorHeight="0dp" />
+                app:tabIconTint="?attr/colorAccent"
+                app:tabGravity="fill" />
 
         </androidx.viewpager.widget.ViewPager>