Implement fake chat view

This commit is contained in:
Niels Andriesse 2019-12-16 16:20:48 +01:00
parent e46e1b2dd9
commit 3a91280b40
9 changed files with 182 additions and 4 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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_marginTop="@dimen/medium_spacing"
android:background="@color/red" />
android:layout_height="@dimen/fake_chat_view_height"
android:layout_marginTop="@dimen/medium_spacing" />
<View
android:layout_width="match_parent"

View File

@ -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>

View File

@ -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 -->

View File

@ -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>

View File

@ -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">

View File

@ -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
}

View File

@ -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() }
}