SurroundCardView

SurroundCardView is a special form of MaterialCardView that has animated stroke.

Preview

default

Setup

Gradle

Add jcenter to your build.gradle in the root project.

allprojects {
    repositories {
        jcenter()
    }
}

Add the library to the dependencies section

dependencies {
    implementation "com.furkanakdemir:surroundcardview:1.0.1"
}

Usage

The example of SurroundCardView is the following:

<com.furkanakdemir.surroundcardview.SurroundCardView
    android:id="@+id/sampleSurroundCardView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:cardCornerRadius="12dp"
    app:scv_duration="1000"
    app:scv_startPoint="bottom_start"
    app:scv_color="#03A9F4"
    app:scv_surrounded="true"
    app:scv_width="12dp" />

Attributes

Attribute Type Default Description
scv_duration Integer 600 the duration of a surround or a release animation in milliseconds
scv_width Dimension 4 dp the width of surrounding stroke
scv_color Color #03A9F4 the color of surrounding stroke
scv_startPoint StartPoint top_start the starting point of the animation
scv_surrounded Boolean false the initial visibility of the stroke

Surround & Release

Surround Release
surround release
sampleSurroundCardView.surround() sampleSurroundCardView.release()

Listener

You can set a listener to detect the ending of a surround or a release animation.

sampleSurroundCardView.surroundListener = object : SurroundListener {
    override fun onSurround() {
        // TODO
    }
}

sampleSurroundCardView.releaseListener = object : ReleaseListener {
    override fun onRelease() {
        // TODO
    }
}

Customization

You can customize SurroundCardView by changing the duration, stroke width, color, starting point, and initial state.

Duration

duration

You can change the duration of a surround animation. This will affect both surround and release animations.

sampleSurroundCardView.setDuration(2000)
Stroke Width

stroke_width

You can change the width of a surrounding stroke by setting it as DimenRes.

sampleSurroundCardView.setSurroundStrokeWidth(R.dimen.stroke_width_custom))
Color

color

You can change the color of a surrounding stroke by setting it as ColorRes.

sampleSurroundCardView.setSurroundStrokeColor(R.color.customColor)
Initial State

initial_state

sampleSurroundCardView.setSurrounded(true)
Starting Point
Top Start Top End Bottom Start Bottom End
top_start top_end bottom_start bottom_end 
val startPoint = TOP_START | TOP_END | BOTTOM_START | BOTTOM_END
sampleSurroundCardView.setStartPoint(startPoint)

Upcoming

  • Support shape-theming
  • Add a toggle API
  • Change state even when the animation is running

Contribution

If you've found an error in the library or sample, please file an issue.

Patches are encouraged, and may be submitted by forking this project and submitting a pull request.

If you contributed to surroundcardview but your name is not in the list, please feel free to add yourself!

GitHub