Android – Architecture – How to create one common layout for multiple UI elements inside a screen?

Create a base layout class

// XML layout file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.8"
        android:orientation="vertical"
        android:padding="12dp">
        <TextView
            android:id="@+id/checkboxTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="I agree" />
        <TextView
            android:id="@+id/checkboxLink"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="Terms" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="center"
        android:layout_marginEnd="10dp"
        android:gravity="center">
        <CheckBox
            android:id="@+id/checkBox"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:button="@drawable/checkbox"
            android:gravity="center"
            tools:checked="true" />
    </LinearLayout>
</LinearLayout>
// Logic file
class BaseCheckBox @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : LinearLayout(context, attrs, defStyleAttr) {

    init {
        View.inflate(context, R.layout.base_checkbox, this)
    }

    fun setTitle(title: String) {
        checkboxTitle?.text = title
    }

    fun setLink(link: String) {
        checkboxLink?.text = link
    }

    fun isCheccked(): Boolean {
        return checkBox?.isChecked == true
    }

    fun addOnLinkClickListener(listener: OnClickListener) {
        checkboxLink?.setOnClickListener(listener)
    }

    fun addOnConsentCheckBoxClickListener(listener: OnClickListener {
        checkBox?.setOnClickListener(listener)
    }
}

Embed base class into screen layout

// XML screen layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingStart="36dp"
        android:paddingEnd="36dp">
        ...
        <sample.app.customview.BaseCheckBox
            android:id="@+id/terms"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/body"
            android:layout_marginTop="50dp"
            android:layout_marginBottom="10dp" />

        <sample.app.customview.BaseCheckBox
            android:id="@+id/privacy"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/terms"
            android:layout_marginBottom="10dp" />

        <sample.app.customview.BaseCheckBox
            android:id="@+id/policies"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/privacy" />
        ...
    </RelativeLayout>

</LinearLayout>

Set values for each UI element in Activity

class MainActivity : Contract.View {

    private val presenter: ConsentContract.Presenter by inject { parametersOf(this) }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_consent)
        initValues()
        initListeners()
    }

    private fun initValues() {
        terms?.setTitle("aaaaa")
        terms?.setLink("bbbb")
        privacy?.setTitle("ccccc")
        privacy?.setLink("ddddd")
        policies?.setTitle("eeeee")
        policies?.setLink("ffffff")
    }

    private fun initListeners() {
        terms?.addOnLinkClickListener(View.OnClickListener {
            presenter.onTermsClicked()
        })

        privacy?.addOnLinkClickListener(View.OnClickListener {
            presenter.onPrivacyClicked()
        })

        policies?.addOnLinkClickListener(View.OnClickListener {
            presenter.onPoliciesClicked()
        })
    }
}

Be the first to comment

Leave a Reply

Your email address will not be published.


*