Open layout with moving below items

Question

How to implement the following feature. I have a list in recycler. When I click on item below clicked item appear description. But at the same time the items of the list have to move down to become below opened description.

Answer 1

follow the link Folding Cell

then click on clone or download button to download it you can use git

once you have downloaded it then unzip it and copy the folding-cell folder from the unzipped folder to your projects folder i mean you have to put folding -cell in parallel to app folder

once u do that go to your android studio and do the following changes :

open settings.gradle the file miight look like this

include ':app'

you have to update it to the following :

include ':app'
    ':folding-cell'

after that open your app build.gradle file and add the following line to the dependencies portion

implementation project(':folding-cell')

once you have done that just sync the project after the building is done u ll get the same error as you were getting earlier

so now you have to open the folding-cell build.gradle file and update the androidx lib to android

just update the whole file to this

    apply plugin: 'com.android.library'

android {
    compileSdkVersion 28
    buildToolsVersion '28.0.3'
    defaultConfig {
        minSdkVersion 16
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')

    implementation 'com.android.support:appcompat-v7:28.0.0'

    testImplementation 'junit:junit:4.12'
    testImplementation 'org.mockito:mockito-core:2.22.0'
}

and now again build the project

everything ll work without error

if u face any problem let me know !

Answer 2

For a case like this, you want to utilize multiple ViewHolders, each with it's own layout:

data class Item(
    title: String, 
    description: String, 
    showDescription: Boolean = false
)

open class TitleViewHolder(
    itemView: View,
    onClicked: (Int) -> Unit
) : RecyclerView.ViewHolder(itemView) {

    private val titleView: TextView = itemView.findViewById(R.id.title)

    init {
        itemView.setOnClickListener { 
            if (adapterPosition != RecyclerView.NO_POSITION)
                onClicked(adapterPosition)
        }
    }

    fun bindTo(item: Item) {
        titleView.text = item.title
        onBind(item)
    }

    protected open fun onBind(item: Item) {
        // Do nothing
    }

}

class TitleAndDescriptionViewHolder(
    itemView: View,
    onClicked: (Int) -> Unit
) : TitleViewHolder(itemView) {
    private val description: TextView = itemView.findViewById(R.id.description)

    override fun onBind(item: Item) {
        description.text = item.description
    }
}

override fun getItemViewType(position: Int) = if (items[position].showDescription)
    R.layout.item_with_description else R.layout.item_with_title

override fun createViewHolder(...) {
    val view = LayoutInflater.from(...).inflate(viewType, parent, false)

    // Note: This presentation logic can be easily extracted, utilizing a
    // Lambda passed to the adapter which takes (Item) and returns Unit.
    // You'd then need a `setList` method which uses `DiffUtil` to update the
    // List but the result should be the same.
    val onClick: (Int) -> Unit = {
        val dataItem = data[it]
        val newItem = dataItem.copy(showDescription = !dataItem.showDescription)
        data[it] = newItem
        notifyItemChanged(it)
    }

    return when (viewType) {
        R.layout.item_with_description -> TitleAndDescriptionViewHolder(view)
        R.layout.item_with_title -> TitleViewHolder(view)
    }
}

override fun bindViewHolder(holder, position) {
    holder.bindTo(data[position])
}

When you click an item, you update it's showDescription flag and notify the Adapter that something changed at that position. That will trigger building the new item, perform the proper animations, etc.