Search code examples
androidandroid-layoutandroid-imageviewandroid-viewandroid-constraintlayout

How to half overlap images in android constraint layout


Is there any way to place an images half is on top of another image using only constraint layout. I know it can be done using relative and frame layouts but in the case of constraint layout is there anyway? prefer ways which do not require any hardcoding of heights/widths

the requirement will look like this

enter image description here


Solution

  • you can set layout using only constraint layout like below :

    <?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/imageView4"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@android:color/holo_orange_dark"
            app:layout_constraintBottom_toTopOf="@id/guideline"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0" />
    
        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline"
            android:layout_width="0dp"  
            android:layout_height="0dp"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.5" />
    
        <ImageView
            android:id="@+id/imageView_upper"
            android:layout_width="70dp"
            android:layout_height="70dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@id/guideline"
            app:layout_constraintBottom_toBottomOf="@id/guideline"
            android:background="@android:color/holo_purple"/>
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    Note: If you are using support library then you have to use android.support.constraint.ConstraintLayout instead of androidx.constraintlayout.widget.ConstraintLayout

    enter image description here