Image with two ribbons in the upper left

Question

I am creating an Android application. I am new to android. I want to create a label like in the image below. Here is the below code that I have tried. I have labels over the images. Any help will be appreciated. Thanks

   <FrameLayout
        android:layout_weight="1"
        android:layout_gravity="center"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:id="@+id/fl_bg">

        <ImageView
            android:layout_gravity="center"
            android:id="@+id/iv_avatar"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:contentDescription="@string/app_name"
            android:src="@drawable/jouer"
            android:scaleType="fitCenter"/>

        <LinearLayout
            android:gravity="center"
            android:id="@+id/ll_winner_label"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_marginTop="20dp"
                android:id="@+id/tv_rank"
                android:text="1"
                android:layout_gravity="top"
                android:rotation="120"
                android:background="@color/label_center"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>


            <TextView
                android:layout_marginTop="20dp"
                android:id="@+id/tv_earned_amount"
                android:text="5$"
                android:rotation="120"
                android:background="@color/label_center"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />


        </LinearLayout>


    </FrameLayout>

Loquacious

Can you share your image/drawable file of the label? – Indivisible

i am using textview with background for yellow labels – Loquacious

Answer 1

make changes in your code as follows

    <ImageView
        android:layout_gravity="center"
        android:id="@+id/iv_avatar"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:contentDescription="@string/app_name"
        android:src="@mipmap/ic_launcher"
        android:scaleType="fitCenter"/>

    <LinearLayout
        android:gravity="center"
        android:id="@+id/ll_winner_label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_marginTop="-20dp"
            android:layout_marginStart="-20dp"
            android:id="@+id/tv_rank"
            android:text="1"
           android:layout_alignParentTop="true"
            android:rotation="120"
            android:background="#000"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>


        <TextView
            android:layout_below="@id/tv_rank"
            android:layout_marginTop="40dp"
         android:layout_marginStart="-30dp"
            android:layout_marginEnd="0dp"
            android:id="@+id/tv_earned_amount"
            android:text="5$"
            android:rotation="120"
            android:background="#000"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />


    </LinearLayout>


</FrameLayout>

result

Park

unable to get the exact as required – Loquacious

you have to play with margins to achieve what you exactly want – Park

Answer 2

Have you tried using the Editor with the ConstraintLayout?

Failing that, using a FrameLayout the z-index of elements is assigned by the order in which they are presented.

You may need to assign a layout-gravity to some of your elements e.g:

"android:layout_gravity="top|left"

Lepper

Added this to LinearLayout "ll_winner_label" ? – Lepper

Perhaps add Elevation to the layout, "android:elevation="2dp" Or you could try a Constraint Layout, or programmatically elevate the layout, layout.SetZ(float z); – Lepper