android - Create a auto fill chat message view in android
问题描述
I'm trying to design a chat message view like the one below: Whatsapp design
Everything is correct as long as the text is one-line. My design
But when the text is multi-linear, it looks like this: My design
How can I design a chat message view that automatically fills the space above the time-textView? Is it possible to do this only on XML?
My code:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/nip_send_chat_bubble">
<ImageView
android:id="@+id/seenStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="2dp"
android:layout_marginLeft="2dp"
android:layout_marginEnd="24dp"
android:layout_marginRight="24dp"
android:layout_marginBottom="8dp"
android:tint="?attr/metaTextColor"
android:src="@drawable/message_sent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/time" />
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="4dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="4dp"
android:maxWidth="200dp"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore"
android:textColor="?attr/textColor"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/time"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:text="11:50 PM"
android:textColor="?attr/metaTextColor"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="@+id/seenStatus"
app:layout_constraintEnd_toStartOf="@+id/seenStatus"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/text"
app:layout_constraintTop_toTopOf="@+id/seenStatus" />
</androidx.constraintlayout.widget.ConstraintLayout>
解决方案
You could probably try to change the layout from Constraint to Relative Layout. Check if this piece of code helps you out.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/nip_send_chat_bubble">
<ImageView
android:id="@+id/seenStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/text"
android:tint="?attr/metaTextColor"
android:src="@drawable/message_sent"
android:layout_alignParentRight="true"
/>
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore"
android:textColor="#000"
android:textSize="16sp"
/>
<TextView
android:id="@+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="11:50 PM"
android:textSize="12sp"
android:layout_below="@id/text"
android:layout_toLeftOf="@id/seenStatus"
/>
PS: I did not do the formatting so you can add that according to your needs.
推荐阅读
- azure - Microsoft Graph Toolkit 没有与某些 Azure AD 用户匹配的结果
- r - 返回具有非零小数位的条目数
- android-emulator - Android Studio 4.1.2 - 模拟器自动崩溃
- c# - EF 和 IHostedService 的多个实例
- r - 如何使用 if else 在 r 中获得三个结果
- locust - 如何为蝗虫中的用户共享所有请求的cookie?
- python - 在 Pandas Dataframe 中为文本字符串中的 1 个单词和相应的值着色
- python - 如何根据Openpyxl中的指定条件(即日期)从excel中检索数据?
- html - 如何在收藏部分的左侧插入照片?[购物]
- gcc - gfortran 指定源文件选项