2

I am going after flat buttons for my example, but the question really applies to all buttons. Why does it seem so hard to find documentation on the proper way to style material buttons in android.

I have the following which I messed around with until I could get it to work. Felt like a hack so I am not sure if this is really the right way to do it.

    <Button
        android:id="@+id/apply"
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/md_cyan_A700"
        android:text="Cancel"/>

So I used 'borderlessButtonStyle' to get a flat button. And I had to change the textColor to the material color I wanted for the button.

Biggest thing is I feel like the animations are wrong when I do it like this. I don't get a nice ripple across the button, instead I get a grey circle based on where I click. And the circle gets cut off if I click near edges. Just feels wrong.

Again the color looks right but I am not sure this is the 'correct' way to do this. Why is there not 'flat' style for a material button out of the box. It is a regular material style.

lostintranslation
  • 23,756
  • 50
  • 159
  • 262
  • use AppCompatButton. but you won't get any ripple effect on pre-lollipop – njzk2 May 20 '15 at 01:39
  • You say use AppCompat. Do I still need 'borderlessButtonStyle? Is there an AppCompat flat style? – lostintranslation May 20 '15 at 02:16
  • Also according to AppCompatButton docs: 'This will automatically be used when you use Button in your layouts. You should only need to manually use this class when writing custom views.' Using AppCompatButton will not do anything different. – lostintranslation May 20 '15 at 02:18

1 Answers1

2

Add:

android:background="?android:attr/selectableItemBackgroundBorderless"
Djordje Tankosic
  • 1,975
  • 2
  • 20
  • 21
  • This is not a default style on material button? Where is this documented? – lostintranslation May 20 '15 at 02:19
  • ?android:attr/selectableItemBackgroundBorderless for a ripple that extends beyond the view. It will be drawn upon, and bounded by, the nearest parent of the view with a non-null background. https://developer.android.com/training/material/animations.html – Djordje Tankosic May 20 '15 at 02:28
  • I'm not sure what do you mean by "Default style"? android:background="?android:attr/selectableItemBackground" will ripple "inside" android:background="?android:attr/selectableItemBackgroundBorderless" will ripple "outside" – Djordje Tankosic May 20 '15 at 02:40
  • Really just confused that with 3 main button types, circle, rectangle and flat for material design that android does not have already defined styles that handle l&f related to those button types. – lostintranslation May 21 '15 at 00:03
  • Yes, it's a bit messy, because there are no widgets for these buttons in api just design patterns and guidelines. – Djordje Tankosic May 21 '15 at 00:29