How can i center a view in a guideline? - android-constraintlayout

Suppose i have a horizontal GuideLine at 30% of parent and a View (suppose a Button) how can i make that view be centered on the guideline?
Like this:
Update:
The view i'm using here has height based on ratio, and soltuion on answers doesnt works.
Here is current 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imgLogo"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#id/guideline_30"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintEnd_toStartOf="#+id/guidelineV_75"
app:layout_constraintStart_toEndOf="#+id/guidelineV_25"
app:layout_constraintTop_toTopOf="#+id/guideline_30"
app:srcCompat="#drawable/ic_launcher_background" />
<android.support.constraint.Guideline
android:id="#+id/guideline_30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3" />
<android.support.constraint.Guideline
android:id="#+id/guidelineV_25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.25" />
<android.support.constraint.Guideline
android:id="#+id/guidelineV_75"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75" />
</android.support.constraint.ConstraintLayout>

Using fix width or height
Need to use same Guideline for both top and bottom constraint like:
app:layout_constraintTop_toTopOf="#id/guideline_30"
app:layout_constraintBottom_toBottomOf="#id/guideline_30"
xml:
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imgLogo"
android:layout_width="150dp"
android:layout_height="150dp"
app:layout_constraintTop_toTopOf="#id/guideline_30"
app:layout_constraintBottom_toBottomOf="#id/guideline_30"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:src="#drawable/splash_logo" />
<android.support.constraint.Guideline
android:id="#+id/guideline_30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.30" />
</android.support.constraint.ConstraintLayout>
output:
Using width and height based on the ratio
As you are using both width and height based on ratio so that it's not centered.
But to get your desired result you can also set Guideline = 0.15 (0.3 / 2) and modify constraintTop and constraintBotttom
xml:
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imgLogo"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintEnd_toStartOf="#+id/guidelineV_75"
app:layout_constraintStart_toEndOf="#+id/guidelineV_25"
app:layout_constraintTop_toTopOf="#+id/guideline_15"
app:srcCompat="#drawable/ic_launcher_background" />
<android.support.constraint.Guideline
android:id="#+id/guideline_15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.15" />
<android.support.constraint.Guideline
android:id="#+id/guidelineV_25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.25" />
<android.support.constraint.Guideline
android:id="#+id/guidelineV_75"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75" />
</android.support.constraint.ConstraintLayout>
output:

You need to constraint both the top and the bottom of the View to the guideline, like so:
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/guideline"
app:layout_constraintBottom_toBottomOf="#id/guideline" />

In ConstraintLayout, for centering the View over Vertical axis of any other View Component (e.g. Guidelines, TextViews, ImageViews, layouts, etc.), you can simply follow these two steps, in XML:-
1) app:layout_constraintTop_toTopOf="#id/componentId"
2) app:layout_constraintBottom_toBottomOf="#id/componentId"
This will Equally distribute the component's View in the Vertical center.
BONUS:-
For centering the View in the Horizontal axis, use
1) app:layout_constraintLeft_toLeftOf="#id/componentId"
or
app:layout_constraintStart_toStartOf="#id/componentId"
2) app:layout_constraintRight_toRightOf="#id/componentId"
or
app:layout_constraintEnd_toEndeOf="#id/componentId"

Related

How to display the full content of each item in ListView (Android Studio)?

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.

android constraintlayout, is it possible to set mmaxWidth by percentage

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

android constraintLayout how to vertical attach to items above which may not visible

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.

android constraintLayout, how to horizontal flow a few views and one of them may show ellipse

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

using android:layout_gravity

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"
/>