Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stylizing material buttons in Android v21

I am trying to maintain the material design ripple effect for devices with lollipop and above (21+) and stylize the button so that it doesn't have a large margin/space around it.

Example 1: Buttons with ripple effect but with margin/gap:

I like the ripple effect of this version, but not the gap in the layout

Example 2: Buttons with NO ripple effect and without the margin/gap:

I want the layout of this version, but with the ripple effect

I want the layout of Exmaple 2 with the ripple effect that is used in Example 1.

What my styles-v21 look like for Example 1 :

<?xml version="1.0" encoding="utf-8"?>
<resources>

     ... other styles ...

    <style name="FacebookButton" parent="android:Widget.Material.Button">
        <item name="android:colorButtonNormal">#ff3b5998</item>
        <item name="android:layout_margin">0dp</item>
        <item name="android:borderlessButtonStyle">@style/Widget.AppCompat.Button.Borderless</item>


    </style>
    <style name="GoogleButton" parent="android:Widget.Material.Button">
        <item name="android:colorButtonNormal">#ffdd4b39</item>
        <item name="android:layout_margin">0dp</item>
        <item name="android:borderlessButtonStyle">@style/Widget.AppCompat.Button.Borderless</item>


    </style>
    <style name="TwitterButton" parent="android:Widget.Material.Button">
        <item name="android:colorButtonNormal">#ff55acee</item>
        <item name="android:layout_margin">0dp</item>
        <item name="android:borderlessButtonStyle">@style/Widget.AppCompat.Button.Borderless</item>


    </style>
    <style name="SkipButton" parent="android:Widget.Material.Button">
        <item name="android:colorButtonNormal">#ffdfa800</item>
        <item name="android:layout_margin">0dp</item>
        <item name="android:borderlessButtonStyle">@style/Widget.AppCompat.Button.Borderless</item>

    </style>

</resources>

What my button layout looks like for Example 1:

<Button
    android:id="@+id/login_with_facebook"
    android:text="@string/login_with_facebook"
    android:fontFamily="sans-serif-condensed"
    android:textSize="16sp"
    android:drawableLeft="@drawable/facebook_icon"
    android:drawablePadding="25dp"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:layout_weight="16.88"
    android:textColor="#ffffff"
    android:gravity="left|center_vertical"
    android:paddingLeft="45dp"
    android:theme="@style/FacebookButton" />

<Button
    android:id="@+id/login_with_google"
    android:text="@string/login_with_google"
    android:fontFamily="sans-serif-condensed"
    android:textSize="16sp"
    android:drawableLeft="@drawable/google_icon"
    android:drawablePadding="25dp"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:layout_weight="16.88"
    android:textColor="#ffffffff"
    android:gravity="left|center_vertical"
    android:paddingLeft="45dp"
    android:theme="@style/GoogleButton" />

<Button
    android:id="@+id/twitter_login_button"
    android:text="@string/login_with_twitter"
    android:fontFamily="sans-serif-condensed"
    android:textSize="16sp"
    android:drawableLeft="@drawable/twitter_icon"
    android:drawablePadding="25dp"
    android:layout_height="45dp"
    android:gravity="left|center_vertical"
    android:layout_width="match_parent"
    android:layout_weight="16.88"
    android:textColor="#ffffffff"
    android:paddingLeft="45dp"
    android:theme="@style/TwitterButton" />

<Button
    android:id="@+id/login_anonymously"
    android:text="@string/login_anonymously"
    android:fontFamily="sans-serif-condensed"
    android:textSize="16sp"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="50"
    android:textColor="#ffffffff"
    android:theme="@style/SkipButton" />

Any idea how I can achieve the look of Example 2 while using the ripple methodology I've presented? Any links to resources or help would be appreciated. Thanks.

Extra:
I've already read over the following

  • Coloring Buttons in Android with Material Design and AppCompat
  • How to properly style material buttons in android
like image 414
markbratanov Avatar asked Jun 01 '15 03:06

markbratanov


1 Answers

You can use android:background="?android:attr/selectableItemBackground" to get a rectangular ripple.

Alternatively, you can create your own drawable. Here's the XML for the framework's selectable item background:

drawable/item_background_material.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?android:attr/colorControlHighlight">
    <item android:id="@android:id/mask">
        <color android:color="@android:color/white" />
    </item>
</ripple>
like image 123
alanv Avatar answered Oct 22 '22 10:10

alanv