Android implements buttons of various shapes and colors

Android implements buttons of various shapes

Previous Setting up transparent buttons and custom backgrounds I won’t explain how to set them up here. This article mainly shares buttons of various shapes and colors.
shape 1:

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 设置固定填充色 -->
<solid android:color="#f00" /> //颜色可以自己设定
<size android:width="60dp" android:height="30dp"/>
</shape>

Take a look at the effect:
insert image description here
shape 2:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:width="60dp" android:height="30dp"/>
    <!-- 设置渐变填充色 -->
    <gradient android:startColor="#00f" android:centerColor="#0f0" android:endColor="#f00"></gradient>
</shape>

insert image description here
Shape 3:

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <size android:width="60dp" android:height="30dp"/>
    <!-- 设置描边 -->
    <stroke 
        android:width="2dp" 
        android:color="#f00" >
    </stroke>
</shape>

insert image description here
Shape 4:

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:width="60dp" android:height="30dp"/>
<!-- 设置描边 -->
	<stroke
		android:width="2dp" 
		android:color="#f00" 
		android:dashWidth="5dp"
		android:dashGap="5dp">
	</stroke>
</shape>

insert image description here
Shape 5:

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <size android:width="60dp" android:height="30dp"/>
    <!-- 设置描边 -->
    <stroke 
        android:width="2dp" 
        android:color="#f00" 
        android:dashWidth="5dp" 
        android:dashGap="5dp"></stroke>
    <corners android:radius="15dp"/>
</shape>

insert image description here
Shape 6:

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 设置固定填充色 -->
    <solid android:color="#f00" />
    <size 
        android:width="60dp" 
        android:height="30dp"/>
    <corners android:radius="10dp"/>
</shape>

insert image description here
Shape 7:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:width="60dp" android:height="30dp"/>
    <!-- 设置渐变填充色 -->
    <gradient 
        android:startColor="#f00" 
        android:centerColor="#0f0" 
        android:endColor="#00f" 
        android:gradientRadius="60"
        android:type="radial"></gradient>
</shape>

insert image description here
Shape 8:

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

    <size android:width="60dp" android:height="30dp"/>
    <!-- 设置描边 -->
    <stroke android:width="2dp" android:color="#FFBB86FC" ></stroke>
    <corners android:radius="15dp"/>
</shape>

insert image description here
Shape 9:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <size android:width="60dp" android:height="30dp"/>
    <!-- 设置渐变填充色 -->
    <gradient android:startColor="#4169E1"
        android:centerColor="#D2691E"
        android:endColor="#87CEFA"
        android:type="sweep">

    </gradient>
</shape>

insert image description here
Shape 10:

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <size android:width="60dp" android:height="30dp"/>
    <!-- 设置描边 -->
    <stroke 
        android:width="2dp" 
        android:color="#f00" 
        android:dashWidth="5dp" 
        android:dashGap="5dp">
    </stroke>
    <corners 
        android:radius="15dp" 
        android:topRightRadius="0dp" 
        android:bottomRightRadius="0dp"/>
</shape>

insert image description here
Shape 11:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!-- 设置固定填充色 -->
    <solid android:color="#48D1CC" />
    <size android:width="60dp" android:height="30dp"/>
</shape>

insert image description here
Shape 12:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:width="60dp" android:height="30dp"/>
    <!-- 设置渐变色 -->
    <gradient 
        android:startColor="#00f" 
        android:centerColor="#0f0" 
        android:endColor="#f00"></gradient>
</shape>

insert image description here
Shape 13:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:width="60dp" android:height="30dp"/>
    <!-- 设置描边色 -->
    <stroke
        android:width="2dp"
        android:color="#f00" >
    </stroke>
</shape>

insert image description here
Shape 14:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:width="60dp" android:height="30dp"/>
    <!-- 设置描边色 -->
    <stroke 
        android:width="2dp" 
        android:color="#f00" 
        android:dashWidth="5dp" 
        android:dashGap="5dp">
    </stroke>
</shape>

insert image description here
Shape 15:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="20dp"
    android:shape="ring"
    android:thickness="2dp"
    android:useLevel="false" >
    <!-- 设置固定填充色 -->
    <solid android:color="#f00" />
    <size
        android:height="20dp" />
</shape>

insert image description here
Shape 16:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="20dp"
    android:shape="ring"
    android:thickness="2dp"
    android:useLevel="false" >
    <!-- 设置渐变填充色 -->
    <gradient 
        android:startColor="#00f" 
        android:centerColor="#0f0" 
        android:endColor="#f00"/>
    <size
        android:height="44dp"/>
    <stroke 
        android:width="2dp" 
        android:color="#f00" 
        android:dashWidth="5dp" 
        android:dashGap="5dp"/>
</shape>

insert image description here
Shape 17:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line" >
    <stroke
        android:dashGap="8px"
        android:dashWidth="8px"
        android:width="1dp"
        android:color="#f00" />
    <size android:height="30dip" />
</shape>

insert image description here

Guess you like

Origin blog.csdn.net/fancynthia/article/details/123545774