Android custom round corner button view

attrs_round_button_view.xml, the custom attributes for the custom round button view. Create this file in the values resource folder.



    
        
        
        
        
        
        
        
    

colors.xml, default color values.



    #3F51B5
    #303F9F
    #FF4081

    #e0e9f9
    #a8c6f9
    #09090a

    #00ffffff


dimens.xml, default dimension values.



    12sp

round_button_view.xml, the layout file for the custom round button view.




    


RippleDrawableUtil.kt, the utility class for creating ripple effect programatically at runtime.

import android.graphics.drawable.ColorDrawable
import android.graphics.drawable.StateListDrawable
import android.graphics.drawable.ShapeDrawable
import android.graphics.drawable.shapes.RoundRectShape
import android.graphics.drawable.Drawable
import android.content.res.ColorStateList
import android.graphics.drawable.RippleDrawable
import android.os.Build
import java.util.*

object RippleDrawableUtil {
    fun getAdaptiveRippleDrawable(normalColor: Int, pressedColor: Int, radius : Float = 5.0f): Drawable {
        return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            RippleDrawable(ColorStateList.valueOf(pressedColor), null, getRippleMask(normalColor, radius))
        } else {
            getStateListDrawable(normalColor, pressedColor)
        }
    }

    private fun getRippleMask(color: Int, radius : Float = 5.0f): Drawable {
        val radii = FloatArray(8)
        Arrays.fill(radii, radius)

        val r = RoundRectShape(radii, null, null)
        val shapeDrawable = ShapeDrawable(r)
        shapeDrawable.paint.color = color
        return shapeDrawable
    }

    fun getStateListDrawable(
            normalColor: Int, pressedColor: Int): StateListDrawable {
        val states = StateListDrawable()
        states.addState(intArrayOf(android.R.attr.state_pressed),
                ColorDrawable(pressedColor))
        states.addState(intArrayOf(android.R.attr.state_focused),
                ColorDrawable(pressedColor))
        states.addState(intArrayOf(android.R.attr.state_activated),
                ColorDrawable(pressedColor))
        states.addState(intArrayOf(),
                ColorDrawable(normalColor))
        return states
    }
}

RoundButtonView.kt, the custom view class for the custom round corner view.

import android.content.Context
import android.graphics.Color
import android.graphics.drawable.GradientDrawable
import android.os.Build
import android.support.v4.content.ContextCompat
import android.util.AttributeSet
import android.util.TypedValue
import android.widget.LinearLayout
import android.widget.TextView
import kotlinx.android.synthetic.main.round_button_view.view.*

class RoundButtonView : LinearLayout {
    constructor(context: Context) : this(context, null)

    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
        init(attrs, 0)
    }

    constructor(context: Context?, attrs: AttributeSet?, defStyle: Int) : super(context, attrs, defStyle) {
        init(attrs, defStyle)
    }

    private var _bgColor = ContextCompat.getColor(context, R.color.round_button_default_bg_color)
    private var _borderColor = ContextCompat.getColor(context, R.color.round_button_default_border_color)
    private var _textColor = ContextCompat.getColor(context, R.color.round_button_default_text_color)
    private var _textSize = context.resources.getDimensionPixelSize(R.dimen.round_button_default_text_size)
    private var _text = ""
    private var _cornerRadius = 1000.0f
    private var _borderWidth = 2
    private val textColorDarkenRatio = 0.7f
    private lateinit var buttonText: TextView

    var text: String
        get() = _text
        set(value) {
            _text = value
            buttonText.text = _text
        }

    private fun init(attrs: AttributeSet?, defStyle: Int) {
        val view = inflate(context, R.layout.round_button_view, this)
        buttonText = view.tv_button_text

        val styledAttributes = context.obtainStyledAttributes(attrs, R.styleable.RoundButtonView, defStyle, 0)

        _bgColor = styledAttributes.getInt(R.styleable.RoundButtonView_bgColor, _bgColor)
        _borderColor = styledAttributes.getInt(R.styleable.RoundButtonView_borderColor, darkenColor(_bgColor))
        _textColor = styledAttributes.getInt(R.styleable.RoundButtonView_textColor, darkenColor(_borderColor))
        _cornerRadius = styledAttributes.getFloat(R.styleable.RoundButtonView_cornerRadius, _cornerRadius)
        _borderWidth = styledAttributes.getInt(R.styleable.RoundButtonView_borderWidth, _borderWidth)
        _textSize = styledAttributes.getDimensionPixelSize(R.styleable.RoundButtonView_textSize, _textSize)
        _text = styledAttributes.getString(R.styleable.RoundButtonView_text) ?: ""

        styledAttributes.recycle()

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            foreground = RippleDrawableUtil.getAdaptiveRippleDrawable(_borderColor, _textColor, _cornerRadius)
        }

        buttonText.text = _text
        buttonText.setTextSize(TypedValue.COMPLEX_UNIT_PX, _textSize.toFloat())
        setButtonStyle()
    }

    private fun setButtonStyle() {
        val shape = GradientDrawable()
        shape.shape = GradientDrawable.RECTANGLE
        shape.setStroke(_borderWidth, _borderColor)
        shape.setColor(_bgColor)
        shape.cornerRadius = _cornerRadius
        background = shape

        buttonText.setTextColor(_textColor)
    }

    private fun darkenColor(color: Int): Int {
        val hsv = FloatArray(3)
        Color.colorToHSV(color, hsv)
        hsv[2] *= textColorDarkenRatio
        return Color.HSVToColor(hsv)
    }
}

activity_main.xml, using the custom round corner button view in a layout file.




    

    

    

MainActivity.kt

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Complete example in Github

Search within Codexpedia

Custom Search

Search the entire web

Custom Search