CODEWITHSUNDEEP
androidandroid-constraintlayout
karthik kolanji
karthik kolanji

Reputation: 2104

ConstraintLayout take height of another view android

I am using constraintLayout

I wanted one of my view to take height of another view

I wanted my right Textview to take the height of left TextView

My code :

<TextView
            android:id="@+id/tv_cal_consumed"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/button_selector_curved"
            android:drawableLeft="@drawable/ic_add"
            android:drawablePadding="5dp"
            android:gravity="start"
            android:padding="10dp"
            android:text="@string/cal_consumed"
            android:textColor="@color/white"
            android:textSize="@dimen/text_small"
            android:textStyle="normal"
            android:typeface="normal"
            app:layout_constraintHorizontal_chainStyle="spread_inside"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/tv_cal_burnt"
            app:layout_constraintTop_toBottomOf="@+id/con_info" />


        <TextView
            android:id="@+id/tv_cal_burnt"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"

            android:background="@drawable/button_selector_curved"
            android:drawableLeft="@drawable/ic_add"
            android:drawablePadding="5dp"
            android:gravity="start"
            android:padding="10dp"
            android:text="@string/cal_burnt"
            android:textColor="@color/white"
            android:textSize="@dimen/text_small"
            android:textStyle="normal"
            android:typeface="normal"
            app:layout_constraintTop_toTopOf="@+id/tv_cal_consumed"
            app:layout_constraintLeft_toRightOf="@+id/tv_cal_consumed"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="@+id/tv_cal_consumed" />

Current output:

enter image description here

Upvotes: 12

Views: 11451

Answers (4)

Cheticamp
Cheticamp

Reputation: 62831

Change the layout_height to 0dp (match constraints) for tv_cal_burnt. That will cause the TextView to grow to the same height as the other view. Your top and bottom constraints are already set correctly to make this work. See this.

Using 0dp, which is the equivalent of "MATCH_CONSTRAINT"

   <TextView
        android:id="@+id/tv_cal_burnt"
        android:layout_height="0dp"
   ...

Update: If you don't know in advance which view will be taller/wider due to localization, etc., I suggest taking a look at this answer to a similar question. The concept outlined in that answer works for heights and widths - just interchange app:layout_constraintWidth_min="wrap" for app:layout_constraintHeight_min="wrap". (As of ConstraintLayout 2.0.4)

Upvotes: 23

Watachiaieto
Watachiaieto

Reputation: 422

The simplest solution depends on if you feel comfortable making the assumption that the left button is always bigger.

If so, constrain the top of the right button to the top of the left button, and the bottom of the right button to the bottom of the left button ;)

Upvotes: 1

Sai Jayant
Sai Jayant

Reputation: 376

Try minimum height of the text view.

android:minLines = "1"

Upvotes: 1

Gowthaman M
Gowthaman M

Reputation: 8272

Try this following code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/tv_cal_consumed"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#a7a7a7"
        android:drawableLeft="@android:drawable/ic_input_add"
        android:drawablePadding="5dp"
        android:gravity="start"
        android:layout_margin="5dp"
        app:layout_constraintHorizontal_weight=".1"
        android:layout_marginTop="10dp"
        android:padding="10dp"
        android:text="calorie Consumed"
        android:textColor="@color/white"
        android:textSize="15sp"
        android:textStyle="normal"
        android:typeface="normal"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_cal_burnt" />


    <TextView
        android:id="@+id/tv_cal_burnt"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:background="#a7a7a7"
        android:layout_marginTop="5dp"
        app:layout_constraintHorizontal_weight=".1"
        android:drawableLeft="@android:drawable/ic_input_add"
        android:drawablePadding="5dp"
        android:gravity="start"
        android:padding="10dp"
        android:text="Calorie Burnt"
        android:layout_margin="10dp"
        android:textColor="@color/white"
        android:textSize="15sp"
        android:textStyle="normal"
        android:typeface="normal"
        app:layout_constraintBottom_toBottomOf="@+id/tv_cal_consumed"
        app:layout_constraintLeft_toRightOf="@+id/tv_cal_consumed"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/tv_cal_consumed" />

</android.support.constraint.ConstraintLayout>

if you want to make text as center use android:gravity="center" Instance of this android:gravity="start"

I hope this may help you.

Output here:

enter image description here

Upvotes: 1

Related Questions