Note: The red triangle in the upper right corner and the text inside are not pictures.
The principle is to use Drawable to draw a square and then rotate it 45 degrees to make it look like a triangle.
Although I can directly use the TextView to rotate it 45 degrees and add a background Drawable, but after doing this, I found that it is not very easy to adjust the relative position of the text in the triangle or adjust the size of the triangle.
So my solution is to use the View to display the triangle background alone, and then use the TextView to display the text alone. The advantage of this is that the relative position of the text and the size of the triangle can be adjusted at will. The final effect is shown in the picture above.
The code is as follows: Create a triangle_shape.xml file in the drawable folder to display the triangle icon.
<?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" >
<!-- Border -->
<stroke
android:width="10dp"
android:color="@color/red" />
<!-- Background -->
<solid android:color="@color/red" />
</shape>
</rotate>
</item>
</layer-list>
In your own Layout, use triangle_shape.xml as the background, and add the text that needs to be displayed inside the triangle.
The core code is as follows:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/thumbnail"
android:layout_width="150dp"
android:layout_height="85dp"
fresco:placeholderImage="@drawable/placehoderImg" />
<FrameLayout
android:id="@+id/onAirLayout"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="@+id/thumbnail"
android:layout_alignParentTop="true"
android:layout_alignRight="@+id/thumbnail">
<!-- Attention Please -->
<!--layout_width must be equal to layout_height and its value plus layout_marginBottom must be equal 85-->
<!--PS: 85 is the height of placeholder image-->
<View
android:layout_width="115dp"
android:layout_height="115dp"
android:layout_gravity="top|right|end"
android:layout_marginBottom="-30dp"
android:background="@drawable/triangle_shape"
android:rotation="0" />
<TextView
android:id="@+id/txtOnAir"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|end"
android:layout_marginTop="12dp"
android:rotation="45"
android:text="@string/cmn_on_air"
android:textColor="@android:color/white"
android:textSize="14sp" />
</FrameLayout>
</RelativeLayout>
The complete code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/swipe"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/thumbnail"
android:layout_width="150dp"
android:layout_height="85dp"
fresco:placeholderImage="@drawable/placehoderImg" />
<FrameLayout
android:id="@+id/onAirLayout"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="@+id/thumbnail"
android:layout_alignParentTop="true"
android:layout_alignRight="@+id/thumbnail">
<!-- Attention Please -->
<!--layout_width must be equal to layout_height and its value plus layout_marginBottom must be equal 85-->
<!--PS: 85 is the height of placeholder image-->
<View
android:layout_width="115dp"
android:layout_height="115dp"
android:layout_gravity="top|right|end"
android:layout_marginBottom="-30dp"
android:background="@drawable/triangle_shape"
android:rotation="0" />
<TextView
android:id="@+id/txtOnAir"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|end"
android:layout_marginTop="12dp"
android:rotation="45"
android:text="@string/cmn_on_air"
android:textColor="@android:color/white"
android:textSize="14sp" />
</FrameLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="8dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginBottom="3dp"
android:ellipsize="end"
android:maxLines="1"
android:text="Title"
android:textAppearance="?attr/textAppearanceListItem"
android:textColor="@android:color/black"
android:textStyle="bold" />
<TextView
android:id="@+id/subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="-3dp"
android:drawableLeft="@drawable/ic_place"
android:drawablePadding="3dp"
android:ellipsize="end"
android:gravity="fill_vertical"
android:maxLines="1"
android:text="Sub Title"
android:textColor="@color/dim_gray"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
Reference:
https://stackoverflow.com/a/32223301/6091500