android 给 button 添加边框及底色

本文介绍如何通过XML和Java代码自定义Android应用中按钮的样式,包括设置边框颜色、边框宽度及背景色。
 

1、以下是设置按钮的右边框和底边框颜色为红色,边框大小为3dp,如下图:

在drawable新建一个 buttonstyle.xml的文件,内容如下:

[html]  view plain copy
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">   
  3. <!-- 连框颜色值 --><item>   
  4.       <shape>   
  5.             <solid android:color="#ff0000" />   
  6.       </shape>   
  7. </item>   
  8. <!-- 主体背景颜色值 -->  
  9. <item android:bottom="3dp" android:right="3dp">   
  10.      <shape>   
  11.            <solid android:color="#ffffff" />  
  12.              
  13.            <padding android:bottom="10dp"  
  14.                 android:left="10dp"  
  15.                 android:right="10dp"  
  16.                 android:top="10dp" />  
  17.      </shape>       
  18. </item>  
  19. </layer-list>  

 

然后在布局文件里面的Button里面设置如下:

  1. <Button  
  2.    android:id="@+id/button1"  
  3.    android:layout_width="wrap_content"  
  4.    android:layout_height="wrap_content"  
  5.    android:text="Button1"  
  6.    android:background="@drawable/buttonstyle" />  

2、

