ConstraintLayout ignores margins - android

I have very simple layout, which can be replaced with one RelativeLayout which always work. However wherever I put margins they are ignored and no, I don't want to use padding and no, chain also doesn't fix the problem. Any idea?
For example margins on date or manufacturer are ignored as well as others.
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:padding="8dp"
app:cardBackgroundColor="?attr/szykColorSecondary"
app:cardCornerRadius="8dp"
app:cardElevation="4dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<TextView
android:id="#+id/date"
style="?attr/szyk_textMedium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:gravity="left"
android:singleLine="true"
android:text="16.12.2014"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/manufacturer"
style="?attr/szyk_textBody"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:paddingRight="8dp"
android:text="Samsung"
android:textAllCaps="true"
android:textSize="24sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/model"
app:layout_constraintTop_toBottomOf="#+id/date" />
<TextView
android:id="#+id/model"
style="?attr/szyk_textBody"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="left"
android:text="S6 edge"
android:textAllCaps="true"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#+id/manufacturer"
app:layout_constraintLeft_toRightOf="#+id/manufacturer"
app:layout_constraintRight_toLeftOf="#+id/delete"
app:layout_constraintTop_toTopOf="#+id/manufacturer" />
<ImageView
android:id="#+id/delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_vector_delete"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/serial"
style="?attr/szyk_textMedium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:text="FDSF6D7A8FDAS6F7D89AS"
android:textSize="12sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/manufacturer" />
<TextView
android:id="#+id/restore"
style="?attr/szyk_textButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="#string/restore"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/serial" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
Version
compile 'com.android.support.constraint:constraint-layout:1.0.2'
Tools
compileSdkVersion 27
buildToolsVersion '27.0.2'

Sorry, my bad. The root cause of the issue was style I've been using. It had defined android:layout_margin, which overrides all the more specific margins such as android:layout_marginTop
<item name="android:layout_margin">2dp</item>

Some times preview shown result layout incorrect. However your date TextView does not contain any mention about bottom position so system don't know from what exactly position you wanna margin.
Try this edited xml.
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:padding="8dp"
app:cardBackgroundColor="#color/white_transparent_50"
app:cardCornerRadius="8dp"
app:cardElevation="4dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<TextView
android:id="#+id/date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="16.12.2014"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/manufacturer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:paddingRight="8dp"
android:text="Samsung"
android:textAllCaps="true"
android:textSize="24sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/date" />
<TextView
android:id="#+id/model"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="left"
android:text="S6 edge"
android:textAllCaps="true"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#id/manufacturer"
app:layout_constraintLeft_toRightOf="#id/manufacturer"
app:layout_constraintRight_toLeftOf="#id/delete"
app:layout_constraintTop_toTopOf="#id/manufacturer" />
<TextView
android:id="#+id/serial"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:text="FDSF6D7A8FDAS6F7D89AS"
android:textSize="12sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/manufacturer" />
<TextView
android:id="#+id/restore"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="123123123"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/serial" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>

Related

Recyclerview layout in dialog box

