[FREE] Expandable View - An Extension to make expandable layouts in your apps

Extensions
,
#1

icon Expandable View

Hello everyone, I am here with my new extension that is Expandable View. This extension helps you to expand or collapse the view with some customisations. This is based on the Expandable Layout published in Github. This extension does not increase or decrease the height or width of the layout as my Expand Collapse View do. This extension expand or collapse the view with animations API that don’t modify height or width of the component. When we modify the height or width of the component that their child components are much effected. This extension don’t affect them and works like professional.

Launched On :- 2021-12-09T18:30:00Z
Last Updated On :- 2021-12-09T18:30:00Z
Latest Version :- 1

Let see its blocks and their documentation

block (1) All Blocks

image
image260×804 21 KB

Documentation

Let see the documentation now

  • Expanded

    image

    This event raises when the view fully expanded. Returns the id.

  • Expanding

    image

    This event raises when any view is being expanding. Return the id and expand fraction (0 - 1) as a float value.

  • Collapsed

    image

    This event raises when the view is fully collapsed. Returns the id.

  • Collapsing

    image

    This event raises when any view is being collapsing. Return the id and expand fraction (0 - 1) as a float value.

  • CreateLayout

    image

    This block create the expandable layout in given container with header and content view. Id must be unique and the orientation can be given with properties.

    • in requires an arrangement in which the expandable layout will be created.
    • header requires an arrangement which will be shown all time when the view will in its normal state
    • content requires an arrangement which will be shown when the view will be expanded and will be hidden when the view will be collapsed.
    • orientation defines the orientation of the expandation of view.

  • Expand

    image

    Expand the view with given id or duration. If animate is false then no animation or effect will occurred.

  • Collapse

    image

    Collapse the view with given id or duration. If animate is false then no animation or effect will occurred.

  • Is Expanded

    image

    Returns true if the view referenced to the given id is expanded.

  • Orientation

    image

    Properties for defining the orientation.

Usage

The extension is very simple to use as I said always to my all extensions.

blocks (13)

You just need to create the expand layout in a container with header or content views and a unique id. And your layout is ready and now you can play with it.

blocks (14)

Then just use Expand or Collapse block to toggle the expandable layout.

In the same way this can be used in dynamic components too. I posted a demo AIA on download section that contains some usage with dynamic components and simple layouts.

Preview

Let see how it looks like :grin:

  • Simple Views

    IMG_cwztae

  • Dynamic Components

    IMG_wnqe6d

Download

ExpandableLayout.aia (56.3 KB)

Donate

Credit

Thanks @Shreyash for the super power full Rush .
Thanks @Jerin_Jacob for his wonderful extension platform.

Like the extension if you like it :+1:

Suggestion and issue are welcome

Thanks you
Sumit​:wink:

51 Likes
How to make a "read more"
Help with custom list view
How to make option selected up & down
Create a list with data of database
Visibility problem when using Dynamic Components and Expandable View
I want expandable view extension
What component is this and how to make this in kodular? Thanks for your answer
I want expandable view extension
Animation scroll
Designing Menu For App
#2

Very Nice ! :grinning:

1 Like
#3

Awesome job :partying_face:

1 Like
#4

Useful extension. Congratulations.
Like a Bootstrap Accordion :+1:

I hadn’t seen this :point_down: before writing about Accordion Bootstrap :grin:

Screenshot_20211210-085308
Screenshot_20211210-085308720×1512 132 KB

2 Likes
Expandable ListView
#5

Good :+1: job :ok_hand::ok_hand::ok_hand::ok_hand:

1 Like
#6

an excellent extension. :+1:

1 Like
#7

very useful extension @iamwsumit

1 Like
#8

Congrats! Really useful. :clap:

1 Like
#9

Version 2

Version 2 of the extension is here.

Whats’s New

This is a very small update and brings only one thing. Now you can make the expand layout above of the header view with both orientations. It means, before this update you can make the expandable layout only below the header view and can only expanded at down direction. But now you can make the expandable layout above the header view that will be expanded at up direction (if there is space to expand).

Block Added

component_method

This block has same parameters and same work as CreateLayout block. It just create the expandable layout before the header view or above the header view. I could add a extra parameter to old CreateLayout block but it could break your whole block s(if you used this extension in your project) that’s why I have added a new block with almost same name and parameters. I think I could have give it a better name to this block but nothing comes in my mind so I just named it First as it create the expandable layout first than the header view :sweat_smile: . You can use it in same way as you used the CreateLayout block.

Preview

IMG_dpf7mg

Updated Extension
You can download this version from the same download links that are posted above.

Kindly update the extension in order to get this features

I hope this may useful to you.

Thank you
Sumit​ :wink:

10 Likes
#10

thank you ! keep it up :clap:

1 Like
#11

Amazing Extension very helpful. :heart_eyes: :heart_eyes: :heart_eyes:

1 Like
#12

Why does expandable list header automatically goes to down, how can i fix this
image
image

Result

image
image757×1600 35.7 KB

#13

IMG_20220112_105251
IMG_20220112_105251645×1706 214 KB

@iamwsumit Not working

#14

Video demo - https://res.cloudinary.com/orange-softwares/video/upload/v1641966037/demo.mp4.mp4

#15

very useful extension

1 Like
#16

Please elaborate your issue. I could not find the issue by reading only not working. Your blocks seems good to me. What output you are getting? And what’s not working?

What do you want to show us with this video? It has nothing to see related to your issue.

#17

Should I dm you my aia ? Your expand collapse view is working fine for me but with this extension there is much issue

#18

Add some more transition animations. open close accordian animations.

#19

Getting an error.
Attempt to read from field ‘com.sumit1334.expandablelayout.repack.b com.summit1334.expandablelayout.repack.a.a’ on a null object reference

It appears to be related to the IsExpanded block. When I removed those the error went away.

1 Like
#20

hi @iamwsumit

I got two problem while using this :sweat_smile:
1 getting an error runtime
(Attempt to read from field ‘com.sumit1334.expandablelayout.repack.b
com.sumit1334.expandablelayout.repack.a.a’ on a null object reference)
this

image
image1920×1080 365 KB

2 the expandable is not able to expand the the block

codes:

blocks
blocks2067×798 98 KB

there in light emitting initialize there where call toggle name is not filled what should i put there

and this is happening :

please help