Implement onboarding for Card Browser

AnkiDroid/src/main/java/com/ichi2/anki/CardBrowser.java

@@ -54,6 +54,7 @@
 import android.widget.ArrayAdapter;
 import android.widget.BaseAdapter;
 import android.widget.CheckBox;
+import android.widget.FrameLayout;
 import android.widget.ListView;
 import android.widget.Spinner;
 import android.widget.TextView;
@@ -87,6 +88,8 @@
 import com.ichi2.ui.CardBrowserSearchView;
 import com.ichi2.upgrade.Upgrade;
 import com.ichi2.utils.BooleanGetter;
+import com.ichi2.utils.DimmedCirclePromptBackground;
+import com.ichi2.utils.DimmedRectanglePromptBackground;
 import com.ichi2.utils.FunctionalInterfaces;
 import com.ichi2.utils.LanguageUtil;
 import com.ichi2.utils.PairWithBoolean;
@@ -109,7 +112,10 @@
 import java.util.Map;
 import java.util.Set;
 
+import androidx.core.content.ContextCompat;
 import timber.log.Timber;
+import uk.co.samuelwall.materialtaptargetprompt.MaterialTapTargetPrompt;
+import uk.co.samuelwall.materialtaptargetprompt.extras.focals.RectanglePromptFocal;
 
 import static com.ichi2.anki.CardBrowser.Column.*;
 import static com.ichi2.libanki.stats.Stats.SECONDS_PER_DAY;
@@ -306,6 +312,8 @@ enum Column {
     private boolean mShouldRestoreScroll = false;
     private boolean mPostAutoScroll = false;
 
+    private static final String CARD_BROWSER_ONBOARDING = "CardBrowserOnboarding";
+
     /**
      * Broadcast that informs us when the sd card is about to be unmounted
      */
@@ -600,8 +608,40 @@ protected void onCreate(Bundle savedInstanceState) {
         setContentView(R.layout.card_browser);
         initNavigationDrawer(findViewById(android.R.id.content));
         startLoadingCollection();
+
+        if (OnboardingUtils.INSTANCE.checkIfNotAlreadyVisited(CardBrowserOnboardingEnum.DECK_CHANGER, this)) {
+            showTutorialForDeckChanger();
+        } else if (OnboardingUtils.INSTANCE.checkIfNotAlreadyVisited(CardBrowserOnboardingEnum.CARD_PRESS_AND_HOLD, this)) {
+            showTutorialForCardClick();
+        }
+    }
+
+    public void showTutorialForDeckChanger() {
+        MaterialTapTargetPrompt.Builder tutorialBuilder = new MaterialTapTargetPrompt.Builder(this)
+                .setTarget(R.id.toolbar_spinner)
+                .setPrimaryText(this.getString(R.string.deck_changer_card_browser))
+                .setSecondaryText(this.getString(R.string.deck_changer_card_browser_desc))
+                .setPromptBackground(new DimmedRectanglePromptBackground())
+                .setPromptFocal(new RectanglePromptFocal())
+                .setFocalColour(ContextCompat.getColor(this, R.color.material_blue_500))
+                .setPromptStateChangeListener((prompt, state) -> {
+                    if (state == MaterialTapTargetPrompt.STATE_DISMISSED &&
+                            OnboardingUtils.INSTANCE.checkIfNotAlreadyVisited(CardBrowserOnboardingEnum.CARD_PRESS_AND_HOLD, this)) {
+                        showTutorialForCardClick();
+                    }
+                });
+
+        OnboardingUtils.INSTANCE.showTutorialAndMarkVisited(tutorialBuilder, CardBrowserOnboardingEnum.DECK_CHANGER, this);
     }
 
+    public void showTutorialForCardClick() {
+        FrameLayout cardBrowserTutorial = findViewById(R.id.card_browser_tutorial);
+        cardBrowserTutorial.setVisibility(View.VISIBLE);
+
+        new Handler().postDelayed(() -> cardBrowserTutorial.setVisibility(View.GONE), 4000);
+
+        OnboardingUtils.INSTANCE.setAsVisited(CardBrowserOnboardingEnum.CARD_PRESS_AND_HOLD.ordinal(), this, CARD_BROWSER_ONBOARDING);
+    }
 
     // Finish initializing the activity after the collection has been correctly loaded
     @Override
@@ -2930,4 +2970,9 @@ void searchCards(String searchQuery) {
         mSearchTerms = searchQuery;
         searchCards();
     }
+
+    private enum CardBrowserOnboardingEnum {
+        DECK_CHANGER,
+        CARD_PRESS_AND_HOLD
+    }
 }

AnkiDroid/src/main/res/drawable/hand_icon.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="M23,5.5V20c0,2.2 -1.8,4 -4,4h-7.3c-1.08,0 -2.1,-0.43 -2.85,-1.19L1,14.83c0,0 1.26,-1.23 1.3,-1.25c0.22,-0.19 0.49,-0.29 0.79,-0.29c0.22,0 0.42,0.06 0.6,0.16C3.73,13.46 8,15.91 8,15.91V4c0,-0.83 0.67,-1.5 1.5,-1.5S11,3.17 11,4v7h1V1.5C12,0.67 12.67,0 13.5,0S15,0.67 15,1.5V11h1V2.5C16,1.67 16.67,1 17.5,1S19,1.67 19,2.5V11h1V5.5C20,4.67 20.67,4 21.5,4S23,4.67 23,5.5z"/>
+</vector>

AnkiDroid/src/main/res/layout/card_browser.xml

@@ -48,4 +48,31 @@
 
     </LinearLayout>
     <include layout="@layout/anki_progress"/>
+
+    <FrameLayout
+        android:id="@+id/card_browser_tutorial"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:background="@color/semi_transparent_black"
+        android:visibility="gone">
+
+        <ImageView
+            android:layout_width="100dp"
+            android:layout_height="100dp"
+            android:src="@drawable/hand_icon"
+            android:layout_gravity="center" />
+
+        <TextView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:textSize="18sp"
+            android:text="@string/card_click"
+            android:textColor="@color/white"
+            android:paddingStart="8dp"
+            android:paddingEnd="8dp"
+            android:layout_gravity="center"
+            android:gravity="center"
+            android:layout_marginTop="100dp" />
+
+    </FrameLayout>
 </androidx.coordinatorlayout.widget.CoordinatorLayout>

AnkiDroid/src/main/res/values/colors.xml

@@ -31,6 +31,7 @@
     <color name="transparent">#00000000</color>
     <color name="white">#ffffff</color>
     <color name="black">#000000</color>
+    <color name="semi_transparent_black">#80000000</color>
 
     <color name="answer_buttons_highlight_color">#66FFFFFF</color>