I am facing a problem while opening recyclerview in a dialog box. The layout in the recyclerview is overlapping and cutting when I open this in a dialog box same like this:
But, my original layout is look like this:
and here is the code for my layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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="wrap_content"
android:layout_margin="8dp"
android:layout_marginBottom="14dp"
android:elevation="10dp"
android:padding="8dp"
app:cardCornerRadius="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/corner_layout"
android:paddingTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/r_field_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Admission No."
android:textColor="#009EBB"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/r_d_field_name"
app:layout_constraintStart_toStartOf="#+id/r_d_field_name"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="RtlHardcoded" />
<TextView
android:id="#+id/admission_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="45654"
android:textColor="#555555"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/st_name"
app:layout_constraintStart_toStartOf="#+id/st_name"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/r_d_field_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Student Name"
android:textColor="#009EBB"
android:textSize="20sp"
android:textStyle="bold"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toTopOf="#+id/p_a_field_name"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/r_field_name"
tools:ignore="RtlHardcoded" />
<TextView
android:id="#+id/st_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Harikant Sharma"
android:textColor="#555555"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/st_father_mother_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/r_d_field_name"
app:layout_constraintTop_toBottomOf="#+id/admission_no" />
<TextView
android:id="#+id/p_a_field_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Parents Name"
android:textColor="#009EBB"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/btn_call_st"
app:layout_constraintStart_toStartOf="#+id/r_d_field_name"
app:layout_constraintTop_toBottomOf="#+id/r_d_field_name"
tools:ignore="RtlHardcoded" />
<TextView
android:id="#+id/st_father_mother_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Suresh Kumar Sharma"
android:textColor="#555555"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/btn_view_st_profile"
app:layout_constraintStart_toStartOf="#+id/st_name"
app:layout_constraintTop_toBottomOf="#+id/st_name" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/btn_view_st_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="100dp"
android:layout_marginBottom="12dp"
android:gravity="center"
android:src="#drawable/view"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_call_st"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.9"
app:tint="#color/white" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/btn_call_st"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:backgroundTint="#E10751"
android:gravity="center"
android:src="#drawable/phone"
app:layout_constraintBottom_toBottomOf="#+id/btn_view_st_profile"
app:layout_constraintEnd_toStartOf="#+id/btn_view_st_profile"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/btn_view_st_profile"
app:tint="#color/white" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
If you constrain both left and right, you need to set width=0dp
<TextView
android:id="#+id/st_name"
android:layout_width="0dp" <-- change to 0dp
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Harikant Sharma"
android:textColor="#555555"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/st_father_mother_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/r_d_field_name"
app:layout_constraintTop_toBottomOf="#+id/admission_no" />

Align textviews in left and right side of a linear layout?

I currently doing one of the project from "Google Android Dev". I am facing a problem in my layout design. Kindly help me how to align one textview in left side and right side of a linear layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="194dp"
android:layout_marginBottom="8dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/textAppearanceHeadline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/faye" />
<TextView
android:id="#+id/textAppearanceHeadline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Faye"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<LinearLayout
android:id="#+id/textAppearanceBody1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textAppearanceHeadline6"
app:layout_constraintTop_toBottomOf="#+id/textAppearanceHeadline6">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
android:text="Age : 7"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start|right"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Hobbies: Sunbathing"
android:textColor="#5A5656" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am new to android so you are most welcome for code review.
Try to change your layout like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="194dp"
android:layout_marginBottom="8dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/textAppearanceHeadline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/faye" />
<TextView
android:id="#+id/textAppearanceHeadline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="Faye"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<LinearLayout
android:id="#+id/textAppearanceBody1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textAppearanceHeadline6"
app:layout_constraintTop_toBottomOf="#+id/textAppearanceHeadline6">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|start"
android:text="Age : 7"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hobbies: Sunbathing"
android:gravity="center"
android:textColor="#5A5656" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Use it like this
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_gravity="center_vertical"
android:weight="1"
android:layout_height="wrap_content"
android:text="Age : 7"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Hobbies: Sunbathing"
android:textColor="#5A5656" />
weight here will allow the first textview to take all the space and will leave the required space for the hobby textview.
Use it as per your requirement.

Is it possible to contain a button with respect to the bottom, rather than the top element?

