narayana/conversations-classic
3
2
Fork 0
Code Issues 3 Pull requests 2 Actions Packages Projects Releases 4 Wiki Activity

add image preview to message bubbles

Browse source
This commit is contained in:
Daniel Gultsch 2023-03-30 16:36:16 +02:00
parent 03cf48f4c1
commit a4fe60dece
No known key found for this signature in database
GPG key ID: F43D18AD2A0982C2
8 changed files with 90 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/src/main/java/im/conversations/android/database/model/MessageWithContentReactions.java
View file

@ -101,6 +101,10 @@ public final class MessageWithContentReactions
// return text.substring(0,Math.min(text.length(),20)); // return text.substring(0,Math.min(text.length(),20));
} }
public boolean hasPreview() {
return Iterables.tryFind(this.contents, c -> c.type == PartType.FILE).isPresent();
}
public AddressWithName getAddressWithName() { public AddressWithName getAddressWithName() {
if (isKnownSender()) { if (isKnownSender()) {
return new AddressWithName(individualAddress(), individualName()); return new AddressWithName(individualAddress(), individualName());

1
app/src/main/java/im/conversations/android/ui/adapter/MessageAdapter.java
View file

@ -123,6 +123,7 @@ public class MessageAdapter
protected void setItem(final MessageAdapterItem item) { protected void setItem(final MessageAdapterItem item) {
if (item instanceof MessageWithContentReactions message) { if (item instanceof MessageWithContentReactions message) {
this.binding.setMessage(message); this.binding.setMessage(message);
this.binding.content.setClipToOutline(true);
} else { } else {
this.binding.setMessage(null); this.binding.setMessage(null);
} }

5
app/src/main/res/drawable/background_message_bubble.xml Normal file
View file

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

5
app/src/main/res/drawable/background_message_received.xml
View file

@ -1,5 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="?colorSecondaryContainer"/>
<corners android:radius="16dp"/>
</shape>

2
app/src/main/res/drawable/background_message_separator.xml
View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"> <shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="?colorPrimaryContainer"/> <solid android:color="?colorPrimaryContainer"/>
<corners android:radius="8dp"/> <corners android:radius="@dimen/message_separator_corner_radius"/>
</shape> </shape>

48
app/src/main/res/layout/item_message_received.xml
View file

@ -9,12 +9,12 @@
android:paddingVertical="6dp"> android:paddingVertical="6dp">
<ImageView <ImageView
android:visibility="@{message == null ? View.INVISIBLE : View.VISIBLE}"
android:id="@+id/avatar" android:id="@+id/avatar"
android:layout_width="@dimen/avatar_chat_overview_size" android:layout_width="@dimen/avatar_chat_overview_size"
android:layout_height="@dimen/avatar_chat_overview_size" android:layout_height="@dimen/avatar_chat_overview_size"
android:layout_marginStart="8dp" android:layout_marginStart="8dp"
android:scaleType="centerCrop" android:scaleType="centerCrop"
android:visibility="@{message == null ? View.INVISIBLE : View.VISIBLE}"
app:layout_constraintBottom_toBottomOf="@id/content" app:layout_constraintBottom_toBottomOf="@id/content"
app:layout_constraintStart_toStartOf="parent" /> app:layout_constraintStart_toStartOf="parent" />
@ -23,27 +23,51 @@
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginHorizontal="8dp" android:layout_marginHorizontal="8dp"
android:background="@drawable/background_message_received" android:background="@drawable/background_message_bubble"
android:backgroundTint="?colorSecondaryContainer"
android:clipToOutline="true"
android:minHeight="40dp" android:minHeight="40dp"
android:padding="8dp"
app:layout_constrainedWidth="true" app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0" app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="@id/avatar" app:layout_constraintStart_toEndOf="@id/avatar"
app:layout_constraintTop_toTopOf="parent"> app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_max="@dimen/message_bubble_max_width">
<ImageView
<TextView android:id="@+id/image"
android:id="@+id/textContent"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:text="@{message.textContent}" android:adjustViewBounds="true"
android:textAppearance="?textAppearanceBodyMedium" app:layout_constraintBottom_toTopOf="@+id/textContentWrapper"
android:textColor="?colorOnSecondaryContainer" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintHeight_max="@dimen/message_preview_max_height"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintTop_toTopOf="parent"
tools:text="Fusce vitae vehicula risus, nec ornare lorem. Quisque facilisis mattis velit ac porttitor. Aenean aliquet pretium varius. Quisque neque felis, mattis sit amet leo ac, tempus dapibus nibh." /> app:layout_constraintWidth_max="@dimen/message_preview_max_width" />
<LinearLayout
android:id="@+id/textContentWrapper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/image">
<TextView
android:id="@+id/textContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{message.textContent}"
android:textAppearance="?textAppearanceBodyMedium"
android:textColor="?colorOnSecondaryContainer"
tools:text="Quisque sit amet metus faucibus, egestas est eu, hendrerit mauris. Suspendisse pretium nisl purus, vitae vestibulum sapien rhoncus nec. Quisque molestie ante felis, vel dapibus ex mattis a. Morbi venenatis vestibulum neque, vel ornare sapien. Aliquam erat volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. " />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout> </androidx.constraintlayout.widget.ConstraintLayout>

42
app/src/main/res/layout/item_message_sent.xml
View file

@ -13,7 +13,7 @@
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginHorizontal="8dp" android:layout_marginHorizontal="8dp"
android:background="@drawable/background_message_received" android:background="@drawable/background_message_bubble"
android:backgroundTint="?colorTertiaryContainer" android:backgroundTint="?colorTertiaryContainer"
android:minHeight="40dp" android:minHeight="40dp"
android:padding="8dp" android:padding="8dp"
@ -21,20 +21,42 @@
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0" app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"> app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_max="@dimen/message_bubble_max_width">
<ImageView
<TextView android:id="@+id/image"
android:id="@+id/textContent"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:text="@{message.textContent}" android:adjustViewBounds="true"
android:textAppearance="?textAppearanceBodyMedium" app:layout_constraintBottom_toTopOf="@+id/textContentWrapper"
android:textColor="?colorOnSecondaryContainer" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintHeight_max="@dimen/message_preview_max_height"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintTop_toTopOf="parent"
tools:text="Fusce vitae!" /> app:layout_constraintWidth_max="@dimen/message_preview_max_width" />
<LinearLayout
android:id="@+id/textContentWrapper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/image">
<TextView
android:id="@+id/textContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{message.textContent}"
android:textAppearance="?textAppearanceBodyMedium"
android:textColor="?colorOnSecondaryContainer"
tools:text="Quisque sit amet metus faucibus, egestas est eu, hendrerit mauris. Suspendisse pretium nisl purus, vitae vestibulum sapien rhoncus nec. Quisque molestie ante felis, vel dapibus ex mattis a. Morbi venenatis vestibulum neque, vel ornare sapien. Aliquam erat volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. " />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout> </androidx.constraintlayout.widget.ConstraintLayout>

11
app/src/main/res/values/message-bubbles.xml Normal file
View file

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="message_bubble_corner_radius">16dp</dimen>
<dimen name="message_separator_corner_radius">8dp</dimen>
<dimen name="message_bubble_max_width">384dp</dimen>
<!-- The difference between bubble_max_width and preview_max_width will become relevant once we
support image and description in the same bubble. If there is no text, image bubbles will
always be restricted to max_preview_width. -->
<dimen name="message_preview_max_width">384dp</dimen>
<dimen name="message_preview_max_height">256dp</dimen>
</resources>