Programmatically create a MaterialButton with Outline style

Question

I would programmatically like to create a button as defined in the design guidelines here: https://material.io/design/components/buttons.html#outlined-button, looking like this:

In XML I'm able to do this, using this piece of layout xml:

<com.google.android.material.button.MaterialButton
    android:id="@+id/buttonGetStarted"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    android:text="@string/title_short_intro" />

What I'm looking for is an example that shows how to do this using Java code? I have tried the following:

MaterialButton testSignIn = new MaterialButton( new ContextThemeWrapper( this, R.style.Widget_MaterialComponents_Button_OutlinedButton));
String buttonText = "Sign-in & empty test account";
testSignIn.setText( buttonText );

But this does not result in the outline variant:

If I'm not wrong, it's : `style="@style/Widget.AppCompat.Button.Borderless.Colored` See if that is answers your question. — ʍѳђઽ૯ท, Aug 31 '18 at 17:59
Just tested this (changed the R.style.Widget_MaterialComponents_Button_OutlinedButton in my code to R.style.Widget_AppCompat_Button_Borderless_Colored). This makes no difference. — Peter, Aug 31 '18 at 18:11
Add both `style="@style/Widget.AppCompat.Button.Borderless.Colored` to xml and the same in java-kotlin then try. — ʍѳђઽ૯ท, Aug 31 '18 at 18:28
@masterwork, no... Still using an XML based layout as a work around (please keep me updated in case you find a solution). — Peter, Nov 10 '18 at 14:49

score 10 · Accepted Answer · answered Dec 25 '18 at 17:13

10

You can use below:

MaterialButton testSignIn = new MaterialButton(context, null, R.attr.borderlessButtonStyle);
String buttonText = "Sign-in & empty test account";
testSignIn.setText(buttonText);

answered Dec 25 '18 at 17:13

TheND

167
2
6

4

`R.attr.borderlessButtonStyle` does not create **Outlined Button**. I think the correct attribute would be `R.attr.materialButtonOutlinedStyle` – ravi Dec 18 '19 at 11:59
Thanks, I was using the plain class `Button` as they claim that they transform them, but I does not transform them magically when it is done by code, only from xml. – Daniel Gomez Rico May 27 '20 at 14:40

Gabriele Mariotti · Answer 2 · 2020-08-02T21:23:03.273

4

If you want to apply a Outlined button you can use the R.attr.materialButtonOutlinedStyle attribute style in the constructor:

MaterialButton outlinedButton = new MaterialButton(context,null, R.attr.materialButtonOutlinedStyle);
outlinedButton.setText("....");

edited Aug 02 '20 at 21:23

answered Aug 01 '20 at 07:37

Gabriele Mariotti

320,139
94
887
841

1

Works perfectly, and here for Xamarin.Android: new MaterialButton(Context, null, Resource.Attribute.materialButtonOutlinedStyle); – Luca Ziegler Jan 07 '21 at 15:53

score 0 · Answer 3 · answered Mar 13 '19 at 00:51

MaterialButton has strokeColor and strokeWidth which is used to set the outline.

val _strokeColor = getColorStateList(R.styleable.xxx_strokeColor)
val _strokeWidth = getDimensionPixelSize(R.styleable.xxx_strokeWidth, 0)

button = MaterialButton(context).apply {
    layoutParams = LayoutParams(MATCH_PARENT, WRAP_PARENT)
    strokeColor = _strokeColor
    strokeWidth = _strokeWidth
}

score 0 · Answer 4 · answered Nov 30 '19 at 05:58

Create outlined button layout outlined_button.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.button.MaterialButton xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</com.google.android.material.button.MaterialButton>

Then inflate outlined button in runtime

LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
MaterialButton button = (MaterialButton)inflater.inflate(R.layout.outlined_button, vg, false);

This worked for me. Kotlin code to inflate: val b: MaterialButton = this.layoutInflater.inflate(R.layout.outline_button, null) as MaterialButton — Paul Lefebvre, May 19 '20 at 20:43

Programmatically create a MaterialButton with Outline style

4 Answers4

Linked