Add nearby tutorial (#1467)

neslihanturan · misaochan · commit 2a98bd21ceff · 2018-05-07T22:05:20.000+10:00
* Add dependency for MaterialShowcase

* Add actionview class to get a reference to material showcase

* Create a NearbyMaterialShowcaseSequence class

* Apply sequence steps

* Add first three steps of nearby showcase

* Add sequence id constants to make sure they will be displayed only once

* Add last step of sequence to explain plus fab

* Create an object to prevent customize all sequences every time

* Fix typo

* Code cleanup

* Add strings to strings.xml

* Code cleanup

* Revert irrelevant change

* Revert irrelevant change

* Remove showcaseview for recenter button

* Use single showcaseView instead of sequence

* Add single showcase view insted of sequence to be able to edit text style

* Make sure it will be displayed only once

* Cleanup

* Update strings

* Change dismiss text style
diff --git a/app/build.gradle b/app/build.gradle
@@ -25,6 +25,8 @@ dependencies {
         transitive=true
     }
 
+    implementation "com.github.deano2390:MaterialShowcaseView:1.2.0"
+
     implementation "com.android.support:support-v4:$SUPPORT_LIB_VERSION"
     implementation "com.android.support:appcompat-v7:$SUPPORT_LIB_VERSION"
     implementation "com.android.support:design:$SUPPORT_LIB_VERSION"
diff --git a/app/src/main/java/fr/free/nrw/commons/nearby/NearbyActivity.java b/app/src/main/java/fr/free/nrw/commons/nearby/NearbyActivity.java
@@ -4,14 +4,18 @@
 import android.content.Context;
 import android.content.Intent;
 import android.content.IntentFilter;
+import android.content.SharedPreferences;
 import android.content.pm.PackageManager;
+import android.graphics.Typeface;
 import android.net.Uri;
 import android.os.Build;
 import android.os.Bundle;
+import android.os.Handler;
 import android.support.annotation.NonNull;
 import android.support.design.widget.BottomSheetBehavior;
 import android.support.v4.app.FragmentTransaction;
 import android.support.v7.app.AlertDialog;
+
 import android.view.Menu;
 import android.view.MenuInflater;
 import android.view.MenuItem;
@@ -25,6 +29,7 @@
 import java.util.List;
 
 import javax.inject.Inject;
+import javax.inject.Named;
 
 import butterknife.BindView;
 import butterknife.ButterKnife;
@@ -41,6 +46,8 @@
 import io.reactivex.disposables.Disposable;
 import io.reactivex.schedulers.Schedulers;
 import timber.log.Timber;
+import uk.co.deanwild.materialshowcaseview.IShowcaseListener;
+import uk.co.deanwild.materialshowcaseview.MaterialShowcaseView;
 
 
 public class NearbyActivity extends NavigationBaseActivity implements LocationUpdateListener {
@@ -56,12 +63,15 @@ public class NearbyActivity extends NavigationBaseActivity implements LocationUp
     LinearLayout bottomSheetDetails;
     @BindView(R.id.transparentView)
     View transparentView;
+    @BindView(R.id.fab_recenter)
+    View fabRecenter;
 
     @Inject
     LocationServiceManager locationManager;
     @Inject
     NearbyController nearbyController;
-
+    @Inject
+    @Named("application_preferences") SharedPreferences applicationPrefs;
     private LatLng curLatLng;
     private Bundle bundle;
     private Disposable placesDisposable;
@@ -72,11 +82,18 @@ public class NearbyActivity extends NavigationBaseActivity implements LocationUp
     private NearbyListFragment nearbyListFragment;
     private static final String TAG_RETAINED_MAP_FRAGMENT = NearbyMapFragment.class.getSimpleName();
     private static final String TAG_RETAINED_LIST_FRAGMENT = NearbyListFragment.class.getSimpleName();
+    private View listButton; // Reference to list button to use in tutorial
 
     private final String NETWORK_INTENT_ACTION = "android.net.conn.CONNECTIVITY_CHANGE";
     private BroadcastReceiver broadcastReceiver;
+
+    private boolean isListShowcaseAdded = false;
+    private boolean isMapShowCaseAdded = false;
+
     private LatLng lastKnownLocation;
 
+    private MaterialShowcaseView secondSingleShowCaseView;
+
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
@@ -126,6 +143,39 @@ public boolean onCreateOptionsMenu(Menu menu) {
         MenuInflater inflater = getMenuInflater();
         inflater.inflate(R.menu.menu_nearby, menu);
 
+        new Handler().post(() -> {
+
+            listButton = findViewById(R.id.action_display_list);
+
+            secondSingleShowCaseView = new MaterialShowcaseView.Builder(this)
+                    .setTarget(listButton)
+                    .setDismissText(getString(R.string.showcase_view_got_it_button))
+                    .setContentText(getString(R.string.showcase_view_list_icon))
+                    .setDelay(500) // optional but starting animations immediately in onCreate can make them choppy
+                    .singleUse(ViewUtil.SHOWCASE_VIEW_ID_1) // provide a unique ID used to ensure it is only shown once
+                    .setDismissStyle(Typeface.defaultFromStyle(Typeface.BOLD))
+                    .setListener(new IShowcaseListener() {
+                        @Override
+                        public void onShowcaseDisplayed(MaterialShowcaseView materialShowcaseView) {
+
+                        }
+
+                        // If dismissed, we can inform fragment to start showcase sequence there
+                        @Override
+                        public void onShowcaseDismissed(MaterialShowcaseView materialShowcaseView) {
+                                nearbyMapFragment.onNearbyMaterialShowcaseDismissed();
+                        }
+                    })
+                    .build();
+
+            isListShowcaseAdded = true;
+
+            if (isMapShowCaseAdded) { // If map showcase is also ready, start ShowcaseSequence
+                // Probably this case is not possible. Just added to be careful
+                setMapViewTutorialShowCase();
+            }
+        });
+
         return super.onCreateOptionsMenu(menu);
     }
 
@@ -420,6 +470,45 @@ private void populatePlaces(NearbyController.NearbyPlacesInfo nearbyPlacesInfo)
             updateMapFragment(false);
             updateListFragment();
         }
+
+        isMapShowCaseAdded = true;
+    }
+
+    public void setMapViewTutorialShowCase() {
+           /*
+            *This showcase view will be the first step of our nearbyMaterialShowcaseSequence. The reason we use a
+            * single item instead of adding another step to nearbyMaterialShowcaseSequence is that we are not able to
+            * call withoutShape() method on steps. For mapView we need an showcase view without
+            * any circle on it, it should cover the whole page.
+            * */
+        MaterialShowcaseView firstSingleShowCaseView = new MaterialShowcaseView.Builder(this)
+                .setTarget(nearbyMapFragment.mapView)
+                .setDismissText(getString(R.string.showcase_view_got_it_button))
+                .setContentText(getString(R.string.showcase_view_whole_nearby_activity))
+                .setDelay(500) // optional but starting animations immediately in onCreate can make them choppy
+                .singleUse(ViewUtil.SHOWCASE_VIEW_ID_2) // provide a unique ID used to ensure it is only shown once
+                .withoutShape() // no shape on map view since there are no view to focus on
+                .setDismissStyle(Typeface.defaultFromStyle(Typeface.BOLD))
+                .setListener(new IShowcaseListener() {
+                    @Override
+                    public void onShowcaseDisplayed(MaterialShowcaseView materialShowcaseView) {
+
+                    }
+
+                    @Override
+                    public void onShowcaseDismissed(MaterialShowcaseView materialShowcaseView) {
+                            /* Add other nearbyMaterialShowcaseSequence here, it will make the user feel as they are a
+                            * nearbyMaterialShowcaseSequence whole together.
+                            * */
+                        secondSingleShowCaseView.show(NearbyActivity.this);
+                    }
+                })
+                .build();
+
+        if (applicationPrefs.getBoolean("firstRunNearby", true)) {
+            applicationPrefs.edit().putBoolean("firstRunNearby", false).apply();
+            firstSingleShowCaseView.show(this);
+        }
     }
 
     private void lockNearbyView(boolean lock) {
diff --git a/app/src/main/java/fr/free/nrw/commons/nearby/NearbyMapFragment.java b/app/src/main/java/fr/free/nrw/commons/nearby/NearbyMapFragment.java
@@ -7,6 +7,7 @@
 import android.content.SharedPreferences;
 import android.content.pm.PackageManager;
 import android.graphics.Color;
+import android.graphics.Typeface;
 import android.net.Uri;
 import android.os.Bundle;
 import android.support.annotation.NonNull;
@@ -58,13 +59,14 @@
 import fr.free.nrw.commons.utils.UriDeserializer;
 import fr.free.nrw.commons.utils.ViewUtil;
 import timber.log.Timber;
+import uk.co.deanwild.materialshowcaseview.MaterialShowcaseView;
 
 import static android.app.Activity.RESULT_OK;
 import static android.content.pm.PackageManager.PERMISSION_GRANTED;
 
 public class NearbyMapFragment extends DaggerFragment {
 
-    private MapView mapView;
+    public MapView mapView;
     private List<NearbyBaseMarker> baseMarkerOptions;
     private fr.free.nrw.commons.location.LatLng curLatLng;
     public fr.free.nrw.commons.location.LatLng[] boundaryCoordinates;
@@ -111,6 +113,10 @@ public class NearbyMapFragment extends DaggerFragment {
     private final double CAMERA_TARGET_SHIFT_FACTOR_PORTRAIT = 0.06;
     private final double CAMERA_TARGET_SHIFT_FACTOR_LANDSCAPE = 0.04;
 
+    private boolean isSecondMaterialShowcaseDismissed;
+    private boolean isMapReady;
+    private MaterialShowcaseView thirdSingleShowCaseView;
+
     private Bundle bundleForUpdtes;// Carry information from activity about changed nearby places and current location
 
     @Inject
@@ -163,7 +169,6 @@ public void onCreate(Bundle savedInstanceState) {
     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container,
                              Bundle savedInstanceState) {
-
         Timber.d("onCreateView called");
         if (curLatLng != null) {
             Timber.d("curLatLng found, setting up map view...");
@@ -476,6 +481,7 @@ private void setupMapView(Bundle savedInstanceState) {
         mapView.getMapAsync(new OnMapReadyCallback() {
             @Override
             public void onMapReady(MapboxMap mapboxMap) {
+                ((NearbyActivity)getActivity()).setMapViewTutorialShowCase();
                 NearbyMapFragment.this.mapboxMap = mapboxMap;
                 updateMapSignificantly();
             }
@@ -519,6 +525,7 @@ private void addCurrentLocationMarker(MapboxMap mapboxMap) {
     private void addNearbyMarkerstoMapBoxMap() {
 
         mapboxMap.addMarkers(baseMarkerOptions);
+
         mapboxMap.setOnInfoWindowCloseListener(marker -> {
             if (marker == selected) {
                 bottomSheetDetailsBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
@@ -534,13 +541,15 @@ private void addNearbyMarkerstoMapBoxMap() {
             });
 
             mapboxMap.setOnMarkerClickListener(marker -> {
+
                 if (marker instanceof NearbyMarker) {
                     this.selected = marker;
                     NearbyMarker nearbyMarker = (NearbyMarker) marker;
                     Place place = nearbyMarker.getNearbyBaseMarker().getPlace();
                     passInfoToSheet(place);
                     bottomSheetListBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
                     bottomSheetDetailsBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
+
                 }
                 return false;
             });
@@ -634,7 +643,19 @@ private void showFAB() {
         addAnchorToSmallFABs(fabGallery, getActivity().findViewById(R.id.empty_view).getId());
 
         addAnchorToSmallFABs(fabCamera, getActivity().findViewById(R.id.empty_view1).getId());
-
+        thirdSingleShowCaseView = new MaterialShowcaseView.Builder(this.getActivity())
+                .setTarget(fabPlus)
+                .setDismissText(getString(R.string.showcase_view_got_it_button))
+                .setContentText(getString(R.string.showcase_view_plus_fab))
+                .setDelay(500) // optional but starting animations immediately in onCreate can make them choppy
+                .singleUse(ViewUtil.SHOWCASE_VIEW_ID_3) // provide a unique ID used to ensure it is only shown once
+                .setDismissStyle(Typeface.defaultFromStyle(Typeface.BOLD))
+                .build();
+
+        isMapReady = true;
+        if (isSecondMaterialShowcaseDismissed) {
+            thirdSingleShowCaseView.show(getActivity());
+        }
     }
 
 
@@ -791,6 +812,13 @@ public void setBundleForUpdtes(Bundle bundleForUpdtes) {
         this.bundleForUpdtes = bundleForUpdtes;
     }
 
+    public void onNearbyMaterialShowcaseDismissed() {
+        isSecondMaterialShowcaseDismissed = true;
+        if (isMapReady) {
+            thirdSingleShowCaseView.show(getActivity());
+        }
+    }
+
 
     @Override
     public void onStart() {
diff --git a/app/src/main/java/fr/free/nrw/commons/nearby/NearbyMaterialShowcaseSequence.java b/app/src/main/java/fr/free/nrw/commons/nearby/NearbyMaterialShowcaseSequence.java
@@ -0,0 +1,18 @@
+package fr.free.nrw.commons.nearby;
+
+import android.app.Activity;
+
+import uk.co.deanwild.materialshowcaseview.MaterialShowcaseSequence;
+import uk.co.deanwild.materialshowcaseview.ShowcaseConfig;
+
+
+public class NearbyMaterialShowcaseSequence extends MaterialShowcaseSequence {
+
+    public NearbyMaterialShowcaseSequence(Activity activity, String sequenceID) {
+        super(activity, sequenceID);
+        ShowcaseConfig config = new ShowcaseConfig();
+        config.setDelay(500); // half second between each showcase view
+        this.setConfig(config);
+        this.singleUse(sequenceID); // Display tutorial only once
+    }
+}
diff --git a/app/src/main/java/fr/free/nrw/commons/utils/ViewUtil.java b/app/src/main/java/fr/free/nrw/commons/utils/ViewUtil.java
@@ -10,6 +10,10 @@
 
 public class ViewUtil {
 
+    public static final String SHOWCASE_VIEW_ID_1 = "SHOWCASE_VIEW_ID_1";
+    public static final String SHOWCASE_VIEW_ID_2 = "SHOWCASE_VIEW_ID_2";
+    public static final String SHOWCASE_VIEW_ID_3 = "SHOWCASE_VIEW_ID_3";
+
     public static void showSnackbar(View view, int messageResourceId) {
         Snackbar.make(view, messageResourceId, Snackbar.LENGTH_SHORT).show();
     }
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -271,9 +271,15 @@
   <string name="about_translate_cancel">Cancel</string>
   <string name="retry">Retry</string>
 
+  <string name="showcase_view_got_it_button">Got it!</string>
+  <string name="showcase_view_whole_nearby_activity">These are the places near you that need pictures to illustrate their Wikipedia articles</string>
+  <string name="showcase_view_list_icon">Tapping this button brings up a list of these places</string>
+  <string name="showcase_view_plus_fab">You can upload a picture for any place from your gallery or camera</string>
+
   <string name="no_images_found">No images found!</string>
   <string name="error_loading_images">Error occurred while loading images.</string>
   <string name="image_uploaded_by">Uploaded by: %1$s</string>
+
   <string name="share_app_title">Share App</string>
   <string name="share_coordinates_not_present">Coordinates were not specified during image selection</string>
 

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,8 @@ dependencies {`
`25`	`25`	`transitive=true`
`26`	`26`	`}`
`27`	`27`
	`28`	`+ implementation "com.github.deano2390:MaterialShowcaseView:1.2.0"`
	`29`	`+`
`28`	`30`	`implementation "com.android.support:support-v4:$SUPPORT_LIB_VERSION"`
`29`	`31`	`implementation "com.android.support:appcompat-v7:$SUPPORT_LIB_VERSION"`
`30`	`32`	`implementation "com.android.support:design:$SUPPORT_LIB_VERSION"`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,10 @@`
`10`	`10`
`11`	`11`	`public class ViewUtil {`
`12`	`12`
	`13`	`+ public static final String SHOWCASE_VIEW_ID_1 = "SHOWCASE_VIEW_ID_1";`
	`14`	`+ public static final String SHOWCASE_VIEW_ID_2 = "SHOWCASE_VIEW_ID_2";`
	`15`	`+ public static final String SHOWCASE_VIEW_ID_3 = "SHOWCASE_VIEW_ID_3";`
	`16`	`+`
`13`	`17`	`public static void showSnackbar(View view, int messageResourceId) {`
`14`	`18`	`Snackbar.make(view, messageResourceId, Snackbar.LENGTH_SHORT).show();`
`15`	`19`	`}`