Android MaterialCardView with Animated Stroke
Android has been around for years now, Since, the starting of the android operating system. It has never disappointed anyone with its new releases until date, As of being an open-source code android is preferred by millions of people. In addition, android covers more than half of the total mobile users all around the world. Also, it never stopped getting the spotlight even after big competitors. Now, android stands powerful in terms of users as well as preferacility.
The launch of Android 7.0 brought joy as card view was introduced. Since then the feature has been updated a lot. The feature assured android developers to have a better UI. With all those shadows and all behind a content card view became popular. Similarly, the material card view extends all the properties of the card view. However, has more efficient and additional features and methods.
Today, we are here with an awesome library that allows us to surround the card view with some amazing animations. Just card view with its feature might have been a huge achievement back then. However, today a lot of improvements have been made. So, sticking to the simple design might not work if you are trying to create an amazing UI for your users. The library has a lot of features, so we will try much to discuss everything on this one. Libraries make our life much easier with all these different features pre-available. At the same time, a customizable library without any hassle makes it even better.
So, without any further ado let’s get right into the topic. We will discuss and provide everything required for the implementation of this library on your android project. Now, starting with a preview of the library. You will be able to understand how impressive the Ui looks with the animation surrounding the card view. But this isn’t all we are yet to experience the full potential of the library so, stick with us until the end.
Preview
A gif for the visual representation of how the surround card view will work on the project. Undoubtedly, this will make your UI a lot better. A soothing color transition from one side to another and returning makes it look appealing.
Setup
Furthermore, setting this up for implementing it on your android development project is fairly simple. These are the simple steps you will need to follow for setting up the library.
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.2" }
With only these steps, you have already set up the library on your system. Now, all you will have to do is use the library. We will guide you on the usage.
Usage
We are in the usage section. Even though, a glimpse of the code might make it look complicated. However, the usage of the library is easier than you would have thought. You can review the codes provided below as an example for using the surrondcardview library.
<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
You might have been a bit confused just by looking at the code above. However, this description of the attributes shall help you easily understand the code above. Each attribute is necessary to be understood before using the actual library. Although the names of the attributes are much simple/user-friendly, you can get a bit more description of the attributes from the table.
API
Surround
sampleSurroundCardView.surround()
Release
sampleSurroundCardView.release()
Switch
sampleSurroundCardView.switch()
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
As I mentioned, the library is customizable, and it’s easy to do it. You can try out different variations for the library until you meet your preference. Below we have provided some customization options available and how you can change different settings of the library.
Duration
You can change the duration of a surround animation. This will affect both surround and release animations.
sampleSurroundCardView.setDuration(2000)
Stroke Width
You can change the width of a surrounding stroke by setting it as DimenRes.
sampleSurroundCardView.setSurroundStrokeWidth(R.dimen.stroke_width_custom))
Color
You can change the color of a surrounding stroke by setting it as ColorRes.
sampleSurroundCardView.setSurroundStrokeColor(R.color.customColor)
Initial State
sampleSurroundCardView.setSurrounded(true)
Starting Point
Similarly, you can change the direction of the color surrounding the card view. A simple line of code will help you accomplish your preferential direction.
val startPoint = TOP_START | TOP_END | BOTTOM_START | BOTTOM_END
sampleSurroundCardView.setStartPoint(startPoint)
Upcoming
New features and updates are being deployed by the developer furkanakdemir. You can keep track of the features easily through the website or directly from Github. For now, these are the new features going to be deployed.
Support shape-theming
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 on the list, please feel free to add yourself!
Download complete project source code from GitHub