Add a proper ripple for TabLayout tab

Before:
https://screenshot.googleplex.com/83xNLMev5SPBwnM.png
https://screenshot.googleplex.com/BJaQxf3ejHY2nvA.png

After:
https://screenshot.googleplex.com/REcPT9yEcfQaMhC.png
https://screenshot.googleplex.com/3ApXKz6LgDxQ8ZQ.png

Bug: 191945576
Bug: 191978137
Bug: 191388121
Test: Manually
Change-Id: I5ab38b8840779b59a0a80f7c2827b2d9cf415e3d
diff --git a/res/drawable/separated_tabs_ripple_mask.xml b/res/drawable/separated_tabs_ripple_mask.xml
new file mode 100644
index 0000000..ad39a50
--- /dev/null
+++ b/res/drawable/separated_tabs_ripple_mask.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+     Copyright (C) 2021 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+    android:color="?android:colorControlHighlight">
+    <item android:id="@android:id/mask">
+        <inset
+            android:insetLeft="@dimen/separated_tabs_inset_horizontal"
+            android:insetRight="@dimen/separated_tabs_inset_horizontal">
+            <shape android:shape="rectangle">
+                <corners android:radius="@dimen/separated_tabs_corner_radius" />
+                <solid android:color="?android:colorControlHighlight" />
+            </shape>
+        </inset>
+    </item>
+</ripple>
diff --git a/res/layout/separated_tabs.xml b/res/layout/separated_tabs.xml
index e23ea05..12603e0 100644
--- a/res/layout/separated_tabs.xml
+++ b/res/layout/separated_tabs.xml
@@ -14,14 +14,13 @@
      See the License for the specific language governing permissions and
      limitations under the License.
 -->
-<com.google.android.material.tabs.TabLayout
+<com.android.wallpaper.widget.SeparatedTabLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/separated_tabs"
     android:layout_width="match_parent"
     android:layout_height="@dimen/separated_tabs_height"
     app:tabBackground="@drawable/separated_tabs_background"
-    app:tabRippleColor="?android:colorControlHighlight"
     app:tabIndicatorAnimationDuration="0"
     app:tabIndicator="@drawable/separated_tabs_indicator_background"
     app:tabIndicatorColor="@color/separated_tabs_indicator_color"
diff --git a/src/com/android/wallpaper/picker/PreviewFragment.java b/src/com/android/wallpaper/picker/PreviewFragment.java
index 1867390..74bdd6f 100755
--- a/src/com/android/wallpaper/picker/PreviewFragment.java
+++ b/src/com/android/wallpaper/picker/PreviewFragment.java
@@ -328,8 +328,8 @@
     }
 
     protected void setUpTabs(TabLayout tabs) {
-        tabs.addTab(tabs.newTab().setText(getContext().getString(R.string.home_screen_message)));
-        tabs.addTab(tabs.newTab().setText(getContext().getString(R.string.lock_screen_message)));
+        tabs.addTab(tabs.newTab().setText(R.string.home_screen_message));
+        tabs.addTab(tabs.newTab().setText(R.string.lock_screen_message));
         tabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
             @Override
             public void onTabSelected(TabLayout.Tab tab) {
diff --git a/src/com/android/wallpaper/widget/SeparatedTabLayout.java b/src/com/android/wallpaper/widget/SeparatedTabLayout.java
new file mode 100644
index 0000000..793403f
--- /dev/null
+++ b/src/com/android/wallpaper/widget/SeparatedTabLayout.java
@@ -0,0 +1,27 @@
+package com.android.wallpaper.widget;
+
+import android.content.Context;
+import android.util.AttributeSet;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.android.wallpaper.R;
+
+import com.google.android.material.tabs.TabLayout;
+
+/** Custom {@link TabLayout} for separated tabs. */
+public class SeparatedTabLayout extends TabLayout {
+
+    public SeparatedTabLayout(Context context, @Nullable AttributeSet attrs) {
+        super(context, attrs);
+    }
+
+    @Override
+    @NonNull
+    public Tab newTab() {
+        Tab tab = super.newTab();
+        tab.view.setBackgroundResource(R.drawable.separated_tabs_ripple_mask);
+        return tab;
+    }
+}