Android enhances the user experience of the skeleton screen

A few days ago, the company optimized the app and proposed not to use chrysanthemum chart. The reason is that the pop-up dialog box when the user enters the interface is too stressful, and the ios terminal has no return button and can only be operated after the request is finished, which is very frustrating. Happened to see “Yugang Said” the public account pushed a skeleton screen article, looked at it and tried other access to summarize the pit.

Third party library on this

• Github.com/sharish/Shi…

A wrapper Recycview mask controls, use more convenient than the following.

• Github.com/ethanhua/Sk…

A library that encapsulates the mask layer

• Github.com/team-superc…

A library that makes layouts flicker. Many third party libraries rely on it

Mask library

• Github.com/elye/loader…

Only images and text are supported. Masks are removed when values are set. Concrete implementation can look at the source code,

• Github.com/rasoulmiri/…

Mask control, supports multiple controls, but the need to nest multiple layers can affect performance a bit

Implementation method

For example, there are two ideas of implementation. One is to write an extra mask layout and replace it after the request is successful. This is also the implementation method of the third party library above. The other method is that the mask controls are nested in the original layout, and the method is hidden when the display is successful. Either way, it is better to ask the designer to give a good prototype size of the mask item, otherwise it is difficult to adjust the size when encountering complex layout.

The easiest way

• Github.com/sharish/Shi…

Just replace RecyclerView with ShimmerRecyclerView to call show and hide methods. This method also requires writing a mask layout, which is otherwise the default.

• Access to the

repositories {
    jcenter()
    maven { url "https://jitpack.io" }
}

dependencies {
    implementation 'com. Making. Sharish: ShimmerRecyclerView: v1.3'
}
Copy the code

• use

<com.cooltechworks.views.shimmer.ShimmerRecyclerView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/shimmer_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:shimmer_demo_child_count="10"
        app:shimmer_demo_grid_child_count="2"
        app:shimmer_demo_layout="@layout/layout_demo_grid"
        app:shimmer_demo_layout_manager_type="grid"
        app:shimmer_demo_angle="20"
        />
Copy the code

Call the corresponding show and hide method

shimmerRecycler.showShimmerAdapter();

shimmerRecycler.hideShimmerAdapter();
Copy the code

Skeleton + layout

• Github.com/ethanhua/Sk…

This method is relatively free, in addition to RecyclerView can also be used in other layouts

• Access to the

repositories {
    jcenter()
    maven { url "https://jitpack.io" }
}

dependencies {
    implementation 'com. Making. Sharish: ShimmerRecyclerView: v1.3'
}
Copy the code

• Using RecyclerView:

skeletonScreen = Skeleton.bind(recyclerView)
                              .adapter(adapter)
                              .load(R.layout.item_skeleton_news)
                              .show();
Copy the code

The other View:

skeletonScreen = Skeleton.bind(rootView)
                              .load(R.layout.layout_img_skeleton)
                              .show();
Copy the code

Methods provided

.shimmer(true)      // whether show shimmer animation.                      default is true
.count(10)          // the recycler view item count.                        default is 10
.color(color)       // the shimmer color.                                   default is #a2878787
.angle(20)          // the shimmer angle.                                   default is 20;
.duration(1000)     // the shimmer animation duration.                      default is 1000;
.frozen(false)      // whether frozen recyclerView during skeleton showing  default is true; 
Copy the code

Disappear call

skeletonScreen.hide()
Copy the code

Mask controls

The above methods all write a layout, if you do not want to write more than one layout can use the mask control

1. Github.com/elye/loader…
   

   

Automatically remove masks when setting setText or SRC. You can set the percentage length of the default mask and you can set a little flicker animation and so on. However, only text and image controls are available, and masks cannot be set based on the length of the text, because setText automatically disappears, so in some complex layouts it is impossible to do without the designer providing a size map.

• Access to the

dependencies {
    implementation 'com. Elyeproj. Libraries: loaderviewlibrary: 1.5.0'
}
Copy the code

• use

<com.elyeproj.loaderviewlibrary.LoaderImageView
     android:layout_width="100dp"
     android:layout_height="100dp" />
Copy the code

<com.elyeproj.loaderviewlibrary.LoaderTextView
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:width_weight="0.4" 
     app:height_weight="0.8"
     app:use_gradient="true"
      app:corners="16"
       app:custom_color="@android:color/holo_green_dark" />
Copy the code

If you need to reload

myLoaderTextView.resetLoader();
Copy the code

2. github.com/rasoulmiri/…

Effects other than the one shown above are supported, and any layout is supported because it is used by wrapping a layer over the original layout. The advantage of this approach is that it is possible to set the content of the package after a layer layout is set outside without the designer’s mask drawing, but it will cost a little bit of rendering performance.

• Access to the

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

dependencies {
      compile 'com. Making. Rasoulmiri: Skeleton: v1.0.9'
}
Copy the code

• use

<io.rmiri.skeleton.SkeletonGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"> <io.rmiri.skeleton.SkeletonView ... > <View ... /> </io.rmiri.skeleton.SkeletonView> <io.rmiri.skeleton.SkeletonView ... > <View ... /> </io.rmiri.skeleton.SkeletonView> </io.rmiri.skeleton.SkeletonGroup>Copy the code

Support for animation listening

skeletonGroup.setSkeletonListener(new SkeletonGroup.SkeletonListener() {
      @Override
      public void onStartAnimation() {... } @Override public voidonFinishAnimation() {... }});Copy the code

Recommended reading

The Skeleton Screen in Android