Анимация заполнителя содержимого с использованием Shimmer в Android

Опубликовано: 2 Сентября, 2022

Мы видели уникальный дизайн экрана загрузки, который используется в Facebook для целей загрузки, а также используется для отображения заполнителя содержимого с целью загрузки. GitHub предоставляет этот тип заполнителя загрузки, и он выглядит красивее, чем обычный индикатор выполнения. В этой статье мы рассмотрим реализацию Content Placeholder с использованием анимации Shimmer в Android.

Что мы собираемся построить в этой статье?

Мы будем создавать простое приложение, в котором мы будем загружать данные из URL-адреса в формате JSON, и в процессе загрузки мы будем отображать мерцающий макет для загрузки. Пример видео приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье. Обратите внимание, что мы собираемся реализовать этот проект на языке Java .

Пошаговая реализация

Шаг 1: Создайте новый проект

Чтобы создать новый проект в Android Studio, обратитесь к разделу «Как создать/запустить новый проект в Android Studio». Обратите внимание, что в качестве языка программирования выберите Java .

Шаг 2: Добавление зависимости для использования макета Facebook Shimmer

Перейдите к приложению > Gradle Scripts > файлу build.gradle и добавьте к нему приведенную ниже зависимость.

// below line is used for volley library
implementation ‘com.android.volley:volley:1.1.1’
// below line is used for image loading library
implementation ‘com.squareup.picasso:picasso:2.71828’
// depenancy for using facebook shimmer layout.
implementation ‘com.facebook.shimmer:shimmer:0.5.0’

Теперь синхронизируйте свой проект и перейдите к файлу XML.

Шаг 3: Добавление разрешений для Интернета в Android

Перейдите к приложению > AndroidManifest.xml и добавьте к нему разрешения для Интернета, поскольку мы загружаем данные из Интернета.

XML

<uses-permission android:name="android.permission.INTERNET"/>

Шаг 4: Работа с файлом activity_main.xml

Перейдите к приложению > res > layout > activity_main.xml и добавьте приведенный ниже код в этот файл. Ниже приведен код файла activity_main.xml .

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!-- Card view for displaying our card-->
    <androidx.cardview.widget.CardView
        android:id="@+id/idCVCourse"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:elevation="10dp"
        android:visibility="gone"
        app:cardCornerRadius="8dp">
  
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
  
            <!--Image view for displaying our image-->
            <ImageView
                android:id="@+id/idIVCourse"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:layout_margin="5dp" />
  
            <!--Text view for displaying our course name-->
            <TextView
                android:id="@+id/idTVCourseName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:padding="5dp"
                android:text="Course Name "
                android:textColor="@color/black"
                android:textSize="18sp"
                android:textStyle="bold" />
  
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:orientation="horizontal"
                android:weightSum="2">
  
                <!--Text view for displaying our batch-->
                <TextView
                    android:id="@+id/idTVBatch"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:padding="5dp"
                    android:text="Batch"
                    android:textColor="@color/black" />
  
                <!--Text view for displaying our tracks.-->
                <TextView
                    android:id="@+id/idTVTracks"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:padding="5dp"
                    android:text="Tracks"
                    android:textColor="@color/black" />
  
            </LinearLayout>
  
        </LinearLayout>
  
    </androidx.cardview.widget.CardView>
      
    <!--below is the view for our shimmer-->
    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmerLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:animateLayoutChanges="true"
        android:animationCache="true"
        app:shimmer_repeat_mode="restart"
        app:shimmer_shape="radial">
  
        <!--For shimmer we are creating a same layout 
            but setting its background as a gray colour and
            not providing any view inside it-->
        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:elevation="10dp"
            android:visibility="visible"
            app:cardCornerRadius="8dp">
  
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
  
                <!--Image view for displaying our image-->
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    android:layout_margin="5dp"
                    android:background="#B3B3B3" />
  
                <!--Text view for displaying our course name-->
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:background="#B3B3B3"
                    android:padding="5dp"
                    android:textColor="@color/black"
                    android:textSize="18sp"
                    android:textStyle="bold" />
  
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:orientation="horizontal"
                    android:weightSum="2">
  
                    <!--Text view for displaying our batch-->
                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:background="#B3B3B3"
                        android:padding="5dp"
                        android:textColor="@color/black" />
  
                    <!--Text view for displaying our tracks.-->
                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:background="#B3B3B3"
                        android:padding="5dp"
                        android:textColor="@color/black" />
  
                </LinearLayout>
  
            </LinearLayout>
  
        </androidx.cardview.widget.CardView>
          
    </com.facebook.shimmer.ShimmerFrameLayout>
  
