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!

@Naroh are you using design support library or new material design library? — karan, Apr 03 '19 at 11:49
@KaranMer I'm using the new material design library right now, but the same thing happened with the design support library. — Naroh, Apr 03 '19 at 11:57

Beyazid · Answer 1 · 2019-04-03T12:30:06.500

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)
    }
}

edited Apr 03 '19 at 12:30

answered Apr 03 '19 at 11:43

Beyazid

1,795
1
15
28

Thanks! I've changed to extend Theme.MaterialComponents.Light.NoActionBar and I'm still getting a different design with the text in lowercase. It's happening both using a custom style or without setting one. Screenshot: https://imgur.com/eGHzxUv – Naroh Apr 03 '19 at 11:50
I updated my post, but this textview class cant change to design. It works just for set to uppercase – Beyazid Apr 03 '19 at 11:59

score 1 · Answer 2 · answered Apr 03 '19 at 12:27

1

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"/>

answered Apr 03 '19 at 12:27

karan

8,637
3
41
78

Hi Karan, thanks! I've tried extending Theme.MaterialComponents.Light.NoActionBar and using the view com.google.android.material.button.MaterialButton but, unlike in the preview, the app keeps showing the button with lowercase letters (and I can't make it uppercase in the XML). – Naroh Apr 03 '19 at 12:39
set `android:textAllCaps="true"` in xml. clean and build your project once changes done. – karan Apr 03 '19 at 12:40
Same thing after cleaning and rebuilding the project (textAllCaps was already there). I'm really out of ideas about why is this happening. – Naroh Apr 03 '19 at 12:47
you are extending your button style from `Widget.AppCompat.Button` you should extend it from `Widget.MaterialComponents.Button` – karan Apr 03 '19 at 12:55
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. – Naroh Apr 03 '19 at 14:01

Button not showing Material Design

2 Answers2