From b9e07e4573db0f656e2ba44ba8109a10b88a8fd4 Mon Sep 17 00:00:00 2001
From: Phillip Thelen <viirus@pherth.net>
Date: Wed, 12 Apr 2017 14:57:09 +0200
Subject: [PATCH] add multiple steps to tutorialViews

---
 .../res/drawable-hdpi/speechbubble_caret.png  | Bin 0 -> 618 bytes
 .../res/drawable-mdpi/speechbubble_caret.png  | Bin 0 -> 478 bytes
 .../res/drawable-xhdpi/speechbubble_caret.png | Bin 0 -> 738 bytes
 .../drawable-xxhdpi/speechbubble_caret.png    | Bin 0 -> 951 bytes
 Habitica/res/layout/overlay_tutorial.xml      |  39 ++++----
 Habitica/res/layout/speechbubble.xml          |  22 +++--
 Habitica/res/values/strings.tutorial.xml      |  15 ++-
 .../habitica/events/DisplayTutorialEvent.java |   3 +
 .../android/habitica/ui/SpeechBubbleView.java |  47 ++++++++-
 .../android/habitica/ui/TutorialView.java     |  90 +++++++++++++-----
 .../habitica/ui/activities/MainActivity.java  |  20 +++-
 .../habitica/ui/fragments/BaseFragment.java   |   8 +-
 .../tasks/TaskRecyclerViewFragment.java       |  17 +++-
 .../android/habitica/ui/views/Typewriter.java |  72 ++++++++++++++
 14 files changed, 272 insertions(+), 61 deletions(-)
 create mode 100644 Habitica/res/drawable-hdpi/speechbubble_caret.png
 create mode 100644 Habitica/res/drawable-mdpi/speechbubble_caret.png
 create mode 100644 Habitica/res/drawable-xhdpi/speechbubble_caret.png
 create mode 100644 Habitica/res/drawable-xxhdpi/speechbubble_caret.png
 create mode 100644 Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/Typewriter.java

