android自定义Button背景、EditText背景
为了界面的美观,我们经常需要自定义系统自带的Button和EditText控件,下面我实现了button去掉边框、点击button字体变色和editText矩形框背景,借以美化登录界面。
先上图片:
1.在res文件夹下的drawable文件夹里新建edittext_background.xml,实现editText矩形边框
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="3dp"/>
<stroke
android:width="2dp"
android:color="#ffffff"/>
</shape>
</item>
</layer-list>
2.在res文件夹下的drawable文件夹里新建button_shape.xml,自定义button背景,去掉button边框
<?xml version="1.0" encoding="utf-8" ?>
<!--shape用于定义形状,有四种形状(矩形rectangle| 椭圆oval | 直线line | 圆形ring)-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--solid用于设置填充形状的颜色-->
<!-- <solid android:color="#f06f3c" />-->
<!--corners用于创建圆角(只用于形状是矩形)-->
<!-- <corners android:radius="3dp"/>-->
<padding
android:left="10dp"
android:right="10dp"/>
<!-- 设置边框线的宽度和颜色-->
<stroke
android:width="0dp"
android:color="#ffffff"/>
</shape>
3.在res文件夹下的drawable文件夹里新建text_color_selector.xml,实现点击按钮改变颜色提供反馈
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/white" android:state_pressed="false"></item>
<item android:color="@color/colorPrimary" android:state_pressed="true"></item>
</selector>
4.activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black_ground"
tools:context=".MainActivity">
<EditText
android:background="@drawable/edittext_background"
android:textColor="@color/white"
android:hint="请输入账号"
android:paddingLeft="12dp"
android:textSize="16dp"
android:textColorHint="@color/white"
android:layout_width="0dp"
android:layout_height="40dp"
android:id="@+id/loginText"
android:layout_marginTop="32dp"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="24dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="24dp"/>
<EditText
android:background="@drawable/edittext_background"
android:textColor="@color/white"
android:hint="请输入密码"
android:paddingLeft="12dp"
android:textSize="16dp"
android:textColorHint="@color/white"
android:layout_width="0dp"
android:id="@+id/registerText"
android:inputType="textPassword"
android:layout_height="40dp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="@+id/loginText" app:layout_constraintStart_toStartOf="@+id/loginText"
app:layout_constraintEnd_toEndOf="@+id/loginText"/>
<Button
android:background="@drawable/button_shape"
android:text="登陆"
android:textSize="24dp"
android:textColor="@drawable/text_color_selector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/loginButton" android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="@+id/registerText" app:layout_constraintStart_toStartOf="@+id/registerText"
app:layout_constraintEnd_toEndOf="@+id/registerText"/>
<Button
android:background="@drawable/button_shape"
android:text="注册"
android:textSize="24dp"
android:textColor="@drawable/text_color_selector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/registerButton" android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="@+id/loginButton" app:layout_constraintStart_toStartOf="@+id/loginButton"
app:layout_constraintEnd_toEndOf="@+id/loginButton"/>
</android.support.constraint.ConstraintLayout>
5.colors.xml:增加需要用到的颜色资源
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>
<color name="white">#ffffff</color>
<color name="black_ground">#000000</color>
<color name="gray_text">#A2A2A2</color>
</resources>