Reputation: 665
I have to make a layout with following image using Constraint Layout (ver 1.1.2)
This is done, but there is an issue. When the value of any of the field is larger then the width available it get something like this:
I want to keep the alignments while warping the value text in consequent lines. Here is the code for one row:
<android.support.constraint.ConstraintLayout
android:id="@+id/top_application_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintWidth_default="wrap"
android:padding="5dp"
android:background="@drawable/bg_white_header"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/top_client_container"
>
<TextView
android:id="@+id/top_application_label"
style="?gsTrafficHistoryClientDetailLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:text="@string/top_application"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="@+id/top_application"
style="?gsTrafficHistoryClientDetailValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/top_application_label"
app:layout_constraintTop_toTopOf="parent"
/>
</android.support.constraint.ConstraintLayout>
Now I have tried Relative Layout but I want to do it using Constraint Layout. Really appreciate any pointers.
Upvotes: 0
Views: 4885
Reputation: 141
Change Your TextView Width to match_constraint, the problem is wrap_content.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/top_application_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_white_header"
android:padding="5dp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/top_client_container"
app:layout_constraintWidth_default="wrap">
<TextView
android:id="@+id/top_application_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
style="?gsTrafficHistoryClientDetailValue"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:text="@string/top_application"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/top_application"
android:layout_width="0dp"
android:layout_height="wrap_content"
style="?gsTrafficHistoryClientDetailValue"
android:layout_marginBottom="20dp"
android:layout_marginTop="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/top_application_label"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Upvotes: 4
Reputation: 343
Try using the concepts of chains in the constraint layouts using which I have achieved the layout you wanted as follows
<android.support.constraint.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">
<TextView
android:id="@+id/tv_left1"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:padding="20dp"
android:text="Most active client"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="@+id/tv_right1"
app:layout_constraintEnd_toStartOf="@+id/tv_right1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="@+id/tv_right1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/tv_left1"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="@+id/tv_left2"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:padding="20dp"
android:text="Most active client"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="@+id/tv_right2"
app:layout_constraintEnd_toStartOf="@+id/tv_right2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv_left1"
/>
<TextView
android:id="@+id/tv_right2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/tv_left2"
app:layout_constraintTop_toBottomOf="@+id/tv_right1"
/>
<TextView
android:id="@+id/tv_left3"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:padding="20dp"
android:text="Most active client"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="@+id/tv_right3"
app:layout_constraintEnd_toStartOf="@+id/tv_right3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv_left2"
/>
<TextView
android:id="@+id/tv_right3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/tv_left3"
app:layout_constraintTop_toBottomOf="@+id/tv_right2"
/>
</android.support.constraint.ConstraintLayout>
**Note:**Besides this you can use the concepts of the barrier which you can find here
Upvotes: 1
Reputation: 6346
Add app:layout_constrainedWidth="true"
attribute to the TextView
which is going to expand (id/top_application
) to allow for wrap_content
and enforce constraints at the same time.
Upvotes: 4
Reputation: 672
Try using constraintWidth_default & constraintWidth_percent like:
<android.support.constraint.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">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="top_application"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".5" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".5" />
</android.support.constraint.ConstraintLayout>
Upvotes: 0
Reputation: 2559
replace with below code
<android.support.constraint.ConstraintLayout
android:id="@+id/top_application_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintWidth_default="wrap"
android:padding="5dp"
android:background="@drawable/bg_white_header"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/top_client_container"
>
<TextView
android:id="@+id/top_application_label"
style="?gsTrafficHistoryClientDetailLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:text="@string/top_application"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="@+id/top_application"
style="?gsTrafficHistoryClientDetailValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="@id/top_application_label"
app:layout_constraintTop_toTopOf="parent"
/>
</android.support.constraint.ConstraintLayout>
Upvotes: 0