Android textview 宽度不一样

Question

I am doing the chat system. So I need to do the UI for showing the message and sent time.
Please see the below images first. The red color is the text view width and blue color is sent time text view width. Now I set the sent time is right of the text view.
I would like to set the sent time text view have a margin. But you can see the text view width is not same. So I am not hard code the margin. So anybody can give me some useful suggestion to me. Thanks a lots.

Answer 1

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.60"
    android:layout_height="wrap_content"/>

<TextView
    android:id="@+id/tvMessage"
    android:layout_width="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="@id/guideline"
    android:layout_height="wrap_content"
    android:textColor="@color/white_color"
    android:background="@color/red_color"
    android:maxWidth="@dimen/_151sdp"
    android:textStyle="bold"
    android:minWidth="30dp"/>

<TextView
    android:id="@+id/tvDateTime"
    android:layout_width="0dp"
    app:layout_constraintBottom_toBottomOf="@id/tvMessage"
    app:layout_constraintEnd_toEndOf="@id/tvMessage"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/tvMessage"
    android:layout_toRightOf="@id/tvMessage"
    android:textColor="@color/chat_mag_date_time"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

For using a component in another you can use somethings like: CardView , FrameLayout or ConstraintLayout .

ConstraintLayout like this:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/msg_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/cardview_dark_background">

    <TextView
        android:id="@+id/tvMessage"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:maxWidth="151dp"
        android:minWidth="30dp"
        android:text="fdsfdsfd
dsadas
asd
asd
as"
        android:textColor="@color/black"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginEnd="8dp"
        />

    <TextView
        android:id="@+id/tvDateTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/tvMessage"
        android:layout_toRightOf="@id/tvMessage"
        android:text="1234"
        android:textColor="@color/purple_700"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tvMessage"
        android:layout_marginStart="8dp"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 3

Add following alignments to the TextView "tvDateTime"

android:layout_alignBottom="@id/tvMessage"
android:layout_alignRight="@id/tvMessage"

and remove the extra alignment instructions, so your TextView code will become:

<TextView
    android:id="@+id/tvDateTime"
    android:layout_width="wrap_content"
    android:text="12:45"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/tvMessage"
    android:layout_alignRight="@id/tvMessage"
    android:textColor="@color/grey"/>