So I am currently using constraint layout for my signup screen. However, the signup button is supposed to be like 100dp from parent bottom, rather than 200 dp from the top element. Whenever I try to remove the top margin and try to make it relative to the parent bottom, it ends up in almost the middle of the screen instead of the bottom. I was wondering if there's a way I can make it such that it aligns to the bottom of the screen?
Here's my code :
<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/content_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
android:fitsSystemWindows="true">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:foreground="#drawable/image_gradient"
android:scaleType="centerCrop"
android:src="#drawable/hero_image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:contentDescription="#null" />
<ImageView
android:id="#+id/logo"
android:layout_width="207dp"
android:layout_height="77dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="180dp"
android:contentDescription="#string/my_logo"
android:src="#drawable/ic_my_white_logo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginTop="200dp"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:background="#color/white"
android:fontFamily="sans-serif-medium"
android:letterSpacing="0.07"
android:lineSpacingExtra="0sp"
android:text="#string/sign_in"
android:textColor="#color/reddish"
android:textSize="16sp"
android:textStyle="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="#id/link_sign_up"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/logo"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/link_sign_up"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginTop="15dp"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:fontFamily="sans-serif-medium"
android:gravity="center_horizontal"
android:letterSpacing="0.07"
android:lineSpacingExtra="0sp"
android:text="#string/no_account"
android:textColor="#color/white"
android:textSize="16sp"
android:textStyle="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn_login" />
</android.support.constraint.ConstraintLayout>
From the above XML, button login_in and sign_up link are supposed to be together (which works as expected), login button, below that signup link. But I am manually setting "android:layout_marginTop="200dp"
from the logo on top of it, which is not a good practice, as for some devices, it does not end up aligning to the bottom as expected (and is hardcoded). Rather I would like it to say 100dp from the margin with no alliance to the top, so for any device, it's 100dp from the bottom. Any ideas on how to fix this to achieve the goal?
Thanks in advance!
You can achieve the same behaviour using a RelativeLayout like the following.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#android:drawable/btn_default" />
<ImageView
android:id="#+id/logo"
android:layout_width="207dp"
android:layout_height="77dp"
android:layout_centerInParent="true"
android:layout_marginTop="180dp"
android:src="#drawable/ic_launcher_background" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="100dp"
android:orientation="vertical">
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="200dp"
android:layout_marginRight="16dp"
android:background="#android:color/white"
android:fontFamily="sans-serif-medium"
android:letterSpacing="0.07"
android:lineSpacingExtra="0sp"
android:text="Sign in"
android:textColor="#android:color/holo_red_dark"
android:textSize="16sp"
android:textStyle="normal" />
<TextView
android:id="#+id/link_sign_up"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginRight="16dp"
android:fontFamily="sans-serif-medium"
android:gravity="center_horizontal"
android:letterSpacing="0.07"
android:lineSpacingExtra="0sp"
android:text="No Account"
android:textColor="#android:color/white"
android:textSize="16sp"
android:textStyle="normal" />
</LinearLayout>
</RelativeLayout>
Please note that I have omitted some drawables and colors to test it in my IDE. Please modify as necessary.
Using Constraintlayout it's possible and better to use constraintlayout.Just give your constraint proper.
Also show your design which ever you want to do.
Here I do approx design
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/content_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:fitsSystemWindows="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#null"
android:scaleType="centerCrop"
android:src="#drawable/ic_back"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/logo"
android:layout_width="207dp"
android:layout_height="77dp"
android:layout_gravity="center_horizontal"
android:contentDescription="my_logo"
android:src="#drawable/ic_pass"
app:layout_constraintBottom_toTopOf="#+id/btn_login"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_10sdp"
android:layout_marginEnd="#dimen/_10sdp"
android:background="#color/colorPrimary"
android:fontFamily="sans-serif-medium"
android:letterSpacing="0.07"
android:lineSpacingExtra="0sp"
android:text="sign_in"
android:textColor="#color/colorAccent"
android:textSize="16sp"
android:textStyle="normal"
app:layout_constraintBottom_toTopOf="#id/link_sign_up"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/link_sign_up"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_10sdp"
android:layout_marginTop="15dp"
android:layout_marginEnd="#dimen/_10sdp"
android:layout_marginBottom="100dp"
android:fontFamily="sans-serif-medium"
android:gravity="center_horizontal"
android:letterSpacing="0.07"
android:lineSpacingExtra="0sp"
android:text="no_account"
android:textColor="#color/colorAccent"
android:textSize="16sp"
android:textStyle="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Wrap text in ConstraintLayout

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.
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.
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>
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
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>
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>

TextView Hint messes up RTL gravity

