how to create ripple effect for pre-lollipop

Question

How to apply ripple effect like this

i have put the dependencies in app/build.gradle

app/build.gradle

dependencies {
    compile 'com.github.traex.rippleeffect:library:1.3'
}

build.gradle

allprojects{
    repositories{
        jcenter()
        maven(url "https://jitpack.io" }

XML file:

<com.andexert.library.RippleView
        android:id="@+id/rect1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
  <Button
      android:id="@+id/enterButton"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="Save your user name" />
 </com.andexert.library.RippleView>

Java class file

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.save_user);
    editText=(EditText) findViewById(R.id.userNameEditText);
    button=(Button) findViewById(R.id.enterButton);

    sharedPreferences=getSharedPreferences(SHARED_NAME_STRING, MODE_PRIVATE);
    String userNameString=sharedPreferences.getString(USER_NAME_STRING, "");

    editText.setText(userNameString);

    button.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            String string=editText.getText().toString();
            Intent intent=new Intent(SaveUser.this, MainActivity.class);
            intent.putExtra("user", string);

            SharedPreferences.Editor editor=sharedPreferences.edit();
            editor.putString(USER_NAME_STRING, string);
            editor.commit();

            startActivity(intent);

        }
    });
}

it works but my problem is another activity opens before the ripple effect completes and when I press back button the remaining ripple completes. how can I solve it??

Assuage

Answer 1

You could try this library balysv/material-ripple.

In your gradle, add this line :

compile 'com.balysv:material-ripple:1.0.2'

And this is how to do it :

<com.balysv.materialripple.MaterialRippleLayout
android:id="@+id/ripple"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="Button inside a ripple"/>
</com.balysv.materialripple.MaterialRippleLayout>

Nonconformist

You can perfectly use it for SDK 8, in the description of the library, search for Support for Android api versions < 14 ;) – Nonconformist

LinearLayout should be the parent of MaterialRippleLayout. – Nonconformist

its not good idea because it can support one child in xml side .think if you want do this for 100 button what happen to you ! and apparently it cant support java code for do ripple . i tested it for a button but i cant get nice result . – Rubato

Answer 2

For lollipop(API>21) make file as btn_ripple_effect.xml in drawable-v21 and put below code

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

    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:color="?android:colorAccent"
        tools:targetApi="lollipop">
        <item android:drawable="@color/cancel_btn_clr" /> <!-- default -->
        <item android:id="@android:id/mask">
            <shape android:shape="rectangle">
                <solid android:color="?android:colorAccent" />
            </shape>
        </item>
    </ripple>

For pre lollipop (API<21)make file as btn_ripple_effect.xml in drawable folder and put below code

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/colorAccent"></solid>
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="@color/cancel_btn_clr"></solid>
        </shape>
    </item>
</selector>

Create button as below

<Button
                    android:id="@+id/button3"
                    style="@style/cancel_btn_style"
                    android:layout_marginLeft="50dp"
                    android:text="Cancel"
                    />

Add this in your style.xml

          <style name="cancel_btn_style" parent="Theme.AppCompat">
<item name="android:textSize">15sp</item>
<item name="android:textColor">#ffffff</item>
<item name="android:layout_height">36dp</item>
<item name="android:layout_width">90dp</item>
<item name="android:background">@drawable/btn_ripple_effect</item>

Tinkle

for pre-lollipop devices, what is the parent tag in btn_ripple_effect.xml ? – Zwick

@RohitSingh it should be a selector – Chloromycetin

No external dependency is needed for this solution, so its a better answer – Percentile

it doesn't even give a ripple effect, only the background changes – Presentday

Answer 3

For lollipop(API>21) make file as btn_ripple_effect.xml in drawable-v21 and put below code

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#f8c7c9c8"
    tools:targetApi="lollipop">

    <item android:id="@android:id/mask">

        <shape android:shape="oval">
            <corners android:radius="@dimen/dp10" />
            <solid android:color="#f8ced6d2" />

        </shape>
    </item>
</ripple>

For pre lollipop (API<21)make file as btn_ripple_effect.xml in drawable folder and put below code

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#f8ced6d2"/>
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="@color/transparent"/>
        </shape>
    </item>
</selector>

use it on imageview like this

<ImageView
  android:id="@+id/imageViewOffer"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerVertical="true"
  android:background="@drawable/btn_ripple_effect"
  android:src="@mipmap/ic_offers"/>

Maas

That's not a ripple effect – Peyter

Answer 4

I know this is old but you can perform your action in onRippleCompleteListener provided by the library. Something like :

rippleView.setOnRippleCompleteListener(new RippleView.OnRippleCompleteListener() {

@Override
public void onComplete(RippleView rippleView) {
//Your code here...
}
});

Hope this helps. :)

Rainer

Answer 5

Use the appcompat libary

com.android.support:appcompat-v7:22.1.1

extend "Base.TextAppearance.AppCompat.Button"

<style name="BrowseContentButton" parent="Base.TextAppearance.AppCompat.Button">
    <item name="android:textColor">@color/grey_0</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">48dp</item>
</style>

apply the style

 <Button
        android:id="@+id/browseMultimedia"
        style="@style/BrowseContentButton"
        android:layout_below="@id/browseGuidelines"
        android:layout_toRightOf="@+id/divider"
        android:text="@string/browse_multimedia"
        />

Enhanced

all of these works but my problem is another activity opens before the ripple effect completes and when I press back button the remaining ripple completes. how can I solve it?? – Assuage

I hav uploaded the java file abov, there is xml file and dependencies too but when the button is clicked, the other page (SaveUser page) opens before the ripple effect completes, how to fix it?? – Assuage

which ripple? With this code you will not get it on pre-lollipop! – Libava