CODEWITHSUNDEEP
androidimageview
Edgar Shvedskiy
Edgar Shvedskiy

Reputation: 145

how to create image like this image?

I am developing android news app and how can I make imageview like below on the imageview on the top and there are should be any library or ways to achieve that

image

Upvotes: 1

Views: 75

Answers (1)

Martin Marconcini
Martin Marconcini

Reputation: 27246

Attempt 1: Using a simple Shape drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <rotate
                android:fromDegrees="10"
                android:toDegrees="0"
                android:pivotX="-230%"
                android:pivotY="14%" >
            <shape
                    android:shape="rectangle" >
                <stroke android:color="@android:color/transparent"
                        android:width="1dp"/>
                <solid
                        android:color="@android:color/white" />
            </shape>
        </rotate>
    </item>
</layer-list>

(this took me 5 minutes, so maybe there are better ways to do this shape).

This would be the layout, notice the foreground property pointing to my "shape" above.

<ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:foreground="@drawable/my_shape"
            android:scaleType="centerCrop"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/xxx" />

It looks like this:

Sample

(Original Wikipedia image source)

Attempt 2: Using a custom SVG

I fired Inkscape, and made a quick triangle (I left it semi-opaque so you can see it)

Inkscape

Imported it as a Vector asset called ic_bad_triangle, and then added it to the foreground of the image...

... (omitted all attributes of course)

    <ImageView
            ...
            android:foreground="@drawable/ic_bad_triangle" />

And it looks like this:

WithSVG

obviously you'd have to tweak your vector assets to match your designs and sizes, but you get the idea, no need to introduce a library.

The last image's triangle is obviously semi-transparent there, so you can see it. Considering this took me 25 minutes, I hope it gets you in the right direction.

UPDATE: I polished the triangle:

<vector android:height="35.357143dp" android:viewportHeight="297"
    android:viewportWidth="210" android:width="25dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#ffffff"
        android:pathData="M-0.084,298.008H216.193L-0.421,258.091Z"
        android:strokeAlpha="1" android:strokeColor="#ffffff"
        android:strokeLineCap="butt" android:strokeLineJoin="miter" android:strokeWidth="0.64384729"/>
</vector>

and it now looks like this:

Better

Upvotes: 3

Related Questions