Button not showing Material Design

Question

I've found out that the reason is that I'm using the Android-Iconics library - I removed the context injection and everything is fine now.

I'm using a combination of XML Layouts and Anko DSL to build my app and I've noticed that the button design is different depending on how it's generated.

In case it's an Anko-generated button, the text is in caps (what I think it should be in Material) and has a ripple effect. If the button is created by XML the text is lowercase and without the effect.

The upper button is the XML one, so here you can see the difference.

I've tried setting a custom style to the button but it doesn't seem to work - I can't even make textAllCaps=true work.

Currently I'm using androidx and extending AppCompat & Theme.AppCompat.Light.NoActionBar and I've tried extending Widget.AppCompat.Button to set a custom style to the view without luck.

This is happening in all API levels (24, 26 and 28). In the XML preview it does show fine.

The current XML is

<Button
            android:text="@string/compartir"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/debunkShareButton"
            android:textAllCaps="true"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            app:layout_constraintTop_toBottomOf="@+id/debunkTitle"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            style="@style/Full_Yellow_Button"/>

And the Full_Yellow_Button is

    <style name="Full_Yellow_Button"  parent="Widget.AppCompat.Button">
    <item name="android:background">@drawable/yellow_gradient</item>
</style>

Any ideas? Thanks!

Answer 1

Your theme should be extended from Theme.MaterialComponents.xxxxx

like this XML block

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">

You can create your TextView class for set to uppercase

class UppercaseTextView : TextView, ViewTreeObserver.OnPreDrawListener {

    constructor(context: Context) : super(context) {}

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {}

    constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(context, attrs, defStyle) {}

    override fun setText(text: CharSequence, type: BufferType) {
        super.setText(text.toString().toUpperCase(), type)
    }
}

Answer 2

If you are using new material design components make sure your application theme extends from main theme Theme.MaterialComponents or other relavant theme.

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light">
    <!-- ... -->
</style>

Also, instead of using generic Button class to define button, You need to use com.google.android.material.button.MaterialButton in your xml and java both.

<com.google.android.material.button.MaterialButton
    android:id="@+id/material_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_label_enabled"/>