How to Move a TextView Up as RecyclerView Items Are Clicked in Kotlin

In this article, we will explore how to create an interactive user interface in an Android application using Kotlin. Specifically, we'll focus on a scenario where we have two RecyclerViews and a TextView. When items are clicked in the top RecyclerView, they will disappear and reappear in the bottom RecyclerView. Additionally, we will ensure that the TextView moves up the screen as items are clicked, until it occupies the top position when there are no items left in the first RecyclerView. Understanding the Problem When working with multiple RecyclerViews, managing the visibility and position of other UI elements, like TextViews, can be a bit tricky. In our case, we want to ensure that when items are clicked in recyclerViewNotClickedItems, they are transferred to recyclerViewClickedItems, and the TextView shifts upwards in a pleasing manner. This not only improves the user experience but also keeps the layout clean and organized. Setting Up the Layout Let’s first take a look at the layout XML for our RecyclerViews and the TextView. The layout defines one RecyclerView for unchecked items and another for checked items. Here's the code for the XML layout: Implementing the Logic in Kotlin Now that we have the layout set up, let’s discuss the logic that allows us to transfer items and control the TextView's position. Here’s the Kotlin code for handling click events on the top RecyclerView items: adapterCheckedList = RecyclerViewListAdapter() adapterNotCheckedList = RecyclerViewListAdapter(clickListener = { view: View, listItem: Any, position: Int -> // Making TextView visible when an item is clicked binding.settingsYouAlreadySeeTxt.visibility = View.VISIBLE // Moving the TextView up as items are removed adjustTextViewPosition() // Removing the item from the unchecked list val removedItem = unCheckedList.removeAt(position) checkedList.add(removedItem) // Updating the adapters adapterNotCheckedList.submitList(unCheckedList) adapterCheckedList.submitList(checkedList) }) Adjust TextView Position Dynamically To make the TextView move up when items are clicked, we will define a method adjustTextViewPosition() that recalculates the height of the RecyclerView and updates the TextView's position accordingly: private fun adjustTextViewPosition() { // Calculate the height of the RecyclerView val params = binding.settingsYouAlreadySeeTxt.layoutParams as ConstraintLayout.LayoutParams params.topToBottom = if (unCheckedList.isEmpty()) ConstraintLayout.LayoutParams.UNSET else R.id.recyclerViewNotClickedItems binding.settingsYouAlreadySeeTxt.layoutParams = params binding.settingsYouAlreadySeeTxt.requestLayout() } Conclusion In this article, we have successfully implemented a feature allowing users to click items from a top RecyclerView, causing those items to transfer to a bottom RecyclerView. Additionally, we’ve applied logic to ensure that a TextView moves up the screen as items are clicked. This dynamic behavior enhances user interaction and keeps your UI clean. By using this method, you can create responsive layouts that adapt as users interact with your application. Keep experimenting with your layouts to create an enjoyable user experience.

May 10, 2025 - 06:06

How to Move a TextView Up as RecyclerView Items Are Clicked in Kotlin

In this article, we will explore how to create an interactive user interface in an Android application using Kotlin. Specifically, we'll focus on a scenario where we have two RecyclerViews and a TextView. When items are clicked in the top RecyclerView, they will disappear and reappear in the bottom RecyclerView. Additionally, we will ensure that the TextView moves up the screen as items are clicked, until it occupies the top position when there are no items left in the first RecyclerView.

Understanding the Problem

When working with multiple RecyclerViews, managing the visibility and position of other UI elements, like TextViews, can be a bit tricky. In our case, we want to ensure that when items are clicked in recyclerViewNotClickedItems, they are transferred to recyclerViewClickedItems, and the TextView shifts upwards in a pleasing manner. This not only improves the user experience but also keeps the layout clean and organized.

Setting Up the Layout

Let’s first take a look at the layout XML for our RecyclerViews and the TextView. The layout defines one RecyclerView for unchecked items and another for checked items. Here's the code for the XML layout:

Implementing the Logic in Kotlin

Now that we have the layout set up, let’s discuss the logic that allows us to transfer items and control the TextView's position. Here’s the Kotlin code for handling click events on the top RecyclerView items:

adapterCheckedList = RecyclerViewListAdapter()
adapterNotCheckedList = RecyclerViewListAdapter(clickListener = { view: View, listItem: Any, position: Int ->
    // Making TextView visible when an item is clicked
    binding.settingsYouAlreadySeeTxt.visibility = View.VISIBLE

    // Moving the TextView up as items are removed
    adjustTextViewPosition()

    // Removing the item from the unchecked list
    val removedItem = unCheckedList.removeAt(position)
    checkedList.add(removedItem)

    // Updating the adapters
    adapterNotCheckedList.submitList(unCheckedList)
    adapterCheckedList.submitList(checkedList)
})

Adjust TextView Position Dynamically

To make the TextView move up when items are clicked, we will define a method adjustTextViewPosition() that recalculates the height of the RecyclerView and updates the TextView's position accordingly:

private fun adjustTextViewPosition() {
    // Calculate the height of the RecyclerView
    val params = binding.settingsYouAlreadySeeTxt.layoutParams as ConstraintLayout.LayoutParams
    params.topToBottom = if (unCheckedList.isEmpty()) ConstraintLayout.LayoutParams.UNSET else R.id.recyclerViewNotClickedItems
    binding.settingsYouAlreadySeeTxt.layoutParams = params
    binding.settingsYouAlreadySeeTxt.requestLayout()
}

Conclusion

In this article, we have successfully implemented a feature allowing users to click items from a top RecyclerView, causing those items to transfer to a bottom RecyclerView. Additionally, we’ve applied logic to ensure that a TextView moves up the screen as items are clicked. This dynamic behavior enhances user interaction and keeps your UI clean.

By using this method, you can create responsive layouts that adapt as users interact with your application. Keep experimenting with your layouts to create an enjoyable user experience.