Search code examples
androidtextviewandroid-constraintlayout

Text in Android TextView should start in the first line

I am using a constrainedLayout with some TextViews. When the text in the textViews covers two lines it looks okay. But when the text only convers one line the text does not start in the first line. I added a screenhot: enter image description here

So basically what I want is to shift the yellow marked textlines one level above such that the margin between the label words (Nose, Finish) and the text is not as high. It should look like the "Taste" textViews. Here is the XML code of the TextViews:

<TextView
        android:id="@+id/tvNoseLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:gravity="center"
        android:textSize="16sp"
        app:fontFamily="@font/paprika"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.489"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.36"
        android:textStyle="bold"
        android:text="@string/Nose"
        />

    <TextView
        android:id="@+id/tvNoseDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        
        android:gravity= "fill_vertical"
        android:textSize="14sp"
        app:fontFamily="@font/paprika"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.489"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.41"

        />

    <TextView
        android:id="@+id/tvTasteLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="16sp"
        app:fontFamily="@font/paprika"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.489"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.47"
        android:textStyle="bold"
        android:text="@string/Taste"
        />

    <TextView
        android:id="@+id/tvTasteDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="14sp"
        app:fontFamily="@font/paprika"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.489"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.52"

       />

    <TextView
        android:id="@+id/tvFinishLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="16sp"
        app:fontFamily="@font/paprika"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.489"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.58"
        android:textStyle="bold"
        android:text="@string/Finish"
       />

    <TextView
        android:id="@+id/tvFinishDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="14sp"
        app:fontFamily="@font/paprika"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.489"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.63"

        />

Do you have an idea how I can do that? I tried different gravities (start, fill_vertical) but it did not help. I'd appreciate every comment.

Solution

  • Your layout relies too much on app:layout_constraintVertical_bias. To get the vertical distribution you want, it is better to use ConstraintLayout chains. For your layout, I suggest using a vertical packed chain and removing the vertical bias and the gravities. Something like this:

    <androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tvNoseLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/Nose"
        android:textSize="16sp"
        android:textStyle="bold"
        app:fontFamily="@font/paprika"
        app:layout_constraintBottom_toTopOf="@+id/tvNoseDescription"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/tvNoseDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:gravity="fill_vertical"
        android:text="Soft and rounded with fruity notes of red apple"
        android:textSize="14sp"
        app:fontFamily="@font/paprika"
        app:layout_constraintBottom_toTopOf="@+id/tvTasteLabel"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvNoseLabel" />

    <TextView
        android:id="@+id/tvTasteLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/Taste"
        android:textSize="16sp"
        android:textStyle="bold"
        app:fontFamily="@font/paprika"
        app:layout_constraintBottom_toTopOf="@+id/tvTasteDescription"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvNoseDescription" />

    <TextView
        android:id="@+id/tvTasteDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:gravity="center"
        android:text="A fine Sherried character, fruity aromas balanced with rich chovolate"
        android:textSize="14sp"
        app:fontFamily="@font/paprika"
        app:layout_constraintBottom_toTopOf="@+id/tvFinishLabel"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tvTasteLabel" />

    <TextView
        android:id="@+id/tvFinishLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/Finish"
        android:textSize="16sp"
        android:textStyle="bold"
        app:fontFamily="@font/paprika"
        app:layout_constraintBottom_toTopOf="@+id/tvFinishDescription"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvTasteDescription" />

    <TextView
        android:id="@+id/tvFinishDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:gravity="center"
        android:text="Warm and lingering. Sweet and spoicy"
        android:textSize="14sp"
        app:fontFamily="@font/paprika"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvFinishLabel" />

</androidx.constraintlayout.widget.ConstraintLayout>

    which gives this appearance:

    enter image description here