diff --git a/Habitica/res/drawable-hdpi/speechbubble_caret.png b/Habitica/res/drawable-hdpi/speechbubble_caret.png
new file mode 100644
index 0000000000000000000000000000000000000000..a74021cdd54788ee42add42aa514fd60db3341f2
GIT binary patch
literal 618
zcmV-w0+s!VP)<h;3K|Lk000e1NJLTq001Wd000*V1^@s6h}l+{00001b5ch_0Itp)
z=>Px%BuPX;R7efYR=Y|AQ4pOQ6BCRff}(<GLQq5$K`|(bf`tZ*SlFf1$}h0-8~g?R
z06QN=v{Up8Y^;L479oxJ$U5gHS?+H3k$w0W*zC-`GiOecJv&zrn|4_!^5;2U5yXFM
zqD~}s#CG{gl7T}Jarn2Sn%$X)<inv*329dwC#2Dyy7sHSpi@!2*>ClXwj6oS_8m~A
zI?jLZD&o(NFS@^dqFVLMkQPReN+)P#ZIYs~t|pwgqip&>#Wp-+V*2czlJQ;sK`Tf?
zVSZ_xVsYblPyzh-zyq#Atb)F>zXE6=hjp=j@j@}$VXua`C)rI4i#ZYz!xMllUj`iD
z0k>h?hx^ICCd4*!*cXNCNB%7F#mXV-ALymoxiPqb4LHDSm{ew|(XSoak{r^^3Lee$
zQ*L6Y9l^s2>Vc!1qD*~Facs#UM{JdkS<k1f{Hd7{8XQiyLQi+pp<XvA6Zj71NKV#4
z!Nf{p6a3iC=d%Q*c`@Xp4)qO#GJ)%CuH=F$xKm|X(R3w;BEJguqD<f9Btahv_M*%{
z<Rn4U40ckmS7in!Ckb|-U_Z(Xg`5O&P_SQRhDOd#!M&+OM>Erkh}D|@=CRszThq#$
zGxR|Ze2PgSw_evMqR(JCGnef~lN&bnJ9?Ga0hwp8LJX%_+nH&HXI>9P4q)aPEE~AY
zOf!iek8z6DE;lrJnhvR3c&A7x___K@ne<Ue-2OMrH#HHLAe$gi1ONa407*qoM6N<$
Eg4gjGnE(I)

literal 0
HcmV?d00001

diff --git a/Habitica/res/drawable-mdpi/speechbubble_caret.png b/Habitica/res/drawable-mdpi/speechbubble_caret.png
new file mode 100644
index 0000000000000000000000000000000000000000..201cc54d03e0bea99510f49bb221679500eeac70
GIT binary patch
literal 478
zcmV<40U`d0P)<h;3K|Lk000e1NJLTq000^Q000jN1^@s6`cdEJ00001b5ch_0Itp)
z=>Px$m`OxIR5%f}RJ%?BK@`1rc?6;&QKA-TkZ6NaXp~5_7KPAQ`3trhdwxJa!H>{D
z0<F=))?j0zjg_IZTb1#iS%j4xc^I5zchB5=&OI488CI%fQTgVIi1PCM$Er|ayU3WV
zD*F*?e%=aN8Lbo7DH_W1&gGjn(q`4&MS53vf@4pQuk>*L@+Z$!I!?*u8E6|6;0)(#
z&)8UaVd;Y3IuK-oIG>ny8biFHaZK1Ine}ag5p5%Ec&~abl_TKv+Jc&jjROv}z=cMW
zWrm*RQvNVPo%6K|V(Z*u=8dhS3XcU{bTb48Txg)xGrFiABi+wuPvu()2K}7LE|D+b
z>ymZ0=z#++G~{SIgcdRyF_)SY4Ij$+>JyO=t#2j-dbGNR9ys7aqqPRA(Fi<5k^)o|
z*qEK0q||EMBS#HAaKP0X56db1YJ_&LB=$;}$*ZT4HZvr#U&2gAreEH~BUR3wk!l{>
z_J@wJ{_~NrLiNNb=qmO-QJe2dV!wp7H7+pliJ<A+iLz<kVXj%Dg-Y&3Ji|`?0=Hms
UO5^psasU7T07*qoM6N<$f_g*Sa{vGU

literal 0
HcmV?d00001

diff --git a/Habitica/res/drawable-xhdpi/speechbubble_caret.png b/Habitica/res/drawable-xhdpi/speechbubble_caret.png
new file mode 100644
index 0000000000000000000000000000000000000000..60a4345694e5d113b8b491b0b60fc273001376f3
GIT binary patch
literal 738
zcmV<80v-K{P)<h;3K|Lk000e1NJLTq001-q0015c1^@s6V^2N100001b5ch_0Itp)
z=>Px%oJmAMR9FesSTSo9K@@&(&%;EEQ!9-m5TYm+64Z!<v?h>)kYH^Ue}!7=Pti_n
zRJf~Cs1QgM5+qe1xz<9kkc{)~?OfjM&T_Livq$bV^XARG_rC9T?_*|}w5iVORr*Ie
zq|_qj6KBkObct4Yt^0=!cui_nllrMi-88X@7@2#T%u`L~7<dx{Ity$P(_a(2@M9nA
zrXd5o145W^yZeKfU%{UYOSV(Y0_@<G6ERZXR^QQ?dLv_}C%<X;`;iQd&42uCfo{#T
z?0yNq=k@MeJE$K@K7hGWis|dxC+%&?^<M`)I@~{zq1yd>4`%4@{rumWKU2H&f|*qw
zfc46m#dKqnUh3Cx&%`jI@a?%9GE}RNUIjA1q_Mfk0F09m79fFIJvKC{9_Gd#KANLz
z*RPmqZ6kW1mt}oL+eool3+IzkLfGO`zDAPJljQ}Pnr@y~iR_^^dZ5?99Evtr6OPCb
zQQ`JgB-s`rn!4PirR6)+Xber4X<j~RqBeTiR#Y^5y+89p#O=;U(yAg0v|7`&xHK<A
zQGC=yZOfo&z~Es{m2>5dL;0#InhU4b6GCF$$~TIl1rbU~)ueo*Dq1k1j1&%m)|oFv
z`9c&e3Zayg<IFdT@`Wl|G(st<_3npI<qK6b7a?zzb0vo;UkpWaVe(cvSMsRJ7faDx
zn1TqQVAV5UOhv1OP)5p2`C=<tZG=)%LzJ&n(ew>Df9rGs^^FCIf~$%8@*HQr*K!TF
zU6}8!Q|4Cn;}a^m?G}NR-#UwX{UgDmkZ)C{eAd1pw@zzs#YyxhWcrtW=gWOZGy7wW
z(Vvh3=DO`>-~6oaXl8$`u{J^gSoqEtS<zzs2$kzV`7-sZoO>Y?aOO+TePclPA1IgS
UrO@K#q5uE@07*qoM6N<$f`GAOBLDyZ

literal 0
HcmV?d00001

diff --git a/Habitica/res/drawable-xxhdpi/speechbubble_caret.png b/Habitica/res/drawable-xxhdpi/speechbubble_caret.png
new file mode 100644
index 0000000000000000000000000000000000000000..d53063c905193f7413e89c0c517cacf6e39aabd7
GIT binary patch
literal 951
zcmV;o14#UdP)<h;3K|Lk000e1NJLTq002$^001or1^@s60LoqI00001b5ch_0Itp)
z=>Px&aY;l$RA>e5o4;!mK@`W|+$CtPkR(;&MJ<9sYyujCK@coNA%(VDSonv;f5l2G
zOTl0#h>*fRz&c>3Vi7FNt@9mkhTXk4JGZwxKaSghurqIG-n{o^Za+J_8$sieeR#A<
z=h+Em*_O6-$D9H}oKj!xi^s>`VeRQt%Fq{2h{Tz;bw{m$)I@5dMT6A{hlV`ym4tXf
zf-<zbA{BrZQWK?3PLP6du#3avce3-VT%X0RN-dNoB^5-eZJOEphi|0T&x~OaD}vsN
z!;jCo)F)P)=`<L=l<V)rv=^=-b5|PhiCb43y1PjG^T!!|`SguOqY>{tQERW)ql5c9
zw6;FrBP<b=>ttVXvbT%0n0WX0HO_C+HpFZd4R;kKf^x}J3WotM(hjez(e)b}obM!U
zh!ruj#X?Z7uTwY-`cD;c#5sU%=jLVF7_Qn*Cu2v9h}B-i5l2w2f8{l<JfMoS=YL1^
zSzhmc|4Q@z`O@lu?#b&~f61~|DhOKE0d0#HuB)_FkQM>mIoPHP7nd!A<Czf?VzY{d
zyN3#ba*@{(PCR)1hnB=sc_)3!Ia^s-roFq{1Zt&H5DQ{LY-~X;GAETA+krRM&T!sH
z+Xg{7>1qoHC-Xwuwg}pqa7sMvX(?UOwn<P<xLQ=@9HdCvwh7ARJ=0IM;3zTD`XFc_
z-*Ka{a4C`27eT!U2dAl!))zs&2{#t6^69bfJ*`iIdKFHI7m2jK3CaoAn5vx9kfaSk
zP%g*DaNwMV+S7(2D3_xb;X;r$Bte4-hl!>l?cP-`rm1Wp3CacJWyR@<oO{}>^_iX?
zhbE}bCx7%R942b}>2VB#<^|JrFI3ge^T#$w8;hX%JapariqjJ{C2dTCnjCVKV8S&a
zZES+(^fJ|8!ePc)NxLiQ+w?uC$+)FTP~pbnRqts_q*Vl!Hn!Aw56X^jU<@uCVx5+>
zsSuRYHyBm9$z7zy80#y&n(slm`J33HtT+>}<LR+gv>D!mnmJplL|t*n!SzMdM4nT8
zNi;FWgCXvUlL@&<Tg-X7FNum{{IsGAhqPRKT9tZ4f^yO)A)FG=_3g3cTU;)w5Vq*o
zxN?##X(JP~93$GvtT+?g1ZnGkNo0I^tR%PMkgFjr8oB>wL9;6k1*CYl@aO2(ot`%Z
Z{sD_;MmL})OFsYr002ovPDHLkV1hSo#uESl

literal 0
HcmV?d00001

diff --git a/Habitica/res/layout/overlay_tutorial.xml b/Habitica/res/layout/overlay_tutorial.xml
index a46327175..adef2b2c6 100644
--- a/Habitica/res/layout/overlay_tutorial.xml
+++ b/Habitica/res/layout/overlay_tutorial.xml
@@ -1,26 +1,29 @@
 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-                android:layout_height="match_parent"
-                android:layout_width="match_parent"
-                xmlns:app="http://schemas.android.com/apk/res-auto"
-                android:clickable="true"
-                android:fitsSystemWindows="true"
-                android:id="@+id/background">
+    android:layout_height="match_parent"
+    android:layout_width="match_parent"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:clickable="true"
+    android:fitsSystemWindows="true"
+    android:id="@+id/background">
     <View android:layout_height="match_parent"
-          android:layout_width="match_parent"
-          android:background="@android:color/black"
-          android:alpha="0.6"/>
+        android:layout_width="match_parent"
+        android:background="@android:color/black"
+        android:alpha="0.6"/>
     <FrameLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:paddingLeft="16dp"
+        android:paddingRight="16dp"
+        android:paddingBottom="24dp"
+        android:layout_alignParentBottom="true"
+        android:fitsSystemWindows="true"
+        android:layout_marginBottom="?actionBarSize">
+        <com.habitrpg.android.habitica.ui.SpeechBubbleView
+            android:id="@+id/speech_bubble"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:padding="16dp"
-            android:layout_alignParentBottom="true"
-            android:fitsSystemWindows="true"
-            android:layout_marginBottom="?actionBarSize">
-        <com.habitrpg.android.habitica.ui.SpeechBubbleView
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                app:namePlate="Justin"
-                app:npcDrawable="@drawable/justin_textbox"/>
+            app:namePlate="Justin"
+            app:npcDrawable="@drawable/justin_textbox"/>
     </FrameLayout>
 </RelativeLayout>
diff --git a/Habitica/res/layout/speechbubble.xml b/Habitica/res/layout/speechbubble.xml
index 306a71d36..78824e57c 100644
--- a/Habitica/res/layout/speechbubble.xml
+++ b/Habitica/res/layout/speechbubble.xml
@@ -19,16 +19,16 @@
         android:layout_marginTop="46dp"
         android:background="@drawable/white_rounded_bg"
         android:orientation="vertical"
-        android:paddingBottom="14dp"
+        android:paddingBottom="16dp"
         android:paddingLeft="21dp"
         android:paddingRight="21dp"
-        android:paddingTop="16dp">
+        android:paddingTop="24dp"
+        android:layout_marginBottom="10dp">
 
-        <TextView
+        <com.habitrpg.android.habitica.ui.views.Typewriter
             android:id="@+id/textView"
-            style="@style/Body1"
+            style="@style/Subheader1"
             android:layout_width="match_parent"
-
             android:layout_height="wrap_content"
             tools:text="@string/welcome_text" />
 
@@ -37,7 +37,8 @@
             style="?android:attr/buttonBarStyle"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
-            android:orientation="horizontal">
+            android:orientation="horizontal"
+            android:layout_marginTop="8dp">
 
             <Button
                 android:id="@+id/dismissButton"
@@ -61,6 +62,15 @@
         </LinearLayout>
     </LinearLayout>
 
+    <ImageView
+        android:id="@+id/continue_indicator"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:src="@drawable/speechbubble_caret"
+        android:layout_gravity="bottom|center"
+        android:visibility="gone"
+        tools:visibility="visible"/>
+
     <TextView
             android:id="@+id/name_plate"
             android:layout_width="wrap_content"
diff --git a/Habitica/res/values/strings.tutorial.xml b/Habitica/res/values/strings.tutorial.xml
index 47155e3a5..a2a22de7e 100644
--- a/Habitica/res/values/strings.tutorial.xml
+++ b/Habitica/res/values/strings.tutorial.xml
@@ -1,9 +1,16 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <string name="tutorial_habits">Complete Positive Habits to earn gold and experience! Negative Habits will hurt your avatar if you tap them, so avoid them in real life!</string>
-    <string name="tutorial_dailies">Defeat your repeating Daily tasks to gain gold and experience. Danger! Dailies will hurt your avatar if you don\'t complete them in time.</string>
-    <string name="tutorial_todos">Complete your To-Dos in real life, then check them off for GOLD and EXPERIENCE so you can earn Rewards and unlock new features!</string>
-    <string name="tutorial_rewards">These are your Rewards! Earn gold by completing real-world Habits, Dailies, and To-Dos. Then spend it on in-game Rewards or custom real-world Rewards!</string>
+    <string name="tutorial_overview">Here we are! I’ve filled out some tasks for you based on your interests. Try adding a few of your own. You can edit any task by tapping the title.</string>
+    <string name="tutorial_habits_1">First up is Habits. They can be positive Habits you want to improve or negative Habits you want to quit.</string>
+    <string name="tutorial_habits_2">Every time you do a positive Habit, tap the + to get experience and gold!</string>
+    <string name="tutorial_habits_3">If you slip up and do a negative Habit, tapping the - will reduce your avatar’s health to help you stay accountable.</string>
+    <string name="tutorial_habits_4">Give it a shot! You can explore the other task types through the bottom navigation.</string>
+    <string name="tutorial_dailies_1">Make Dailies for time sensitive tasks that need to be done on a regular schedule.</string>
+    <string name="tutorial_dailies_2">Be careful — if you miss one, your avatar will take damage overnight. Checking them off consistently brings great rewards!</string>
+    <string name="tutorial_todos_1">Use To-dos to keep track of tasks you need to do just once.</string>
+    <string name="tutorial_todos_2">If your To-do has to be done by a certain time, set a due date. Looks like you can check one off — go ahead!</string>
+    <string name="tutorial_rewards_1">Buy gear for your avatar with the gold you earn!</string>
+    <string name="tutorial_rewards_2">You can also make real-world Custom Rewards based on what motivates you.</string>
 
     <string name="tutorial_equipment">When you buy equipment, it appears here. Your Battle Gear affects your stats, and your Costume (if enabled) affects what your avatar wears.</string>
     <string name="tutorial_items">Earn items by completing tasks and leveling up. Tap on an item to use it!</string>
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/events/DisplayTutorialEvent.java b/Habitica/src/main/java/com/habitrpg/android/habitica/events/DisplayTutorialEvent.java
index fe30a3f1d..c8bf83d69 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/events/DisplayTutorialEvent.java
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/events/DisplayTutorialEvent.java
@@ -2,6 +2,8 @@ package com.habitrpg.android.habitica.events;
 
 import com.magicmicky.habitrpgwrapper.lib.models.TutorialStep;
 
+import java.util.List;
+
 /**
  * Created by viirus on 26/01/16.
  */
@@ -10,4 +12,5 @@ public class DisplayTutorialEvent {
     public TutorialStep step;
     public String tutorialText;
 
+    public List<String> tutorialTexts;
 }
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/SpeechBubbleView.java b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/SpeechBubbleView.java
index c4a6db86e..f4e8c8ab3 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/SpeechBubbleView.java
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/SpeechBubbleView.java
@@ -2,6 +2,7 @@ package com.habitrpg.android.habitica.ui;
 
 
 import com.habitrpg.android.habitica.R;
+import com.habitrpg.android.habitica.ui.views.Typewriter;
 
 import android.content.Context;
 import android.content.res.TypedArray;
@@ -9,6 +10,8 @@ import android.graphics.drawable.Drawable;
 import android.util.AttributeSet;
 import android.view.View;
 import android.view.ViewGroup;
+import android.view.animation.Animation;
+import android.view.animation.AnimationUtils;
 import android.widget.FrameLayout;
 import android.widget.ImageView;
 import android.widget.TextView;
@@ -16,13 +19,13 @@ import android.widget.TextView;
 import butterknife.BindView;
 import butterknife.ButterKnife;
 
-public class SpeechBubbleView extends FrameLayout {
+public class SpeechBubbleView extends FrameLayout implements View.OnClickListener {
 
     @BindView(R.id.name_plate)
     TextView namePlate;
 
     @BindView(R.id.textView)
-    TextView textView;
+    Typewriter textView;
 
     @BindView(R.id.npc_image_view)
     ImageView npcImageView;
@@ -30,6 +33,10 @@ public class SpeechBubbleView extends FrameLayout {
     @BindView(R.id.confirmation_buttons)
     ViewGroup confirmationButtons;
 
+    @BindView(R.id.continue_indicator)
+    View continueIndicator;
+    private ShowNextListener showNextListener;
+
     public SpeechBubbleView(Context context, AttributeSet attrs) {
         super(context, attrs);
 
@@ -51,7 +58,43 @@ public class SpeechBubbleView extends FrameLayout {
         }
 
         confirmationButtons.setVisibility(View.GONE);
+
+        this.setOnClickListener(this);
     }
 
 
+    public void setConfirmationButtonVisibility(int visibility) {
+        confirmationButtons.setVisibility(visibility);
+    }
+
+    public void animateText(String text) {
+        this.textView.animateText(text);
+    }
+
+    public void setText(String text) {
+        this.textView.setText(text);
+    }
+
+    public void setHasMoreContent(Boolean hasMoreContent) {
+        continueIndicator.setVisibility(hasMoreContent ? View.VISIBLE : View.GONE);
+    }
+
+    public void setShowNextListener(ShowNextListener listener) {
+        showNextListener = listener;
+    }
+
+    @Override
+    public void onClick(View v) {
+        if (textView.isAnimating()) {
+            textView.stopTextAnimation();
+        } else {
+            if (showNextListener != null) {
+                showNextListener.showNextStep();
+            }
+        }
+    }
+
+    public interface ShowNextListener {
+        void showNextStep();
+    }
 }
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/TutorialView.java b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/TutorialView.java
index 40d1c8ed0..92e08aedd 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/TutorialView.java
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/TutorialView.java
@@ -1,63 +1,103 @@
 package com.habitrpg.android.habitica.ui;
 
+import android.content.Context;
+import android.support.annotation.Nullable;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.widget.Button;
+import android.widget.FrameLayout;
+import android.widget.RelativeLayout;
+
 import com.habitrpg.android.habitica.R;
 import com.magicmicky.habitrpgwrapper.lib.models.TutorialStep;
 
-import android.content.Context;
-import android.view.LayoutInflater;
-import android.view.View;
-import android.view.ViewGroup;
-import android.widget.Button;
-import android.widget.FrameLayout;
-import android.widget.RelativeLayout;
-import android.widget.TextView;
-
-import java.util.Objects;
+import java.util.List;
 
 import butterknife.BindView;
 import butterknife.ButterKnife;
+import butterknife.OnClick;
 
-public class TutorialView extends FrameLayout implements View.OnClickListener {
+public class TutorialView extends FrameLayout {
 
     public TutorialStep step;
+    @Nullable
     public OnTutorialReaction onReaction;
-    @BindView(R.id.textView)
-    TextView tutorialTextView;
+    @BindView(R.id.speech_bubble)
+    SpeechBubbleView speechBubbleView;
     @BindView(R.id.background)
     RelativeLayout background;
     @BindView(R.id.dismissButton)
     Button dismissButton;
     @BindView(R.id.completeButton)
     Button completeButton;
-    @BindView(R.id.confirmation_buttons)
-    ViewGroup confirmationButtons;
 
-    public TutorialView(Context context, TutorialStep step, OnTutorialReaction onReaction) {
+    private List<String> tutorialTexts;
+    private int currentTextIndex;
+
+    public TutorialView(Context context, TutorialStep step, @Nullable OnTutorialReaction onReaction) {
         super(context);
         LayoutInflater mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
         mInflater.inflate(R.layout.overlay_tutorial, this, true);
         ButterKnife.bind(this);
-        background.setOnClickListener(this);
-        dismissButton.setOnClickListener(this);
-        completeButton.setOnClickListener(this);
-        confirmationButtons.setVisibility(View.VISIBLE);
+        speechBubbleView.setConfirmationButtonVisibility(View.GONE);
+        speechBubbleView.setShowNextListener(this::displayNextTutorialText);
         this.step = step;
         this.onReaction = onReaction;
     }
 
     public void setTutorialText(String text) {
-        this.tutorialTextView.setText(text);
+        this.speechBubbleView.animateText(text);
+        speechBubbleView.setConfirmationButtonVisibility(View.VISIBLE);
     }
 
-    @Override
-    public void onClick(View v) {
-        if (Objects.equals(v, background) || Objects.equals(v, completeButton)) {
+    public void setTutorialTexts(List<String> texts) {
+        tutorialTexts = texts;
+        currentTextIndex = -1;
+        displayNextTutorialText();
+    }
+
+    private void displayNextTutorialText() {
+        currentTextIndex++;
+        if (currentTextIndex < tutorialTexts.size()) {
+            speechBubbleView.animateText(tutorialTexts.get(currentTextIndex));
+            if (isDisplayingLastStep()) {
+                speechBubbleView.setConfirmationButtonVisibility(View.VISIBLE);
+                speechBubbleView.setHasMoreContent(false);
+            } else {
+                speechBubbleView.setHasMoreContent(true);
+            }
+        }
+    }
+
+    @OnClick(R.id.completeButton)
+    public void completeButtonClicked() {
+        if (this.onReaction != null) {
             this.onReaction.onTutorialCompleted(this.step);
-        } else if (Objects.equals(v, dismissButton)) {
+        }
+    }
+
+    @OnClick(R.id.dismissButton)
+    public void dismissButtonClicked() {
+        if (this.onReaction != null) {
             this.onReaction.onTutorialDeferred(this.step);
         }
     }
 
+    @OnClick(R.id.background)
+    public void backgroundClicked() {
+        if (isDisplayingLastStep()) {
+            if (this.onReaction != null) {
+                this.onReaction.onTutorialCompleted(this.step);
+            }
+        } else {
+            speechBubbleView.onClick(speechBubbleView);
+        }
+    }
+
+    private boolean isDisplayingLastStep() {
+        return currentTextIndex == (tutorialTexts.size()-1);
+    }
+
     public interface OnTutorialReaction {
         void onTutorialCompleted(TutorialStep step);
 
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/MainActivity.java b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/MainActivity.java
index ae82b62d0..d74748bea 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/MainActivity.java
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/MainActivity.java
@@ -869,7 +869,11 @@ public class MainActivity extends BaseActivity implements Action1<Throwable>, Ha
 
     @Subscribe
     public void onEvent(DisplayTutorialEvent tutorialEvent) {
-        this.displayTutorialStep(tutorialEvent.step, tutorialEvent.tutorialText);
+        if (tutorialEvent.tutorialText != null) {
+            this.displayTutorialStep(tutorialEvent.step, tutorialEvent.tutorialText);
+        } else {
+            this.displayTutorialStep(tutorialEvent.step, tutorialEvent.tutorialTexts);
+        }
     }
 
     @Subscribe
@@ -1091,6 +1095,20 @@ public class MainActivity extends BaseActivity implements Action1<Throwable>, Ha
         AmplitudeManager.sendEvent("tutorial", AmplitudeManager.EVENT_CATEGORY_BEHAVIOUR, AmplitudeManager.EVENT_HITTYPE_EVENT, additionalData);
     }
 
+    private void displayTutorialStep(TutorialStep step, List<String> texts) {
+        TutorialView view = new TutorialView(this, step, this);
+        view.setTutorialTexts(texts);
+        view.onReaction = this;
+        this.overlayLayout.addView(view);
+        this.activeTutorialView = view;
+
+        Map<String, Object> additionalData = new HashMap<>();
+        additionalData.put("eventLabel", step.getIdentifier() + "-android");
+        additionalData.put("eventValue", step.getIdentifier());
+        additionalData.put("complete", false);
+        AmplitudeManager.sendEvent("tutorial", AmplitudeManager.EVENT_CATEGORY_BEHAVIOUR, AmplitudeManager.EVENT_HITTYPE_EVENT, additionalData);
+    }
+
     @Override
     public void onTutorialCompleted(TutorialStep step) {
         String path = "flags.tutorial." + step.getTutorialGroup() + "." + step.getIdentifier();
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/BaseFragment.java b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/BaseFragment.java
index 4f3c3a59b..0a1705a4f 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/BaseFragment.java
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/BaseFragment.java
@@ -25,6 +25,7 @@ import org.greenrobot.eventbus.EventBusException;
 
 import java.util.Date;
 import java.util.HashMap;
+import java.util.List;
 import java.util.Map;
 
 import butterknife.ButterKnife;
@@ -41,7 +42,11 @@ public abstract class BaseFragment extends DialogFragment {
             if (step != null && !step.getWasCompleted() && (step.getDisplayedOn() == null || (new Date().getTime() - step.getDisplayedOn().getTime()) > 86400000)) {
                 DisplayTutorialEvent event = new DisplayTutorialEvent();
                 event.step = step;
-                event.tutorialText = tutorialText;
+                if (tutorialText != null) {
+                    event.tutorialText = tutorialText;
+                } else {
+                    event.tutorialTexts = tutorialTexts;
+                }
                 EventBus.getDefault().post(event);
             }
         }
@@ -56,6 +61,7 @@ public abstract class BaseFragment extends DialogFragment {
             return true;
         }
     };
+    public List<String> tutorialTexts;
 
     @Override
     public void setUserVisibleHint(boolean isVisibleToUser) {
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/tasks/TaskRecyclerViewFragment.java b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/tasks/TaskRecyclerViewFragment.java
index fe8b08972..a5fee5f77 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/tasks/TaskRecyclerViewFragment.java
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/tasks/TaskRecyclerViewFragment.java
@@ -43,6 +43,8 @@ import com.magicmicky.habitrpgwrapper.lib.models.tasks.Task;
 import org.greenrobot.eventbus.EventBus;
 import org.greenrobot.eventbus.Subscribe;
 
+import java.util.Arrays;
+
 import javax.inject.Inject;
 import javax.inject.Named;
 
@@ -100,22 +102,29 @@ public class TaskRecyclerViewFragment extends BaseFragment implements View.OnCli
         switch (fragment.classType) {
             case Task.TYPE_HABIT: {
                 fragment.tutorialStepIdentifier = "habits";
-                fragment.tutorialText = context.getString(R.string.tutorial_habits);
+                fragment.tutorialTexts = Arrays.asList(context.getString(R.string.tutorial_overview),
+                        context.getString(R.string.tutorial_habits_1),
+                        context.getString(R.string.tutorial_habits_2),
+                        context.getString(R.string.tutorial_habits_3),
+                        context.getString(R.string.tutorial_habits_4));
                 break;
             }
             case Task.FREQUENCY_DAILY: {
                 fragment.tutorialStepIdentifier = "dailies";
-                fragment.tutorialText = context.getString(R.string.tutorial_dailies);
+                fragment.tutorialTexts = Arrays.asList(context.getString(R.string.tutorial_dailies_1),
+                        context.getString(R.string.tutorial_dailies_2));
                 break;
             }
             case Task.TYPE_TODO: {
                 fragment.tutorialStepIdentifier = "todos";
-                fragment.tutorialText = context.getString(R.string.tutorial_todos);
+                fragment.tutorialTexts = Arrays.asList(context.getString(R.string.tutorial_todos_1),
+                        context.getString(R.string.tutorial_todos_2));
                 break;
             }
             case Task.TYPE_REWARD: {
                 fragment.tutorialStepIdentifier = "rewards";
-                fragment.tutorialText = context.getString(R.string.tutorial_rewards);
+                fragment.tutorialTexts = Arrays.asList(context.getString(R.string.tutorial_rewards_1),
+                        context.getString(R.string.tutorial_rewards_2));
                 break;
             }
         }
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/Typewriter.java b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/Typewriter.java
new file mode 100644
index 000000000..97ac12100
--- /dev/null
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/Typewriter.java
@@ -0,0 +1,72 @@
+package com.habitrpg.android.habitica.ui.views;
+
+
+import android.content.Context;
+import android.os.Handler;
+import android.support.v4.content.ContextCompat;
+import android.text.Spannable;
+import android.text.SpannableStringBuilder;
+import android.text.style.ForegroundColorSpan;
+import android.util.AttributeSet;
+
+import com.habitrpg.android.habitica.R;
+
+// http://stackoverflow.com/a/6700718/1315039
+public class Typewriter extends android.support.v7.widget.AppCompatTextView {
+
+    private SpannableStringBuilder stringBuilder;
+    private Object visibleSpan;
+    private Object hiddenSpan;
+    private int index;
+    private long delay = 30;
+
+
+    public Typewriter(Context context) {
+        super(context);
+        setupTextColors(context);
+    }
+
+    public Typewriter(Context context, AttributeSet attrs) {
+        super(context, attrs);
+        setupTextColors(context);
+    }
+
+    private void setupTextColors(Context context) {
+        visibleSpan = new ForegroundColorSpan(ContextCompat.getColor(context, R.color.textColorLight));
+        hiddenSpan = new ForegroundColorSpan(ContextCompat.getColor(context, R.color.transparent));
+    }
+
+    private Handler handler = new Handler();
+    private Runnable characterAdder = new Runnable() {
+        @Override
+        public void run() {
+            stringBuilder.setSpan(visibleSpan, 0, index++, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
+            setText(stringBuilder);
+            if(index <= stringBuilder.length()) {
+                handler.postDelayed(characterAdder, delay);
+            }
+        }
+    };
+
+    public void animateText(CharSequence text) {
+        stringBuilder = new SpannableStringBuilder(text);
+        stringBuilder.setSpan(hiddenSpan, 0, stringBuilder.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
+        index = 0;
+
+        setText(stringBuilder);
+        handler.removeCallbacks(characterAdder);
+        handler.postDelayed(characterAdder, delay);
+    }
+
+    public void setCharacterDelay(long millis) {
+        delay = millis;
+    }
+
+    public boolean isAnimating() {
+        return index < stringBuilder.length();
+    }
+
+    public void stopTextAnimation() {
+        index = stringBuilder.length();
+    }
+}