CODEWITHSUNDEEP
androidxmltextviewandroid-constraintlayout
aGrusberg
aGrusberg

Reputation: 13

How to layout 2 textviews in a custom compound constraint layout

I'm trying to give two Textviews the correct position in the Constraintlayout in my layout file. The problem is the textviews needs to be scalable using app: autoSizeTextType="uniform". To make them scale I also have to match_parent on the layout_width and layout_height. This makes the two textviews overlap. How can I accomplish the desired result?

Current XML file:

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout 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="match_parent"
    android:background="@color/colorPrimary"
    android:gravity="center"
    android:orientation="vertical">


    <TextView

        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="1"
        android:textColor="#4689C8"
        android:textStyle="bold"
        app:autoSizeTextType="uniform"
        app:layout_constrainedHeight="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.362" />

    <TextView
        android:id="@+id/message"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="ABC"
        android:textColor="#4689C8"
        android:textStyle="bold"
        app:autoSizeTextType="uniform"
        app:layout_constrainedHeight="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</android.support.constraint.ConstraintLayout>

Actual result:

Both textviews scales, but overlaps, and are placed in the center of the constraintlayout. The current state:
The current state

The expected result:

One textview centered in the middle. One textview aligned at the bottom. Both textviews scales with the constraintlayout. Expected result: (3 different custom compounds in an activity) Expected result

Upvotes: 0

Views: 342

Answers (3)

justamarkprime
justamarkprime

Reputation: 111

Modify the TextView to have height and width of 0dp, this will match parent constraint view, add in a constraint for the views in relation to each other and that should give you as you asked for

<TextView

        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="1"
        android:textColor="#4689C8"
        android:textStyle="bold"
        app:autoSizeTextType="uniform"
        app:layout_constrainedHeight="true"
        app:layout_constraintBottom_toTopOf="@id/message"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

<TextView
        android:id="@+id/message"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="ABC"
        android:textColor="#4689C8"
        android:textStyle="bold"
        app:autoSizeTextType="uniform"
        app:layout_constrainedHeight="true"
        app:layout_constraintTop_toBottomOf="@id/title"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

Upvotes: 1

satyan_android
satyan_android

Reputation: 364

It might be helpful 

<android.support.constraint.ConstraintLayout 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="match_parent"
    android:gravity="center"
    android:orientation="vertical">


    <TextView

        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="24dp"
        android:gravity="center"
        android:text="1"
        android:textSize="50sp"
        android:textColor="#4689C8"
        android:textStyle="bold"
        app:autoSizeTextType="uniform"
        app:layout_constrainedHeight="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:gravity="center"
        android:text="ABC"
        android:textColor="#4689C8"
        android:textSize="28sp"
        android:textStyle="bold"
        app:autoSizeTextType="uniform"
        app:layout_constrainedHeight="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/title" />

</android.support.constraint.ConstraintLayout>

Textview size we have to add

Upvotes: 1

Shweta Chauhan
Shweta Chauhan

Reputation: 6981

you have to give top and bottom proper constraint 

 <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="match_parent"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:orientation="vertical">

    <TextView
            android:id="@+id/title"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:gravity="center"
            android:text="1"
            android:textColor="#4689C8"
            android:textStyle="bold"
            app:autoSizeTextType="uniform"
            app:layout_constrainedHeight="true"
            app:layout_constraintBottom_toTopOf="@+id/message"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/message"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:gravity="center"
            android:text="ABC"
            android:textColor="#4689C8"
            android:textStyle="bold"
            app:autoSizeTextType="uniform"
            app:layout_constrainedHeight="true"
            app:layout_constraintTop_toBottomOf="@+id/title"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 2

Related Questions