Added "Canteen" demo featuring Canteen's onboarding concept (https://…

…dribbble.com/shots/2767412-Canteen-Onboarding-Screens) of the awesome @JovieBrett
janheinrichmerker · Jun 24, 2016 · a76e350 · a76e350
1 parent 32bafa3
commit a76e350
Show file tree

Hide file tree

Showing 13 changed files with 257 additions and 34 deletions.
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
@@ -26,6 +26,10 @@
             android:name=".MainIntroActivity"
             android:theme="@style/Theme.Intro"/>
 
+        <activity
+            android:name=".CanteenIntroActivity"
+            android:theme="@style/Theme.Intro"/>
+
         <activity android:name=".SplashActivity"/>
 
         <activity

diff --git a/app/src/main/java/com/heinrichreimersoftware/materialintro/demo/CanteenIntroActivity.java b/app/src/main/java/com/heinrichreimersoftware/materialintro/demo/CanteenIntroActivity.java
@@ -0,0 +1,57 @@
+package com.heinrichreimersoftware.materialintro.demo;
+
+import android.os.Build;
+import android.os.Bundle;
+import android.text.SpannableString;
+import android.text.Spanned;
+import android.text.style.TypefaceSpan;
+
+import com.heinrichreimersoftware.materialintro.app.IntroActivity;
+import com.heinrichreimersoftware.materialintro.slide.SimpleSlide;
+
+public class CanteenIntroActivity extends IntroActivity {
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+
+        setButtonBackVisible(false);
+        setButtonNextVisible(false);
+        setButtonCtaVisible(true);
+        setButtonCtaTintMode(BUTTON_CTA_TINT_MODE_BACKGROUND);
+        TypefaceSpan labelSpan = new TypefaceSpan(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP ? "sans-serif-medium" : "sans serif");
+        SpannableString label = SpannableString.valueOf(getString(R.string.label_button_cta_canteen_intro));
+        label.setSpan(labelSpan, 0, label.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
+        setButtonCtaLabel(label);
+
+        addSlide(new SimpleSlide.Builder()
+                .title(R.string.title_canteen_intro1)
+                .description(R.string.description_canteen_intro1)
+                .image(R.drawable.art_canteen_intro1)
+                .background(R.color.color_canteen)
+                .backgroundDark(R.color.color_dark_canteen)
+                .layout(R.layout.slide_canteen)
+                .build());
+
+        addSlide(new SimpleSlide.Builder()
+                .title(R.string.title_canteen_intro2)
+                .description(R.string.description_canteen_intro2)
+                .image(R.drawable.art_canteen_intro2)
+                .background(R.color.color_canteen)
+                .backgroundDark(R.color.color_dark_canteen)
+                .layout(R.layout.slide_canteen)
+                .build());
+
+        addSlide(new SimpleSlide.Builder()
+                .title(R.string.title_canteen_intro3)
+                .description(R.string.description_canteen_intro3)
+                .image(R.drawable.art_canteen_intro3)
+                .background(R.color.color_canteen)
+                .backgroundDark(R.color.color_dark_canteen)
+                .layout(R.layout.slide_canteen)
+                .build());
+
+        autoplay(2500, INFINITE);
+    }
+
+}
diff --git a/app/src/main/java/com/heinrichreimersoftware/materialintro/demo/MainActivity.java b/app/src/main/java/com/heinrichreimersoftware/materialintro/demo/MainActivity.java
@@ -19,6 +19,7 @@ public class MainActivity extends AppCompatActivity {
 
     @BindView(R.id.toolbar) Toolbar toolbar;
     @BindView(R.id.start_intro) Button startIntro;
+    @BindView(R.id.start_canteen) Button startCanteen;
     @BindView(R.id.start_splash) Button startSplash;
     @BindView(R.id.option_fullscreen) CheckBox optionFullscreen;
     @BindView(R.id.option_scrollable) CheckBox optionScrollable;
@@ -55,6 +56,14 @@ public void onClick(View v) {
             }
         });
 
+        startCanteen.setOnClickListener(new View.OnClickListener() {
+            @Override
+            public void onClick(View v) {
+                Intent intent = new Intent(MainActivity.this, CanteenIntroActivity.class);
+                startActivity(intent);
+            }
+        });
+
         startSplash.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {

diff --git a/app/src/main/java/com/heinrichreimersoftware/materialintro/demo/MainIntroActivity.java b/app/src/main/java/com/heinrichreimersoftware/materialintro/demo/MainIntroActivity.java
@@ -182,8 +182,6 @@ public void onPageScrollStateChanged(int state) {
             }
         });
         */
-
-        autoplay(500, 2);
     }
 
 }
