How to use Codly to prototype a list

September 26, 2014 by in category Components, Extension, List, Photoshop to code, Source Code with 0 and 0
Home > Blog > Components > How to use Codly to prototype a list

Almost every mobile application out there has a list component or maybe two. That was the reason pushed us to add the list to Codly.

This tutorial will help you get started using lists.

P.S. You can skip the next two sections if you’re already familiar with lists

Why Lists ?

List and scroll views are almost have the same behavior, both contain views and scroll to reveal other hidden element. So what should make me use List over Scroll view?

The answer for this question would be that everyone has its own role. The main characteristics of a list is that it repeat items that have the same appearance while the scroll view can hold elements that are not repeated or have the same appearance.

When to use Lists ?

The main 2 reasons you would use lists are; (1) you have a well known number of repeated items with the same appearance that you know for sure that they will exceed the screen height and (2) you don’t really know the number of items that will be displayed, like their data are dynamic or fetched from your web server. Other than that, its safer and easier to use scroll view.


List with Codly

If you don’t have it, you will need to install Codly on our machine first. Now let’s get started.

  • Open Codly on your photoshop and login with your account and create a new phone template. This will create a new design for you.

  • From the component menu, select your theme from the drop down menu, and then drag the list component to your screen design. Choose the Android theme for example. Now the list structure is added to your layers panel.

  • The “__size__” layer determines the list width and height. Resize it to the width and heigh you want the list to occupy on your screen.
  • As you can see, the list already contains some default components, if you want you can remove them and start drawing your own. For the sake of simplicity, I’ll just leave it as it is.
  • The last step, go to the inspector window, select the “List” group, the repeat property indicates how many times you want the list to repeat the designed item. Lets make it 20.

Thats it, we have done creating our list, let’s publish this screen to see how it appears on our mobile.



If you have any question just drop a comment.

Add comment