Expandable List View

Hello there :raising_hand_man: Hope you all are doing well… :slightly_smiling_face:

Here I am with a new guide Expandable List View. This list view is created without using any related extension, meaning, I have not used any extension that directly does the job of creating a ready-made list view. Instead, I have used Dynamic Components Extension by @yusufcihan and Phase Extension by @Shreyash to accomplish this purpose.

Being that said lets get started… :smiley:

1. Variables used
Following are the variables used creating the list.




2. Screen initialization
The blocks for creating the basic UI are as follows.Also main labels (Titles) are created here




3. The Create Procedure
In this procedure, the sub labels are created. Along with we are using phase animation to animate the sub label when they are created




4. Remove procedure
The blocks in this procedure are self explanatory. This procedure, when called, simply removes the sub labels(sub items)

RemoveProc


5. Event triggered on Clicking any Vertical Arrangement(VA)
This is the most important event which, when triggered, controls the creating and removing of sub labels under some specific conditions

ExitAnim

  1. Result
    After mixing/arranging all this block we get the following desired result

Also similar version with some changes :point_down:

Actually I am still working on the above version to lessen its block, but this will take time

8. APK to Test

SlideList.apk (5.1 MB)

Sorry, I may not provide the aia file, because recently I have seen some youtubers making videos by copying the guides from the community and not even crediting the original creator. Hence no aia file will be provided here-after.Hope you all understand

Also, I hope you all will love this guide. Waiting to see your creativity using this guide.

Thank you. :slightly_smiling_face:


P.S. The list view displayed here is similar to the one asked in below post, but the effect shown in that example is different

Note: The Images used in the listview created by me belongs to their respective owners from Unsplash

19 Likes

Really great guide :ok_hand: keep it up:+1:

2 Likes

Thanks @Mohamed_Tamer :slightly_smiling_face:

1 Like

Nice guide @Vaibhav

Finally you made it

1 Like

You also should make a guide for your animated buttons but with card view instead of horizontal arrangement because making lable click area is small some times it won’t get clicked on lable if touched out side of lable area make it if someone wish to use it then they can get the solution

1 Like

Excellent guide! :clap: :clap: :clap:

2 Likes

Excellent guide !!! :clap: :clap: :clap:

1 Like

Excellent Guide :heart:

1 Like

Excellent work…

1 Like

Great work, keep it up :+1:

1 Like

Nice Guide @Vaibhav :clap:

1 Like

Thank you all for appreciating my work. :slightly_smiling_face:

Will make soon, keeping your suggestion in mind.

Thanks for this.

2 Likes

I suggest: you could add a watermark to your pictures with your nickname or logo, so other people cannot use them …
I’m talking about the pictures of your first post

1 Like

Check your DM regarding this. As I do not want the replies to get flagged in my topic. So we would keep this discussion in DM.

Because if we continue it here, this topic would soon turn into discussion for avoiding copying of your material rather then the guide. And I don’t want this.

I was reading it …

Hi, @Mohamed_Tamer @Vaibhav
Or would someone else know how to tell me?

What component in the designer would that be? With red arrow

You are asking on the wrong topic. Your question is about Dynamic Component extension by @yusufcihan. Any questions please ask in the correct topic (it is easier that they can help you). You can search first in the corresponding topic, to help you look at my post, i’m shure help

It’s just a vertical arrangement named as MainVA where ‘VA’ stands for Vertical Arrangement.
Here :point_down: is the image for your reference

3 Likes

Hi, @Vaibhav

Many thanks for the reply. That was exactly my question.
And congratulations on the project and on making the images of the blocks available to us.

1 Like

Thanks :slightly_smiling_face:

Glad that my project helped you in some way :+1:

2 Likes