[android] Show multiple images in message bubble

This commit is contained in:
Torsten Grote
2018-11-28 17:01:32 -02:00
parent c3d44663cd
commit 961fdc8e72
16 changed files with 408 additions and 227 deletions

View File

@@ -16,15 +16,18 @@
android:elevation="@dimen/message_bubble_elevation">
<android.support.v7.widget.RecyclerView
android:id="@+id/imageView"
android:id="@+id/imageList"
android:layout_width="@dimen/message_bubble_image_default"
android:layout_height="@dimen/message_bubble_image_default"
android:orientation="vertical"
app:layoutManager="android.support.v7.widget.StaggeredGridLayoutManager"
app:layout_constraintBottom_toTopOf="@+id/text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:spanCount="2"
tools:ignore="ContentDescription"
tools:listitem="@layout/list_item_image"
tools:src="@drawable/alerts_and_states_error"/>
tools:listitem="@layout/list_item_image"/>
<com.vanniktech.emoji.EmojiTextView
android:id="@+id/text"
@@ -39,10 +42,10 @@
android:visibility="gone"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toTopOf="@+id/statusLayout"
app:layout_constraintEnd_toEndOf="@+id/imageView"
app:layout_constraintEnd_toEndOf="@+id/imageList"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/imageList"
tools:text="The text of a message which can sometimes be a bit longer as well"/>
<LinearLayout
@@ -54,7 +57,7 @@
android:layout_marginRight="@dimen/message_bubble_padding_sides_inner"
android:background="@drawable/msg_status_bubble"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="@+id/imageView"
app:layout_constraintBottom_toBottomOf="@+id/imageList"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent">

View File

@@ -16,15 +16,18 @@
android:elevation="@dimen/message_bubble_elevation">
<android.support.v7.widget.RecyclerView
android:id="@+id/imageView"
android:id="@+id/imageList"
android:layout_width="@dimen/message_bubble_image_default"
android:layout_height="@dimen/message_bubble_image_default"
android:orientation="vertical"
app:layoutManager="android.support.v7.widget.StaggeredGridLayoutManager"
app:layout_constraintBottom_toTopOf="@+id/text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:spanCount="2"
tools:ignore="ContentDescription"
tools:listitem="@layout/list_item_image"
tools:src="@drawable/alerts_and_states_error"/>
tools:listitem="@layout/list_item_image"/>
<com.vanniktech.emoji.EmojiTextView
android:id="@+id/text"
@@ -38,10 +41,10 @@
android:textColor="?android:attr/textColorPrimary"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toTopOf="@+id/statusLayout"
app:layout_constraintEnd_toEndOf="@+id/imageView"
app:layout_constraintEnd_toEndOf="@+id/imageList"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/imageList"
tools:text="The text of a message which can sometimes be a bit longer as well"/>
<LinearLayout

View File

@@ -16,13 +16,17 @@
android:elevation="@dimen/message_bubble_elevation">
<android.support.v7.widget.RecyclerView
android:id="@+id/imageView"
android:id="@+id/imageList"
android:layout_width="@dimen/message_bubble_image_default"
android:layout_height="@dimen/message_bubble_image_default"
android:orientation="vertical"
android:visibility="gone"
app:layoutManager="android.support.v7.widget.StaggeredGridLayoutManager"
app:layout_constraintBottom_toTopOf="@+id/text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:spanCount="2"
tools:ignore="ContentDescription"
tools:listitem="@layout/list_item_image"/>
@@ -41,7 +45,7 @@
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/imageList"
tools:text="The text of a message which can sometimes be a bit longer as well"/>
<LinearLayout

View File

@@ -22,13 +22,17 @@
android:elevation="@dimen/message_bubble_elevation">
<android.support.v7.widget.RecyclerView
android:id="@+id/imageView"
android:id="@+id/imageList"
android:layout_width="@dimen/message_bubble_image_default"
android:layout_height="@dimen/message_bubble_image_default"
android:orientation="vertical"
android:visibility="gone"
app:layoutManager="android.support.v7.widget.StaggeredGridLayoutManager"
app:layout_constraintBottom_toTopOf="@+id/text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:spanCount="2"
tools:ignore="ContentDescription"
tools:src="@drawable/alerts_and_states_error"/>
@@ -47,7 +51,7 @@
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/imageList"
tools:text="This is a long long long message that spans over several lines.\n\nIt ends here."/>
<LinearLayout

View File

@@ -5,5 +5,6 @@
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="@dimen/message_bubble_image_default"
android:layout_height="@dimen/message_bubble_image_default"
android:scaleType="centerCrop"
tools:ignore="ContentDescription"
tools:src="@drawable/alerts_and_states_error"/>
tools:srcCompat="@tools:sample/avatars"/>

View File

@@ -43,7 +43,7 @@
<dimen name="message_bubble_radius_top_inner">@dimen/message_bubble_radius_small</dimen>
<dimen name="message_bubble_radius_top_outer">@dimen/message_bubble_radius_big</dimen>
<dimen name="message_bubble_margin">6dp</dimen>
<dimen name="message_bubble_image_default">210dp</dimen>
<dimen name="message_bubble_image_default">115dp</dimen>
<dimen name="message_bubble_image_min_width">150dp</dimen>
<dimen name="message_bubble_image_max_width">240dp</dimen>
<dimen name="message_bubble_image_min_height">100dp</dimen>