How can make custom shape with picture (inside the shape)

Question

I'm new in android programming and I try design this shape:

check this link to see the shape that I want to design it

how can make this shape, and how to put picture in the shape like Alexandria?

can any one help me? plz answer with all details to understand the code

thanks

score 1 · Answer 1 · edited Nov 08 '21 at 06:40

add dependency in build.gradle

implementation 'com.github.siyamed:android-shape-imageview:0.9.+@aar'

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    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:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".MainActivity">
    
    <com.github.siyamed.shapeimageview.mask.PorterShapeImageView
        android:id="@+id/imageView"
        android:layout_width="250dp"
        android:layout_height="350dp"
        app:siShape="@drawable/shape" />
    
</LinearLayout>

activity

public class MainActivity extends AppCompatActivity {

    ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView=findViewById(R.id.imageView);
        imageView.setImageResource(R.drawable.img);
    }
}

drawable resource

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFC107" />
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners
        android:topLeftRadius="0dip"
        android:topRightRadius="70dip"
        android:bottomLeftRadius="70dip"
        android:bottomRightRadius="0dip" />
</shape>

output

thanks for your answer...... @Tanveer Hasan I'm using Kotlin ( Is that will mack different ? ) there is something else I'm using card view and recyclerView, so can I use the shape and insert the picture ( in XML, not Activity like you did ) — Kirollos Mallak, Nov 08 '21 at 06:56

Praveen · Answer 2 · 2021-11-08T10:45:22.100

You can use ShapeableImageView for this, which is provided in the material components package. If you are already using material theme in your project, then you are good to go, otherwise, add material dependency.

implementation 'com.google.android.material:material:1.4.0'

And inherit, you AppTheme from MaterialComponents, in styles.xml

<style name="AppTheme" parent="Theme.MaterialComponents.NoActionBar">
     ...
     ...
</style>

Add a new style to style.xml for creating the rounded corner of the image.

<style name="ShapeAppearanceOverlay.RoundedCorner" parent="">
    <item name="cornerSizeTopRight">75dp</item>
    <item name="cornerFamilyTopRight">rounded</item>
    <item name="cornerSizeBottomLeft">75dp</item>
    <item name="cornerFamilyBottomLeft">rounded</item>
</style>

Change your ImageView to a ShapeableImageView in layout, and add above ShapeAppearnaceOverlay style to it, using app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedCorner"

<com.google.android.material.imageview.ShapeableImageView
        android:layout_width="250dp"
        android:layout_height="350dp"
        android:src="@drawable/pots"
        android:scaleType="centerCrop"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedCorner"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/toEncrypt"
        app:layout_constraintBottom_toTopOf="@id/decrypted"
        android:id="@+id/encrypted" />

Note - Use android:scaleType="centerCrop", so you don't get a clipping effet on either side of the image.

Result -

How can make custom shape with picture (inside the shape)

2 Answers2