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.
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.
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'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.
I try to create a "square" ConstraintLayout by extending the ConstraintLayout class as follows:
class SCConstraintLayout extends android.support.constraint.ConstraintLayout {
public SCConstraintLayout(Context context) {
super(context);
}
public SCConstraintLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SCConstraintLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int chosenDimension = 0;
int mode = 0;
if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
chosenDimension = MeasureSpec.getSize(heightMeasureSpec);
mode = MeasureSpec.getMode(heightMeasureSpec);
} else {
chosenDimension = MeasureSpec.getSize(widthMeasureSpec);
mode = MeasureSpec.getMode(widthMeasureSpec);
}
int side = MeasureSpec.makeMeasureSpec(chosenDimension, mode);
super.onMeasure(side, side);
setMeasuredDimension(side, side);
}
}
If I include a widget with this custom class into a chain of widgets such as in the following landscape-oriented layout
<?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/scMainFrame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
app:layout_optimizationLevel="chains"
tools:context=".MainActivity"
tools:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- gridFrame -->
<android.support.constraint.ConstraintLayout
android:id="#+id/gridFrame"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
app:layout_optimizationLevel="chains"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/Report"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
>
<!-- column headers -->
<android.support.constraint.ConstraintLayout
android:id="#+id/colHeaders"
android:layout_width="0dp"
android:layout_height="14dp"
android:orientation="horizontal"
app:layout_constraintVertical_chainStyle="spread_inside"
app:layout_optimizationLevel="chains"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/SCFrame"
app:layout_constraintLeft_toLeftOf="#+id/SCFrame"
app:layout_constraintRight_toRightOf="#+id/SCFrame"
>
<TextView
android:id="#+id/textView0"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="A"
android:background="#FF0000"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
</android.support.constraint.ConstraintLayout>
<!-- row headers -->
<android.support.constraint.ConstraintLayout
android:id="#+id/rowHeaders"
android:layout_width="14dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_optimizationLevel="chains"
app:layout_constraintTop_toTopOf="#+id/SCFrame"
app:layout_constraintBottom_toBottomOf="#+id/SCFrame"
app:layout_constraintRight_toLeftOf="#+id/SCFrame"
app:layout_constraintLeft_toLeftOf="parent"
>
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="1"
android:background="#FF0000"
app:layout_constraintVertical_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
</android.support.constraint.ConstraintLayout>
<be.ema.sclibrary.SCConstraintLayout
android:id="#+id/SCFrame"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#00FF00"
app:layout_constraintLeft_toRightOf="#+id/rowHeaders"
app:layout_constraintTop_toBottomOf="#id/colHeaders"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
>
<TextView
android:id="#+id/A1"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="this is A1"
android:background="#0000FF"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
</be.ema.sclibrary.SCConstraintLayout>
</android.support.constraint.ConstraintLayout>
<TextView
android:id="#+id/Report"
android:layout_width="200dp"
android:layout_height="0dp"
android:text="This is the report"
android:background="#FFFF00"
app:layout_constraintLeft_toRightOf="#+id/gridFrame"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
</android.support.constraint.ConstraintLayout>
and if I display it on a "Nexus 6" in the emulator of Android Studio for instance it looks like the SCFrame is only partially square:
the A1 TextView is square (i.e. its width is equal to its height)
however the width of the SCFrame itself is different from its height
How should I change the SCConstraintLayout class or the xml lay-out to get the SCFrame view perfectly square (i.e. its width is equal to its height) when displayed on a device?
NB: in my real application, SCFrame has several rows and columns. And there are several other widgets like buttons and textviews instead of the Report textview.
You just need the top level to be a ConstraintLayout. The nested ones and the custom class aren't needed. As for the square-shaped TextView, you can use the aspect ratio attribute.