I have a layout with textviews.
Whenever I use Left to Right locale OR remove the android:hint elements, it works properly. However, in RTL (Hebrew locale) with LTR value (English text) and gravity="start" or "end" it just pushes the text into a hint sized text view in the wrong direction. Maybe it will be clearer with examples:
LTR locale and text:
RTL locale and LTR text with hints - here the "Data A" field with gravity "end" pushes it to the right instead of left because it is English. "Data B" has gravity "start" so it is the same case, only reversed:
the hints are an important issue because when I remove them, then wrap_content will shrink the view and the layout constraints do their job and it shows up correctly even in RTL
Here is the same example with android:hints removed:
LTR layout editor:
basically, my question is how to make the gravity of a textview always work towards the end or the start of the locale, and not the language of the text
<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"
style="#style/LogEntryListViewItemStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"><!--TODO-->
<ImageView
android:id="#+id/LogEntryListSelectedFieldField"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/Number"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:gravity="center"
android:paddingStart="10dp"
android:paddingEnd="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/LogEntryListSelectedFieldField"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/DataB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="start"
app:layout_constraintStart_toEndOf="#+id/Number"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/LogEntryListItemDateTimeField"
style="#style/LogEntryListItemDateStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="end"
app:layout_constraintEnd_toStartOf="#+id/LogEntryListSignedField"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/LogEntryListItemAircraftField"
style="#style/DataA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
app:layout_constraintStart_toStartOf="#+id/DataB"
app:layout_constraintTop_toBottomOf="#+id/DataB" />
<TextView
android:id="#+id/DataA"
style="#style/LogEntryListItemAircraftNameStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
app:layout_constraintEnd_toEndOf="#+id/LogEntryListItemDateTimeField"
app:layout_constraintTop_toBottomOf="#+id/LogEntryListItemDateTimeField" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="LogEntryListItemAircraftField, DataA" />
<TextView
android:id="#+id/LogEntryListItemNotesField"
style="#style/LogEntryListItemNotesStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:hint="(Notes)"
android:maxLines="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/DataB"
app:layout_constraintEnd_toEndOf="#+id/LogEntryListItemDateTimeField"
app:layout_constraintTop_toBottomOf="#+id/barrier" />
<ImageView
android:id="#+id/LogEntryListSignedField"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:scaleType="center"
android:src="#drawable/ic_menu_edit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
I have checked it on my device and it's working alright. Please check and see how it works out.
<?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="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="false">
<ImageView
android:id="#+id/LogEntryListSelectedFieldField"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/Number"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:gravity="center"
android:paddingEnd="10dp"
android:paddingStart="10dp"
android:text="20"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/LogEntryListSelectedFieldField"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/DataB"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Data B"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toEndOf="#+id/Number" />
<TextView
android:id="#+id/LogEntryListItemDateTimeField"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end|center_vertical"
android:text="Hercules (C-130)"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toStartOf="#+id/LogEntryListSignedField"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/LogEntryListItemNotesField"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:id="#+id/LogEntryListItemAircraftField"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Hercules (C-130)"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toEndOf="#+id/Number"
app:layout_constraintTop_toBottomOf="#+id/DataB" />
<TextView
android:id="#+id/DataA"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="end|center"
android:text="Data A"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="#+id/LogEntryListItemDateTimeField"
app:layout_constraintStart_toStartOf="#+id/LogEntryListItemDateTimeField"
app:layout_constraintTop_toBottomOf="#+id/LogEntryListItemDateTimeField" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="LogEntryListItemAircraftField, DataA" />
<TextView
android:id="#+id/LogEntryListItemNotesField"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:hint="the hints are an important issue because when I remove them, then wrap_content will shrink the view and the layout constraints do their job and it shows up correctly even in RTL"
android:maxLines="2"
android:textSize="12sp"
android:textStyle="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/LogEntryListItemDateTimeField"
app:layout_constraintStart_toEndOf="#+id/Number"
app:layout_constraintTop_toBottomOf="#+id/barrier" />
<ImageView
android:id="#+id/LogEntryListSignedField"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:scaleType="center"
android:src="#drawable/ic_menu_edit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Categories

Resources