Programmatically create three MaterialButtons with styling and constraintlayout chaining

Question

So my initial layout was like:

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:orientation="horizontal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/holder"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="@dimen/margin_padding_size_small">

                <com.google.android.material.button.MaterialButton
                    android:id="@+id/btn_cod"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingStart="@dimen/margin_padding_size_small"
                    android:paddingEnd="@dimen/margin_padding_size_small"
                    android:text="@string/cash_on_delivery_label"
                    app:cornerRadius="@dimen/card_corner_radius_medium"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/btn_card"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:text="@string/cash_on_delivery_label" />

                <com.google.android.material.button.MaterialButton
                    android:id="@+id/btn_card"
                    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingStart="@dimen/margin_padding_size_small"
                    android:paddingEnd="@dimen/margin_padding_size_small"
                    android:text="@string/card_label"
                    app:cornerRadius="@dimen/card_corner_radius_medium"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/btn_qr_scan"
                    app:layout_constraintStart_toEndOf="@+id/btn_cod"
                    app:strokeColor="@color/colorAccent"
                    tools:text="@string/card_label" />

                <com.google.android.material.button.MaterialButton
                    android:id="@+id/btn_qr_scan"
                    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingStart="@dimen/margin_padding_size_small"
                    android:paddingEnd="@dimen/margin_padding_size_small"
                    android:text="@string/qr_scan_label"
                    app:cornerRadius="@dimen/card_corner_radius_medium"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toEndOf="@+id/btn_card"
                    app:strokeColor="@color/colorAccent"
                    tools:text="@string/qr_scan_label" />


            </androidx.constraintlayout.widget.ConstraintLayout>


        </LinearLayout>

And I made an assumption pretty early that I will be setting the style attribute for the buttons based on the response I receive from the server. But Android Framework does not have a setStyle() method.

So I had to find some other way to do it. I searched and found Paris library which does exactly allow us to set style but it currently does not work on MaterialComponents.

I tried to use MaterialButtonToggleGroup but including the dependency messes up with the DataBinding completely and shows errors in other modules of the app.

My current approach is to dynamically create all three buttons and populate them in the ConstraintLayout which will be my root layout.

How would I programmatically populate these three buttons with contraints and chain.

I have been trying:

        val constraintSet = ConstraintSet()
//        constraintSet.clone(holder) // do I need this? 
        //holder is the id of the constraint layout from xml

        val codButton = MaterialButton(this, null, R.attr.materialButtonStyle)
        codButton.text = resources.getString(R.string.cash_on_delivery_label)
        codButton.id = generateViewId()
        codButton.setCornerRadiusResource(R.dimen.card_corner_radius_medium)
        holder.addView(codButton)

        val cardButton = MaterialButton(this, null, R.attr.borderlessButtonStyle)
        cardButton.text = resources.getString(R.string.card_label)
        cardButton.id = generateViewId()
        cardButton.setCornerRadiusResource(R.dimen.card_corner_radius_medium)
        cardButton.setStrokeColorResource(R.color.colorAccent)
        holder.addView(cardButton)

        val qrButton = MaterialButton(this, null, R.attr.borderlessButtonStyle)
        qrButton.text = resources.getString(R.string.qr_scan_label)
        qrButton.id = generateViewId()
        qrButton.setCornerRadiusResource(R.dimen.card_corner_radius_medium)
        qrButton.setStrokeColorResource(R.color.colorAccent)
        holder.addView(qrButton)

        //constraintSet.connect() calls?

        constraintSet.applyTo(holder)

Please tell me the best approach to achieve this. The requirement is that for any response from the server, two of the three buttons shall be set as outlined button from material components and one as regular button from material components.

Another question is: I am not able to use R.attr.materialButtonOutlinedStyle (unResolved symbol) but I am able to use R.attr.materialButtonStyle; Why is that?

