android adds a triangle icon in the upper right corner and displays text inside the icon

Posted by incarnate on Sun, 05 Jan 2020 19:02:44 +0100

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>

 

Topics: Android xml encoding Google