The new module of item 1 has an icon on the right which is displayed in the upper right corner, as shown in the figure
After thinking about how to use shape to draw a background, put it in the upper right corner, draw out the words as if there is a problem in putting them on the display, google it and find a piece of information.
Draw triangles on the RelativeLayout in the top right corner of Android
The principle is to use Drawable to draw a square, and then rotate it 45 degrees to achieve the effect of a triangle.
The solution is to use View to display the triangle background separately, and then use TextView to display the text separately. The advantage of this is that you can adjust the relative position of the text and the size of the triangle at will. See the figure above for the final effect.
The code is as follows: create a new triangle shape.xml file under 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 in the triangle.
The core code is as follows:
<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>
The complete code is as follows:
<?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <!--Master Medal--> <RelativeLayout android:id="@+id/re_master_medal" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/btn_click_back_color"> <ImageView android:id="@+id/img_integral_shop" android:layout_width="48dp" android:layout_height="66dp" android:layout_centerHorizontal="true" android:layout_marginTop="10dp" android:src="@mipmap/stair" /> <TextView android:id="@+id/tv_intro" style="@style/index_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/img_integral_shop" android:layout_centerHorizontal="true" android:layout_marginTop="5dp" android:background="@drawable/shape_both_green" android:gravity="center" android:paddingBottom="5dp" android:paddingLeft="10dp" android:paddingRight="10dp" android:paddingTop="5dp" android:text="@string/stair" android:textColor="@color/bgcolor" /> <TextView style="@style/help_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/tv_intro" android:layout_marginTop="5dp" android:gravity="center" android:text="@string/note" android:textColor="@color/gray_66" /> <FrameLayout android:id="@+id/onAirLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true"> <!-- 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="100dp" android:layout_height="100dp" android:layout_gravity="top|right|end" android:layout_marginBottom="-30dp" android:background="@drawable/triangle_style" 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="8dp" android:gravity="center" android:rotation="45" android:text="Material object" android:textColor="@android:color/white" android:textSize="12sp" /> </FrameLayout> </RelativeLayout> </layout>