diff --git a/app/src/main/res/drawable-nodpi/art_canteen_intro1.png b/app/src/main/res/drawable-nodpi/art_canteen_intro1.png
diff --git a/app/src/main/res/drawable-nodpi/art_canteen_intro2.png b/app/src/main/res/drawable-nodpi/art_canteen_intro2.png
diff --git a/app/src/main/res/drawable-nodpi/art_canteen_intro3.png b/app/src/main/res/drawable-nodpi/art_canteen_intro3.png
diff --git a/app/src/main/res/layout-land/slide_canteen.xml b/app/src/main/res/layout-land/slide_canteen.xml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:baselineAligned="false"
+    android:clipToPadding="false"
+    android:clipChildren="false"
+    android:fitsSystemWindows="false"
+    android:padding="@dimen/mi_baseline">
+
+    <ImageView
+        android:id="@id/mi_image"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_weight="1"
+        android:layout_gravity="center"
+        android:gravity="center"
+        android:adjustViewBounds="true"
+        tools:ignore="ContentDescription"
+        tools:src="@android:drawable/sym_action_call"/>
+
+    <android.support.v4.widget.Space
+        android:layout_width="@dimen/mi_baseline"
+        android:layout_height="wrap_content"/>
+
+    <com.heinrichreimersoftware.materialintro.view.parallax.ParallaxLinearLayout
+        android:layout_width="0dp"
+        android:layout_height="match_parent"
+        android:layout_weight="1"
+        android:gravity="center"
+        android:orientation="vertical"
+        android:clipChildren="false"
+        android:clipToPadding="false">
+
+        <TextView
+            android:id="@id/mi_title"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:layout_parallaxFactor="0.5"
+            android:gravity="center"
+            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
+            android:fontFamily="sans-serif-medium"
+            tools:ignore="UnusedAttribute"
+            tools:text="Lorem ipsum"/>
+
+        <TextView
+            android:id="@id/mi_description"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="@dimen/mi_baseline"
+            app:layout_parallaxFactor="0.4"
+            android:gravity="center"
+            android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
+            android:textSize="15sp"
+            android:fontFamily="sans-serif-medium"
+            tools:ignore="UnusedAttribute"
+            tools:text="Lorem ipsum dolor sit amet, consectetur, adipisci velit, …"/>
+
+    </com.heinrichreimersoftware.materialintro.view.parallax.ParallaxLinearLayout>
+
+</LinearLayout>
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
@@ -123,41 +123,69 @@
 
     <LinearLayout
         android:layout_width="match_parent"
-        android:layout_height="?actionBarSize"
-        android:paddingLeft="@dimen/mi_baseline_half"
-        android:paddingRight="@dimen/mi_baseline_half"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        android:padding="@dimen/mi_baseline_half"
         android:background="?colorAccent"
         android:elevation="2dp"
         tools:ignore="UnusedAttribute"
         style="?buttonBarStyle">
 
-        <Button
-            android:id="@+id/start_intro"
-            android:layout_width="wrap_content"
-            android:layout_height="match_parent"
-            android:gravity="center"
-            android:text="@string/label_start_intro"
-            android:theme="@style/AppThemeDark"
-            style="?borderlessButtonStyle"/>
-
-        <TextView
-            android:layout_width="wrap_content"
-            android:layout_height="match_parent"
-            android:layout_marginLeft="@dimen/mi_baseline_half"
-            android:layout_marginRight="@dimen/mi_baseline_half"
-            android:gravity="center"
-            android:text="@string/label_or"
-            android:theme="@style/AppThemeDark"
-            android:textAppearance="@style/TextAppearance.AppCompat.Subhead"/>
-
-        <Button
-            android:id="@+id/start_splash"
-            android:layout_width="wrap_content"
-            android:layout_height="match_parent"
-            android:gravity="center_vertical|start"
-            android:text="@string/label_start_splash"
-            android:theme="@style/AppThemeDark"
-            style="?borderlessButtonStyle"/>
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
+
+            <Button
+                android:id="@+id/start_intro"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:gravity="center"
+                android:text="@string/label_start_intro"
+                android:theme="@style/AppThemeDark"
+                style="?borderlessButtonStyle"/>
+
+            <TextView
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_weight="1"
+                android:layout_marginLeft="@dimen/mi_baseline_half"
+                android:layout_marginRight="@dimen/mi_baseline_half"
+                android:text="@string/label_or"
+                android:theme="@style/AppThemeDark"
+                android:textAppearance="@style/TextAppearance.AppCompat.Subhead"/>
+
+        </LinearLayout>
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
+
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginLeft="@dimen/mi_baseline_half"
+                android:layout_marginRight="@dimen/mi_baseline_half"
+                android:text="@string/label_demos"
+                android:theme="@style/AppThemeDark"
+                android:textAppearance="@style/TextAppearance.AppCompat.Subhead"/>
+
+            <Button
+                android:id="@+id/start_canteen"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/label_start_canteen"
+                android:theme="@style/AppThemeDark"
+                style="?borderlessButtonStyle"/>
+
+            <Button
+                android:id="@+id/start_splash"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/label_start_splash"
+                android:theme="@style/AppThemeDark"
+                style="?borderlessButtonStyle"/>
+
+        </LinearLayout>
 
     </LinearLayout>
 

