Blog Infos
Author
Published
Topics
Published
Some background…

<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/checked"
        android:drawable="@drawable/ic_tab_home_24"
        android:state_checked="true" />

    <item
        android:id="@+id/unchecked"
        android:drawable="@drawable/ic_tab_home_outline_24"
        android:state_checked="false" />

    <transition
        android:drawable="@drawable/anim_tab_home_select"
        android:fromId="@id/unchecked"
        android:toId="@id/checked" />

    <transition
        android:drawable="@drawable/anim_tab_home_deselect"
        android:fromId="@id/checked"
        android:toId="@id/unchecked" />
</animated-selector>

So I made the ImageView checkable, and passed in the selected tab state to each AndroidView and here is the result:

Show me the code! 😅
@Composable
fun AnimatedIcon(
    @DrawableRes animatedIcon: Int,
    isSelected: Boolean,
    modifier: Modifier = Modifier,
) {
    AndroidView(
        modifier = modifier.size(24.dp),
        factory = { context ->
            CheckableImageView(context).apply {
                val drawable = ContextCompat.getDrawable(context, animatedIcon)
                setImageDrawable(drawable)
                isChecked = isSelected
                if (drawable is Animatable) drawable.start()
            }
        },
        update = { view ->
            view.isChecked = isSelected
        }
    )
}

private class CheckableImageView(context: Context, attrs: AttributeSet? = null) :
    AppCompatImageView(context, attrs),
    Checkable {

    private var mChecked = false

    override fun onCreateDrawableState(extraSpace: Int): IntArray {
        val drawableState = super.onCreateDrawableState(extraSpace + 1)
        if (isChecked) {
            mergeDrawableStates(drawableState, CHECKED_STATE_SET)
        }
        return drawableState
    }

    override fun toggle() {
        isChecked = !mChecked
    }

    override fun isChecked(): Boolean = mChecked

    override fun setChecked(checked: Boolean) {
        if (mChecked != checked) {
            mChecked = checked
            refreshDrawableState()
        }
    }

    companion object {
        private val CHECKED_STATE_SET = intArrayOf(
            android.R.attr.state_checked
        )
    }
}
@Composable
private fun BottomNavigationTabs(
    navController: NavController,
    onSetTab: (BottomNavItem) -> Unit,
) {
    val items = listOf(
        BottomNavItem.Home,
        BottomNavItem.Games,
        BottomNavItem.Players,
        BottomNavItem.Menu,
    )
    NavigationBar {
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route
        items.forEach { item ->
            val isSelected = currentRoute == item.route
            val title = stringResource(id = item.titleRes)

            NavigationBarItem(
                selected = isSelected,
                onClick = { onSetTab(item) },
                alwaysShowLabel = false,
                label = {
                    Text(
                        text = title,
                        style = MaterialTheme.typography.labelSmall,
                    )
                },
                icon = {
                    AnimatedIcon(
                        item.icon,
                        isSelected = isSelected,
                    )
                }
            )
        }
    }
}
Conclusion

This article was originally published on proandroiddev.com

Job Offers

Job Offers

There are currently no vacancies.

OUR VIDEO RECOMMENDATION

,

Branching out to Jetpack Compose

As one of the most widely used social media platforms, Twitter is always hunting for ways to better connect its users. In early 2021 the Client UI team at Twitter began the task of integrating…
Watch Video

Branching out to Jetpack Compose

Nacho López & Chris Banes
Staff Software Engineer
Twitter

Branching out to Jetpack Compose

Nacho López & Chr ...
Staff Software Engin ...
Twitter

Branching out to Jetpack Compose

Nacho López & C ...
Staff Software Engineer
Twitter

Jobs

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
In this part of our series on introducing Jetpack Compose into an existing project,…
READ MORE
blog

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE
blog
Yes! You heard it right. We’ll try to understand the complete OTP (one time…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu