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:
Example 2: Buttons with NO ripple effect and without the margin/gap:
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
