Make a view's width at least as big to different view

Question

I have two view below each other. The bottom view needs to be at least as big as the top view.

I am able to constrain the bottom view to have same size as the top one, but it probihits the view to have bigger width.

<?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"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Base textview" android:layout_marginStart="16dp" app:layout_constraintLeft_toLeftOf="parent" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" app:layout_constraintTop_toTopOf="parent" android:background="@color/module_color_blue" android:id="@+id/textView"/> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:text="Smaller" app:layout_constraintTop_toBottomOf="@+id/textView" android:background="@color/red" app:layout_constraintLeft_toLeftOf="@+id/textView" app:layout_constraintHorizontal_bias="0.0" app:layout_constraintRight_toRightOf="@+id/textView"/> </android.support.constraint.ConstraintLayout>

On the other hand I am able to have the bottom view unconstrained, however view can get smaller that the top one.

<?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"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Base textview" android:layout_marginStart="16dp" app:layout_constraintLeft_toLeftOf="parent" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" app:layout_constraintTop_toTopOf="parent" android:background="@color/module_color_blue" android:id="@+id/textView"/> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:text="Much longer that top textview" app:layout_constraintTop_toBottomOf="@+id/textView" android:background="@color/red" app:layout_constraintLeft_toLeftOf="@+id/textView" /> </android.support.constraint.ConstraintLayout>

Can I achieve that with existing layout or do I need special layout for that ?

Scenario A:

The bottom view is smaller that top so they have the same width

Scenario B:

The bottom view is bigger that top its not constrained

Post your code. I think you want that your views are of similar width and height, in that case you can take a layout and specify the layout width and height, and take your views inside that layout and make it wrap-context. For better suggestion paste your snippet. — Sampad
– Sampad, Commented Oct 28, 2016 at 6:12

Manishika · Accepted Answer · 2016-10-28 06:23:09Z

If I understand your problem correctly then you want to have the same width for both textviews and width picked should be of the larger text. In this case you can use TableLayout like below :

<TableLayout android:layout_width="wrap_content" android:layout_height="wrap_content" > <TextView android:text="TextView20938487494590786907809568659" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView3" android:background="#80123456" /> <TextView android:text="TextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView2" android:background="#80723456" /> </TableLayout>

Hareshkumar Chhelana · Accepted Answer · 2016-10-28 06:19:15Z

Put both views inside LinearLayout and set LinearLayout width as wrap_content and top view with as match_parent and bottom view width as wrap_content :

<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="text1"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="text2text2"/> </LinearLayout>

Adithya Upadhya · Accepted Answer · 2016-10-28 06:19:33Z

If I understand your problem correctly, You could try this...

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/blue" android:text="Base TextView" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/red" android:text="Much Longer than top textView" /> </LinearLayout>

The trick here is to set the parent layout width to a certain width. Then set the width of the children, i.e the two textView's width equal to the width of the parent layout...

PS: If you wish to center align the text inside, you can set the android:gravity="center_horizontal" in your textViews. Hope this helps.

If you found it useful, please upvote the answer and mark it correct... :)

Sampad · Accepted Answer · 2016-10-28 06:30:39Z

Take a linear layout and specify your views.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="This is TextView 1" android:background="@color/colorAccent"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="This is TextView 1" android:background="@color/colorPrimaryDark"/> </LinearLayout>

Collectives™ on Stack Overflow

Make a view's width at least as big to different view

4 Answers 4

Comments

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Related