This question may have been asked a million times and seem trivial but i still do not understand the logic behind it after reading about 100 of answers.
I have this ultra simple layout XML
<?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">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
From my understanding if i set opposing constraints the render engine interprets them automatically as percentage... i mean right ?
If no specific margin or anything is set then it evens out the distances. This would clearly mean that the button should tae a centered position inside the view. But it doesnt....
I dont understand it. i want to center with WITHOUT SETTING A MARGIN since a margin, from my understanding, is something independent of the constraint. It works within a constraint. but nevertheless i set a margin of 50 on each side. once a margin is set on opposing sides the engine should automatically render it as percentage.... right ?
So this XML:
<?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">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginLeft="50dp"
android:layout_marginTop="50dp"
android:layout_marginEnd="50dp"
android:layout_marginRight="50dp"
android:layout_marginBottom="50dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
should say something like "the constraint is 50% to left right top and bottom" which essentially again is exactly the middle. Of course this is again not working. The engine interprets it as absolute value and the button is in another awkward position:
So how to do this ??
What I DON'T WANT TO DO:
Adjust it with some kind of Guideline or Bias.
I want the plain thing.
Just 4 constraints (4 lines inside the xml) and a button that is in the middle of the screen on any device.
Maybe someone can share some insight ?
You should delete these two attributes:
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintVertical_bias="0.0"
As you can see the official reference, default bias is fifty-fifty (50% = 0.5).
For example the following will make the left side with a 30% bias
instead of the default 50%, such that the left side will be shorter,
with the widget leaning more toward the left side (Fig. 5):
Related
This question already has answers here:
Elevation shadow is clipped
(4 answers)
Closed 1 year ago.
I am trying to show drop shadow on CardView. The shadow cannot be shown correctly if I put the CardView into a container (like LinearLayout).
My code:
<?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="#FFFFF8"
android:clipToPadding="false"
tools:context=".MainActivity">
<androidx.cardview.widget.CardView
android:layout_width="150dp"
android:layout_height="150dp"
android:translationZ="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
<LinearLayout
android:id="#+id/card1"
android:layout_width="match_parent"
android:layout_height="330dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:background="#FFFFF8"
android:clipToPadding="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:layout_width="150dp"
android:layout_height="150dp"
android:translationZ="16dp"
/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
It looks like:
I have two CardViews, I put the one below into a LinearLayout, as you can see, it has no shadow at top and left. But the upper one looks well.
Is there any way to fix for the scenario when CardView in a LinearLayout?
P.S.:
I don't want to introduce either extra margins on the CardView or extra paddings to the container LinearLayout
I've tried adding android:clipToPadding="false" to the container LinearLayout, but it doesn't help.
I've read this Elevation shadow is clipped, and tried both android:clipToPadding="false" && android:clipChildren="false", it doesn't work.
More context about why I don't want to have extra margins or paddings, my app is data-driven, and same to the drop shadows on CardViews, CardViews can be laid out vertically or horizontally one by one, with or with no drop shadows on them, if I have to take extra margins into account, for displaying the CardViews with shadow, then the logic would be too complex.
Assume such a scenario, say one shadowed CardView, another one shadowed to the right; but one not shadowed to the bottom etc. I have to set margin left to the 1st but no to the right because the 2nd (at right) also has shadow, and for the 2nd one, I have right margin for shadow; same logic to the one below, but logic gets complex here, that why I am asking for a solution here, if the drop shadow can be visible without depending on the margins/paddings, that'd be wonderful for me.
EDIT: Closed because: https://stackoverflow.com/a/57741227/853191, this comment helped me out.
Thanks!
To show drop shadow you should use
android:translationX="16dp", android:translationY="16dp", android:translationZ="16dp" like below.
<LinearLayout
android:id="#+id/card1"
android:layout_width="match_parent"
android:layout_height="330dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:background="#FFFFF8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:layout_width="150dp"
android:layout_height="150dp"
android:translationX="16dp"
android:translationY="16dp"
android:translationZ="16dp" />
</LinearLayout>
Output:
Output Image click here!
I'm trying to create an layout which renders two TextViews packed together as in picture #1. Now, when first (red) TextView has more text than the allowed space it expands itself to fit it's constraints - which is an expected behaviour, see picture #2.
Now when i reverse the situation - make the second (violet) TextView expand I'm not getting similar result - picture #3. As we can see the second TextView doesn't respect the first TextView constraints.
The other thing that I've also found is that if we replace the order of TextViews in our *.xml file as "TextView red -> TextView violet" to "TextView violet <- TextView red" while keeping the constraints it works properly - picture 4 (but the previous case ie fails again).
I've used the latest constraint layout libraries:
// implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
implementation 'androidx.constraintlayout:constraintlayout:2.1.0-alpha2'
And the 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="match_parent"
tools:context=".MainActivity">
<TextView
android:background="#f00"
android:id="#+id/a"
android:layout_width="0dp"
android:layout_height="0dp"
android:textSize="50sp"
android:text="a"
app:layout_constraintHeight_default="wrap"
app:layout_constraintBottom_toTopOf="#id/b"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
/>
<TextView
android:background="#f0f"
android:id="#+id/b"
android:layout_width="0dp"
android:layout_height="0dp"
android:textSize="50sp"
android:text="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"
app:layout_constraintHeight_default="wrap"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/a"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintVertical_chainStyle="packed"/
</androidx.constraintlayout.widget.ConstraintLayout>
If you do have an idea how to make two TextViews behave as in picture #1, #2 and #4 i would be very grateful.
You need to specify a minimum height constraint app:layout_constraintHeight_min="wrap" to both TextViews in order to make sure that both will at least wrap their content, in other words this will make any of the TextViews not to be greedy on one another.
Also this will keep both TextViews stretchable while maintaining the minimum height.
The only downside of this that both TextViews don't obey to the height constraints, you can see in below pic dashed line of height limits, also the top TextView text is cut. This is because both TextViews tends to wrap their content while keeping constraints at the same time.
In my trial, the padding is proportional to the size of the TextView and how big is the content of both of them.
A possible workaround to add padding at the top of top TextView, and at the Bottom of bottom Textivew
Another way to work on is to be strict to height constraint, and don't wrap height content by removing app:layout_constraintHeight_default="wrap" from both.
<?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">
<TextView
android:id="#+id/a"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#f00"
android:paddingTop="0dp"
android:text="a"
android:textSize="50sp"
app:layout_constraintBottom_toTopOf="#+id/b"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/b"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#f0f"
android:paddingTop="0dp"
android:text="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbzzzzzzzzzzzzzzz"
android:textSize="50sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/a" />
</androidx.constraintlayout.widget.ConstraintLayout>
Edit: misunderstood wanted behavior.
You have 2 options, use
app:layout_constraintHeight_min="minimumHeight"
or
app:layout_constraintHeight_percent="percentage/100"
I am new to constrain layout and after reading documentations i know that view must have 1 horizontal and 1 vertical coordinates but whenever i drag a new view into design it move to 0,0 coordinates
My XML
<?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">
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="181dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="#+id/imageView3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_add_friend" />
</androidx.constraintlayout.widget.ConstraintLayout>
I already set views vertical and horizontal constrain but it still hangs at the top left also tried with vertical and horizontal bias but views sticks to top left.Please help
I also checked this and this but not working for me.
It happens sometimes if we move around commits. For me it's mostly build related issue. Building the project or make project would fix this issue.
This should be similar to an iOS tableview footer, also seen in various websites (sticky-footer).
I want to achieve the following:
A is a RecyclerView with variable number of rows.
When A is smaller than screen (or parent) size, B (footer) should be placed bellow the last row.
When A + B are bigger than screen size, then B becomes fixed at the bottom and A content is scrollable.
We are currently performing this with onMeasure functions that calculate all components heights in order to resize A accordingly.
I was wondering if there is an easier way to do it, maybe with ConstraintLayout.
Put A and B in a vertical packed chain with a bias of 0 to align it to the top. You also need to set app:layout_constrainedHeight="true" for the RecyclerView so that its constraints are taken into account when it gets too big to fit them (parent's height remains match_parent in this case):
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/A"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constrainedHeight="true"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintVertical_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/B" />
<TextView
android:id="#+id/B"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Footer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/A"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The above solution does not seem to work on Constraintlayout:2.0.0-beta2, looks like a bug introduced in that version. Works on 2.0.0-beta1 and 1.1.3.
Another way would be to set parent's height to wrap_content and then you can use the default chainstyle and remove the bias:
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/A"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constrainedHeight="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/B" />
<TextView
android:id="#+id/B"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Footer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/A"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
This solution works on all versions.
Just try ConstraintLayout, this should very well be possible, just fix Bs height and constrain it to the bottom and A and turn the bias up to top.
I have a simple constraint layout like this:
<?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">
<ListView
android:id="#+id/main_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/rescan"
/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/rescan"
android:layout_width="wrap_content"
android:text="#string/rescan_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintBottom_toBottomOf="parent"
/>
</android.support.constraint.ConstraintLayout>
Despite the layout_constraintBottom_toTopOf="#id/rescan", the listview potentially extends halfway through the button.
To try and correct that, I added hardcoded dimensions (which I prefer not to do); to the listview:
android:layout_marginBottom="50sp"
And to the button:
android:layout_height="40sp"
android:textSize="20sp"
android:layout_margin="10sp"
However, I then got this (emulator pic, the design view also corresponds to this):
The button is halfway off the screen.
So I decided to remove the hardcoded dimensions and use a barrier. The developer page is ambiguous about how barrierDirection is supposed to work, but this
"constraintlayout.com" example makes it clear the direction should be the side you want the barrier on in relation to the elements listed in referenced_ids. Based on that, here's what I have inside the constraint layout:
<ListView
android:id="#+id/main_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/bottomBarrier"
/>
<android.support.constraint.Barrier
android:id="#+id/bottomBarrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="#id/rescan"
/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/rescan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/rescan_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHorizontal_bias="0.5"
/>
But things are not really getting better...
It's impossible to tell, but here the barrier is at the very bottom. Which explains why the listview, with Bottom_toTopOf the barrier, also now extends all the way to the bottom.
However, that makes the whole barrier, who's direction is top and who's constrained id is the button, totally pointless. In no sense is it keeping the listview on one side and the button on the other. It's below both of them.
Even more berserk: If I change the direction to bottom and leave everything else as it, the barrier jumps to the very top, the listview jumps halfway off the screen upward, and the button stays in place.
I'm totally flummoxed. My two biggest questions are:
Why, in the first picture, does the listview extend halfway through the button, when it is set bottom-to-top of the button?
Why, in the last picture, is the barrier, with a direction of "top" and referencing the button id, below the button?
1.
Your ListView's height is set to wrap_content which means the view will compute its own size and constraints will not limit the dimension. ConstraintLayout-1.1.0 introduced new attributes that allow using wrap_content yet keep enforcing the constraints to limit the specified dimension. These attribues are:
app:layout_constrainedWidth="true"
app:layout_constrainedHeight="true"
2.
As for the Barrier, there's an error in the way you're referencing the view's id:
app:constraint_referenced_ids="#id/rescan"
This should be changed to:
app:constraint_referenced_ids="rescan"