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??

score 33 · Answer 1 · edited May 03 '18 at 06:59

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>

for pre-lollipop devices, what is the parent tag in btn_ripple_effect.xml ? — Rohit Singh, Feb 09 '18 at 13:16
No external dependency is needed for this solution, so its a better answer — 0xPixelfrost, Feb 28 '18 at 15:14
it doesn't even give a ripple effect, only the background changes — juztcode, Jan 30 '20 at 07:46

score 26 · Accepted Answer · answered Jun 10 '15 at 15:44

26

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>

answered Jun 10 '15 at 15:44

Farouk Touzi

3,451
2
19
25

You can perfectly use it for SDK 8, in the description of the library, search for Support for Android api versions < 14 ;) – Farouk Touzi Jun 16 '15 at 14:51
LinearLayout should be the parent of MaterialRippleLayout. – Farouk Touzi Feb 02 '16 at 00:09
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 . – SAYE Mar 03 '17 at 16:58

score 5 · Answer 3 · answered Mar 13 '18 at 12:01

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"/>

score 3 · Answer 4 · answered Oct 13 '15 at 13:59

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. :)

score 2 · Answer 5 · answered Jun 10 '15 at 16:48

2

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"
        />

answered Jun 10 '15 at 16:48

rahul.ramanujam

5,608
7
34
56

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?? – Amrita Stha Jun 11 '15 at 03:27
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?? – Amrita Stha Jun 11 '15 at 11:41
4

which ripple? With this code you will not get it on pre-lollipop! – Leo DroidCoder Jul 23 '16 at 08:12

how to create ripple effect for pre-lollipop

5 Answers5

Linked

Related