ちょっと凝ったローディングダイアログ作った

作ったもの

android:indeterminateTint="@color/teal_200"

だと以下のようにちょっと白く欠けたようになるので、白い部分が消えるようにしてみた。

コード

LoadingDialogFragment

package com.example.sampleapp.ui

import android.app.Dialog
import android.os.Bundle
import androidx.appcompat.app.AppCompatDialogFragment
import com.example.sampleapp.R

class LoadingDialogFragment : AppCompatDialogFragment() {

    companion object {

        const val TAG = "LoadingDialogFragment"

        fun newInstance(): LoadingDialogFragment {

            val fragment = LoadingDialogFragment()
            fragment.arguments = Bundle().apply {

            }
            return fragment
        }
    }

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
/*      
        return activity?.let {
            val builder = AlertDialog.Builder(it)
            builder.setView(R.layout.gradient_loading_dialog)
            val dialog = builder.create()
            return dialog
        } ?: throw IllegalStateException("Activity cannot be null")
*/
        // 本当は上記コードの方が推奨されるけど、ダイアログの背景がちょうどいい大きさにならず下記コードで実装...
        val dialog = Dialog(requireContext())
        dialog.setContentView(R.layout.gradient_loading_dialog)
        return dialog
    }

}

layoutの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:background="@android:color/transparent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <!-- サイズは適当 -->
    <ProgressBar
        android:id="@+id/progressBar"
        style="@style/Widget.AppCompat.ProgressBar"
        android:background="@android:color/transparent"
        android:indeterminate="true"
        android:indeterminateDrawable="@drawable/loading_dialog_drawable"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_margin="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

回転画像のdrawable

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="1000" >

    <shape
        android:innerRadius="20dp"
        android:shape="ring"
        android:thickness="4dp"
        android:useLevel="false" >

        <size android:width="60dp" android:height="60dp" />

        <gradient
            android:endColor="#d3d3d3"
            android:startColor="@color/teal_200"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>

まとめ

ローディングダイアログはデザインをある程度デザイナーさんが用意してくれたケースが多かったのですが、
今回標準にちょっとアレンジしたものを作ることがあったので備忘録に残します。

GithubにUPされているライブラリ使えるといいかもしれませんが、
コード量がちょっとだったので（ライブラリ使うと逆に微調整効かなくなりそうだったので）自作しました。

ベースにしたサイトがあったけどリンク失念....