Material design for Message UI

This commit is contained in:
Vadim Furman 2021-01-25 17:30:21 -08:00
parent de80afe5d7
commit 8ea58fd08c
5 changed files with 115 additions and 56 deletions

View file

@ -1,61 +1,68 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:clipToPadding="false"
android:contentDescription="Message delivery status"
android:elevation="2dp">
android:contentDescription="Message delivery status">
<androidx.constraintlayout.widget.ConstraintLayout
<androidx.cardview.widget.CardView
android:id="@+id/Card"
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:layout_height="match_parent"
android:layout_marginEnd="@dimen/message_offset"
app:cardBackgroundColor="@color/colorMsg"
app:cardCornerRadius="12dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true">
<com.google.android.material.chip.Chip
android:id="@+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="@string/some_username"
app:chipIcon="@drawable/ic_twotone_person_24"
app:layout_constraintEnd_toEndOf="@+id/messageTime"
app:layout_constraintStart_toStartOf="@+id/messageTime"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/messageText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:autoLink="all"
android:text="@string/sample_message"
android:textIsSelectable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/username"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.chip.Chip
android:id="@+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="@string/some_username"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/messageTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="3 min"
app:layout_constraintStart_toStartOf="@+id/username"
app:layout_constraintTop_toBottomOf="@+id/username" />
<TextView
android:id="@+id/messageText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:autoLink="all"
android:text="@string/sample_message"
android:textIsSelectable="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/username"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/messageStatusIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="@+id/messageText"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="@drawable/cloud_on" />
<ImageView
android:id="@+id/messageStatusIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/messageText"
app:srcCompat="@drawable/cloud_on" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="@+id/messageTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="3 minutes ago"
app:layout_constraintEnd_toStartOf="@id/messageStatusIcon"
app:layout_constraintTop_toBottomOf="@id/messageText" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>

View file

@ -3,4 +3,6 @@
<color name="colorPrimary">#3700B3</color>
<color name="colorPrimaryDark">#3700B3</color>
<color name="colorAccent">#D81B60</color>
<color name="colorMsg">#07000000</color>
<color name="colorMyMsg">#403700B3</color>
</resources>

View file

@ -1,3 +1,4 @@
<resources>
<dimen name="fab_margin">16dp</dimen>
<dimen name="message_offset">64dp</dimen>
</resources>