I'm using constraint layout to minimize use of LinearLayouts but I can't understand why what I see on preview is not what it actually looks like when run on an emulator or on a physical device.
This is preview layout
this is what looks like when run on a device
this is my xml:
<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:id="#+id/conts"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="89dp">
<ImageView
android:id="#+id/iv_header"
android:layout_width="379dp"
android:layout_height="148dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="5dp"
android:paddingTop="5dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toTopOf="#+id/tvPg1_2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/conts"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_weight="1"
app:srcCompat="#drawable/tokhang_header" />
<TextView
android:id="#+id/tvPg1_0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="0dp"
android:text="As of"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/iv_header"
app:layout_constraintHorizontal_bias="0.499"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.782"
android:shadowColor="#FFFF4444"
android:shadowDx="-2"
android:shadowDy="-2"
android:shadowRadius="1"/>
<TextView
android:id="#+id/tvPg1_1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="150dp"
android:layout_marginStart="8dp"
android:background="#drawable/tokang_pg1_1antidrugopn"
android:gravity="top|center"
android:paddingLeft="55dp"
android:text="700"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textScaleX="1"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/tvPg1_2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_header"
app:layout_constraintVertical_weight="1"
android:shadowColor="#FFFF4444"
android:shadowDx="-2"
android:shadowDy="-2"
android:shadowRadius="1"/>
<TextView
android:id="#+id/tvPg1_2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="150dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:background="#drawable/tokang_pg1_2drugpers"
android:gravity="top|center"
android:paddingLeft="25dp"
android:text="700"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textScaleX="1"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/tvPg1_3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvPg1_1"
app:layout_constraintVertical_weight="1"
android:shadowColor="#FFFF4444"
android:shadowDx="-2"
android:shadowDy="-2"
android:shadowRadius="1"/>
<TextView
android:id="#+id/tvPg1_3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="150dp"
android:layout_marginStart="8dp"
android:background="#drawable/tokang_pg1_3drugpersdied"
android:gravity="top|center"
android:paddingLeft="10dp"
android:text="700"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textScaleX="1"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/tvPg1_4"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvPg1_2"
app:layout_constraintVertical_weight="1"
android:shadowColor="#FFFF4444"
android:shadowDx="-2"
android:shadowDy="-2"
android:shadowRadius="1"/>
<TextView
android:id="#+id/tvPg1_4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="150dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:background="#drawable/tokang_pg1_4housevisited"
android:gravity="top|center"
android:paddingLeft="35dp"
android:paddingTop="15dp"
android:text="700"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textScaleX="1"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvPg1_3"
app:layout_constraintVertical_weight="1"
android:shadowColor="#FFFF4444"
android:shadowDx="-2"
android:shadowDy="-2"
android:shadowRadius="1"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="122dp"
android:layout_marginEnd="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginStart="8dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvPg1_4"
app:layout_constraintVertical_bias="1.0"
app:layout_constraintVertical_weight="1"
app:srcCompat="#drawable/tokhang_footer" />
</android.support.constraint.ConstraintLayout>
and everytime i open the xml the layout changes or gets misaligned that i have to undo with me doing any changes. It seems constrain layout is unstable or it's me unstable being a newbie.
Do you have an idea of what's happening ?
Thanks in advance for your help.
Related
Having three textView, the content size varies. Want to show ellipsis if the content to to big.
|[aaa][bbb][ccc] |
|[aaaaaaa...][bbbbbb.][ccc]|
|[aaa][bbbbbb.......][c...]|
|[aaaa...][bbbb...][ccc...]|
could not find a solution using constraintLayout for it. This one does not do wanted,
but if it can set the the [a] with a maxWidth by percentage of the parent width, so that it can leave some width for the [b] and [c]
something like (but it does not exist)
android:maxWidth="50%"
Any suggestion?what is
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="#android:color/white"
android:padding="22dp">
<TextView
android:id="#+id/greenTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_green_dark"
app:layout_constraintEnd_toStartOf="#id/blueTextView"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Firdsfgsdfgasdsdfasdsdfsds" />
<TextView
android:id="#+id/blueTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_blue_dark"
app:layout_constrainedWidth="true"
app:layout_constraintBaseline_toBaselineOf="#id/greenTextView"
app:layout_constraintEnd_toStartOf="#id/orangetextView"
app:layout_constraintStart_toEndOf="#id/greenTextView"
app:layout_constraintTop_toTopOf="parent"
tools:text="Secoasdfsdfsdfsdfsdf.." />
<TextView
android:id="#+id/orangetextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_orange_dark"
app:layout_constraintBaseline_toBaselineOf="#id/blueTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/blueTextView"
tools:text="Third Very Long Text 123456789" />
</androidx.constraintlayout.widget.ConstraintLayout>
It's a simple workaround for that, to achieving the logic of percentage for width we can use two vertical Guideline that can split the screen into three sections:
This is a simple code I wrote for you:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="#android:color/white"
android:padding="22dp">
<TextView
android:id="#+id/greenTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_green_dark"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Firdsfgsdfgasdsdfasdsdfsds" />
<TextView
android:id="#+id/blueTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_blue_dark"
app:layout_constrainedWidth="true"
app:layout_constraintBaseline_toBaselineOf="#id/greenTextView"
app:layout_constraintEnd_toStartOf="#+id/guideline3"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent"
tools:text="Secoasdfsdfsdfsdfsdf.." />
<TextView
android:id="#+id/orangetextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_orange_dark"
app:layout_constraintBaseline_toBaselineOf="#id/blueTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline3"
tools:text="Third Very Long Text 123456789" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.66" />
</androidx.constraintlayout.widget.ConstraintLayout>
you can customize spaces by margins, any comments or modifications please tell me,cheers
Having a few items above the last row, and they may all not visible or someone still visible.
Here is how they vertically aligned:
[content_part - 'Lorem ipsum...']
[media_image - RED BLOCK - has app:layout_constraintTop_toBottomOf="#+id/content_part"]
[quoted_view - IMG - has app:layout_constraintTop_toBottomOf="#+id/media_image"]
[comment - TEXTVIEW ROW - has app:layout_constraintTop_toBottomOf="#+id/quoted_view"]
when the quoted_view is visible, the comment button row is fine (both landscape and portrait):
but when the quoted_view is NOT visible in landscape the comment row is not displayed right
although in portrait mode it seems fine
How to vertically align to above items which may not visible?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="?android:attr/selectableItemBackground"
android:paddingStart="10dp"
android:paddingEnd="10dp">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="52dp" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="3dp"
android:ellipsize="end"
android:maxLines="1"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent"
tools:text="re-tweet werwer wer we rwe r wer " />
<ImageView
android:id="#+id/avatar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="3dp"
android:scaleType="fitXY"
android:background="#mipmap/ic_launcher"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title" />
<!-- -->
<TextView
android:id="#+id/content_part"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:autoLink="web"
android:linksClickable="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/title"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " />
<ImageView
android:id="#+id/media_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:scaleType="matrix"
android:visibility="visible"
app:layout_constraintDimensionRatio="H,15:3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/content_part"
app:layout_goneMarginBottom="8dp"
android:background="#ff0000" />
<androidx.cardview.widget.CardView
android:id="#+id/quoted_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
app:cardCornerRadius="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/media_image"
app:layout_goneMarginBottom="8dp"
android:visibility="gone">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="30dp"
android:scaleType="centerCrop"
android:src="#mipmap/ic_launcher_round" />
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_below="#+id/imageView"
android:gravity="center_horizontal"
android:padding="8dp"
android:text="#string/app_name"
android:textColor="#ffffff"
android:textSize="12sp" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<!-- quoted -->
<TextView
android:id="#+id/comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/response"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/guideline"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/quoted_view"
android:text="TextView" />
<TextView
android:id="#+id/response"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/like"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/comment"
android:text="TextView" />
<TextView
android:id="#+id/like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/response"
android:text="TextView" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#20000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.526"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
update:
adding app:layout_constraintTop_toBottomOf="#+id/comment" to android:id="#+id/view" seems fixed it.
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#20000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.526"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/comment" />
But not really understand why it has to have this constrain, the android:id="#+id/comment" already has constrain app:layout_constraintBottom_toTopOf="#+id/view".
<TextView
android:id="#+id/comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/response"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/guideline"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/quoted_view"
android:text="TextView" />
When you specify app:layout_constraintDimensionRatio="H,15:3" for media_image with a 0dp height and 0dp width, ConstraintLayout will maximize the width of the view and constrain the height of the view such that the resulting aspect ratio is 15:3 (5 x as wide as the height.)
So, given a screen width of, say, 500dp the width of media_image will become 500dp and the height will be 100dp. So, what happens when the actual height of the screen is something less than 100dp plus the height of the TextViews? You will see your problem. (Screen sizes are for example and do not reflect actual screen dimensions that I am aware of.)
The question now depends upon what you want to happen with the layout when the dimensions don't quite work as you have things laid out now.
Having A, B, C, D views horizontally flowing one after the other.
If the parent width is wide enough all of them will be displayed
| A | B | C | D
when the parent width is not enough for all, the 3rd one will show ellipse
| AAA | BB | C... | DDD
tried following it works in portrait mode but not in landscape since the android:maxWidth="100dp" is used
<TextView
android:id="#+id/c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="100dp"
android:maxLines="1"
android:ellipsize="end"
app:layout_constraintStart_toEndOf="#+id/b"
app:layout_constraintTop_toTopOf="#+id/a"
tools:text="CCCCCCCCCCCC long long long long long" />
and dont want to make another layout for landscape specifically.
any suggestions?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/the_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="83dp" />
<ImageView
android:id="#+id/top_row_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_1"
app:layout_constraintEnd_toStartOf="#+id/the_guideline"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="visible"/>
<TextView
android:id="#+id/top_row_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:ellipsize="end"
android:maxLines="1"
tools:text="top title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/the_guideline"
app:layout_constraintTop_toTopOf="parent"
android:visibility="visible"/>
<ImageView
android:id="#+id/left_column_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:scaleType="fitXY"
app:layout_constraintEnd_toStartOf="#+id/the_guideline"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_row_title"
app:srcCompat="#drawable/left_icon" />
<!-- horizontal flow views-->
<TextView
android:id="#+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="8dp"
app:layout_constraintStart_toStartOf="#+id/the_guideline"
app:layout_constraintTop_toBottomOf="#+id/top_row_title"
tools:text="AAAAAAAAAAAAAAAAAAAA" />
<ImageView
android:id="#+id/b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#+id/a"
app:layout_constraintTop_toTopOf="#+id/a"
app:srcCompat="#drawable/right_icon" />
<TextView
android:id="#+id/c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="100dp"
android:maxLines="1"
android:ellipsize="end"
app:layout_constraintStart_toEndOf="#+id/b"
app:layout_constraintTop_toTopOf="#+id/a"
tools:text="CCCCCCCCCCCC long long long long long" />
<TextView
android:id="#+id/d"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DDDDDDDDDDDDDDD"
app:layout_constraintStart_toEndOf="#+id/c"
app:layout_constraintTop_toTopOf="#+id/a" />
</androidx.constraintlayout.widget.ConstraintLayout>
Did't get the point what you're trying to do but, if I'm right then you want to make a Horizontal Chain in ConstraintLayout.
Find full documentation here : Control linear groups with a chain
hey last few days I am exploring about the constraint layout.the concept of barrier I can understand but when i implement I can't get the correct output.
I want to set the barrier in the right direction to reference Id's. But barrier doesn't work.it should set for the views which are nameLabel and passionLabel. please help me. thank you in advance. This is the current output
<?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:id="#+id/activity_main_barriers"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/roboto_bold"
android:text="#string/barriers"
android:textColor="#color/black"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/header"
android:layout_width="0dp"
android:layout_height="149dp"
android:layout_marginTop="8dp"
android:scaleType="centerCrop"
android:src="#drawable/arun"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/roboto_bold"
android:text="Arun Pandian"
android:textColor="#color/colorPrimaryDark"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.032"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header" />
<!--#string/hobbies-->
<TextView
android:id="#+id/passionLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:labelFor="#+id/etPassion"
android:text="#string/passion"
android:textColor="#color/colorPrimaryDark"
android:textSize="15sp"
app:layout_constraintBaseline_toBaselineOf="#+id/etPassion"
app:layout_constraintStart_toStartOf="#+id/nameLabel" />
<TextView
android:id="#+id/nameLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:fontFamily="#font/roboto_italic"
android:labelFor="#+id/cameraType"
android:text="#string/name"
android:textColor="#color/colorPrimaryDark"
android:textSize="15sp"
app:layout_constraintBaseline_creator="1"
app:layout_constraintBaseline_toBaselineOf="#+id/etName"
app:layout_constraintLeft_creator="1"
app:layout_constraintStart_toStartOf="#+id/title"
app:layout_editor_absoluteX="16dp"
app:layout_editor_absoluteY="189dp"
tools:layout_constraintBaseline_creator="0"
tools:layout_constraintLeft_creator="0" />
<EditText
android:id="#+id/etPassion"
android:layout_width="217dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Developing softwares"
app:layout_constraintEnd_toEndOf="#+id/etName"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/etName"
app:layout_constraintTop_toBottomOf="#+id/etName"
app:layout_editor_absoluteX="73dp"
app:layout_editor_absoluteY="225dp"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="0" />
<EditText
android:id="#+id/etName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="148dp"
android:inputType="textPersonName"
android:text="Arun Pandian"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tvName"
app:layout_constraintTop_toBottomOf="#+id/title"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="0" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="nameLabel,passionLabel"
tools:layout_editor_absoluteX="411dp" />
</android.support.constraint.ConstraintLayout>
Try this:
you have to give both edittext start constraint to barrier.
Also when I see in My android studio xml my output is same as you post in your question image. check http://prntscr.com/mkdtgb
But when I see in device it's working
<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:id="#+id/activity_main_barriers"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="barriers"
android:textColor="#android:color/black"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/header"
android:layout_width="0dp"
android:layout_height="149dp"
android:layout_marginTop="8dp"
android:scaleType="centerCrop"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Arun Pandian"
android:textColor="#color/colorPrimaryDark"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header" />
<!--#string/hobbies-->
<TextView
android:id="#+id/passionLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:labelFor="#+id/etPassion"
android:text="passios"
android:textColor="#color/colorPrimaryDark"
android:textSize="15sp"
app:layout_constraintBaseline_toBaselineOf="#+id/etPassion"
app:layout_constraintStart_toStartOf="#+id/nameLabel" />
<EditText
android:id="#+id/etPassion"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:ems="10"
android:inputType="textPersonName"
android:layout_marginStart="16dp"
android:text="Developing softwares"
app:layout_constraintEnd_toEndOf="#+id/etName"
app:layout_constraintStart_toEndOf="#+id/barrier2"
app:layout_constraintTop_toBottomOf="#+id/etName" />
<TextView
android:id="#+id/nameLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:labelFor="#+id/cameraType"
android:text="namegfhfgdfgdfgdfgdfgdfgdf"
android:textColor="#color/colorPrimaryDark"
android:textSize="15sp"
app:layout_constraintBaseline_toBaselineOf="#+id/etName"
app:layout_constraintStart_toStartOf="parent" />
<EditText
android:id="#+id/etName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:inputType="textPersonName"
android:text="Arun Pandian"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/barrier2"
app:layout_constraintTop_toBottomOf="#+id/title" />
<android.support.constraint.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="nameLabel,passionLabel" />
</android.support.constraint.ConstraintLayout>
I resolved this issue by updating the ConstraintLayout library
From
implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha2'
To this
implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha3'
I had a similar issue when using
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
The same code was working in one project but not in another, both using the same version of the constraint-layout
If it works on device and but not in the layout editor, then try to force refresh the layout in the editor
This seems to be a rendering bug in the Preview in Android Studio 3.3.
The barrier will works at runtime on the emulator.
I created a launchpad using constraintlayout for Android. I added buttons for the launchpad and used the chain functionality for arrange some buttons in rows and columns.
As you can see in picture, the space between the rows (marked with red color) are larger than the space between the columns (marked with blue color) are now equal, which is a problem i could not solve alone.
How can I get the same space?
Here are my button definitions:
<?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:id="#+id/taalsLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top"
android:orientation="vertical"
tools:layout_editor_absoluteY="81dp">
<com.mapani.launchpad.XButton
android:id="#+id/geda"
android:layout_width="0dp"
android:layout_height="0dp"
android:elevation="0dp"
android:fontFamily="monospace"
android:text="#string/geda"
android:textAllCaps="false"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/mogholi"
app:layout_constraintEnd_toStartOf="#+id/kehrwa"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.mapani.launchpad.XButton
android:id="#+id/kehrwa"
android:layout_width="0dp"
android:layout_height="0dp"
android:fontFamily="monospace"
android:text="#string/kehrwa"
android:textAllCaps="false"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/rupak"
app:layout_constraintEnd_toStartOf="#+id/dadra"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/geda"
app:layout_constraintTop_toTopOf="#+id/geda" />
<com.mapani.launchpad.XButton
android:id="#+id/dadra"
android:layout_width="0dp"
android:layout_height="0dp"
android:fontFamily="monospace"
android:text="#string/dadra"
android:textAllCaps="false"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/tapea"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/kehrwa"
app:layout_constraintTop_toTopOf="#+id/kehrwa" />
<com.mapani.launchpad.XButton
android:id="#+id/mogholi"
android:layout_width="0dp"
android:layout_height="0dp"
android:fontFamily="monospace"
android:text="#string/mogholi"
android:textAllCaps="false"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/sitarkhani"
app:layout_constraintEnd_toStartOf="#+id/rupak"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/geda" />
<com.mapani.launchpad.XButton
android:id="#+id/rupak"
android:layout_width="0dp"
android:layout_height="0dp"
android:fontFamily="monospace"
android:text="#string/rupak"
android:textAllCaps="false"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/japtaal"
app:layout_constraintEnd_toStartOf="#+id/tapea"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/mogholi"
app:layout_constraintTop_toTopOf="#+id/mogholi" />
<com.mapani.launchpad.XButton
android:id="#+id/tapea"
android:layout_width="0dp"
android:layout_height="0dp"
android:fontFamily="monospace"
android:text="#string/tapea"
android:textAllCaps="false"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/teentaal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/rupak"
app:layout_constraintTop_toTopOf="#+id/rupak" />
<com.mapani.launchpad.XButton
android:id="#+id/sitarkhani"
android:layout_width="0dp"
android:layout_height="0dp"
android:fontFamily="monospace"
android:text="#string/sitarkhani"
android:textAllCaps="false"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/ektaal"
app:layout_constraintEnd_toStartOf="#+id/japtaal"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mogholi" />
<com.mapani.launchpad.XButton
android:id="#+id/japtaal"
android:layout_width="0dp"
android:layout_height="0dp"
android:fontFamily="monospace"
android:text="#string/japtaal"
android:textAllCaps="false"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/C"
app:layout_constraintEnd_toStartOf="#+id/teentaal"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/sitarkhani"
app:layout_constraintTop_toTopOf="#+id/sitarkhani" />
<com.mapani.launchpad.XButton
android:id="#+id/teentaal"
android:layout_width="0dp"
android:layout_height="0dp"
android:fontFamily="monospace"
android:text="#string/teentaal"
android:textAllCaps="false"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/D"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/japtaal"
app:layout_constraintTop_toTopOf="#+id/japtaal" />
<com.mapani.launchpad.XButton
android:id="#+id/ektaal"
android:layout_width="0dp"
android:layout_height="0dp"
android:fontFamily="monospace"
android:text="#string/ektaal"
android:textAllCaps="false"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/C"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/sitarkhani" />
<com.mapani.launchpad.XButton
android:id="#+id/C"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="سا"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/D"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/ektaal"
app:layout_constraintTop_toTopOf="#+id/ektaal" />
<com.mapani.launchpad.XButton
android:id="#+id/D"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/C"
app:layout_constraintTop_toTopOf="#+id/C" />
</android.support.constraint.ConstraintLayout>
This is Because Row And Column Size Differs in Height and Width Of the Layout.Reducing The Button Width Will Allow U to Equalise Column Height.