shimmer library를 사용해서 스켈레톤 로딩 화면

 

결과 화면

 

 

1️⃣  dependencies 라이브러리 추가

// shimmer
implementation("com.facebook.shimmer:shimmer:0.5.0")

 

• shimmer github 

 

GitHub - facebookarchive/shimmer-android: An easy, flexible way to add a shimmering effect to any view in an Android app.

 

 

2️⃣  ReclerView 에 들어가는 item 

 

item_rv.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content"
    android:orientation="vertical"
    android:padding="12dp">

    <ImageView
        android:id="@+id/imageView_item_rv"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:scaleType="fitCenter"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView_item_rv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView_item_rv"
        tools:text="textArea" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

3️⃣  스켈레톤 로딩화면에 들어갈 item 

 

item_shimmer.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="12dp">

    <ImageView
        android:id="@+id/imageView_item_shimmer"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@color/cardview_shadow_start_color"
        android:scaleType="fitCenter"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView_item_shimmer"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:background="@color/cardview_shadow_start_color"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView_item_shimmer" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

• 위에서 만든 ReclerView 에 들어가는 item 과 유사하게 구현해야 스켈레톤 로딩 이후 화면이 자연스럽다

 

4️⃣  activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/item_rv" />

    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmerFrameLayout_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include layout="@layout/item_shimmer" />

            <include layout="@layout/item_shimmer" />

            <include layout="@layout/item_shimmer" />

            <include layout="@layout/item_shimmer" />

            <include layout="@layout/item_shimmer" />

            <include layout="@layout/item_shimmer" />

            <include layout="@layout/item_shimmer" />

        </androidx.appcompat.widget.LinearLayoutCompat>

    </com.facebook.shimmer.ShimmerFrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 

• ShimmerFrameLayout 안에 3️⃣ 에서 만든 화면을 include 해서 여러개 넣어주면 된다

 

 

5️⃣  MainActivity

 

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    private lateinit var viewModel: MainViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()

        binding = ActivityMainBinding.inflate(layoutInflater)

        viewModel = ViewModelProvider(this)[MainViewModel::class.java]
        viewModel.getAllData()

        observeData()

        setContentView(binding.root)
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }
    }

    private fun observeData() {
        viewModel.result.observe(this) { dataList ->

            // 데이터 로딩이 너무 빨리 일어나서 코루틴으로 딜레이를 줌
            GlobalScope.launch(Dispatchers.Main) {
                delay(1500)

                // 데이터 로딩 완료 시 Shimmer 애니메이션 중지
                binding.shimmerFrameLayoutMain.stopShimmer()
                binding.shimmerFrameLayoutMain.visibility = View.GONE

                binding.recyclerViewMain.run {
                    adapter = MainAdapter(dataList)
                    layoutManager = LinearLayoutManager(context)
                }
            }
        }
    }
}

 

 

---

전체 코드

 

Blog/Project/skeletonUi at develop · wjdwntjd55/Blog

 

 

---

참고한 자료

 

[Android] 스켈레톤 로딩 화면 구현하기 - Facebook shimmer library

 

 

 

[Android / Kotlin] shimmer library를 사용하여 스켈레톤 로딩 화면 만들기