</RelativeLayout>

Шаг 5: Работа с файлом MainActivity.java

Перейдите к файлу MainActivity.java и обратитесь к следующему коду. Ниже приведен код файла MainActivity.java . Комментарии добавляются внутри кода, чтобы понять код более подробно.

Java

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
  
import androidx.appcompat.app.AppCompatActivity;
import androidx.cardview.widget.CardView;
  
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.JsonObjectRequest;
import com.android.volley.toolbox.Volley;
import com.facebook.shimmer.ShimmerFrameLayout;
import com.squareup.picasso.Picasso;
  
import org.json.JSONException;
import org.json.JSONObject;
  
public class MainActivity extends AppCompatActivity {
  
    // creating variables for our textview,
    // imageview, cardview and progressbar.
    private TextView courseNameTV, courseTracksTV, courseBatchTV;
    private ImageView courseIV;
    private CardView courseCV;
      
    // variable for our shimmer frame layout
    private ShimmerFrameLayout shimmerFrameLayout;
      
    // below line is the variable for url from
    // where we will be querying our data.
    String url = "https://jsonkeeper.com/b/63OH";
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initializing our shimmer layout.
        shimmerFrameLayout = findViewById(R.id.shimmerLayout);
          
        // on below line we are 
        // starting our shimmer layout.
        shimmerFrameLayout.startShimmer();
          
        // in below line we are 
        // initializing our all views.
        courseCV = findViewById(R.id.idCVCourse);
        courseNameTV = findViewById(R.id.idTVCourseName);
        courseTracksTV = findViewById(R.id.idTVTracks);
        courseBatchTV = findViewById(R.id.idTVBatch);
        courseIV = findViewById(R.id.idIVCourse);
         
        // creating a new variable for our request queue
        RequestQueue queue = Volley.newRequestQueue(MainActivity.this);
        JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(Request.Method.GET, url, null, new Response.Listener<JSONObject>() {
            @Override
            public void onResponse(JSONObject response) {
                // inside the on response method.
                // in below line we are making our card
                // view visible after we get all the data.
                // on below line we are making our shimmer
                // layout visibility to gone.
                // on below line we are stopping our shimmer.
                shimmerFrameLayout.stopShimmer();
                courseCV.setVisibility(View.VISIBLE);
                try {
                    // now we get our response from API in json object format.
                    // in below line we are extracting a string with its key
                    // value from our json object.
                    // similarly we are extracting all the strings from our json object.
                    String courseName = response.getString("courseName");
                    String courseTracks = response.getString("courseTracks");
                    String courseMode = response.getString("courseMode");
                    String courseImageURL = response.getString("courseimg");
  
                    // after extracting all the data we are
                    // setting that data to all our views.
                    courseNameTV.setText(courseName);
                    courseTracksTV.setText(courseTracks);
                    courseBatchTV.setText(courseMode);
  
                    // we are using picass
            

                    
                                            Technical Scripter
                                            Android
                                            Picked
                                            Java
                                    
РЕКОМЕНДУЕМЫЕ СТАТЬИКоличество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Найдите все факторы заданного числа и их побитовое XOR
27 Февраля, 2023
Показать самое длинное имя
27 Февраля, 2023
Форматирование лицензионного ключа
27 Февраля, 2023
Максимизируйте сумму трех чисел, выполнив побитовое XOR
27 Февраля, 2023


    


        
            
                
                    
                        
                        < PROGLER >
                    
                
                
                    
                        Общее
                        
                        Контакты
                        Политика конфиденциальности
                    
                    
                        Обучение
                        Блог
                    
                
            
            
                © progler.ru 2024. Все права защищены.