What's this layout, any example about this one? - android-layout

Question

https://drive.google.com/open?id=1iCM6GlT-iAXxNWw7qAt165Q1PVWhMrSp
What's loading(blur) and then show icon layout?
How to create one like this?

Answer 1

You could start checking Shimmer effect. This help you showing any item layout structure as a placeholder while you are doing some extra work (or loading something)
Result:
How to do it:
First, add facebook Shimmer library to build.gradle:
dependencies {
implementation 'com.facebook.shimmer:shimmer:0.1.0#aar'
}
Then create you placeholder_layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp">
<View
android:id="#+id/thumbnail"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginRight="16dp"
android:layout_marginTop="10dp"
android:background="#dddddd"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/thumbnail"
android:layout_marginTop="10dp"
android:orientation="vertical">
<View
android:layout_width="100dp"
android:layout_height="8dp"
android:background="#dddddd" />
<View
android:layout_width="30dp"
android:layout_height="8dp"
android:layout_marginTop="5dp"
android:background="#dddddd" />
</LinearLayout>
</RelativeLayout>
Next, in your activity layout, add the ShimmerFrameLayout with your placeholders.
<com.facebook.shimmer.ShimmerFrameLayout
android:id="#+id/shimmer_view_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="15dp"
android:orientation="vertical"
shimmer:duration="800">
<!-- Adding 7 rows of placeholders -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/data_placeholder_layout" />
<include layout="#layout/data_placeholder_layout" />
<include layout="#layout/data_placeholder_layout" />
<include layout="#layout/data_placeholder_layout" />
<include layout="#layout/data_placeholder_layout" />
<include layout="#layout/data_placeholder_layout" />
<include layout="#layout/data_placeholder_layout" />
</LinearLayout>
</com.facebook.shimmer.ShimmerFrameLayout>
Finally manage when to show or hide the ShimmerFrameLayout in your Activity/Fragment class:
public class MainActivity extends AppCompatActivity {
private ShimmerFrameLayout mShimmerViewContainer;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mShimmerViewContainer = findViewById(R.id.shimmer_view_container);
// Stop Shimmer effect whenever you want. e.g. when data
// is received from web service
mShimmerViewContainer.stopShimmerAnimation();
mShimmerViewContainer.setVisibility(View.GONE);
}
#Override
public void onResume() {
super.onResume();
mShimmerViewContainer.startShimmerAnimation();
}
#Override
protected void onPause() {
mShimmerViewContainer.stopShimmerAnimation();
super.onPause();
}
}
NOTE: Don't forget to start and stop the component when the view is no longer visible. Use onResume() and onPause()
Hope this helps you.
Source: https://medium.com/mindorks/android-design-shimmer-effect-fa7f74c68a93