Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@skydoves
skydoves committed Jan 22, 2019
1 parent 6f39982 commit 0fb33d3
Showing 1 changed file with 101 additions and 83 deletions.
184 changes: 101 additions & 83 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
[![Build Status](https://travis-ci.org/skydoves/ElasticViews.svg?branch=master)](https://travis-ci.org/skydoves/ElasticViews)
[![Android Weekly](https://img.shields.io/badge/Android%20Weekly-%23336-orange.svg)](https://androidweekly.net/issues/issue-336) <br>

A library that lets you implement elastic touch animation easily.
An easy way to implement elastic touch effect for Android.

![gif0](https://user-images.githubusercontent.com/24237865/48674497-53e2f180-eb90-11e8-86fb-476f841b3e32.gif)
![gif1](https://user-images.githubusercontent.com/24237865/48674498-53e2f180-eb90-11e8-8313-aa94b34a40d2.gif)
Expand All @@ -18,7 +18,7 @@ repositories {
}
dependencies {
implementation "com.github.skydoves:elasticviews:2.0.2"
implementation "com.github.skydoves:elasticviews:2.0.3"
}
```

Expand Down Expand Up @@ -55,17 +55,17 @@ public void onClick(View v) {
### ElasticButton
```gradle
<com.skydoves.elasticviews.ElasticButton
android:id="@+id/elasticbutton"
android:layout_width="match_parent"
android:layout_height="50dp"
app:button_backgroundColor="#30354b"
app:button_round="20"
app:button_scale="0.7"
app:button_duration="400"
app:button_labelText="Elastic Button"
app:button_labelColor="#ffffff"
app:button_labelSize="16"
app:button_labelStyle="bold"/>
android:id="@+id/elasticbutton"
android:layout_width="match_parent"
android:layout_height="50dp"
app:button_backgroundColor="#30354b"
app:button_round="20"
app:button_scale="0.7"
app:button_duration="400"
app:button_labelText="Elastic Button"
app:button_labelColor="#ffffff"
app:button_labelSize="16"
app:button_labelStyle="bold"/>
```

### ElasticButton use like TextView
Expand All @@ -77,112 +77,130 @@ app:button_backgroundColor="@android:color/transparent"
### ElasticCheckButton
```gradle
<com.skydoves.elasticviews.ElasticCheckButton
android:id="@+id/elasticcheckbutton"
android:layout_width="match_parent"
android:layout_height="50dp"
app:checkbutton_backgroundColor="#30354b"
app:checkbutton_round="30"
app:checkbutton_scale="0.9"
app:checkbutton_duration="400"
app:checkbutton_labelText="Elastic CheckButton"
app:checkbutton_labelColor="#ffffff"
app:checkbutton_labelSize="16"
app:checkbutton_labelStyle="bold"
app:checkbutton_alpha="0.5"
app:checkbutton_ischecked="false"/>
android:id="@+id/elasticcheckbutton"
android:layout_width="match_parent"
android:layout_height="50dp"
app:checkbutton_backgroundColor="#30354b"
app:checkbutton_round="30"
app:checkbutton_scale="0.9"
app:checkbutton_duration="400"
app:checkbutton_labelText="Elastic CheckButton"
app:checkbutton_labelColor="#ffffff"
app:checkbutton_labelSize="16"
app:checkbutton_labelStyle="bold"
app:checkbutton_alpha="0.5"
app:checkbutton_ischecked="false"/>
```

### ElasticImageView
```gradle
<com.skydoves.elasticviews.ElasticImageView
android:id="@+id/elasticimageview"
android:layout_width="64dp"
android:layout_height="64dp"
android:scaleType="fitXY"
android:src="@drawable/ic_question"
app:imageview_duration="500"
app:imageview_scale="0.7"/>
android:id="@+id/elasticimageview"
android:layout_width="64dp"
android:layout_height="64dp"
android:scaleType="fitXY"
android:src="@drawable/ic_question"
app:imageview_duration="500"
app:imageview_scale="0.7"/>
```

### ElasticFloatingButton
```gradle
<com.skydoves.elasticviews.ElasticFloatingActionButton
android:id="@+id/elasticfab"
android:layout_width="64dp"
android:layout_height="64dp"
android:src="@drawable/ic_add"
app:fabSize="normal"
app:fabutton_duration="400"
app:fabutton_scale="0.85"/>
android:id="@+id/elasticfab"
android:layout_width="64dp"
android:layout_height="64dp"
android:src="@drawable/ic_add"
app:fabSize="normal"
app:fabutton_duration="400"
app:fabutton_scale="0.85"/>
```

### ElasticLayout
ElasticLayout gives elastic animation to all child views.
ElasticLayout implements elastic animation to all child views.

```gradle
<com.skydoves.elasticviews.ElasticLayout
android:id="@+id/elasticlayout"
android:layout_width="match_parent"
android:layout_height="80dp"
app:layout_backgroundColor="#30354b"
app:layout_duration="500"
app:layout_scale="0.85">
<TextView
android:id="@+id/textView0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This is"
android:textColor="#ffffff"
android:textSize="18sp" />
<TextView
android:layout_below="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="ElasticLayout"
android:textColor="#ffffff"
android:textSize="18sp"
android:gravity="end" />
android:id="@+id/elasticlayout"
android:layout_width="match_parent"
android:layout_height="80dp"
app:layout_backgroundColor="#30354b"
app:layout_duration="500"
app:layout_scale="0.85">
<TextView
android:id="@+id/textView0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This is"
android:textColor="#ffffff"
android:textSize="18sp" />
<TextView
android:layout_below="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="ElasticLayout"
android:textColor="#ffffff"
android:textSize="18sp"
android:gravity="end" />
</com.skydoves.elasticviews.ElasticLayout>
```

### ElasticAnmimation
ElasticAnimation lets we can implement elastic animation on all of the views. <br>
ElasticAnimation implements elastic animations for android views or view groups. <br>
```java
new ElasticAnimation(clickedView).setScaleX(0.9f).setScaleY(0.9f).setDuration(400)
.setOnFinishListener(onFinishListener).doAction();
```
or we can set ViewPropertyAnimatorListener using setListener method and detect animation start and end.

#### ViewPropertyAnimatorListener
we can set `ViewPropertyAnimatorListener` using `setListener` method and detect animation's status.
```java
.setListener(new ViewPropertyAnimatorListener() {
@Override
public void onAnimationStart(View view) {
}

@Override
public void onAnimationEnd(View view) {
finishListener.onFinished();
}

@Override
public void onAnimationCancel(View view) {
}
@Override
public void onAnimationStart(View view) {
// do something
}

Override
public void onAnimationEnd(View view) {
finishListener.onFinished();
}

Override
public void onAnimationCancel(View view) {
// do something
}
});
```

#### Kotlin Extension
ElasticAnimation supports kotlin extension `elasticAnimation`.
```kotlin
val anim = textView.elasticAnimation(0.8f, 0.8f, 400, object: ElasticFinishListener {
override fun onFinished() {
// do anything
}
})
override fun onFinished() {
// do anything
}
})
anim.doAction()
```

#### Kotlin dsl
```kotlin
elasticAnimation(this) {
setDuration(duration)
setScaleX(scale)
setScaleY(scale)
setOnFinishListener(object : ElasticFinishListener {
override fun onFinished() {
onClick()
}
})
}.doAction()
```

#### Example : Normal Button
we can implement animation on all of the views like below.
```java
Expand Down

0 comments on commit 0fb33d3

Please sign in to comment.