Android按钮 button_android button 背景

图标环绕button

效果

代码

package cn.jj.huaweiad;

import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import androidx.appcompat.app.AppCompatActivity;

public class IconButtonActivity extends AppCompatActivity {

    private Button iconBtn;
    private Button btnLeft;
    private Button btnTop;
    private Button btnRight;
    private Button btnBottom;
    private Drawable drawable;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_icon_button);
        initView();
        drawable = getResources().getDrawable(R.drawable.ic_launcher_foreground);
        drawable.setBounds(0,0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
    }

    private void initView() {
        iconBtn = (Button) findViewById(R.id.icon_btn);
        btnLeft = (Button) findViewById(R.id.btn_left);
        btnLeft.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                iconBtn.setCompoundDrawables(drawable,null,null,null);
            }
        });
        btnTop = (Button) findViewById(R.id.btn_top);
        btnTop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                iconBtn.setCompoundDrawables(null,drawable,null,null);
            }
        });
        btnRight = (Button) findViewById(R.id.btn_right);
        btnRight.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                iconBtn.setCompoundDrawables(null,null,drawable,drawable);
                iconBtn.setCompoundDrawablePadding(20);
            }
        });
        btnBottom = (Button) findViewById(R.id.btn_bottom);
        btnBottom.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                iconBtn.setCompoundDrawables(null,null,null,drawable);
            }
        });
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".IconButtonActivity"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="300dp">

        <Button
            android:id="@+id/icon_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="热烈欢迎"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:orientation="vertical">
        <Button
            android:id="@+id/btn_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="图标在左"/>

        <Button
            android:id="@+id/btn_top"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="图标在上"/>

        <Button
            android:id="@+id/btn_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="图标在右"/>

        <Button
            android:id="@+id/btn_bottom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="图标在下"/>


    </LinearLayout>

</androidx.appcompat.widget.LinearLayoutCompat>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

按钮声明圆角以及按压色

android如果想要给按钮设置圆角，可以进行下面的设置：

• shape_rect_blue_agree.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--    指定形状内部填充的颜色 -->
    <solid android:color="#1c7fff"/>
    <!-- 制定了形状轮廓的粗细和颜色-->
    <stroke
        android:width="1dp"
        android:color="#aaaaaa"/>
    <!--    指定四个角的半径    -->
    <corners android:radius="5dp"/>
</shape>
1
2
3
4
5
6
7
8
9
10
11

该方法可以指定shape。shape为res/drawable目录下的xml文件。指定完shape之后，便可以在layout布局文件中声明按钮的背景。

 <Button
     android:id="@+id/jjterms_tip_agree_btn"
     android:layout_width="0dp"
     android:layout_height="40dp"
     android:layout_weight="1"
     android:layout_marginStart="6dp"
     android:background="@drawable/agree_button_selector"
     android:text="同意"
     android:textColor="@android:color/white"
     android:textSize="16sp" />
1
2
3
4
5
6
7
8
9
10

但是此时声明的背景为单色的，如果想要给按钮声明按压的的颜色，可以在res/layout中声明一个agree_button_selector的xml文件，文件中声明按压与非按压状态下按钮的颜色。

• agree_button_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/shape_rect_blue_agree" android:state_pressed="false"/>
    <item android:drawable="@drawable/shape_rect_blue_agree_press" android:state_pressed="true"/>
</selector>
1
2
3
4

• shape_rect_blue_agree_press.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--    指定形状内部填充的颜色 -->
    <solid android:color="#87CEFA"/>
    <!-- 制定了形状轮廓的粗细和颜色-->
    <stroke
        android:width="1dp"
        android:color="#aaaaaa"/>
    <!--    指定四个角的半径    -->
    <corners android:radius="5dp"/>
</shape>
1
2
3
4
5
6
7
8
9
10
11

button background

android:background中设置图片生效，设置颜色不生效。

        <Button
            android:id="@+id/btn_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/hiad_arrow_down"
            android:text="图标在左"/>
1
2
3
4
5
6