Implement fake chat view

res/drawable/fake_chat_view_incoming_message_background.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <solid  android:color="@color/accent" />
+
+    <corners android:radius="@dimen/fake_chat_view_bubble_corner_radius" />
+</shape>

res/drawable/fake_chat_view_outgoing_message_background.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <solid  android:color="@color/fake_chat_bubble_background" />
+
+    <corners android:radius="@dimen/fake_chat_view_bubble_corner_radius" />
+</shape>

res/layout/activity_landing.xml

@@ -21,11 +21,11 @@
         android:textColor="@color/text"
         android:text="Your Session begins here..." />
     
-    <View
+    <org.thoughtcrime.securesms.loki.redesign.FakeChatView
+        android:id="@+id/fakeChatView"
         android:layout_width="match_parent"
-        android:layout_height="234dp"
+        android:layout_height="@dimen/fake_chat_view_height"
-        android:layout_marginTop="@dimen/medium_spacing"
+        android:layout_marginTop="@dimen/medium_spacing" />
-        android:background="@color/red" />
 
     <View
         android:layout_width="match_parent"

res/layout/fake_chat_content_view.xml

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:paddingLeft="@dimen/very_large_spacing"
+    android:paddingRight="@dimen/very_large_spacing"
+    android:orientation="vertical">
+
+    <TextView
+        style="@style/FakeChatViewOutgoingMessageBubble"
+        android:id="@+id/bubble1"
+        android:layout_width="@dimen/fake_chat_view_bubble_width"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="@dimen/medium_spacing"
+        android:text="What's Session?"
+        android:layout_gravity="right" />
+
+    <TextView
+        style="@style/FakeChatViewIncomingMessageBubble"
+        android:id="@+id/bubble2"
+        android:layout_width="@dimen/fake_chat_view_bubble_width"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="@dimen/medium_spacing"
+        android:text="It's a secure, decentralized cross-platform private messaging app"
+        android:layout_gravity="left" />
+
+    <TextView
+        style="@style/FakeChatViewOutgoingMessageBubble"
+        android:id="@+id/bubble3"
+        android:layout_width="@dimen/fake_chat_view_bubble_width"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="@dimen/medium_spacing"
+        android:text="So it doesn't collect my personal information or my conversation metadata? How's it work?"
+        android:layout_gravity="right" />
+
+    <TextView
+        style="@style/FakeChatViewIncomingMessageBubble"
+        android:id="@+id/bubble4"
+        android:layout_width="@dimen/fake_chat_view_bubble_width"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="@dimen/medium_spacing"
+        android:text="Using a combination of advanced anonymous routing and end-to-end encryption technologies."
+        android:layout_gravity="left" />
+
+    <TextView
+        style="@style/FakeChatViewIncomingMessageBubble"
+        android:id="@+id/bubble5"
+        android:layout_width="@dimen/fake_chat_view_bubble_width"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="@dimen/medium_spacing"
+        android:text="Friends don't let friends use compromised messengers. You're welcome."
+        android:layout_gravity="left" />
+
+</LinearLayout>

res/values/colors.xml

@@ -4,6 +4,8 @@
     <!-- Session -->
     <color name="accent">#00F782</color>
     <color name="text">#FFFFFF</color>
+    <color name="fake_chat_bubble_background">#3F4146</color>
+    <color name="fake_chat_bubble_text">#000000</color>
     <!-- Session -->
 
     <!-- Loki -->

res/values/dimens.xml

@@ -15,8 +15,12 @@
     <dimen name="medium_button_height">48dp</dimen>
     <dimen name="border_thickness">2dp</dimen>
     <dimen name="text_view_corner_radius">8dp</dimen>
+    <dimen name="fake_chat_view_bubble_width">224dp</dimen>
+    <dimen name="fake_chat_view_bubble_corner_radius">10dp</dimen>
+    <dimen name="fake_chat_view_height">234dp</dimen>
 
     <!-- Distances -->
+    <dimen name="small_spacing">8dp</dimen>
     <dimen name="medium_spacing">16dp</dimen>
     <dimen name="large_spacing">24dp</dimen>
     <dimen name="very_large_spacing">35dp</dimen>

res/values/styles.xml

@@ -36,6 +36,30 @@
         <item name="android:textCursorDrawable">@drawable/session_edit_text_cursor</item>
         <item name="android:maxLines">1</item>
     </style>
