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.
Related
I am trying to display the entire content of each item in ListView. I read other posts (1)(2), but none of them worked.
Things I tried so far:
(1) I added android:minHeight="?android:attr/listPreferredItemHeight" to TextView
(2) Just in case, I added android:minHeight="?android:attr/listPreferredItemHeight" to ListView
(3) I added android:height=wrap_content to TextView
(4) I added android:height=wrap_content to to ListView
(5) I added (1) and (3)
(6) I added (2) and (4)
(7) I added convertView.setMinimumHeight(100); in my java file
Here is my file with ListView:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FragmentNotes"
android:theme="#style/FontStyle"
android:id="#+id/fragment_note_id">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:orientation="vertical">
<TextView
android:id="#+id/white_background_round"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:background="#drawable/white_background_round" />
<RelativeLayout
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/white_background_round"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp">
<TextView
android:id="#+id/title_string"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Notes"
android:textColor="#color/colorPrimary"
android:textSize="45sp"
android:textStyle="bold"
android:layout_marginBottom="10sp"/>
<ImageView
android:id="#+id/title_image"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignTop="#+id/title_string"
android:layout_alignBottom="#+id/title_string"
android:layout_marginLeft="20dp"
android:layout_toEndOf="#+id/title_string"
android:background="#drawable/ic_note_english" />
</RelativeLayout>
<ImageView
android:id="#+id/button_background"
android:layout_width="wrap_content"
android:layout_marginTop="10dp"
android:layout_height="30dp"
android:layout_alignStart="#+id/white_background_round"
android:layout_alignEnd="#+id/white_background_round"
android:layout_marginRight="60dp"
android:layout_marginLeft="60dp"
android:layout_below="#+id/title"
android:background="#drawable/light_background_round_english" />
<Button
android:id="#+id/btn_my_notes"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignTop="#+id/button_background"
android:layout_alignStart="#+id/button_background"
android:layout_alignBottom="#+id/button_background"
android:layout_toStartOf="#+id/centerline"
android:text="My Notes"
android:textColor="#color/colorPrimary"
android:textStyle="bold"
android:background="#android:color/transparent"
android:elevation="10dp"/>
<Button
android:id="#+id/btn_all_notes"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignTop="#+id/button_background"
android:layout_alignEnd="#+id/button_background"
android:layout_alignBottom="#+id/button_background"
android:layout_toEndOf="#+id/centerline"
android:text="All Notes"
android:textColor="#color/colorPrimary"
android:textStyle="bold"
android:background="#android:color/transparent"
android:elevation="10dp"/>
<TextView
android:id="#+id/centerline"
android:layout_width="1dp"
android:layout_height="10dp"
android:layout_alignBottom="#+id/button_background"
android:layout_centerHorizontal="true"
android:layout_below="#+id/title"
android:background="#color/colorPrimary"
android:layout_margin="5dp"
android:layout_alignTop="#+id/button_background"/>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/white_background_round"
android:layout_alignLeft="#id/white_background_round"
android:layout_alignBottom="#id/white_background_round"
android:layout_below="#+id/button_background"
android:layout_margin="10sp"
android:id="#+id/list_view" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:layout_margin="20dp"
android:layout_alignBottom="#id/white_background_round"
android:layout_alignRight="#id/white_background_round"
android:src="#drawable/ic_add_white"/>
</RelativeLayout>
</FrameLayout>
And here is my file with TextView:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/listview_item_text"
android:textColor="#color/colorPrimary"
android:text="1) When anyone brings a grain offering to the Lord, their offering is to be of the finest flour. They are to pour olive oil on it, put incense on it"
android:textSize="20dp"
android:paddingLeft="20sp"
android:paddingRight="20sp"
android:paddingTop="10sp"
android:paddingBottom="10sp"
android:textStyle="bold"
android:lineSpacingMultiplier="1.5"
android:layout_width="fill_parent"
android:singleLine="true"
android:layout_height="wrap_content"/>
Any help will be greatly appreciated.
Just in case anyone needs this answer, I found that the problem was TextView's line android:singleLine="true". I removed the line, and now I can see all contents for each item in ListView.
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
i am new to android development. I want to know how to use the attribute android:layout_gravity and can i use this option to position a view at center of the screen width.??
I tried the following but it's aligning at top
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Table Layout" />
<TableRow>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:text="Username"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:hint="username" />
</TableRow>
<TableRow>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:text="Password"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:hint="password"
android:inputType="textPassword" />
</TableRow>
<TableRow>
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="SAVE" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="CANCLE" />
</TableRow>
</TableLayout>
and my output is :
In Android there is
android:gravity and android:layout_gravity
android:gravity - Is used to move the content of the View or Layout to which this property is set.
android:layout_gravity - Is used to move the View or Layout itself to any position.
Here is a nice demo and explanation of how it works.
gravity and layout_gravity
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="CANCEL"
android:gravity="LEFT"
android:orientation="horizontal"
/>