CODEWITHSUNDEEP
javaandroidxmlanimationmaterial-design
zxgear
zxgear

Reputation: 1168

How do I mimick the Lollipop (Material Design) button animation?

There's a style called Widget.Material.Button that has an animation effect that I really like (it makes a "splash" around your click), and I want to be able to reuse it in my code.

I'm trying to make it have a transparent background color, since it is gray by default which does not look good when applied to my ViewGroup objects.

Is there an easy way to keep the animation, but get rid of the background color?

I already tried setting the property android:background="@android:color/transparent", but that causes the animation to completely stop working.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    style="@android:style/Widget.Material.Button"
    tools:targetApi="lollipop">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, world!"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is just another line of text."/>

</LinearLayout>

Upvotes: 1

Views: 588

Answers (2)

ianhanniballake
ianhanniballake

Reputation: 200080

As mentioned in this blog under 'Clickable Views', you can use android:background="?attr/selectableItemBackground:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="?attr/selectableItemBackground">
  ...
</LinearLayout>

Upvotes: 3

childofthehorn
childofthehorn

Reputation: 697

Sorry for giving the wrong bit initially. The problem as looking a bit deeper is the background color is defined already as part of whatever you are using for your MaterialTheme extension for color highlights. Ironically, they have sources from transparent elsewhere but not here ?

What you want to so is make TWO new xml files to define your properties

In vales-v21/styles.xml you can redefine these any way you like or eliminate values you don't want to override

IF YOU JUST WANT THE RIPPLE, USE THE DRAWABLE CODE DEFINED AT THE BOTTOM

 <style name="MyMaterialButton" parent=android:Widget.Material.Button>
        <item name="background">@drawable/material_background_ripple</item>
        <item name="textAppearance">?attr/textAppearanceButton</item>
        <item name="minHeight">48dip</item>
        <item name="minWidth">88dip</item>
        <item name="stateListAnimator">@anim/button_state_list_anim_material</item>
        <item name="focusable">true</item>
        <item name="clickable">true</item>
        <item name="gravity">center_vertical|center_horizontal</item>
    </style>

Then your button background style /drawable-v21/material_background_ripple.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@android:color/PICK_RIPPLE_COLOR_HERE">
    <item android:drawable="@drawable/btn_default_mtrl_shape" />
</ripple>

Redacted: Have you tried customView.getWindow().setBackgroundDrawableResource(R.color.transparent);

?

Upvotes: 2

Related Questions