How to set background + textview with border (fillet)

There are three ways to do this

  • Method 1:

There is nothing good about the background picture with transparent picture. Just make a border picture by yourself, and then set the background

Add a background for the TextView to which you want to add a border

android:background="@drawable/textview_border" 

  • Method two:

Set background image with shape

First, create a textview? Border.xml file and put it in the drawable folder

<?xml version="1.0" encoding="utf-8"?>  

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >  

   <solid android:color="#ffffff" />  

   <stroke android:width="1dip" android:color="#4fa5d5"/>  

</shape>

Then set it to the background: Android: background = "@ drawable / textview? Border"

  • Method three:

Write a custom component that inherits the TextView class and draw a border in the onDraw event method.

public class BorderTextView extends TextView{  

    public BorderTextView(Context context) {  

        super(context);  

    }  

    public BorderTextView(Context context, AttributeSet attrs) {  

        super(context, attrs);

    }  

    private int sroke_width = 1;  

    @Override  

    protected void onDraw(Canvas canvas) {  

        Paint paint = new Paint();  

/ / set border to black

        paint.setColor(android.graphics.Color.BLACK);  

/ / draw 4 sides of TextView

        canvas.drawLine(0, 0, this.getWidth() - sroke_width, 0, paint);  

        canvas.drawLine(0, 0, 0, this.getHeight() - sroke_width, paint);  

        canvas.drawLine(this.getWidth() - sroke_width, 0, this.getWidth() - sroke_width, this.getHeight() - sroke_width, paint);  

        canvas.drawLine(0, this.getHeight() - sroke_width, this.getWidth() - sroke_width, this.getHeight() - sroke_width, paint);  

        super.onDraw(canvas);

    }

}

The second method is commonly used. Some cases are as follows:

<?xml version="1.0" encoding="utf-8"?>  
<shape  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape=["rectangle" | "oval" | "line" | "ring"]      //There are 4 types, rectangle (default) / ellipse / straight / ring  
    // The following four properties are only valid if the type is ring  
    android:innerRadius="dimension"     //Inner radius  
    android:innerRadiusRatio="float"    //The ratio of the inner ring radius to the ring width. For example, if the ring width is 50 and the ratio is 2.5, then the inner ring radius is 20  
    android:thickness="dimension"   //Thickness of rings  
    android:thicknessRatio="float"     //Ratio of ring thickness to ring width  
    android:useLevel="boolean">    //If it is considered as LevelListDrawable, the value is true, otherwise it is false  
    <corners    //Define fillet  
        android:radius="dimension"      //Full fillet radius  
        android:topLeftRadius="dimension"   //Fillet radius in the upper left corner  
        android:topRightRadius="dimension"  //Fillet radius in the upper right corner  
        android:bottomLeftRadius="dimension"    //Fillet radius in the lower left corner  
        android:bottomRightRadius="dimension" />    //Fillet radius in the lower right corner   
    <gradient   //Define gradient effect  
        android:type=["linear" | "radial" | "sweep"]    //There are 3 Gradient types, linear gradient (default) / radial gradient / scanning gradient  
        android:angle="integer"     //Gradient angle, must be a multiple of 45, 0 from left to right, 90 from top to bottom  
        android:centerX="float"     //The equivalent position of the gradient center X, ranging from 0 to 1  
        android:centerY="float"     //The equivalent position of the gradient center Y, ranging from 0 to 1  
        android:startColor="color"      //Color of the start point of the gradient  
        android:centerColor="color"     //The color of the middle point of the gradient, between the start and end points  
        android:endColor="color"    //Color of gradient end point  
        android:gradientRadius="float"  //The radius of the gradient, which can only be used when the gradient type is radial  
        android:useLevel=["true" | "false"] />  //Set to true when using LevelListDrawable. Set to false for gradient effect  
    <padding    //Internal margin  
        android:left="dimension"  
        android:top="dimension"  
        android:right="dimension"  
        android:bottom="dimension" />  
    <size   //Custom drawing size  
        android:width="dimension"  
        android:height="dimension" />  
    <solid  //Interior fill color  
        android:color="color" />  
    <stroke     //Stroke  
        android:width="dimension"   //Width of stroke  
        android:color="color"   //The color of the stroke  
        // The following two properties set dashed lines  
        android:dashWidth="dimension"   //The width of the dotted line. A value of 0 is a solid line  
        android:dashGap="dimension" />      //Spacing of dashed lines  
</shape> 

Rounded rectangle, scanning gradient:

<?xml version="1.0" encoding="utf-8"?>  
<shape  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle"  
    android:useLevel="false" >  
    <corners  
        android:topLeftRadius="10dp"  
        android:topRightRadius="10dp"  
        android:bottomLeftRadius="10dp"  
        android:bottomRightRadius="10dp" />  
    <gradient  
        android:type="sweep"  
        android:endColor="@android:color/holo_blue_bright"  
        android:startColor="@android:color/holo_green_dark"  
        android:centerColor="@android:color/holo_blue_dark"  
        android:useLevel="false" />  
    <size android:width="60dp" android:height="60dp" />  
</shape>

Circular, linear gradient

<?xml version="1.0" encoding="utf-8"?>  
<shape  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="oval"  
    android:useLevel="false" >   
    <gradient  
        android:type="linear"  
        android:angle="45"  
        android:startColor="@android:color/holo_green_dark"  
        android:centerColor="@android:color/holo_blue_dark"  
        android:endColor="@android:color/holo_red_dark"  
        android:useLevel="false" />   
    <size android:width="60dp" android:height="60dp" />   
    <stroke android:width="1dp"  
        android:color="@android:color/white" />  
</shape>

Dotted line

<?xml version="1.0" encoding="utf-8"?>  
<shape  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="line" >    
    <size android:width="60dp"  
        android:height="60dp" />    
    <stroke android:width="2dp"  
        android:color="@android:color/holo_purple"  
        android:dashWidth="10dp"  
        android:dashGap="5dp" />  
</shape>

Circular, radial gradient

<?xml version="1.0" encoding="utf-8"?>  
<shape  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="ring"  
    android:useLevel="false"  
    android:innerRadius="40dp"  
    android:thickness="3dp">  
    <gradient android:type="radial"  
        android:gradientRadius="150"  
        android:centerY="0.1"  
        android:centerX="0.2"  
        android:startColor="@android:color/holo_red_dark"  
        android:centerColor="@android:color/holo_green_dark"  
        android:endColor="@android:color/white" />  
    <size android:width="90dp"  
        android:height="90dp" />  
</shape>

Combined with shape background in selector

<selector xmlns:android="http://schemas.android.com/apk/res/android">  
    <item android:drawable="@drawable/shape_border_press" android:state_pressed="true" />  
    <item android:drawable="@drawable/shape_border_nor" android:state_window_focused="false" />  
</selector>

 

 

 

Tags: Android xml encoding

Posted on Mon, 06 Jan 2020 09:52:06 -0800 by Brendan Nolan