diff --git a/app/src/main/res/layout/slide_canteen.xml b/app/src/main/res/layout/slide_canteen.xml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.heinrichreimersoftware.materialintro.view.parallax.ParallaxLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:clipToPadding="false"
+    android:fitsSystemWindows="false"
+    android:gravity="center"
+    android:orientation="vertical"
+    android:padding="@dimen/mi_baseline">
+
+    <ImageView
+        android:id="@id/mi_image"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginBottom="@dimen/mi_baseline"
+        android:paddingLeft="?actionBarSize"
+        android:paddingRight="?actionBarSize"
+        android:gravity="center"
+        android:adjustViewBounds="true"
+        tools:ignore="ContentDescription"
+        tools:src="@android:drawable/sym_action_call"/>
+
+    <TextView
+        android:id="@id/mi_title"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="@dimen/mi_baseline"
+        app:layout_parallaxFactor="0.5"
+        android:gravity="center"
+        android:textAppearance="@style/TextAppearance.AppCompat.Headline"
+        android:fontFamily="sans-serif-medium"
+        tools:ignore="UnusedAttribute"
+        tools:text="Lorem ipsum"/>
+
+    <TextView
+        android:id="@id/mi_description"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="@dimen/mi_baseline"
+        app:layout_parallaxFactor="0.4"
+        android:gravity="center"
+        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
+        android:textSize="15sp"
+        android:fontFamily="sans-serif-medium"
+        tools:ignore="UnusedAttribute"
+        tools:text="Lorem ipsum dolor sit amet, consectetur, adipisci velit, …"/>
+
+</com.heinrichreimersoftware.materialintro.view.parallax.ParallaxLinearLayout>
diff --git a/app/src/main/res/values-de/strings.xml b/app/src/main/res/values-de/strings.xml
@@ -16,7 +16,9 @@
     <string name="label_option_get_started_enabled">\"Los geht\'s\"-Button aktivieren</string>
     <string name="label_start_intro">Intro starten</string>
     <string name="label_or">oder</string>
-    <string name="label_start_splash">Fake-Splashscreen</string>
+    <string name="label_demos">Demos: </string>
+    <string name="label_start_canteen">\"Canteen\"-Intro</string>
+    <string name="label_start_splash">Splashscreen</string>
 
     <string name="title_material_metaphor">Material ist die Metapher</string>
     <string name="title_material_bold">Kräftig, graphisch, bewusst</string>

diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
@@ -11,6 +11,7 @@
     <color name="color_permissions">#FFEB3B</color>
     <color name="color_custom_fragment_1">#E64A19</color>
     <color name="color_custom_fragment_2">#3F51B5</color>
+    <color name="color_canteen">#fdfdfd</color>
 
     <color name="color_dark_material_metaphor">#0277BD</color>
     <color name="color_dark_material_bold">#D81B60</color>
@@ -19,4 +20,5 @@
     <color name="color_dark_permissions">#FBC02D</color>
     <color name="color_dark_custom_fragment_1">#BF360C</color>
     <color name="color_dark_custom_fragment_2">#303F9F</color>
+    <color name="color_dark_canteen">#ebeef0</color>
 </resources>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -16,7 +16,9 @@
     <string name="label_option_get_started_enabled">Enable \"Get Started\" button</string>
     <string name="label_start_intro">Start intro</string>
     <string name="label_or">or</string>
-    <string name="label_start_splash">Start fake splash screen</string>
+    <string name="label_demos">Demos: </string>
+    <string name="label_start_canteen">\"Canteen\" intro</string>
+    <string name="label_start_splash">Splash screen</string>
 
     <string name="title_material_metaphor">Material is the metaphor</string>
     <string name="title_material_bold">Bold, graphic, intentional</string>
@@ -47,4 +49,12 @@
     <string name="title_fragment_custom">Take off!</string>
 
     <string name="label_activity_finish">Nothing here…\n…just a demo how to create a splash screen intro.</string>
+
+    <string name="title_canteen_intro1" translatable="false">Menus right on your screen</string>
+    <string name="title_canteen_intro2" translatable="false">Cash on delivery</string>
+    <string name="title_canteen_intro3" translatable="false">Choose what you like</string>
+    <string name="description_canteen_intro1" translatable="false">Looking for something to eat? Just browse the feed wherever you are.</string>
+    <string name="description_canteen_intro2" translatable="false">Order and we\'ll deliver the menu right in front of your door.</string>
+    <string name="description_canteen_intro3" translatable="false">Bookmark a menu you wanted to save and keep track of its status whether it\'s available or not.</string>
+    <string name="label_button_cta_canteen_intro" translatable="false">Get started</string>
 </resources>
-Original file line number
+Diff line change
@@ Expand Up / @@ -182,8 +182,6 @@ public void onPageScrollStateChanged(int state) { @@
                 }
             });
             */
-            autoplay(500, 2);
         }
     }