How to create an expandable item in Jetpack Compose
Hello there. It is another day to compose again and this will be a very brief article. So let’s go.
I have been building an app and I have a screen with a list of contacts and initially, clicking a contact takes one to another screen, so I wanted to change that scenario. Clicking a contact should either reveal a text field and button or toggle the state back if it was open. Clicking on the button should act, in my case, I want the amount typed in the text field to be used to make a mobile money transfer and then set the card back to the collapsed state.
We will use AnimatedVisibility and the section to be hidden(we will use a row of a text field and a button). The top part can be whatever, but I will just use a text composable. Here is the full source code;
The variable isExpanded is initially set to false and so, only the text is shown. We set the clickable modifier on the parent card to toggle the variable isExpanded whenever it is clicked. We also do the same for the button.
Try the composable and you can go ahead and add some styles. My main focus was to show you how easy it is. That is all for now. Do not forget to share and let us get connected on Twitter, @ngenge_senior .
