How to add lottie animation in .withIcon holders

[pourya0111]

Is it possible to use lottie animations instead of google material icon in the left vertical panel of minidrawer example?
I mean this part:
PrimaryDrawerItem().withName("Settings").withIcon(GoogleMaterial.Icon.gmd_settings).withIdentifier(2),
)
Use a lottie animation instead of gmd.settings!

[pourya0111]

ok i did it myself but the problem is when the fragment is open its in desired 48 size which matches other icons , but if fragment closed and the side bar (left panel) expands the lottie gets 24 again and also misaligns with the Favorite text!
can you please help correct this snippet?
`package com.defaultcompany.readerapp

import android.content.Context
import android.content.res.Configuration
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.ColorFilter
import android.graphics.PixelFormat
import android.graphics.drawable.Drawable
import android.net.Uri
import android.os.Bundle
import android.util.Log
import android.util.TypedValue
import android.view.Menu
import android.view.MenuItem
import android.view.View
import android.view.ViewGroup.LayoutParams.MATCH_PARENT
import android.widget.CompoundButton
import android.widget.TextView
import androidx.activity.addCallback
import androidx.annotation.RawRes
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.RecyclerView
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieCompositionFactory
import com.airbnb.lottie.LottieDrawable
import com.mikepenz.crossfader.Crossfader
import com.mikepenz.crossfader.util.UIUtils
import com.mikepenz.crossfader.view.CrossFadeSlidingPaneLayout
import com.mikepenz.iconics.IconicsDrawable
import com.mikepenz.iconics.typeface.library.googlematerial.GoogleMaterial
import com.mikepenz.iconics.utils.actionBar
import com.mikepenz.iconics.utils.colorInt
import com.defaultcompany.readerapp.databinding.ActivityMiniDrawerBinding
import com.defaultcompany.readerapp.utils.CrossfadeWrapper
import com.defaultcompany.readerapp.utils.SystemUtils
import com.example.yourapp.AboutFragment
import com.example.yourapp.AdvancedMapFragment
import com.mikepenz.iconics.typeface.IIcon
import com.mikepenz.materialdrawer.holder.ImageHolder
import com.mikepenz.materialdrawer.iconics.withIcon
import com.mikepenz.materialdrawer.interfaces.OnCheckedChangeListener
import com.mikepenz.materialdrawer.model.*
import com.mikepenz.materialdrawer.model.interfaces.*
import com.mikepenz.materialdrawer.widget.AccountHeaderView
import com.mikepenz.materialdrawer.widget.MaterialDrawerSliderView
import com.mikepenz.materialdrawer.widget.MiniDrawerSliderView

class SizedLottieDrawable(
private val context: Context,
@rawres private val animationResId: Int,
private val sizeDp: Int = 48
) : Drawable() {

private val lottieDrawable = LottieDrawable()
private val frameDelay = 16L // ~60fps
private val animator = object : Runnable {
    override fun run() {
        if (lottieDrawable.isAnimating) {
            invalidateSelf()
            handler.postDelayed(this, frameDelay)
        }
    }
}

private val handler = android.os.Handler(context.mainLooper)

init {
    val sizePx = TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        sizeDp.toFloat(),
        context.resources.displayMetrics
    ).toInt()

    LottieCompositionFactory.fromRawRes(context, animationResId)
        .addListener { comp ->
            lottieDrawable.composition = comp
            lottieDrawable.repeatCount = LottieDrawable.INFINITE
            lottieDrawable.setBounds(0, 0, sizePx, sizePx)
            lottieDrawable.start()
            handler.post(animator) // Start continuous redraws
        }
}

override fun draw(canvas: Canvas) {
    val saveCount = canvas.save()
    val dx = bounds.left + (bounds.width() - lottieDrawable.bounds.width()) / 2f
    val dy = bounds.top + (bounds.height() - lottieDrawable.bounds.height()) / 2f
    canvas.translate(dx, dy)
    lottieDrawable.draw(canvas)
    canvas.restoreToCount(saveCount)
}

override fun setAlpha(alpha: Int) = lottieDrawable.setAlpha(alpha)
override fun setColorFilter(colorFilter: ColorFilter?) = lottieDrawable.setColorFilter(colorFilter)
override fun getOpacity(): Int = PixelFormat.TRANSLUCENT
override fun getIntrinsicWidth(): Int = TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP,
    sizeDp.toFloat(),
    context.resources.displayMetrics
).toInt()
override fun getIntrinsicHeight(): Int = getIntrinsicWidth()

}

class MiniDrawerActivity : AppCompatActivity() {
private lateinit var binding: ActivityMiniDrawerBinding

private lateinit var miniSliderView: MiniDrawerSliderView
private lateinit var sliderView: MaterialDrawerSliderView
private lateinit var crossFader: Crossfader<*>

private val onCheckedChangeListener = object : OnCheckedChangeListener {
    override fun onCheckedChanged(
        drawerItem: IDrawerItem<*>, buttonView: CompoundButton, isChecked: Boolean
    ) {
        if (drawerItem is Nameable) {
            Log.i(
                "material-drawer", "DrawerItem: " + (drawerItem as Nameable).name
                        + " - toggleChecked: " + isChecked
            )
        } else {
            Log.i("material-drawer", "toggleChecked: $isChecked")
        }
    }
}

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityMiniDrawerBinding.inflate(layoutInflater).also {
        setContentView(it.root)
    }

    // Handle Toolbar
    setSupportActionBar(binding.toolbar)
    //set the back arrow in the toolbar
    supportActionBar?.setDisplayHomeAsUpEnabled(true)
    supportActionBar?.setTitle(R.string.drawer_item_mini_drawer)

    val profile = ProfileDrawerItem().withName("Pourya MDP")
        .withEmail("pouryamohammadpoor@gmail.com")
        .withIcon("https://avatars3.githubusercontent.com/u/1476232?v=3&s=460")
    val profile2 = ProfileDrawerItem()
        .withName("Bernat Borras")
        .withEmail("alorma@github.com")
        .withIcon(Uri.parse("https://avatars3.githubusercontent.com/u/887462?v=3&s=460"))
    val profile3 = ProfileDrawerItem()
        .withName("Max Muster")
        .withEmail("max.mustermann@gmail.com")
        .withIcon(resources.getDrawable(R.drawable.profile2))
    val profile4 = ProfileDrawerItem()
        .withName("Felix House")
        .withEmail("felix.house@gmail.com")
        .withIcon(resources.getDrawable(R.drawable.profile3))
    val profile5 = ProfileDrawerItem()
        .withName("Mr. X")
        .withEmail("mister.x.super@gmail.com")
        .withIcon(resources.getDrawable(R.drawable.profile4)).withIdentifier(4)
    val profile6 = ProfileDrawerItem()
        .withName("Batman")
        .withEmail("batman@gmail.com")
        .withIcon(resources.getDrawable(R.drawable.profile5))

    sliderView = MaterialDrawerSliderView(this).apply {
        customWidth = MATCH_PARENT
        itemAdapter.add(
            PrimaryDrawerItem().withName("Score List")
                .withIcon(GoogleMaterial.Icon.gmd_list)
                .withIdentifier(1),
            PrimaryDrawerItem().withName("Settings")
                .withIcon(GoogleMaterial.Icon.gmd_settings)
                .withIdentifier(2),
            PrimaryDrawerItem().withName("Map")
                .withIcon(GoogleMaterial.Icon.gmd_map)
                .withIdentifier(3),
            PrimaryDrawerItem().withName("About")
                .withIcon(GoogleMaterial.Icon.gmd_info)
                .withIdentifier(4),
            PrimaryDrawerItem()
                .withName("Favorite")
                .withIcon(createLottieDrawable(this@MiniDrawerActivity
                    ,R.raw.favorite
                    ,48))
                .withIdentifier(5),

            SectionDrawerItem().withName("More Options"),
            SecondaryDrawerItem().withName("Help")
                .withIcon(GoogleMaterial.Icon.gmd_help),
            SecondaryDrawerItem().withName("Contact")
                .withIcon(GoogleMaterial.Icon.gmd_email)
        )
        onDrawerItemClickListener = { v, item, position ->
            when (item.identifier) {
                1L -> showScoreListFragment()
                2L -> showSettingsFragment()
                3L -> showMapFragment()
                4L -> showAboutFragment()
                5L -> showFavoritesFragment()
            }
            // Auto close drawer after selection
           //   crossFader.crossFade()
            false
        }
    }

    miniSliderView = MiniDrawerSliderView(this).apply {
        drawer = sliderView

        val items = itemAdapter.itemList
        if (items != null) {
            for (i in 0 until items.size()) {
                val item = items[i]
                if (item is PrimaryDrawerItem && item.identifier == 5L) {
                    item.icon = ImageHolder(
                        createLottieDrawable(
                            this@MiniDrawerActivity,
                            R.raw.favorite,
                            48
                        )
                    )
                }
            }
        }
    }

    //get the widths in px for the first and second panel
    val firstWidth = UIUtils.convertDpToPixel(300f, this).toInt()
    val secondWidth = UIUtils.convertDpToPixel(72f, this).toInt()

    crossFader = Crossfader<CrossFadeSlidingPaneLayout>()
            .withContent(findViewById<View>(R.id.crossfade_content))
            .withFirst(sliderView, firstWidth)
            .withSecond(miniSliderView, secondWidth)
            .withSavedInstance(savedInstanceState)
            .build()

    //define the crossfader to be used with the miniDrawer. This is required to be able to automatically toggle open / close
    miniSliderView.crossFader = CrossfadeWrapper(crossFader)

    //define a shadow (this is only for normal LTR layouts if you have a RTL app you need to define the other one
    crossFader.getCrossFadeSlidingPaneLayout()
        .setShadowResourceLeft(R.drawable.material_drawer_shadow_left)

  
    showScoreListFragment() // Show score list by default

    // Intercept back button
    onBackPressedDispatcher.addCallback(this) {
        handleBack()
    }
}

// ---- Replace your old createLottieDrawable with this ----
fun createLottieDrawable(context: Context, @RawRes resId: Int, sizeDp: Int): Drawable {
    return SizedLottieDrawable(context, resId, sizeDp)
}

// Add these methods to handle fragment navigation:
private fun showScoreListFragment() {
    supportFragmentManager.beginTransaction()
        .replace(R.id.crossfade_content, ScoreListFragment())
        .commit()
    supportActionBar?.title = "Log List"
}

private fun showSettingsFragment() {
    supportFragmentManager.beginTransaction()
        .replace(R.id.crossfade_content, SettingsFragment())
        .commit()
    supportActionBar?.title = "Settings"
}
private fun showMapFragment() {
    supportFragmentManager.beginTransaction()
        .replace(R.id.crossfade_content, AdvancedMapFragment())
        .commit()
    supportActionBar?.title = "Map"
}
private fun showAboutFragment() {
    supportFragmentManager.beginTransaction()
        .replace(R.id.crossfade_content, AboutFragment())
        .commit()
    supportActionBar?.title = "About"
}

private fun showFavoritesFragment() {
    supportFragmentManager.beginTransaction()
        .replace(R.id.crossfade_content, AboutFragment())
        .commit()
    supportActionBar?.title = "Test Favorites"
}

override fun onSaveInstanceState(_outState: Bundle) {
    var outState = _outState
    //add the values, which need to be saved from the drawer to the bundle
    if (::sliderView.isInitialized) {
        outState = sliderView.saveInstanceState(outState)
    }

    //add the values, which need to be saved from the crossFader to the bundle
    if (::crossFader.isInitialized) {
        outState = crossFader.saveInstanceState(outState)
    }
    super.onSaveInstanceState(outState)
}


override fun onCreateOptionsMenu(menu: Menu): Boolean {
    val inflater = menuInflater
    if (SystemUtils.screenOrientation == Configuration.ORIENTATION_LANDSCAPE) {
        inflater.inflate(R.menu.embedded, menu)
        menu.findItem(R.id.menu_1).icon = IconicsDrawable(this,
            GoogleMaterial.Icon.gmd_sort).apply { actionBar(); colorInt = Color.WHITE }
    }
    return true
}

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.menu_1 -> {
            crossFader.crossFade() // toggle mini panel manually
            true
        }
        android.R.id.home -> {
            handleBack() // call the same handler
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

private fun handleBack() {
    // If mini panel is visible, slide to main panel
    if (crossFader.isCrossFaded) {
        crossFader.crossFade() // show left panel

    } else {
        // optional: check if fragment stack has more entries
        if (supportFragmentManager.backStackEntryCount > 0) {
            supportFragmentManager.popBackStack()
        } else {
            // otherwise exit activity
            finish()
        }
    }
}

companion object {
    private const val PROFILE_SETTING = 1
}

}
`