I have a ConstraintLayout and one Button and an ImageView as its child views. The ImageView is placed over the Button with the expectation that the ImageView would be drawn over the Button. (Definitely, I could have added the image as a drawabl with the Button. But, in my scenario I want to do some animation with the button width and I want the the ImageView to stay as it is). However, the ImageView is drawn below the Button as the Button has a 2dp elevation on its default state [Material Design Guidline]. This elevation rises to 8dp when the button is pressed. Generally, we'll need to set the elevation or translationZ property of the ImageView to more than 2dp to make the ImageView appear over the button. But, the elevation property nor the translationZ property is supported before the API level 21. I am require to support API level 19. Also, elevation is not achievable using design library yet. Maintaining the conditions, is there any way to draw the ImageView over the Button inside the ConstraintLayout?
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/input_margin_bottom">
<EditText
android:id="#+id/et_account"
style="#style/RocketTheme.EditText"
android:drawableStart="#drawable/ic_bill_pay"
android:hint="#string/prompt_biller_id"
android:inputType="number"
android:maxLength="12"
android:maxLines="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp" />
<Button
style="#style/RocketTheme.EditText.SideButton"
android:id="#+id/ib_get_contact"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="Select Biller"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_bill_pay"
android:layout_marginLeft="12dp"
android:elevation="2dp"
android:background="#drawable/bg_white_round"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
</android.support.constraint.ConstraintLayout>
You should wrap your button with a FrameLayout. It will allow you to pile a view on top of the one below. See the following example:
<?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">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</FrameLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
In the xml cut imageview's code and paste it below button's code. elevation is not supported on older devices
This is the solution I am going with for now. According to android documentation, the later sibling is drawn later. So, in general if a View comes later as siblings in the layout file it will be drawn over the other siblings. However, the button has a elevation by default and so it will be drawn above the Views having lower elevation in API above 21.
We can set an elevation or translationZ in the sibling to make it appear above the Button. We also need to make sure the View we want on the top is placed later in the layout. In API below 21, the elevation won't work and the later View is drawn on top.
Related
I think I have the constraints correct for each element inside of the layout, and I want the app at runtime to look at the preview. The resource for the dice image works properly in another activity, but for some reason doesn't show on the main/first activity.
Here's the preview that's showing inside of Android Studio:
App at runtime:
<?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">
<ImageView
android:id="#+id/imageView"
android:layout_width="80dp"
android:layout_height="100dp"
android:contentDescription="#string/dice_image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.513"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.202"
tools:srcCompat="#drawable/dice_1" />
<Button
android:id="#+id/roll_d6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/roll_d6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<Button
android:id="#+id/roll_d4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/roll_d4"
app:layout_constraintEnd_toEndOf="#+id/roll_d6"
app:layout_constraintStart_toStartOf="#+id/roll_d6"
app:layout_constraintTop_toBottomOf="#+id/roll_d6" />
<Button
android:id="#+id/roll_d8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/roll_d8"
app:layout_constraintEnd_toEndOf="#+id/roll_d6"
app:layout_constraintStart_toStartOf="#+id/roll_d6"
app:layout_constraintTop_toBottomOf="#+id/roll_d4" />
<Button
android:id="#+id/roll_d10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/roll_d10"
app:layout_constraintEnd_toEndOf="#+id/roll_d6"
app:layout_constraintStart_toStartOf="#+id/roll_d6"
app:layout_constraintTop_toBottomOf="#+id/roll_d8" />
<Button
android:id="#+id/roll_d12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/roll_d12"
app:layout_constraintEnd_toEndOf="#+id/roll_d6"
app:layout_constraintStart_toStartOf="#+id/roll_d6"
app:layout_constraintTop_toBottomOf="#+id/roll_d10" />
<Button
android:id="#+id/roll_d20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/roll_d20"
app:layout_constraintEnd_toEndOf="#+id/roll_d6"
app:layout_constraintStart_toStartOf="#+id/roll_d6"
app:layout_constraintTop_toBottomOf="#+id/roll_d12" />
</androidx.constraintlayout.widget.ConstraintLayout>
It is working as programmed, you're just checking it on a small display size where there is no room left below the dice image to fit 6 buttons.
What you need to do is make it responsive to accommodate different screen sizes.
Remove the margins from all the buttons or set it to a minimum margin so that it doesn't take much space when the screen size is too small and the last button can fit.
Connect the buttons to each other by connecting their bottom to next button's top as Bottom_ToTop just like Top_toBottom, to make it a chain, useful for 4th point and last button's bottom to the parent's bottom, so that it doesn't go beyond that point.
Set vertical constraint style in buttons (typically, setting it only in the first button is enough) as spread_inside. This will make equal space of the available space between all 6 buttons. Minimum space will be what you set as margin.
For small sizes, consider making it a 2xN grid of buttons instead of list to utilize the horizontal space available.
Use
android:src="#drawable/dice_1"
instead of
tools:srcCompat="#drawable/dice_1"
If you are using android:src in xml during runtime this will show up
on the app, whereas if you use tools:src in xml it will show only on
the preview of Android studio and not on the runtime of the app.
Reference
In a constraint layout, I have a textview, with an imageview next to it:
But sometimes the text in the textview can be very long and sometimes span more than one line. In these cases, the imageview get pushed outside the view:
Even addind a constraint between the imageview and the view container, the imageview gets pushed outside the view.
The goal is to always have the image right next to the text and if it grows, the image starts getting pushed to the side as long is not going outside the view. When it touches the boundaries of the view, it should stay there while the text wraps to the next line.
This code block just shows the case of the second picture:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView" android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"
tools:text="This is a cat with a lot more text next to it so pay attention "/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp" tools:srcCompat="#tools:sample/avatars[3]"
android:id="#+id/imageView"
app:layout_constraintStart_toEndOf="#+id/textView" android:layout_marginStart="8dp"
android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.0"/>
</androidx.constraintlayout.widget.ConstraintLayout>
I've tried usgin barriers and guidelines, but they really do not serve for this case. The textview needs to be wrap_content since its size is variable and it is preferable to use constraint layout, that's why I did not used another one. Chains also did not work here.
You can use a packed chain with a bias of 0 to make it start-aligned and then set app:layout_constrainedWidth="true" for both views so that their constraints are respected when wrapping content.
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Text goes here"
android:textSize="24sp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/image"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/textView"
app:layout_constraintTop_toTopOf="parent"
tools:src="#tools:sample/avatars" />
</android.support.constraint.ConstraintLayout>
The problem is that you are setting textview's wrap_content. Doing so will let the textview decide its own width, ignoring layout constraints such as margins.
You need to set width to 0dp which is interpreted as match_constraint in constraint layout, it allows the layout to decide textview's width which means that textview will be given as much width as necessary after margins and other layout constraints are applied.
Now to your desired effect, first remove all constraints from both views. Select both of them, then right click and select chain option from the options menu. Then Pack them horizontally. This would form a chain.
Why do we need chain?
Because you want the imageview to right of textview and textview to left of image view, this kind of two way constraint cannot be added because TextView won't draw till imageview is drawn and imageview is waiting for textview to draw.
Chain will help you tackle this problem.
I'm trying to center the items of my listview which are a custom view to the center of a constraint layout but they only show at the left side.
I tried setting the horizontal bias of both the constraint and the list view to 50 and to 100 but the listView still doesn't show the Items in the center or anywhere else other than at the start. I tried using layout_centerhorizontal="true" but that does not work either. Bare in mind that the listview is being inflated inside a fragment which is inside a ViewPager.
UPDATE:
I fixed it by wrapping the custom_item xml inside a linear layout which filled the entire screen horizontally and added horizontal center gravity to the item.
Here is my xml:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/parentConstraint_tutor_fragment_loged"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="32dp"
android:layout_marginBottom="8dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<ListView
android:id="#+id/tutorListView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:divider="#null"
android:dividerHeight="0dp"
android:listSelector="#android:color/transparent"
android:overScrollMode="never"
android:scrollbars="none"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"/>
</androidx.constraintlayout.widget.ConstraintLayout>
And here is the custom_Item:
<?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="323dp"
android:layout_height="68dp"
android:layout_gravity="center_horizontal"
android:background="#drawable/tutor_entry_panel_phones_selector">
<ImageView
android:id="#+id/tutorIcon_cell"
android:layout_width="35dp"
android:layout_height="33dp"
android:layout_marginStart="12dp"
android:layout_marginLeft="12dp"
android:scaleType="fitCenter"
android:tint="#color/BlueColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/login_tutor_icon" />
<TextView
android:id="#+id/userLogin_nameTextV"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginEnd="22dp"
android:layout_marginRight="22dp"
android:gravity="center"
android:textColor="#color/BlueColor"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/deleteIconPhones"
app:layout_constraintStart_toEndOf="#+id/tutorIcon_cell"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/deleteIconPhones"
android:layout_width="32dp"
android:layout_height="36dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I just need the custom view inside the listview to be in the center of the constraint layout. here is a Screenshot of the current state:
https://ibb.co/88KVQvq
desired state will be with the custom_item in the middle and not in the beginning of the constraintLayout:
https://ibb.co/XbtWJkw
custom_item snapshot:
https://ibb.co/rkDXmGs
Blueprint view of the viewpager in which this fragment is contained (Im trying to get the custom_item centered inside the viewpager's fragment):
https://ibb.co/XVR02Kq
If it is a custom_listView then Do change in the custom_layout.xml - (Whatever you gave the name of the layout) and check it again.
First of all, all these parameters in <ConstraintLayout ...> element are unnecessary:
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
They don't have any meaning. Those parameters are used on elements inside ConstraintLayout, not on Layout itself. Layout fills all available space (in case of activity, it is whole screen), whatever layout are you using. Generally, just use match_parent/wrap_content in width/height, and that's it.
Secondly, based on your screen I cannot say where the ViewPager is located. It looks like ViewPager itself is left aligned in whole activity, but I am not sure. If it is, than it is the reason why everything squashed to left side. You can activate Developer Options on your device, then find and activate option Show Layout Bounds, than you will see on your screen borders of all rendered elements and see if this is the case.
Additionally, your item does not have very proper layout. If you want to chain these three elements, all of them should have all four layout_constraintXxx_toYyyOf elements. You can find it described here. I am not sure that this is the cause of your problem, but certainly is something that might cause the issue. Also, unless you really need to use ConstraintLayout, I would advise to use here LinearLayout, or even just plain text/button with drawableStart and drawableEnd set. It is documented on TextView class (Button is just a subclass of a TextView.)
Im facing an issue with ConstraintLayout.
I have a view which has 3 textviews T1, T2 and T3.
Precondition: T1,T2 is having 4dp margin top.
Problem:
T3 needs to be top should be aligned to topmost view.
Condition is T1 will be visible or gone based on certain condition.
If T1 is visible the margintop will be 8dp and when T1 is not visible T2 will have 12dp margintop.
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="T1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:text="T2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="T3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView" />
</android.support.constraint.ConstraintLayout>
Is this possible by XML or I need to configure programmatically?
You can't achieve this only with XML, what you did is create a screen using constraint layout. If you want to add some logic to change the position of some view under certain conditions you will have to write it programmatically.Here is a good thread about the subject.
I don't know exactly your use case,but you can achieve this setting view to invisible instead of gone.
View.GONE This view is invisible, and it doesn't take any space for layout purposes.
View.INVISIBLE This view is invisible, but it still takes up space for layout purposes.
You can use layout_goneMarginTop to have a different margin when your view is GONE.
You can also use SequenceLayout for better flexibility on managing your layout. Use visibilityElement on each Span you want to be gone when your related view is gone.
Is it possible to achieve negative margin on constraint layout to achieve overlap?
I am trying to have a image centered on the layout and have a Text view such that it overlaps a by x dp. I tried setting negative margin value but no luck.
It would be great if there is a way to achieve this.
Update
ConstraintLayout now supports negative margins with version 2.1.0-alpha2. Simply state
android:layout_marginTop="-25dp"
for a negative 25dp margin. (This will only work if the top of the view is constrained. A margin has no effect in ConstraintLayout if the margin's side is not constrained.)
Clarification: The answer below remains valid, but I want to clarify a couple of things. The original solution will place a view with a de facto negative offset with respect to another view as stated and will appear in the layout as shown.
Another solution is to use the translationY property as suggested by Amir Khorsandi here. I prefer that solution as simpler with one caveat: The translation occurs post-layout, so views that are constrained to the displaced view will not follow the translation.
For example, the following XML displays two TextViews immediately below the image. Each view is constrained top-to-bottom with the view that appears immediately above it.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="150dp"
android:layout_height="150dp"
android:tint="#388E3C"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_action_droid" />
<TextView
android:id="#+id/sayName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Say my name."
android:textAppearance="#style/TextAppearance.AppCompat.Large"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="#+id/imageView"
app:layout_constraintStart_toStartOf="#+id/imageView" />
<TextView
android:id="#+id/sayIt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Say it."
android:textAppearance="#style/TextAppearance.AppCompat.Large"
app:layout_constraintEnd_toEndOf="#+id/sayName"
app:layout_constraintStart_toStartOf="#+id/sayName"
app:layout_constraintTop_toBottomOf="#id/sayName" />
</androidx.constraintlayout.widget.ConstraintLayout>
Now, let's translate the "Say my name" TextView up by 50dp by specifying
android:translationY="-50dp"
This produces the following:
The "Say my name" TextView has shifted up as expected, but the "Say it" TextView has not followed it up as we might expect. This is because the translation occurs post-layout. Although the view moves post-layout, it can still be made clickable in the new position.
So, IMO, go with translationX and translationY for negative margins in ConstraintLayout if the caveat above doesn't affect your layout; otherwise, go with the space widget as outlined below.
Another caveat: As stated by Salam El-Banna in a comment to another answer, translationX will not be a good solution for RTL layouts since the sign of the translation will dictate the direction of the shift (left/right) regardless of the RTL or LTR nature of the layout.
Original answer
Although it doesn't appear that negative margins will be supported in ConstraintLayout, there is a way to accomplish the effect using the tools that are available and supported. Here is an image where the image title is overlapped 22dp from the bottom of the image - effectively a -22dp margin:
This was accomplished by using a Space widget with a bottom margin equal to the offset that you want. The Space widget then has its bottom constrained to the bottom of the ImageView. Now all you need to do is to constrain the top of the TextView with the image title to the bottom of the Space widget. The TextView will be positioned at the bottom of the Space view ignoring the margin that was set.
The following is the XML that accomplishes this effect. I will note that I use Space because it is lightweight and intended for this type of use, but I could have used another type of View and made it invisible. (You will probably need to make adjustments, though.) You could also define a View with zero margins and the height of the inset margin you want, and constrain the top of the TextView to the top of the inset View.
Yet another approach would be to overlay the TextView on top of the ImageView by aligning tops/bottoms/lefts/right and make suitable adjustments to margins/padding. The benefit of the approach demonstrated below is that a negative margin can be created without a lot of computation. That is all to say that there are several ways to approach this.
Update: For a quick discussion and demo of this technique, see the Google Developers Medium blog post.
Negative Margin for ConstraintLayout XML
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher" />
<android.support.v4.widget.Space
android:id="#+id/marginSpacer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="22dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintLeft_toLeftOf="#id/imageView"
app:layout_constraintRight_toRightOf="#id/imageView" />
<TextView
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Say my name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/marginSpacer" />
</android.support.constraint.ConstraintLayout>
Another way is using translationX or translationY like this:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:translationX="25dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
it will work like android:layout_marginRight="-25dp"
Negative margins have never been officially supported in RelativeLayout. Negative margins will not be supported in ConstraintLayout. [...]
-- Romain Guy on Jun 8, 2016
Follow these two issues:
https://code.google.com/p/android/issues/detail?id=212499
https://code.google.com/p/android/issues/detail?id=234866
This is what I figured out after hours of trying to find a solution.
Let us consider two images, image1 and image2. Image2 is to be placed on top of image1 positioned to the bottom-right side.
Overlapping Views Example
We can use Space widget for overlapping views.
Constraint the Space widget's four sides with the four sides of the image1 respectively. For this example, constraint the image2's left side with the Space widget's right side and the image2's top side with the Space widget's bottom side. This will tie image2 with the Space widget and since the Space widget is constrained from all the sides, we can define required horizontal or vertical bias which will move image2 as required.
<?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=".Player">
<ImageView
android:id="#+id/image1"
android:layout_width="250dp"
android:layout_height="167dp"
android:src="#android:color/holo_green_dark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Space
android:id="#+id/space"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/image1"
app:layout_constraintEnd_toEndOf="#+id/image1"
app:layout_constraintHorizontal_bias="0.82"
app:layout_constraintStart_toStartOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
app:layout_constraintVertical_bias="0.62" />
<ImageView
android:id="#+id/image2"
android:layout_width="82dp"
android:layout_height="108dp"
android:src="#android:color/holo_green_light"
app:layout_constraintStart_toEndOf="#+id/space"
app:layout_constraintTop_toBottomOf="#+id/space" />
</android.support.constraint.ConstraintLayout>
Additionally, to position image2 on the center-bottom of image1, we can constraint image2's left and right sides with Space widget's left and right sides respectively. Similarly, we can place image2 anywhere by changing image2's constraints with Space widget.
I found a way to do it much simpler.
Basically have the ImageView, then on the Text View add top constraint to match the top constraint of the image and just add the margin top of the TextView to match to achieve the -ve margin type behavior.
This will help many
In my case i want my design like this:
Means i want my image is display half of their width so the basically i need negative margin of half of the actual image width but my whole layout in constraint layout and constraint layout does not allowed negative margin so i achieved this with below code
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<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="50dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
So that ImageView will end at the starting of the guideline. and the effect is same as like negative margin at the start of 50dp.
And also if your view's width is not fixed and it's in percentage so that you can place guideline with percentage and achieve whatever effect you want
Happy Coding:)
You only need to use Space widget in your layout
<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">
<Space
android:id="#+id/negative_margin"
android:layout_width="16dp"
android:layout_height="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="parent"/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Widget who needs negative margin"
app:layout_constraintTop_toBottomOf="#+id/negative_margin"
app:layout_constraintLeft_toLeftOf="#+id/negative_margin" />
Place Background View Behind Subject View
I wanted to use negative margin to add a view behind a subject view that is proportionally bigger than the subject view. The solution I found was to scale android:scaleX="1.2" and android:scaleY="1.2" the background view while constraining it to all sides of the subject.
<View
android:id="#+id/subjectBackground"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleY="1.2"
android:scaleX="1.2"
app:layout_constraintBottom_toBottomOf="#+id/subjectView"
app:layout_constraintEnd_toEndOf="#+id/subjectView"
app:layout_constraintStart_toStartOf="#+id/subjectView"
app:layout_constraintTop_toTopOf="#+id/subjectView" />
This is an old question yet very much asked, the fastest way to achieve this is by constraining the top and bottom to the side of the view you want to anchor to, like so:
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="55dp"
android:layout_height="55dp"
app:layout_constraintBottom_toBottomOf="#+id/parent_view_id"
app:layout_constraintTop_toBottomOf="#+id/parent_view_id"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
This will center it in the bottom line of the view, centered horizontally.
One can try this way, this is much simpler
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MyProfileFragment">
<ImageView
android:id="#+id/imageViewUserPic"
android:layout_width="#dimen/dp60"
android:src="#mipmap/ic_launcher"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_margin="20dp"
android:layout_height="wrap_content">
</ImageView>
<ImageView
android:id="#+id/imageViewEdit"
app:layout_constraintBottom_toBottomOf="#+id/imageViewUserPic"
android:src="#drawable/ic_edit_red_round"
app:layout_constraintEnd_toEndOf="#+id/imageViewUserPic"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ImageView>
</androidx.constraintlayout.widget.ConstraintLayout>
The layout will be like this..
this is my soluation
<com.oven.test.avatar
android:id="#+id/imageview_a"
android:layout_width="128dp"
android:layout_height="128dp"
android:layout_marginTop="28dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.oven.test.smallicon
android:id="#+id/small_icon_overlap_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/imageview_a"
app:layout_constraintTop_toTopOf="#+id/imageview_a"
app:layout_constraintVertical_bias="1"
android:layout_marginBottom="20dp"/>
Using translationX and translationY may works for your situation.
<TextView
android:id="#+id/tvText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"
android:translationX="-15dp"
android:translationY="10dp"
app:layout_constraintEnd_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#+id/imageView" />
A Simple Way.
I'm not sure best way.
Just wrap using LinearLayout
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<View
android:layout_width="wrap_content"
android:layout_marginLeft="-20dp"
android:layout_height="wrap_content"/>
</LinearLayout>