+
+    <style name="FakeChatViewIncomingMessageBubble">
+        <item name="android:background">@drawable/fake_chat_view_incoming_message_background</item>
+        <item name="android:paddingLeft">@dimen/medium_spacing</item>
+        <item name="android:paddingTop">12dp</item>
+        <item name="android:paddingRight">@dimen/medium_spacing</item>
+        <item name="android:paddingBottom">12dp</item>
+        <item name="android:textSize">@dimen/medium_font_size</item>
+        <item name="android:textStyle">bold</item>
+        <item name="android:textColor">@color/fake_chat_bubble_text</item>
+        <item name="android:elevation">20dp</item>
+    </style>
+
+    <style name="FakeChatViewOutgoingMessageBubble">
+        <item name="android:background">@drawable/fake_chat_view_outgoing_message_background</item>
+        <item name="android:paddingLeft">@dimen/medium_spacing</item>
+        <item name="android:paddingTop">12dp</item>
+        <item name="android:paddingRight">@dimen/medium_spacing</item>
+        <item name="android:paddingBottom">12dp</item>
+        <item name="android:textSize">@dimen/medium_font_size</item>
+        <item name="android:textStyle">bold</item>
+        <item name="android:textColor">@color/text</item>
+        <item name="android:elevation">20dp</item>
+    </style>
     <!-- Session -->
 
     <style name="NoAnimation.Theme.BlackScreen" parent="Theme.AppCompat.NoActionBar">

src/org/thoughtcrime/securesms/loki/redesign/FakeChatView.kt

@@ -0,0 +1,74 @@
+package org.thoughtcrime.securesms.loki.redesign
+
+import android.content.Context
+import android.content.Context.LAYOUT_INFLATER_SERVICE
+import android.os.Handler
+import android.util.AttributeSet
+import android.view.LayoutInflater
+import android.view.View
+import android.widget.ScrollView
+import kotlinx.android.synthetic.main.fake_chat_content_view.view.*
+import network.loki.messenger.R
+
+
+class FakeChatView : ScrollView {
+
+    // region Settings
+    private val spacing = context.resources.getDimension(R.dimen.medium_spacing)
+    private val startDelay: Long = 2000
+    private val delayBetweenMessages: Long = 3000
+    private val animationDuration: Long = 400
+    // endregion
+
+    // region Lifecycle
+    constructor(context: Context) : super(context) {
+        setUpViewHierarchy()
+    }
+
+    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
+        setUpViewHierarchy()
+    }
+
+    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
+        setUpViewHierarchy()
+    }
+
+    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int, defStyleRes: Int) : super(context, attrs, defStyleAttr, defStyleRes) {
+        setUpViewHierarchy()
+    }
+
+    private fun setUpViewHierarchy() {
+        val inflater = context.applicationContext.getSystemService(LAYOUT_INFLATER_SERVICE) as LayoutInflater
+        val contentView = inflater.inflate(R.layout.fake_chat_content_view, null)
+        addView(contentView)
+        isVerticalScrollBarEnabled = false
+    }
+    // endregion
+
+    // region Animation
+    fun startAnimating() {
+        listOf( bubble1, bubble2, bubble3, bubble4, bubble5 ).forEach { it.alpha = 0.0f }
+        fun show(view: View) {
+            view.animate().alpha(1.0f).setDuration(animationDuration).start()
+        }
+        Handler().postDelayed({
+            show(bubble1)
+            Handler().postDelayed({
+                show(bubble2)
+                Handler().postDelayed({
+                    show(bubble3)
+                    smoothScrollTo(0, (bubble1.height + spacing).toInt())
+                    Handler().postDelayed({
+                        show(bubble4)
+                        smoothScrollTo(0, (bubble1.height + spacing).toInt() + (bubble2.height + spacing).toInt())
+                        Handler().postDelayed({
+                            show(bubble5)
+                            smoothScrollTo(0, (bubble1.height + spacing).toInt() + (bubble2.height + spacing).toInt() + (bubble3.height + spacing).toInt())
+                        }, delayBetweenMessages)
+                    }, delayBetweenMessages)
+                }, delayBetweenMessages)
+            }, delayBetweenMessages)
+        }, startDelay)
+    }
+    // endregion
+}

src/org/thoughtcrime/securesms/loki/redesign/LandingActivity.kt

@@ -11,6 +11,7 @@ class LandingActivity : BaseActionBarActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_landing)
+        fakeChatView.startAnimating()
         registerButton.setOnClickListener { register() }
         restoreButton.setOnClickListener { restore() }
     }