I'm trying to align two views one behind the other, centered vertically and horizontally.
The size of the views are set dynamically to the size of the screen, this is the XML of the screen:
<?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/yellow"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#faff68"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.6"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintBottom_toBottomOf="#id/purple"
app:layout_constraintLeft_toLeftOf="#id/purple"
app:layout_constraintRight_toRightOf="#id/purple"
app:layout_constraintTop_toTopOf="#id/purple" />
<ImageView
android:id="#+id/purple"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#c303fa"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.5"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
The result is not as expected
How can the yellow image be centered behind the purple image using Constraint Layout? (I know how to achieve it in other layouts)
Update -
You can use Circular Positioning to center your larger view behind your smaller view.
<ImageView
android:id="#+id/yellow"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#faff68"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.5"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintBottom_toBottomOf="#id/purple"
app:layout_constraintLeft_toLeftOf="#id/purple"
app:layout_constraintRight_toRightOf="#id/purple"
app:layout_constraintTop_toTopOf="#id/purple"
app:layout_constraintCircle="#id/purple"
app:layout_constraintCircleRadius="0dp"/>
<ImageView
android:id="#+id/purple"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#c303fa"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Instead of trying to center the larger view behind the smaller view, you could fix your larger view and center your smaller view in front of it.
Something along the following lines should work,
<ImageView
android:id="#+id/yellow"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#faff68"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.5"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="#+id/purple"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#c303fa"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintBottom_toBottomOf="#id/yellow"
app:layout_constraintLeft_toLeftOf="#id/yellow"
app:layout_constraintRight_toRightOf="#id/yellow"
app:layout_constraintTop_toTopOf="#id/yellow" />
Try this way
<ImageView
android:id="#+id/yellow"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#faff68"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.6"
app:layout_constraintBottom_toBottomOf="#id/purple"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/purple" />
<ImageView
android:id="#+id/purple"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#c303fa"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.5"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
If you want the yellow to be the same size as the other image just change this line in your yellow image
app:layout_constraintHeight_percent="0.6"
To this:
app:layout_constraintHeight_percent="0.5"
All you need to do is to make the value of app:layout_constraintHeight_percent the same on both images.
In your case, one image was with the size of 50% screen size and the other was with 60% so they didn't looked the same size
replace your yellow image with this
<ImageView
android:id="#+id/yellow"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#faff68"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.6"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
Related
Is it possible to flatten this layout (only have one ConstraintLayout outside) and preserve the following:
MaterialCardView keeps it square shape and an overall padding of 10dp
ImageView is centered over some squared View (having the background set to a filled oval achieving its cicle-look)
ImageView has a fixed ratio of width/height relative the squared View
TextView is positoned below the squared View with a vertical distance of 10dp
The squared View is centered horizontally inside (or then maybe over?) the MaterialCardView
How it looks right now and should continue to look:
The current layout:
<?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="wrap_content">
<com.google.android.material.card.MaterialCardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
app:cardCornerRadius="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:strokeColor="#color/primaryColor"
app:strokeWidth="2dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/imageViewContainer"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/round_bg"
app:layout_constraintBottom_toTopOf="#id/textView"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".58"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".58"
app:tint="#color/primaryTextColor"
tools:src="#drawable/ic_qrcode" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textAlignment="center"
android:textColor="#color/primaryColor"
android:textSize="17sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageViewContainer"
tools:text="ItemName" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Remove parent ContraintLayout, let the MaterialCardview be the parent.
Then keep only one ConstraintLayout since its required if u want to have multiple views inside MaterialCardView.
The second ConstraitLayout aka imageViewContainer can be transformed into View and still it will be pretending to be a container.
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardCornerRadius="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:strokeColor="#color/colorPrimary"
app:strokeWidth="2dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<View
android:id="#+id/imageViewContainer"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/background_rounded"
app:layout_constraintBottom_toTopOf="#id/textView"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".58"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".58"
app:tint="#color/gray"
tools:src="#drawable/ic_close" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textAlignment="center"
android:textColor="#color/colorPrimary"
android:textSize="17sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageViewContainer"
tools:text="ItemName" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
I have two view that are fit at the top and bottom of the screen and I have a Recycler view that will sit between them but there is one view that much be packed with recyclview vertically. Something like this
I have to use constraint layout to achieve this. I have tried to achieve this with using packed-chain but that puts the view in center of screen not align to the the top view.
Change the bias of the chain to zero and that will position the RecyclerView and the view below it to the top of the center area. Something like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:text="Bottom View"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:gravity="center"
android:text="Top"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constrainedHeight="true"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:background="#android:color/holo_green_light"
app:layout_constraintBottom_toTopOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="View"
android:textSize="24sp"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintStart_toStartOf="#+id/recyclerView"
app:layout_constraintTop_toBottomOf="#+id/recyclerView" />
</androidx.constraintlayout.widget.ConstraintLayout>
I think the key point here is that the top and bottom views do not have to be part of the chain.
You could also, maybe, do the same without the chain by constraining the tops of the center views.
The point is not having bottom constraints for these top, RecyclerView and tiny view.
And for your passing through problem, you can use Guideline for your RecycleView's bottom constraint.
This is an example. You should modify to fit to your actual situation. Especially about widths or heights which have px sized may be replaced with wrap_content:
<?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"
tools:context=".MainActivity">
<View
android:id="#+id/topView"
android:layout_width="0dp"
android:layout_height="120px"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/topView" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="#id/guideline"
app:layout_constraintGuide_begin="400dp" />
<View
android:id="#+id/tinyView"
android:layout_width="240px"
android:layout_height="120px"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideline" />
<View
android:id="#+id/bottomView"
android:layout_width="0dp"
android:layout_height="120px"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Android Studio 2.6
I want ImageView to be OVER MaterialCardView.
I try this
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cardPaymentContainer"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_margin="#dimen/default_margin"
android:layout_marginStart="#dimen/button_margin"
android:layout_marginEnd="#dimen/button_margin"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolBarContainer">
<com.google.android.material.card.MaterialCardView
android:id="#+id/cardPaymentCardView"
style="#style/cardViewIconStyle"
android:layout_width="0dp"
android:layout_height="0dp"
android:checkable="true"
android:clickable="true"
android:focusable="true"
app:cardCornerRadius="#dimen/card_view_cornder_radius"
app:checkedIcon="#drawable/ic_credit_card_outline_select"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</com.google.android.material.card.MaterialCardView>
<ImageView
android:id="#+id/cardPaymentImageViewContainer"
android:layout_width="72dp"
android:layout_height="72dp"
android:background="#drawable/card_payment_view_bg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Here result:
As you can see it's not work.
The ImageView is UNDER MaterialCardView.
You have to modify the default Z Axis behavior of CardView by updating elevation. set cardElevation to 0dp.
app:cardElevation="0dp"
I need to achieve the following layout:
The title 'Trouble in paradise should be able to expand in height but it shouldn't push 'Ma 21januari' outside of the bounds.
This is my layout at the moment:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/wrapper_titles"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#id/image_episode"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_episode"
app:layout_constraintTop_toTopOf="#id/image_episode"
>
<TextView
android:id="#+id/subtitle_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="bottom"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#+id/title_episode"
tools:text="Ma 21 januari"
style="#style/Text_Episode_Subtitle"
/>
<TextView
android:id="#+id/title_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:text="Trouble in paradise"
style="#style/Text_Episode_Title"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
How can I make title_episode expand to the full height but with subtitle_episode still fixed to the top?
I think the cleanest solution would be to put both TextViews in a packed vertical chain with bias set to 1 so that they stick to the bottom. This means that you need to add top constraints for these TextViews which will also help to prevent them from getting pushed outside. Since the title_episode's height is set to wrap_content, it's also important to set the app:layout_constrainedHeight="true" attribute to enforce its constraints as it expands.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/wrapper_titles"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#id/image_episode"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_episode"
app:layout_constraintTop_toTopOf="#id/image_episode"
>
<TextView
android:id="#+id/subtitle_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="bottom"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintVertical_bias="1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/title_episode"
app:layout_constraintTop_toTopOf="parent"
tools:text="Ma 21 januari"
style="#style/Text_Episode_Subtitle"
/>
<TextView
android:id="#+id/title_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/subtitle_episode"
tools:text="Trouble in paradise"
style="#style/Text_Episode_Title"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I've provided a basic structure meeting your requirements, customize according to your need:
<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="wrap_content">
<ImageView
android:id="#+id/image_thumbnail"
android:layout_width="180dp"
android:layout_height="150dp"
android:scaleType="fitXY"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#tools:sample/avatars" />
<TextView
android:id="#+id/subtitle_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginEnd="15dp"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="#+id/image_thumbnail"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/image_thumbnail"
app:layout_constraintTop_toTopOf="#+id/image_thumbnail"
tools:text="Ma 21 januari" />
<TextView
android:id="#+id/title_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="15dp"
android:textColor="#android:color/black"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/image_thumbnail"
app:layout_constraintTop_toBottomOf="#+id/subtitle_episode"
tools:text="Trouble in paradise Trouble in paradise Trouble in paradise" />
</android.support.constraint.ConstraintLayout>
Here, take a look:
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/image_episode"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_episode"
app:layout_constraintTop_toTopOf="#id/image_episode">
<TextView
android:id="#+id/subtitle_episode"
style="#style/Text_Episode_Subtitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Ma 21 januari" />
<TextView
android:id="#+id/title_episode"
style="#style/Text_Episode_Title"
android:layout_width="0dp"
android:layout_height="0dp"
android:ellipsize="end"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/subtitle_episode"
tools:text="Trouble in paradise Trouble in paradise" />
</android.support.constraint.ConstraintLayout>
Hi I just want to display two textviews in constraint layout like below
What I have done so far is horizontally chain these textviews and since I need them to be squares, set the size as a ratio (constraintDimensionRatio).
This is the code.
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorBlueGrey"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="#+id/textView8"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorBrown"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
Now the issue is when I'm changing the constraint layout's
layout_height
into
wrap_content
like this,
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
It will display like below.
Yep. It won't display at all. Any idea to fix this?
I'm using constraint-layout:1.1.0.
You can achieve the desired result by using a vertical Guideline set at 50% of the parent width and constraining both TextViews to it and maintaining 1:1 ratio, like so:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="4dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorBlueGrey"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="4dp"
android:layout_marginTop="8dp"
android:background="#color/colorBrown"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Note that the TextViews no longer create a chain and the margins at the end of the first TextView and at the start of the second TextView had to be changed to make it 8dp in total between the views.
you can try the attribute: android:layout_height="0dp" change android:layout_height="wrap_content".
If you want to preserve aspect ratio and parent layout must be "wrap_content" (useful for text views with variable text), you can add a fake view, which keeps aspect ratio and other elements must be constrained to this view:
<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="wrap_content"
android:layout_height="wrap_content">
<View
android:id="#+id/ratio_constraint"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="122:246"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="#id/ratio_constraint"
app:layout_constraintStart_toStartOf="#id/ratio_constraint"
app:layout_constraintTop_toTopOf="#id/ratio_constraint"
tools:text="The TextView which can extend the layout" />
</androidx.constraintlayout.widget.ConstraintLayout>