The entire text is seperated in three tet view. First date, "-", second date

I would like to align it to have every element below each other. For example every dash should be exactly below each other. first date - second date Longer example - Longer second date

I have tried using guide lines, but on small phones it doesn't work well. I have changed it programmatically regarding to the screen, but it is not proper. I also used table row, but it doesn't give the effect. What could be a solution for it? Also is it possible if the second date textview doesn't fit to the right part of the screen it goes below?

my_recycler_item

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@ id/constraint_layout_1">

    <TextView
        android:id="@ id/tv_my_assignments_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingVertical="4dp"
        android:text="Monday 17"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@ id/gl_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.47" />

    <TextView
        android:id="@ id/tv_my_assignments_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingVertical="4dp"
        android:text=" - "
        android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
        app:layout_constraintEnd_toEndOf="@id/gl_2"
        app:layout_constraintStart_toEndOf="@ id/gl_1"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@ id/gl_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.49" />

    <TextView
        android:id="@ id/tv_my_assignments_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingVertical="4dp"
        android:text="Tuesday 18 okt 2022"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
        app:layout_constraintStart_toEndOf="@ id/gl_2"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

CodePudding user response：

If you want to align all dashes for dates one under the another, you will need to determine the longest first date string in your data. See

Obviously you can adjust the justification (gravity) to whatever you want, so you could have it up against the dash so everything is centred, rather than against the edges. Depends what kind of look you prefer!

The other advantage of this approach is it adapts to different sizes well. We've pretty much defined one thing - the separator goes in the middle, and everything else goes either side of that (and the containing layout's height is wrap_content with a minHeight so it can expand if it needs to). This means you can go to extremes, like a very small watch screen:

and it's not just neat and readable, it looks like the same design right? There are always compromises when things have to fit different spaces and ideally look decent while they do it, but I feel like this is pretty ok! I'm no designer so it could definitely be tweaked, but the basic idea for the layout is a typical one, because it works. No need to get complicated with workarounds in your code, unless that's something you really want to do!