How can I design this Layout using XML?

Question

How can I put the circular imageView on top of the cardView like in this design? I want to use XML to do this.

Answer 1

you can achieve something similar that you can extended or enhance using the blow code

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:background="#2D2D2D"
android:layout_height="match_parent"
tools:context=".MainActivity">

<androidx.constraintlayout.widget.Guideline
    android:orientation="horizontal"
    android:id="@+id/guideline"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintGuide_percent=".3"
    />
<com.google.android.material.card.MaterialCardView
    style="@style/CardViewStyle"
    android:id="@+id/cardview"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="48dp"
    app:cardBackgroundColor="#F3C623"
    android:layout_marginBottom="16dp"
    app:layout_constraintTop_toBottomOf="@id/guideline"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintWidth_percent="0.8" />

<com.google.android.material.imageview.ShapeableImageView
    app:shapeAppearanceOverlay="@style/circleImageView"
    android:id="@+id/image"
    android:src="@mipmap/ic_launcher"
    android:padding="1dp"
    android:elevation="5dp"
    android:layout_marginEnd="12dp"
    android:layout_width="220dp"
    android:layout_height="220dp"
    app:layout_constraintTop_toTopOf="@id/guideline"
    app:layout_constraintBottom_toTopOf="@id/guideline"
    app:layout_constraintEnd_toEndOf="@id/cardview"
     />

</androidx.constraintlayout.widget.ConstraintLayout>

---

styles.xml

your Apptheme Should extend MaterialComponentstheme

 <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="CardViewStyle" parent="@style/Widget.MaterialComponents.CardView">
    <item name="shapeAppearanceOverlay">@style/MaterialCardViewRounded</item>
</style>

<style name="MaterialCardViewRounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">48dp</item>
    <item name="cornerSizeTopLeft">0dp</item>
    <item name="cornerSizeBottomRight">48dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
</style>

<style name="circleImageView" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

---

buid.gradle

add the matrial comonent dependance

 implementation "com.google.android.material:material:1.2.1"