Move View out of Constraint Layout

Question

I want to move my ImageView so it will be half way out of the ConstraintLayout (parent one) You can imagine this as I make negative margin in my LinearLayout

What I have is an Image and it should be cut as on picture, so only button side of the image should be displayed on the actual device. Other part should be cut off.

Here is a part of my 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="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:layout_width="71dp"
        android:layout_height="71dp"
        android:src="@drawable/someImage"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

So, is there any good way to do that?

I am not sure what you want (half way out of the ConstraintLayout) — Raghunandan, Mar 21 '18 at 09:04
Does this answer your question? [Position view outside of ConstraintLayout](https://stackoverflow.com/questions/46770659/position-view-outside-of-constraintlayout) — Mahozad, Oct 14 '20 at 08:48

score 13 · Answer 1 · answered Mar 21 '18 at 09:36

13

So I found the solution. Basically you need to make a translation of the image out of its container.

android:translationY="-22dp"

answered Mar 21 '18 at 09:36

nutella_eater

3,393
3
27
46

For a background image, I also used `android:translationY` successfully but I also had to remove `app:layout_constraintBottom_toBottomOf="parent"` from my `ImageView`. Before removing it, the position would be inconsistent on different device screen sizes. – jbobbins Dec 14 '22 at 01:59

score 5 · Answer 2 · answered Mar 21 '18 at 09:23

Add a guide line and say that your ImageView should be above that guidelines for example this code will make everything appear like your layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

   <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@drawable/your_image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        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_begin="163dp" />

</android.support.constraint.ConstraintLayout>

score 0 · Answer 3 · answered Mar 21 '18 at 09:35

To position the ImageView halfway outside parent enforce the vertical constraints by setting layout_height to 0dp. To maintain the appropriate size of the ImageView set the dimensionRatio to 1:1. The code will look like this (note that parent ConstraintLayout now has layout_height matching parent):

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="71dp"
        android:layout_height="0dp"
        android:src="@drawable/someImage"
        app:layout_constraintBottom_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintDimensionRatio="1:1"/>
</android.support.constraint.ConstraintLayout>

score 0 · Answer 4 · answered May 08 '19 at 08:16

0

Put the image inside of the Linear Layout.

<LinearLayout....>

    <ImageView..../>

</LinearLayout>

And add attribute called clipChildren and make it true.

answered May 08 '19 at 08:16

Sasindu Lakshitha

976
10
8

score 0 · Answer 5 · answered Sep 23 '20 at 09:47

One trick would be to set negative margin for the side you want, in the ConstraintLayout itself. This requires that other views that have constraint to that side be offset. The right button in the images is below the ConstraintLayout and hidden under the bottom bar:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    ...
    android:layout_marginBottom="-48dp">

    <ImageButton
        android:id="@+id/leftButton"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginEnd="24dp"
        android:layout_marginBottom="72dp"
        android:background="@drawable/shape_next_button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <ImageButton
        android:id="@+id/rightButton"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="24dp"
        android:background="@drawable/shape_previous_button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

score 0 · Answer 6 · answered May 24 '21 at 14:49

I did this by adding View inside the ConstraintLayout and give it some margin.

View provides background to ConstraintLayout.

ConstraintLayout must be of transparent background.

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_transparent">

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="38dp"
        android:background="@drawable/bg_white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView/>

Move View out of Constraint Layout

6 Answers6