Trianlge at topright corner with image inside in android

Question

I need triangle shape at top right corner with image inside. Triangle shape should be dynamic depend on parent layout.

This is currently looks.

I have looked into may post and created upto above image.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="wrap_content"
    android:layout_height="wrap_content">


        <RelativeLayout
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@drawable/triangle_shape"
            android:gravity="right"
            android:layout_gravity="right"
            android:layout_alignParentRight="true"
            >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/more_hdpi"
                android:layout_centerVertical="true"
                android:layout_centerHorizontal="false"
                />

    </RelativeLayout>

</RelativeLayout>

triangle_shape.xml

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

But, as you see i have fix width and image look at bottom of the shape i need it in center of the shape like:

This is what i want.

when i look in android studio deign view it loos like height and width is double of the shape. That is because shape is actually rectangle and it is rotated.

Currently looks in android studio preview.

I look in many post like this but didn't get solution in any. Any help would be greatly appreciated.

@pskink I need image in center of the shape and shape should not have fixed width. Currently you can see that layout is almost double in size. I have posted my efforts — ketan, Nov 14 '16 at 06:29
so what width do you want? on your "This is what i want." image the width is 2x bigger than image width, is it correct? — pskink, Nov 14 '16 at 06:47
@pskink Main problem is to center the image inside shape. And currently you can check relative layout height and width is 2X. I need it to exact size of shape — ketan, Nov 14 '16 at 06:50
if you use `layout_centerVerticallayout_centerVertical` then it centers vertically inside parent view (`RelativeLayout`), thats why your image is placed around the bottom of your triangle — pskink, Nov 14 '16 at 06:55
You can use an Image with yellow triangular background instead of making a shape — Avani Nagar, Nov 14 '16 at 10:37
@AvaniNagar I don't want to use image that's why i have created shape. — ketan, Nov 14 '16 at 10:52

score 0 · Answer 1 · answered Nov 14 '16 at 06:52

0

I didn't check but you can try by putting both triangle and your image in a particular relative layout with gravity center. This may help you, let me know if this would do.

answered Nov 14 '16 at 06:52

Manisha

62
1
10

I have done that and it looks like: https://i.stack.imgur.com/zwUd6.png – ketan Nov 14 '16 at 06:56

Trianlge at topright corner with image inside in android

1 Answers1