Android — Creating a Custom View

Usually we already use commons android view, right?!
So, the big question is: How I can build a beautiful view for my App?

Firstly: A good practice is draw your new view in a paper, because is more cheap.

Secondly: Let`s go to the code

1-Create your layout that will represent your new custom view

We will create a view like that:

2-Create a xml file that will represent the attributes of your new custom view

Create the new xml in app/res/values/<new_file>.xml

Notice that we named each attribute with a prefix: mcv = My Custom View

3-Create your class that will represent your new custom view

IMPORTANT: You need to implement all constructors of your super class. To do that in Kotlin we use @JvmOverloads constructor, looks like that:

So, our custom class will look like this:

const val zero = 0
const val empty = ""

class MyCustomView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyle: Int = zero
) :
    ConstraintLayout(context, attrs, defStyle) {

    private var name: String = empty
    private var age: Int = zero
    private var number: String = empty

    @ColorRes
    private var color: Int = zero

    @DrawableRes
    private var icon: Int = zero

    private lateinit var iconView: AppCompatImageView
    private lateinit var nameView: AppCompatTextView
    private lateinit var ageView: AppCompatTextView
    private lateinit var numberView: AppCompatTextView

    init {
        inflate(context, R.layout.my_custom_view, this)
        val typeArray = context.theme.obtainStyledAttributes(attrs, R.styleable.MyCustomView, zero, zero)
        initViews()
        loadAttrs(typeArray)
        loadViews()
    }

    private fun initViews() {
        iconView = findViewById(R.id.my_custom_view_icon)
        nameView = findViewById(R.id.my_custom_view_name)
        ageView = findViewById(R.id.my_custom_view_age)
        numberView = findViewById(R.id.my_custom_view_number)
    }

    private fun loadAttrs(typeArray: TypedArray) {
        icon = typeArray.getResourceId(R.styleable.MyCustomView_mcv_icon, zero)
        name = typeArray.getString(R.styleable.MyCustomView_mcv_name) ?: empty
        color = typeArray.getResourceId(R.styleable.MyCustomView_mcv_name_color, zero)
        age = typeArray.getInt(R.styleable.MyCustomView_mcv_age, zero)
        number = typeArray.getString(R.styleable.MyCustomView_mcv_number) ?: empty
        typeArray.recycle()
    }

    private fun loadViews() {
        setIcon(icon)
        setName(name)
        setNameColor(color)
        setAge(age)
        setNumber(number)
    }

    fun setIcon(@DrawableRes value: Int) {
        if (value != 0) {
            iconView.setImageResource(value)
        }
    }

    fun setName(value: String) {
        nameView.text = value
    }

    fun setNameColor(@ColorRes value: Int) {
        if (value != 0) {
            val color = ContextCompat.getColor(context, value)
            nameView.setTextColor(color)
        }
    }

    fun setAge(value: Int) {
        ageView.text = "$value"
    }

    fun setNumber(value: String) {
        numberView.text = value
    }
}

4-Now, you can use your custom view in any layout inside your project.

<com.example.customview.MyCustomView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:mcv_age="25"
    app:mcv_icon="@drawable/my_icon"
    app:mcv_name="John Smith"
    app:mcv_number="+1 524 96325" />

Thank you for reading this far.

Git project: https://github.com/cesarazevedocmd/my-custom-view