With Android's constraint layout, how can I put a single border around multiple elements? One of the main benefits of constraint layout is that you don't have to nest views. Is this the one scenario where you would use another layout inside of constraint layout?
Without seeing more of your code it is hard for me to know what your actual layout looks like. But this is one way to draw a border around some layouts without nesting any of the views
<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">
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/border"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_margin="4dp"
app:layout_constraintBottom_toBottomOf="#id/guideline"/>
<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.7"/>
<View
android:id="#+id/v1"
android:layout_width="100dp"
android:layout_height="200dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:background="#8FF0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/v2"
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:background="#8F0F"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/v3"
android:layout_width="100dp"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:background="#80FF"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/v1"
app:layout_constraintBottom_toBottomOf="#id/guideline"/>
<View
android:id="#+id/v4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="#8000"
app:layout_constraintBottom_toTopOf="#+id/v5"
app:layout_constraintEnd_toStartOf="#+id/v2"
app:layout_constraintStart_toEndOf="#+id/v1"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/v5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#8000"
app:layout_constraintBottom_toBottomOf="#+id/v3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/v1"
app:layout_constraintTop_toBottomOf="#+id/v2" />
</android.support.constraint.ConstraintLayout>
This is how the output looks like
Those colored views are some some widgets that have been placed in the layout. And the border has been set in another view.
Related
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>
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>
I center my two Input layout vertically in my view using chaining. I also have an image view and a text view on top of this two Input layout. I would like to have this Input Layout center only if the view enough space.
Right now the Input layout are always center and the text go over the image.
In ios i would use constraint priority to do so but it looks like this is not available for constraint layout yet?
What i have right now
What I want to have is
Edit
Sorry i should have add the text :)
<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/registration_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:adjustViewBounds="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/logo" />
<!--To get the focus when page appear-->
<include layout="#layout/layout_focus_interceptor" />
<TextView
android:id="#+id/tv_extra_info"
style="#style/TextContent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:gravity="center"
app:layout_constraintBottom_toTopOf="#+id/input_layout_email"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_email"
style="#style/TextInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/margin_bottom_text_input_layout"
android:layout_marginTop="8dp"
android:theme="#style/PreAuthorizationTextTheme"
app:layout_constraintBottom_toTopOf="#id/input_layout_email_confirmation"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed">
<android.support.design.widget.TextInputEditText
android:id="#+id/etxt_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:nextFocusLeft="#id/etxt_email"
android:nextFocusUp="#id/etxt_email"
tools:hint="#string/general_email" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_email_confirmation"
style="#style/TextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/margin_bottom_text_input_layout"
android:layout_marginTop="#dimen/margin_top_text_input_layout"
android:theme="#style/PreAuthorizationTextTheme"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/input_layout_email">
<android.support.design.widget.TextInputEditText
android:id="#+id/et_email_confirmation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:nextFocusLeft="#id/etxt_email"
android:nextFocusUp="#id/etxt_email"
tools:hint="#string/registration_email_confirmation" />
</android.support.design.widget.TextInputLayout>
</android.support.constraint.ConstraintLayout>
I don't know how to do this either! But I was able to come up with something that comes close to what you're looking for.
What I did was create a Guideline element fixed at a particular height that caused my views to seem vertically centered when they were positioned below it. For different size phones, this will probably be off by a pixel or ten, but it should never be too bad.
I then create a Barrier that references the guideline and the other view I want to "dodge". And I position my other elements with respect to this barrier.
My 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">
<View
android:id="#+id/rect"
android:layout_width="300dp"
android:layout_height="100dp"
android:layout_marginTop="16dp"
android:background="#fac"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.34"/>
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="rect,guideline"/>
<View
android:id="#+id/first"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginTop="16dp"
android:background="#caf"
app:layout_constraintTop_toBottomOf="#id/barrier"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<View
android:id="#+id/second"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginTop="16dp"
android:background="#caf"
app:layout_constraintTop_toBottomOf="#+id/first"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
With a short rect view the two middle views appear vertically centered, and with a tall rect view the two middle views get pushed down:
I use the follow code to display buttons and ViewPager. I want to display ViewPager above of buttons but that it have wrap_content height and width.
<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/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/transparent_hd_image_scrim">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="#+id/buttons_bottom_layout"
android:layout_width="0dp"
android:layout_height="#dimen/hd_preview_buttons_height"
android:layout_marginEnd="#dimen/basic_keyline"
android:layout_marginRight="#dimen/basic_keyline"
android:orientation="horizontal"
android:layout_marginBottom="16dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/view_pager"
app:layout_constraintBottom_toBottomOf="parent">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:visibility="invisible" />
<View
android:id="#+id/stubBottom"
android:layout_width="#dimen/basic_keyline"
android:layout_height="wrap_content" />
<Button
android:id="#+id/send_button"
style="#style/HDPreviewButtonStyle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorAccent"
android:text="#string/send"
android:textAllCaps="true" />
</LinearLayout>
What I see on preview.
But on practice on emulator I get this screen.
What I do incorrect?
From the XML code you posted there are several issues that ConstraintLayout might have problem with.
Also ConstraintLayout can help you with nesting layout, which you also mentioned in comments you want to avoid.
I am not sure you want the view pager to behave as wrap rather than match it's constraints.
I created what I think is what you want using what ConstraintLayout has to offer to ease pain of previous layouts.
<android.support.constraint.ConstraintLayout android:id="#+id/linearLayout"
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="#color/transparent_hd_image_scrim">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/barrier"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/send_button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view_pager" />
<Button
android:id="#+id/send_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="8dp"
android:background="#color/colorAccent"
android:textAllCaps="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/view_pager"
tools:text="Send" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="send_button, button"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
Bottom buttons are chained horizontally together - this is basically replacement of the previous LinearLayout and the weight usage.
Also added barrier for height of the bottom buttons - this will make sure the height of the view pager will always accomodate to the height of any of them.
If you will actually want to the view pager to have wrap content add these
app:layout_constraintWidth_max="wrap"
app:layout_constraintHeight_max="wrap"