Button design over Android OS versions

Question

I'm trying to polish up some details about my app and I'm stuck on design of android Button widget. Up from Android 5.0 everything is fine with simple system Button, but problem starts when I start my app on lower versions - specifically 4.4.2 . System Button has no effect on click which is of course wrong UX. I'd like to avoid making multiple layouts for different android version and I think there is some way to solve this without making my own selector and using in in pre-Lollipop layouts, but I just can't find it. My Button layout looks as follows :

<Button
    android:id="@+id/some_id"
    android:layout_width="wrap_content"
    android:layout_height="@dimen/size_48dp"
    android:paddingLeft="@dimen/margin_32dp"
    android:paddingRight="@dimen/margin_32dp"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:gravity="center"
    app:backgroundTint="@color/colorAccent"
    android:textColor="@color/white"
    android:text="@string/some_text"/>

As i said, on all post-lollipop version it has some effect (from android 6 it's ripple, before it just changes tint) but on Kitkat id does nothing. I tried using AppCompatButton, all sort of colorControlNormal, colorButtonNormal and I don't know what in styles but to no avail. Is there some "easy" way to solve this ?

score 0 · Answer 1 · answered Oct 26 '17 at 11:29

You can create styles in both styles.xmlad v21 styles.xml

Below is code snippet of v21 styles.xml

<style name="ButtonRed" parent="Theme.AppCompat">
        <item name="android:colorButtonNormal">@color/primary_red</item>
       <item name="android:colorControlHighlight">@color/primary_red_dark</item>
        <item name="android:textColor">@color/dash_title_color_white</item>
</style>

Below is code snippet of styles.xml

<style name="ButtonRed" parent="Base.Widget.AppCompat.Button">
        <item name="colorButtonNormal">@color/primary_red</item>
        <item name="colorControlHighlight">@color/primary_red_dark</item>
        <item name="android:textColor">@color/dash_title_color_white</item>
</style>

Then you can use these styles as theme as given below

 <Button
            android:layout_width="wrap_content"
            android:theme="@style/ButtonRed"
            android:layout_height="wrap_content"
            android:text="@string/recharge"
  />

Ripple type animation will only work from lollipop onwards. Below that the button will change colour state accordingly

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Animations in material design give users feedback on their actions and provide visual continuity as users interact with your app. The material theme provides some default animations for buttons and activity transitions, and Android 5.0 (API level 21) and above lets you customize these animations and create new ones:

Touch feedback
Circular Reveal
Activity transitions
Curved motion
View state changes

Touch feedback in material design provides an instantaneous visual confirmation at the point of contact when users interact with UI elements. The default touch feedback animations for buttons use the new RippleDrawable class, which transitions between different states with a ripple effect.

Button design over Android OS versions

2 Answers2

Verify this Page

https://developer.android.com/training/material/animations.html#Touch

ANd Also these Answers will help you

how to create ripple effect for pre-lollipop