Define control background shape color through XML

Define xml in drawable and reference it in background

<Button
	android:id="@+id/completeBtn"
	android:layout_width="80dp"
	android:layout_height="40dp"
	android:layout_marginTop="32dp"
	android:text="finished"
	android:textColor="@color/white"
	android:textSize="18sp"
	android:background="@drawable/green_radius"/>

 

1. Rounded Rectangle

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#10B703" />

            <!-- should be rounded-->
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>

 

2. The left and right borders are semi-circular rectangles

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#10B703" />

            <!-- Should be half the height of the control-->
            <corners android:radius="25dp" />
        </shape>
    </item>
</layer-list>

 

3. Rounded rectangle with border

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
        	<!-- border -->
            <stroke android:color="@color/grey97" android:width="1px"/>

            <!-- main background color-->
            <solid android:color="@color/white" />
            
            <!-- rounded corners-->
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>

 

4. Only some corners are rounded, others are right-angled rectangles

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <stroke android:color="@color/grey97" android:width="1px"/>

            <solid android:color="@color/white" />
            
            <!-- Set a value greater than 0 where the corners need to be rounded-->
            <corners
                android:bottomRightRadius="0dp"
                android:bottomLeftRadius="4dp"
                android:topLeftRadius="4dp"
                android:topRightRadius="0dp"/>
        </shape>
    </item>
</layer-list>

 refer Creating a rectangle shape with only two rounded edges

 

5. A rectangle that does not display a border

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- Unwanted borders are identified as negative border widths-->
    <item android:left="-1px">
        <shape>
            <stroke android:color="@color/grey97" android:width="1px"/>

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

            <!-- Fillet Control-->
            <corners
                android:bottomRightRadius="4dp"
                android:bottomLeftRadius="0dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="4dp"/>

        </shape>
    </item>

</layer-list>

  refer Open-sided Android stroke

 

6. Round

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
    	<!-- The place defined by the control ensures that the height and width are equal -->
		<shape
            android:shape="oval"
            xmlns:android="http://schemas.android.com/apk/res/android">

            <solid android:color="@color/white" />

            <stroke android:color="#DCDCDC" android:width="1dp"/>

        </shape>
    </item>
</layer-list>

 

7. Click to change background

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- Normal no-click situation-->
    <item android:state_pressed="false">
        <shape>
        	<!-- Other features such as stroke can be added -->
            <solid android:color="@color/color1" />

            <corners android:radius="25dp" />
        </shape>
    </item>

	<!-- When clicked -->
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/color2" />

            <corners android:radius="25dp" />
        </shape>
    </item>
</selector>

 

8. ProgressBar color gradient, referenced in progressDrawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- initial background -->
    <item android:id="@android:id/background">
        <shape>
            <gradient
                android:startColor="#ff9d9e9d"
                android:endColor="#ff9d9e9d"
                />
        </shape>
    </item>

    <!-- Gradient in process -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:startColor="@color/light_orange"
                    android:endColor="@color/main_orange" />
            </shape>
        </clip>
    </item>

</layer-list>

 refer How to Customize a Progress Bar In Android

          Custom Drawable for ProgressBar/ProgressDialog

 

9. Normal Linear Gradients

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:angle="0"
                android:startColor="#C8C8C8"
                android:centerColor="#979797"
                android:endColor="#C8C8C8"
                android:type="linear" />
        </shape>
    </item>
</layer-list>

  

 

 

 

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326986067&siteId=291194637