[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. GradientDrawable drawable = new GradientDrawable();  
  2. drawable.setShape(GradientDrawable.RECTANGLE); // 画框  
  3. drawable.setStroke(1, Color.BLUE); // 边框粗细及颜色  
  4. drawable.setColor(0x22FFFF00); // 边框内部颜色  
  5.   
  6. mFullscreenBtn = new Button(ctx);  

  1. mFullscreenBtn.setBackgroundDrawable(drawable); // 设置背景(效果就是有边框及底色)
根据:package com.example.bulbpage import android.annotation.SuppressLint import android.graphics.Outline import android.graphics.Path import android.graphics.drawable.ClipDrawable import android.os.Bundle import android.view.GestureDetector import android.view.MotionEvent import android.view.View import android.view.ViewOutlineProvider import android.widget.Toast import androidx.appcompat.app.AppCompatActivity import androidx.core.content.ContextCompat import com.example.bulbpage.databinding.ActivityMainBinding import com.google.android.material.bottomsheet.BottomSheetBehavior import com.google.android.material.button.MaterialButton class MainActivity : AppCompatActivity() { private var _binding: ActivityMainBinding? = null private val binding get() = _binding!! // ✅ 使用 by lazy 延迟初始化 private val colorOverlay: View by lazy { binding.colorOverlay } private var currentColorResId = R.color.white private var currentColor: Int = android.R.color.white // 默认颜色 @SuppressLint("ClickableViewAccessibility") override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) _binding = ActivityMainBinding.inflate(layoutInflater) setContentView(binding.root) val llBottomSheet = binding.llBottomSheet val pullImageView = binding.pull colorOverlay.setBackgroundColor(ContextCompat.getColor(this, currentColorResId)) pullImageView.clipToOutline = true pullImageView.outlineProvider = object : ViewOutlineProvider() { override fun getOutline(view: View, outline: Outline) { val cornerRadius = 80f val path = Path() val width = view.width.toFloat() val height = view.height.toFloat() path.moveTo(0f, height) path.lineTo(0f, cornerRadius) path.quadTo(width / 2, 0f, width, cornerRadius) path.lineTo(width, height) path.close() outline.setConvexPath(path) } } //灯泡亮度操作 val lampImageView = binding.lampImageView var startY = 0f var totalDelta = 0f var isDragging = false // 是否已进入拖动状态 val maxDelta = 150 * resources.displayMetrics.density // 灯泡图高度 val gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() { override fun onDown(e: MotionEvent): Boolean { // 只有起点在 lampImageView 内部才开始检测滑动 if (e.x >= 0 && e.x <= lampImageView.width && e.y >= 0 && e.y <= lampImageView.height) { startY = e.y isDragging = true return true } isDragging = false return false } override fun onScroll( e1: MotionEvent?, e2: MotionEvent, distanceX: Float, distanceY: Float ): Boolean { if (!isDragging) return false totalDelta += distanceY totalDelta = totalDelta.coerceIn(0f, maxDelta) val percent = (totalDelta / maxDelta) * 100 val level = (percent * 100).toInt() (binding.lampImageView.drawable as? ClipDrawable)?.level = level binding.percentText.text = "${percent.toInt()}%" // 设置遮罩层透明度:0% -> 50%, 100% -> 100% val alpha =0.4f * (1 - percent / 100f) binding.coverView.alpha = alpha return true } }) // 为 lampImageView 设置触摸监听器(处理 ACTION_UP) lampImageView.setOnTouchListener { _, event -> when (event.action) { MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> { isDragging = false } } gestureDetector.onTouchEvent(event) } // 按钮组点击绑定 val buttons = listOf( binding.buttonAuto, binding.buttonWhite, binding.buttonOrange, binding.buttonDeepblue, binding.buttonSkyblue, binding.buttonFlamered ) buttons.forEach { button -> button.setOnClickListener { onButtonClicked(button) } } val behavior = BottomSheetBehavior.from(llBottomSheet) updatePullSelectorState(behavior.state) } //按钮组点击事件 private fun onButtonClicked(button: MaterialButton) { when (button.id) { R.id.button_auto -> { Toast.makeText(this, "点击了 自动 按钮", Toast.LENGTH_SHORT).show() currentColorResId = R.color.white } R.id.button_white -> { Toast.makeText(this, "点击了 白色 按钮", Toast.LENGTH_SHORT).show() currentColorResId = R.color.white } R.id.button_orange -> { Toast.makeText(this, "点击了 橙色 按钮", Toast.LENGTH_SHORT).show() currentColorResId = R.color.orange } R.id.button_deepblue -> { Toast.makeText(this, "点击了 深蓝色 按钮", Toast.LENGTH_SHORT).show() currentColorResId = R.color.deepblue } R.id.button_skyblue -> { Toast.makeText(this, "点击了 天蓝色 按钮", Toast.LENGTH_SHORT).show() currentColorResId = R.color.skyblue } R.id.button_flamered -> { Toast.makeText(this, "点击了 火焰色 按钮", Toast.LENGTH_SHORT).show() currentColorResId = R.color.flamered } } colorOverlay.setBackgroundColor(ContextCompat.getColor(this, currentColorResId)) } private fun updatePullSelectorState(state: Int) { when (state) { BottomSheetBehavior.STATE_EXPANDED -> { binding.pull.isSelected = true } else -> { binding.pull.isSelected = false } } } override fun onDestroy() { super.onDestroy() _binding = null } } 以及对应xml:<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/background_gray"> <!-- 颜色层--> <View android:id="@+id/colorOverlay" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" /> <!--遮罩层--> <View android:id="@+id/cover_view" android:layout_width="match_parent" android:layout_height="match_parent" android:alpha="0.4" android:background="@color/black" /> <!--背景底色(最底层)--> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/background" android:visibility="visible" /> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/background" android:visibility="visible" /> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/background" android:visibility="visible" /> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/background" android:visibility="visible" /> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/background" android:visibility="visible" /> <!-- 顶部杂项--> <ImageButton android:layout_width="24dp" android:layout_height="24dp" android:layout_margin="16dp" android:background="@android:color/transparent" android:scaleType="centerCrop" android:src="@drawable/back" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="16dp" android:text="Smart Lamp" android:textSize="21.2dp" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="46.5dp" > <ImageView android:layout_width="16dp" android:layout_height="16dp" android:layout_gravity="center_vertical" android:src="@drawable/location" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="4dp" android:text="Bedroom" android:textSize="16dp" /> </LinearLayout> <ImageButton android:layout_width="24dp" android:layout_height="24dp" android:layout_gravity="end" android:layout_margin="16dp" android:background="@android:color/transparent" android:scaleType="fitCenter" android:src="@drawable/setting" /> <!-- 按钮组--> <!-- 按钮组--> <!-- 按钮组 --> <LinearLayout android:id="@+id/button_group" android:layout_width="360dp" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="89dp" android:paddingStart="22dp" android:paddingEnd="22dp" android:orientation="horizontal"> <!-- Auto 按钮 --> <FrameLayout android:tag="button_container" android:layout_width="wrap_content" android:layout_height="wrap_content"> <com.google.android.material.button.MaterialButton android:id="@+id/button_auto" android:layout_width="35dp" android:layout_height="35dp" android:backgroundTint="@color/white" android:insetTop="0dp" android:insetBottom="0dp" app:cornerRadius="17.5dp" app:rippleColor="@android:color/transparent" app:strokeColor="@android:color/darker_gray" app:strokeWidth="1dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Auto" android:textSize="13dp" /> </FrameLayout> <!-- White 按钮 --> <FrameLayout android:tag="button_container" android:layout_width="35dp" android:layout_height="35dp" android:layout_marginStart="20dp"> <com.google.android.material.button.MaterialButton android:id="@+id/button_white" android:layout_width="35dp" android:layout_height="35dp" android:backgroundTint="@color/white" android:insetTop="0dp" android:insetBottom="0dp" app:cornerRadius="17.5dp" app:rippleColor="@android:color/transparent" app:strokeColor="@android:color/darker_gray" app:strokeWidth="1dp" /> <ImageView android:id="@+id/editicon_white" android:layout_width="24dp" android:layout_height="24dp" android:layout_gravity="center" android:src="@drawable/edit" android:visibility="gone" /> <View android:id="@+id/ring_white" android:layout_width="38dp" android:layout_height="38dp" android:layout_gravity="center" android:background="@drawable/ring_white" android:visibility="gone" /> </FrameLayout> <!-- Orange 按钮 --> <FrameLayout android:tag="button_container" android:layout_width="35dp" android:layout_height="35dp" android:layout_marginStart="20dp"> <com.google.android.material.button.MaterialButton android:id="@+id/button_orange" android:layout_width="35dp" android:layout_height="35dp" android:backgroundTint="@color/orange" android:insetTop="0dp" android:insetBottom="0dp" app:cornerRadius="17.5dp" app:rippleColor="@android:color/transparent" app:strokeColor="@android:color/white" app:strokeWidth="1dp" /> <ImageView android:id="@+id/editicon_orange" android:layout_width="24dp" android:layout_height="24dp" android:layout_gravity="center" android:src="@drawable/edit" android:visibility="gone" /> <View android:id="@+id/ring_orange" android:layout_width="38dp" android:layout_height="38dp" android:layout_gravity="center" android:background="@drawable/ring_white" android:visibility="gone" /> </FrameLayout> <!-- Deep Blue 按钮 --> <FrameLayout android:tag="button_container" android:layout_width="35dp" android:layout_height="35dp" android:layout_marginStart="20dp"> <com.google.android.material.button.MaterialButton android:id="@+id/button_deepblue" android:layout_width="35dp" android:layout_height="35dp" android:backgroundTint="@color/deepblue" android:insetTop="0dp" android:insetBottom="0dp" app:cornerRadius="17.5dp" app:rippleColor="@android:color/transparent" app:strokeColor="@android:color/white" app:strokeWidth="1dp" /> <ImageView android:id="@+id/editicon_deepblue" android:layout_width="24dp" android:layout_height="24dp" android:layout_gravity="center" android:src="@drawable/edit" android:visibility="gone" /> <View android:id="@+id/ring_deepblue" android:layout_width="38dp" android:layout_height="38dp" android:layout_gravity="center" android:background="@drawable/ring_white" android:visibility="gone" /> </FrameLayout> <!-- Sky Blue 按钮 --> <FrameLayout android:tag="button_container" android:layout_width="35dp" android:layout_height="35dp" android:layout_marginStart="20dp"> <com.google.android.material.button.MaterialButton android:id="@+id/button_skyblue" android:layout_width="35dp" android:layout_height="35dp" android:backgroundTint="@color/skyblue" android:insetTop="0dp" android:insetBottom="0dp" app:cornerRadius="17.5dp" app:rippleColor="@android:color/transparent" app:strokeColor="@android:color/white" app:strokeWidth="1dp" /> <ImageView android:id="@+id/editicon_skyblue" android:layout_width="24dp" android:layout_height="24dp" android:layout_gravity="center" android:src="@drawable/edit" android:visibility="gone" /> <View android:id="@+id/ring_skyblue" android:layout_width="38dp" android:layout_height="38dp" android:layout_gravity="center" android:background="@drawable/ring_white" android:visibility="gone" /> </FrameLayout> <!-- Flame Red 按钮 --> <FrameLayout android:tag="button_container" android:layout_width="35dp" android:layout_height="35dp" android:layout_marginStart="20dp"> <com.google.android.material.button.MaterialButton android:id="@+id/button_flamered" android:layout_width="35dp" android:layout_height="35dp" android:backgroundTint="@color/flamered" android:insetTop="0dp" android:insetBottom="0dp" app:cornerRadius="17.5dp" app:rippleColor="@android:color/transparent" app:strokeColor="@android:color/white" app:strokeWidth="1dp" /> <ImageView android:id="@+id/editicon_flamered" android:layout_width="24dp" android:layout_height="24dp" android:layout_gravity="center" android:src="@drawable/edit" android:visibility="gone" /> <View android:id="@+id/ring_flamered" android:layout_width="38dp" android:layout_height="38dp" android:layout_gravity="center" android:background="@drawable/ring_white" android:visibility="gone" /> </FrameLayout> </LinearLayout> <!--灯泡背景--> <ImageView android:id="@+id/imageView" android:layout_width="180dp" android:layout_height="244dp" android:layout_gravity="center_horizontal" android:layout_marginTop="207dp" android:src="@drawable/bulbbottom" /> <!--滑动图层--> <ImageView android:id="@+id/lampImageView" android:layout_width="180dp" android:layout_height="244dp" android:layout_gravity="center_horizontal" android:layout_marginTop="190dp" android:adjustViewBounds="true" android:scaleType="centerInside" android:src="@drawable/clip_bulb" /> <TextView android:id="@+id/percentText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="167dp" android:text="0%" android:textColor="#000" android:textSize="18sp" /> <!--灯泡底座--> <ImageView android:layout_width="180dp" android:layout_height="658dp" android:layout_gravity="center_horizontal" android:src="@drawable/bulbonbottom" /> <!--开关按钮--> <ImageButton android:id="@+id/switch_button" android:layout_width="60dp" android:layout_height="60dp" android:layout_gravity="center_horizontal" android:layout_marginTop="476dp" android:background="@android:color/transparent" android:scaleType="centerInside" android:src="@drawable/switchselector" /> <!--隐藏栏开关--> <!-- <LinearLayout--> <!-- android:layout_width="match_parent"--> <!-- android:layout_height="wrap_content"--> <!-- android:layout_marginTop="60dp"--> <!-- android:gravity="center"--> <!-- android:orientation="vertical">--> <!-- <Button--> <!-- android:id="@+id/btn_bottom_sheet"--> <!-- android:layout_width="wrap_content"--> <!-- android:layout_height="wrap_content"--> <!-- android:layout_marginTop="32dp"--> <!-- android:text="BottomSheet"--> <!-- android:textAllCaps="false" />--> <!--隐藏toolbar--> <LinearLayout android:id="@+id/ll_bottom_sheet" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" app:behavior_peekHeight="110dp" app:layout_behavior="@string/bottom_sheet_behavior"> <ImageView android:id="@+id/pull" android:layout_width="match_parent" android:layout_height="30dp" android:background="@color/white" android:clickable="false" android:focusable="false" android:gravity="center" android:paddingTop="15dp" android:src="@drawable/pullselector" /> <TextView android:layout_width="match_parent" android:layout_height="80dp" android:background="@color/white" android:gravity="center" android:text="c" android:textSize="20sp" /> <TextView android:layout_width="match_parent" android:layout_height="80dp" android:background="@android:color/holo_orange_dark" android:gravity="center" android:text="b" android:textSize="20sp" /> <TextView android:layout_width="match_parent" android:layout_height="80dp" android:background="@android:color/holo_green_light" android:gravity="center" android:text="c" android:textSize="20sp" /> <TextView android:layout_width="match_parent" android:layout_height="80dp" android:background="@android:color/holo_orange_dark" android:gravity="center" android:text="b" android:textSize="20sp" /> <TextView android:layout_width="match_parent" android:layout_height="80dp" android:background="@android:color/holo_orange_light" android:gravity="center" android:text="c" android:textSize="20sp" /> </LinearLayout> </androidx.coordinatorlayout.widget.CoordinatorLayout> 实现设置点击除了自动按钮之外的每个按钮时,按钮内的edit图标可见,其他按钮的edit图标不可见,在被点击按钮外圈画一个宽度为1dp,直径为38dp的白色圆环,取消其他按钮的圆环。
最新发布
08-20
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值