Custom ConstraintLayout class can't seem to lay things out horizontally - Android - Kotlin

Question

I am trying to subclass ConstraintLayout to build a dynamic menu that I can pass in items and it will build a View with sub-views set up. I seem to be struggling with, in Kotlin, laying out things horizontally

I've tried a few things, I've tried laying the items out and constraining them to each other, with the first and last items constrained to the parent. and I've tried using a ConstraintSet for the multiple chain

This is how I initialize it.

val menuLayout = ManageableMenu(tc,listOf(
            ManageableMenu.ManageableMenuItem("Item 1"),
            ManageableMenu.ManageableMenuItem("Item 2"),
            ManageableMenu.ManageableMenuItem("Item 3"),
            ManageableMenu.ManageableMenuItem("Item 4")
        ))
        menuLayout.listener = this
        val menuLayoutConstraint =menuLayout .layoutParams as ConstraintLayout.LayoutParams
        menuLayoutConstraint.topToBottom = actorName.id
        menuLayoutConstraint.startToStart = thisLayout.id
        menuLayoutConstraint.endToEnd = thisLayout.id
        thisLayout.addView(menuLayout)

I tried...

class ManageableMenu(context: Context, val items: List<ManageableMenuItem>): ConstraintLayout(context) {
    var textSize: Int = 17
    var textColor: Int = Color.WHITE
    var activeFragmentTitle: String = items[0].title
    var listener: ManageableMenuChangeListener? = null



    init {
        this.id = View.generateViewId()
        this.layoutParams =
            ConstraintLayout.LayoutParams(convertToDP(100, this.context), ConstraintLayout.LayoutParams.WRAP_CONTENT)
        val baseConstraint = ConstraintLayout.LayoutParams(
            ConstraintLayout.LayoutParams.WRAP_CONTENT,
            ConstraintLayout.LayoutParams.WRAP_CONTENT
        )
        this.setBackgroundColor(Color.BLACK)

        //Build Dividers
        val dividers: MutableList<TextView> = mutableListOf()

        if (items.size > 1) {
            repeat(items.size - 1) {
                val newView = TextView(this.context)
                newView.id = View.generateViewId()
                newView.text = "|"
                newView.setTextSize(TypedValue.COMPLEX_UNIT_SP, textSize + 8.toFloat())
                newView.setTextColor(textColor)
                dividers.add(newView)
            }
        }

        val constraintSet = ConstraintSet()
        constraintSet.clone(this)

        val dividerIds: IntArray = IntArray(dividers.size)

        for ((index, divider) in dividers.withIndex()) {
            dividerIds.set(index, divider.id)
        }

        constraintSet.createHorizontalChainRtl(
            dividerIds[0],
            ConstraintSet.START,
            this.id,
            ConstraintSet.END,
            dividerIds,
            null,
            ConstraintSet.CHAIN_SPREAD
        )
        constraintSet.applyTo(this)

        for (divider in dividers) {
            this.addView(divider)
        }
    }

    data class ManageableMenuItem(val title: String) {
        var id: Int? = null
    }

    interface ManageableMenuChangeListener {
        fun onMenuItemChanged(var1: String)
    }
}

This puts a stack of all "|" created on top of each other, all the way to the left of the view. (If I can attach pictures I will)

I also tried...

class ManageableMenu(context: Context, val items: List<ManageableMenuItem>): ConstraintLayout(context) {
    var textSize: Int = 17
    var textColor: Int = Color.WHITE
    var activeFragmentTitle: String = items[0].title
    var listener: ManageableMenuChangeListener? = null



    init {
        this.id = View.generateViewId()
        this.layoutParams =
            ConstraintLayout.LayoutParams(convertToDP(100, this.context), ConstraintLayout.LayoutParams.WRAP_CONTENT)
        val baseConstraint = ConstraintLayout.LayoutParams(
            ConstraintLayout.LayoutParams.WRAP_CONTENT,
            ConstraintLayout.LayoutParams.WRAP_CONTENT
        )
        this.setBackgroundColor(Color.BLACK)

        //Build Dividers
        val dividers: MutableList<TextView> = mutableListOf()

        if (items.size > 1) {
            repeat(items.size - 1) {
                val newView = TextView(this.context)
                newView.id = View.generateViewId()
                newView.text = "|"
                newView.setTextSize(TypedValue.COMPLEX_UNIT_SP, textSize + 8.toFloat())
                newView.setTextColor(textColor)
                dividers.add(newView)
            }
        }
        for ((index, divider )in dividers.withIndex()) {
            val constraint = ConstraintLayout.LayoutParams(baseConstraint)
            constraint.topToTop = this.id
            constraint.bottomToBottom = this.id
            if (index == 0){
                constraint.leftToLeft = this.id
                constraint.rightToLeft = dividers[index+1].id
            } else if (index == dividers.lastIndex) {
                constraint.rightToRight = this.id
                constraint.leftToRight = dividers[index-1].id
            } else {
                constraint.rightToLeft = dividers[index+1].id
                constraint.leftToRight = dividers[index-1].id
            }

            divider.layoutParams = constraint
            this.addView(divider)
        }
    }
    data class ManageableMenuItem(val title: String) {
        var id: Int? = null
    }

    interface ManageableMenuChangeListener {
        fun onMenuItemChanged(var1: String)
    }
}

This aligns a stack of "|" centered in the view. What am I doing wrong?! Any help appreciated! Thanks.

Cheticamp · Answer 1 · 2019-04-20T16:04:17.007

The arguments to createHorizontalChainRtl according to the documentation are

public void createHorizontalChainRtl (int startId, 
                int startSide, 
                int endId, 
                int endSide, 
                int[] chainIds, 
                float[] weights, 
                int style)

You specify the following:

constraintSet.createHorizontalChainRtl(
    dividerIds[0],
    ConstraintSet.START,
    this.id,
    ConstraintSet.END,
    dividerIds,
    null,
    ConstraintSet.CHAIN_SPREAD
)

Try changing dividerIds[0] (startId) and this.id (endId) to ConstraintSet.PARENT_ID to form the chain.

Custom ConstraintLayout class can't seem to lay things out horizontally - Android - Kotlin

1 Answers1