Android | going for two days! I wrote a UI library that supports rounded corners and strokes

Results the preview

Let’s take a look at this library in action. It’s really easy to use and it’s really nice. Here’s a look at MI 6X, Android 9. Please note that the actual effect of different devices may vary.

View, TextView, ImageView, Button, ConstraintLayout, LinearLayout, RelativeLayout, FrameLayout, RecyclerView control of rounded and stroke, basic coverage of daily development needs, a needle cure designers for many years of rounded disease!

How to use

This project is all developed in Kotlin language, and the minimum supported version is Android 5.0. The code is open source on Github and Gitee. You can click on the link below to see how to use it in more detail. This article is only a rough introduction. Github:github.com/liqvip/Easy… Gitee:gitee.com/lishu1108/E… If this project helps you, I hope readers can help me click a Star, I will work harder to move bricks!

The first step

Add the JitPack repository in build.gradle at the root of your project

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io'}}}Copy the code

The second step

Add EasyView dependencies to build.gradle of the corresponding module

dependencies {
    ...
    implementation 'com. Making. Liqvip: EasyView: 1.0.0'
}
Copy the code

The third step

Add the EasyView you want to use to your layout file. Here is a simple example

<com.github.easyview.EasyImageView
    android:layout_width="@dimen/dp_200"
    android:layout_height="@dimen/dp_200"
    app:ev_radius="@dimen/dp_100"
    app:ev_stroke_width="@dimen/dp_5"
    app:ev_stroke_color="@color/demo18"/>

<com.github.easyview.EasyRelativeLayout
    android:layout_width="@dimen/dp_250"
    android:layout_height="@dimen/dp_150"
    app:ev_topLeft_radius="@dimen/dp_50"
    app:ev_bottomLeft_radius="@dimen/dp_20"
    app:ev_stroke_width="@dimen/dp_5"
    app:ev_stroke_color="@color/demo6"/>.Copy the code

All rounded corners and strokes in just three neat steps.

Why am I writing this library

In Android development, there are two most common ways for a control to achieve a rounded corner and stroke effect like the one above.

Write the XML file and set the rounded background

In the Drawable folder, create a new XML file and use the Shape tag to set the radius, stroke width, and color. Then set it to the background of a specific View. This method has obvious disadvantages. Once the project is large, the radius of corner, width of stroke and color of different views will be different. As a result, a large number of XML files will be piled up in our project, resulting in high maintenance costs. Most importantly, there’s nothing elegant about it.


      
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp" />
    <solid android:color="@color/colorAccent" />
</shape>
Copy the code

Use GradientDrawable

This works the same way as writing an XML file to set rounded corners and strokes by setting the View’s background. The difference is that GradientDrawable supports dynamic Settings, so I don’t want to use GradientDrawable as an example. You can search for GradientDrawable online and try it out on your own.

As you can see, to achieve rounded corners and strokes, you can’t avoid writing XML or a lot of repetitive, meaningless code, so what’s the best way to do that? What’s the best way to use it? With this confusion, I finally finished the library.

The best realization in my heart

Programming is interface oriented. In my opinion, all controls in Android should have rounded corners and strokes, but the official controls were designed without much consideration of the user’s feelings. In practice, the use of rounded corners and strokes is so extensive that we urgently need a solution that can set rounded corners and strokes directly in the XML layout file. This is especially developer-friendly, as is the use of a simple property, and EasyView meets or exceeds the above solution.

So how does EasyView implement rounded corners and strokes inside the project? The answer is also very simple, the core principle is to use Canvas image blending. Readers who have studied Canvas will be much more relaxed when reading the source of EasyView project.

Because this article mainly introduces the use of EasyView, so the source code is not much discussion, maybe in a few days I will write an article to readers to analyze the source of EasyView, and share the various pits I encountered in the development of this project. EasyView just released less than a day ago, it is still a vibrant child, if you encounter some problems in the process of using, please be sure to issue to me.

Write in the last

If you are interested in me, please go to blogss.cn or follow programmer Xiabei to learn more.

If this article has helped you, please feel free to like it and follow it. This is what keeps me writing ❤️
Due to the author’s limited level, if there are any mistakes in this article, please correct them in the comments section ✔️