Software Development Exam  >  Software Development Notes  >  ShimmerLayout in Android with Examples

ShimmerLayout in Android with Examples - Software Development PDF Download

ShimmerLayout in Android with Examples

Last Updated : 15 Aug, 2022

ShimmerLayout provides a visually appealing Shimmer Effect, akin to those seen on platforms like Facebook or LinkedIn, for Android applications. This layout proves especially useful when an application is fetching data from an API, a process that might take a while. In such cases, incorporating a ShimmerLayout is preferred over displaying a blank screen, as it informs the user that the layout is currently loading. The code examples are presented in both Java and Kotlin programming languages for Android.

ShimmerLayoutShimmer EffectFacebookLinkedInJava and Kotlin Programming Language for Android.

Advantages:

  • ShimmerLayout stands out for its memory efficiency.
  • It offers customization options to align with the application's specific requirements.

Disadvantage:

  • One drawback to note is that ShimmerLayout is deprecated.

Approach:

1. Begin by integrating the support library into the App-level build.gradle file and subsequently add the necessary dependency within the dependencies section. This step enables developers to directly utilize the built-in functions.

1.build.gradle

2. Proceed by creating a circle.xml file within the drawable folder and inserting the provided code snippet. This file will be utilized in conjunction with the ShimmerLayout alongside the text view.

2.circle.xml
  • Here is the XML code snippet for circle.xml:

3. Finally, integrate the following code snippet into the activity_main.xml file. Within this file, include the ShimmerLayout and its respective child view. Attach circle.XML in the src tag within ImageView.

3. activity_main.xml

  • activity_main.xml contains the layout structure of the main activity in an Android application.
  • It specifies the visual elements and their properties using XML tags.
  • The layout is designed using nested LinearLayouts to organize the views vertically.
  • ImageView and TextView elements are used to display images and text on the screen.
  • Properties such as layout_width, layout_height, gravity, and background are set to define the appearance of the elements.
  • ShimmerLayout is utilized to create a shimmer animation effect.
  • The app:shimmer_animation_duration attribute sets the duration of the shimmer animation to 2000 milliseconds.

io.supercharge.shimmerlayout.ShimmerLayout

  • ShimmerLayout is a custom layout that provides shimmering effects to its child views.
  • It enhances the visual appeal of the app by adding animated shimmer effects.

4. Adding Code to MainActivity File

  • Integrate the following code snippet into the MainActivity file of the Android project.
  • In the MainActivity file, implement the startShimmerAnimation method to initiate the animation on ShimmerLayout.
  • This method triggers the shimmer effect, providing a visual indication of loading or activity.
  • By calling startShimmerAnimation, the shimmer effect becomes visible to the user.
Code Snippet: io.supercharge.shimmerlayout.ShimmerLayout xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@id/shimmer_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:shimmer_animation_duration="2000"

MainActivity startShimmerAnimation

  • In the MainActivity class, the method startShimmerAnimation is implemented to initiate a shimmer animation effect.

Java Implementation

  • The Java implementation involves importing necessary Android classes and libraries, such as Bundle, AppCompatActivity, and ShimmerLayout.
  • Inside the onCreate method, the activity layout is set using setContentView(R.layout.activity_main), and the shimmer animation is started on the ShimmerLayout object.
  • Here is the Java code snippet for the MainActivity class:

    import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity; import io.supercharge.shimmerlayout.ShimmerLayout; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ShimmerLayout layout = findViewById(R.id.shimmer_layout); layout.startShimmerAnimation(); } }

Kotlin Implementation

  • The Kotlin implementation also involves importing necessary classes like Bundle, AppCompatActivity, and ShimmerLayout.
  • Similar to the Java version, in the onCreate method, the activity layout is set and the shimmer animation is started on the ShimmerLayout object.
  • Below is the Kotlin code snippet for the MainActivity class:

    import android.os.Bundle import androidx.appcompat.app.AppCompatActivity import io.supercharge.shimmerlayout.ShimmerLayout class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val layout: ShimmerLayout = findViewById(R.id.shimmer_layout) layout.startShimmerAnimation() } }

Java ImplementationKotlin Implementation
import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity; import io.supercharge.shimmerlayout.ShimmerLayout; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ShimmerLayout layout = findViewById(R.id.shimmer_layout); layout.startShimmerAnimation(); } } import android.os.Bundle import androidx.appcompat.app.AppCompatActivity import io.supercharge.shimmerlayout.ShimmerLayout class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val layout: ShimmerLayout = findViewById(R.id.shimmer_layout) layout.startShimmerAnimation() } }

Output:

Video Player00:0000:08Use Up/Down Arrow keys to increase or decrease volume.

Java Backend Development - Live Course

Are you feeling overwhelmed in the expansive realm of Backend Development? It's time to make a significant shift! Enroll in our Java Backend Development - Live Course to commence an engaging journey towards mastering backend development efficiently and within the set timeline.

What's Included:
  • Comprehensive Course
  • Expert Guidance for Efficient Learning
  • Hands-on Experience with Real-world Projects
  • Proven Track Record with 100,000 Successful Geeks

Please Login to comment...

LoginLike
The document ShimmerLayout in Android with Examples - Software Development is a part of Software Development category.
All you need of Software Development at this link: Software Development
Download as PDF

Top Courses for Software Development

Related Searches

Exam

,

MCQs

,

pdf

,

practice quizzes

,

Objective type Questions

,

Free

,

Viva Questions

,

Extra Questions

,

video lectures

,

Sample Paper

,

ShimmerLayout in Android with Examples - Software Development

,

Semester Notes

,

Previous Year Questions with Solutions

,

ShimmerLayout in Android with Examples - Software Development

,

shortcuts and tricks

,

study material

,

ShimmerLayout in Android with Examples - Software Development

,

Important questions

,

past year papers

,

Summary

,

mock tests for examination

,

ppt

;