have you tried assigning styles directly ? or changing `R.attr.materialButtonOutlinedStyle` to `R.style.materialButtonOutlinedStyle` ? also take a look at this link maybe it will help: https://stackoverflow.com/questions/26346727/android-material-design-button-styles — Umair, Dec 18 '19 at 12:07
what do you mean by assigning styles directly? there is no method to set style onto views. Changing the attr to style does nothing for me. The link that you provided discusses AppCompat Buttons. I need Material Buttons with cornerRadius and Outlined Styles. — ravi, Dec 18 '19 at 12:19
You could define a `MaterialButton` in a xml layout with the Outlined style. Then programmatically just do something like: `(MaterialButton) getLayoutInflater().inflate(R.layout.my_button, buttonGroup, false);` — Gabriele Mariotti, Dec 18 '19 at 15:10
@GabrieleMariotti Lets say I do sth like that to inflate the buttons, how will I maintain their positions in a constraint layout root? — ravi, Dec 18 '19 at 16:04
use com.google.android.material.R.attr.materialButtonOutlinedStyle instead R.attr.materialButtonOutlinedStyle — alloha, Dec 01 '21 at 22:21

score 0 · Accepted Answer · answered Dec 27 '19 at 10:34

What I ended up doing was:

Create a style:

<!-- Outline Button Style -->
    <style name="ThemeOverlay.MyApp.OutlinedButton" parent="">
        <item name="materialButtonStyle">@style/Widget.MaterialComponents.Button.OutlinedButton</item>
    </style>

Dynamically Generate the three Button set. Use ContextThemeWrapper to apply the above style to the Button. And also set constraints to chain them horizontally.

        val constraintSet = ConstraintSet()

        //construct COD button
        val codButton = MaterialButton(this, null, R.attr.materialButtonStyle)
        codButton.text = resources.getString(R.string.cash_on_delivery_label)
        codButton.id = generateViewId()
        codButton.setCornerRadiusResource(R.dimen.card_corner_radius_medium)
        holder.addView(codButton)

        //construct card button
        val cardButton =
            MaterialButton(ContextThemeWrapper(this, R.style.ThemeOverlay_MyApp_OutlinedButton))
        cardButton.text = resources.getString(R.string.card_label)
        cardButton.id = generateViewId()
        cardButton.isClickable = false
        cardButton.setCornerRadiusResource(R.dimen.card_corner_radius_medium)
        cardButton.setStrokeColorResource(R.color.colorAccent)
        holder.addView(cardButton)


        //construct qr button
        val qrButton =
            MaterialButton(ContextThemeWrapper(this, R.style.ThemeOverlay_MyApp_OutlinedButton))
        qrButton.text = resources.getString(R.string.qr_scan_label)
        qrButton.id = generateViewId()
        qrButton.isClickable = false
        qrButton.setCornerRadiusResource(R.dimen.card_corner_radius_medium)
        qrButton.setStrokeColorResource(R.color.colorAccent)
        holder.addView(qrButton)

        constraintSet.clone(holder)

        // constraints for the cod button
        constraintSet.connect(
            codButton.id,
            ConstraintSet.START,
            ConstraintSet.PARENT_ID,
            ConstraintSet.START
        )
        constraintSet.connect(codButton.id, ConstraintSet.END, cardButton.id, ConstraintSet.START)

        // constraints for the card button
        constraintSet.connect(cardButton.id, ConstraintSet.START, codButton.id, ConstraintSet.END)
        constraintSet.connect(cardButton.id, ConstraintSet.END, qrButton.id, ConstraintSet.START)

        // constraints for the qr scan
        constraintSet.connect(qrButton.id, ConstraintSet.START, cardButton.id, ConstraintSet.END)
        constraintSet.connect(
            qrButton.id,
            ConstraintSet.END,
            ConstraintSet.PARENT_ID,
            ConstraintSet.END
        )

        constraintSet.applyTo(holder)

With the version [**1.1.0**](https://github.com/material-components/material-components-android/blob/1.1.0-rc01/lib/java/com/google/android/material/button/res/values/attrs.xml#L23) of the material components library you can use the `materialButtonOutlinedStyle` attribute in the default theme. Then use the constructor `new MaterialButton(context, null, R.attr.materialButtonOutlinedStyle);` — Gabriele Mariotti, Dec 30 '19 at 16:11

Programmatically create three MaterialButtons with styling and constraintlayout chaining

1 Answers1