CODEWITHSUNDEEP
androidandroid-constraintlayout
user13352267
user13352267

Reputation:

how to show two textview side by side in android using constraint layout

My requirement is to show two TextView side by side in single line left side textView1 with start margin 16dp and textView2 right side with end margin as 16 dp both have top and bottom as 8dp. textView1 is date like Mar 30 2020 12:34 PM and textView2 is ref no like ref no : 2144561237867219487387i948039463 length of 25 characters.

In small resolution screen, I need to show both textView1 and textView2 value completely without any ellipse kind of thing.

My current coding overlaps as textView2 is 25 character length, so I'm looking for a solution like textView1 should be shown completely followed by space in between and right side textView2 and for small screen value should come some thing like below

Aug 20 2020 15:748 pm on left side with 16 margin ref no:64635487265bwhjqgeyui6w5q7896wo67 right side with 16 margin on right.

Is it possible to do like above? Any idea is also appreciated!

In pixel 3, api 29, both textView1 and textView2 appear fine, but having problem in low resolution phones.

Below is my code:

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="32dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">
            
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginStart="16dp"
        android:gravity="center"
        android:text=""                                        
        app:layout_constraintBottom_toBottomOf="parent"                                        
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
            
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text=""
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
            
</androidx.constraintlayout.widget.ConstraintLayout>

In high resolution phones, both textView1 and textView2 should be single line and if screen resolution differs, I need to achieve some thing like above using constraint layout only.
Any help is appreciated!

Upvotes: 1

Views: 934

Answers (1)

Lalit Fauzdar
Lalit Fauzdar

Reputation: 6363

Try this Code :

<androidx.constraintlayout.widget.ConstraintLayout
   android:id="@+id/layout"
   android:layout_width="match_parent"
   android:layout_height="32dp"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent">

   <TextView
       android:id="@+id/textView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginStart="16dp"
       android:text="Aug 20 2020 4:56 pm"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

   <TextView
       android:id="@+id/textView2"
       android:layout_width="0dp"
       android:layout_marginStart="16dp"
       android:layout_marginEnd="16dp"
       android:layout_height="wrap_content"
       android:text="Ref no: 364t2532676387564653"
       android:gravity="end"
       app:layout_constraintStart_toEndOf="@id/textView1"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

What it will do is the first TextView will take only required space it needs to show the date. Then, second TextView will be on its right side but its height can vary in case complete text takes multiple lines. As you've stated that text should wrap in next line in small-screen sizes, this will wrap the text Ref no: 364t2532676387564653 partially in next line so the complete text stays visible without using ellipses(...). I've not tested this as I wrote it here but I'm sure it will work.

Upvotes: 2

Related Questions