Android Tutorial ListView tutorial

Discussion in 'Tutorials & Examples' started by Erel, Nov 7, 2010.

  1. Erel

    Erel Administrator Staff Member Licensed User

    The ListView control is a very powerful control. It allows you to show short or long lists in a very "sleek" way.

    Creating a simple list is easy:
    Code:
    Sub Globals
        
    Dim ListView1 As ListView
    End Sub

    Sub Activity_Create(FirstTime As Boolean)
        ListView1.Initialize(
    "ListView1")
        
    For i = 1 To 300
            ListView1.AddSingleLine(
    "Item #" & i)
        
    Next
        
    Activity.AddView(ListView1, 00100%x100%y)
    End Sub
    Sub ListView1_ItemClick (Position As Int, Value As Object)
        
    Activity.Title = Value
    End Sub
    [​IMG]

    The ListView can be added programmatically or with the designer. For now the items must be added with code.
    About the code:
    - ListView1.Initialize("ListView1") - Here we initialize the list and set the event name property to ListView1. Which means that in order to catch related events we should have subs like: ListView1_ItemClick.
    - ListView1.AddSingleLine - adds a single line item.
    - Activity.AddView(ListView1, 0, 0, 100%x, 100%y) - Note the use of the percentage units. We are setting the width and height to the values of the containing activity.

    There are currently three types of items: single line, two lines and two lines and bitmap.
    Each type can be customized. The default look is:

    [​IMG]

    This is the relevant code:
    Code:
    Dim Bitmap1 As Bitmap
        Bitmap1.Initialize(
    File.DirAssets, "button.gif")
        
    For i = 1 To 300
            ListView1.AddSingleLine(
    "Item #" & i)
            ListView1.AddTwoLines(
    "Item #" & i, "This is the second line.")
            ListView1.AddTwoLinesAndBitmap(
    "Item #" & i, "This is the second line.", Bitmap1)     
        
    Next
    We can set different bitmaps to different items. Note that this code loads an image file named button.gif. This file should be added to the Files tab (in the right pane). You can download the project which is attached to this post.

    Customizing each type
    Each of the three types can be customized. The change will affect all items of that type.
    The ListView has three "models" which are stored under:
    - SingleLineLayout
    - TwoLinesLayout
    - TwoLinesAndBitmap

    Each of this model has an ItemHeight property, a Background property and one or more views properties. Again, if you change any of these properties it will affect all the items of this type.
    Example of customizing the single line items:
    Code:
    ListView1.SingleLineLayout.ItemHeight = 100dip
        ListView1.SingleLineLayout.Label.TextSize = 
    20
        ListView1.SingleLineLayout.Label.TextColor = 
    Colors.Blue
        ListView1.SingleLineLayout.Label.Gravity = 
    Gravity.CENTER
        
    For i = 1 To 300
            ListView1.AddSingleLine(
    "Item #" & i)
            ListView1.AddTwoLines(
    "Item #" & i, "This is the second line.")
            ListView1.AddTwoLinesAndBitmap(
    "Item #" & i, "This is the second line.", Bitmap1)     
        
    Next
    Result:
    [​IMG]

    Note that the ItemHeight is set to 100dip. The 'dip' unit causes it to automatically scale the height based on the current device scale. For the TextSize it is a mistake to use dip units as the text size is already measured in scaled units.

    The above code is equivalent to this code (which is a bit more clear):
    Code:
    ListView1.SingleLineLayout.ItemHeight = 100dip
        
    Dim label1 As Label
        label1 = ListView1.SingleLineLayout.Label 
    'set the label to the model label.
        label1.TextSize = 20
        label1.TextColor = 
    Colors.Blue
        label1.Gravity = 
    Gravity.CENTER
    In a similar way you can change the way the other types look.
    The other types have additional views: SecondLabel and ImageView.

    Return value
    First notice that there is no selected item. The reason is that the combination of scrolling the list with finger and scrolling with the wheel or keyboard makes it non relevant.
    You should catch the ItemClick event and then handle the clicked item.
    The value of the clicked item is passed as a parameter.
    Now, what is a value of an item???
    By default this is the text stored in the first line.
    However you can change it to any object you like by using:
    AddSingleLine2, AddTwoLines2 and AddTwoLinesAndBitmap2 methods. These methods receive an additional parameter which is the return value. This allows you to pass more information as required by your application.

    Background optimization
    There is a hidden assumption that the background behind the ListView is solid black. If you set the background to something else like a gradient background or image you will see that during scrolling the background disappears.
    You can change the background scrolling color with the ScrollingBackgroundColor property. If the background is not solid color set it to Colors.Transparent.

    Example (the activity background is a gradient):
    Code:
    Dim GD As GradientDrawable
        GD.Initialize(
    "TR_BL"Array As Int(Colors.Gray, Colors.LightGray))
        
    Activity.Background = GD
        ListView1.ScrollingBackgroundColor = 
    Colors.Transparent
    Tips
    If you want a single line item with a bitmap (and do not need two lines and a bitmap), you can set the visible property of the second label to false.

    If you have many items then you should enable the fast scroller:
    Code:
    ListView1.FastScrollEnabled = true
    [​IMG]

    A small example is available here: http://www.basic4ppc.com/android/files/tutorials/ListView.zip
     
    Procesor, IamTrying, stingrae and 8 others like this.
  2. cooperlegend

    cooperlegend Active Member Licensed User

    How do you use a listview if defined using the designer in a layout ?
     
  3. Erel

    Erel Administrator Staff Member Licensed User

    You will still need to add the items manually.
    In the designer you should choose Tools - Generate members and choose the ListView. It will add a declaration for this view under Sub Globals. Note that you should not initialize or add the view to the activity. This is done automatically when you call Activity.LoadLayout.
     
  4. GeordieJenner

    GeordieJenner Member Licensed User

    more complex listview item

    unless i am reading this incorrectly, the item seems limiting. i have created a control (or view) with say 10 labels on in, some graphics (like a checkmark for completed), see attached image as ListView Item. is there a way to add a panel to the listview, with a LoadLayout so as to display my view?
     

    Attached Files:

  5. klaus

    klaus Expert Licensed User

    You cannot add panels to a ListView, but you can do it with a Scrollview.
    Have a look here.
    And with more details here.

    Best regards.
     
    Jmu5667 and Devan like this.
  6. GeordieJenner

    GeordieJenner Member Licensed User

    worked perfect, thanks. now, on that 'view' are labels i wish to alter the text. my svload looks like this:
    For intX=0 To 12
    Dim p As Panel
    p.Initialize("")
    p.LoadLayout("ctrlAppointmentItem")
    svAppointments.Panel.AddView(p,0,intX*61,1080,60)
    Next
    svAppointments.Panel.Height=13*61
    after the dim p, i wish to do something like p.lblName.text = "bob"

    suggestions...
    btw, i have been using this for about 48 hours and found it incredibly easy to pick up. thanks
     
  7. GeordieJenner

    GeordieJenner Member Licensed User

    actually, kind of got this, just a little help. it appears i have to loop through the view's, but i cannot compare to the label.Name? my test on the label.left worked, but it is not property i wish to compare to.
    p.LoadLayout("ctrlAppointmentItem")
    For i = 0 To p.NumberOfViews - 1
    Dim v As View
    Dim l As Label
    v = p.GetView(i)
    If v Is Label Then
    l=v
    If l.Left=140 Then
    l.Text=intX
    End If
    End If
    Next
     
  8. kickaha

    kickaha Well-Known Member Licensed User

    The best way to handle this is to use the labels Tag property. Set the tag property of each label to something meaningful, then your code would be
    Code:
    p.LoadLayout("ctrlAppointmentItem")
    For i = 0 To p.NumberOfViews - 1
    Dim v As View
    Dim l As Label
    v = p.GetView(i)
    If v Is Label Then
    l=v
    If l.Tag = "intX Label" Then '  "intX Label" used as an example
    l.Text=intX
    End If
    End If
    Next
     
  9. GeordieJenner

    GeordieJenner Member Licensed User

    yeah, thought that would be it, the catch-all 'Tag'
    thanks
     
  10. klaus

    klaus Expert Licensed User

    If you want to alter the text of the views you could try to replace the Labels by EditText views. I haven't tried it yet but it should work.

    Best regards.
     
  11. GeordieJenner

    GeordieJenner Member Licensed User

    interesting, but i there is no IsReadOnly property, so the user could edit it. Is there binding available ItemsSource or DataContext?
     
  12. klaus

    klaus Expert Licensed User

    No, but you can set the Enabled parameter to False.

    Code:
    Is there binding available ItemsSource or DataContext?
    No.

    Bestr regards.
     
  13. kickaha

    kickaha Well-Known Member Licensed User

    I think the main point is if you are not going to allow the user to edit the text, do NOT use an EditText - a label is a better option from both the coding and the appearance point of view.
     
  14. GeordieJenner

    GeordieJenner Member Licensed User

    But that grey's it out
    I will use tag

    Thanks for the input
     
  15. klaus

    klaus Expert Licensed User

    Sorry, I probably misunderstood between 'alter the text' and interpreted it as 'edit the text'. The text can be changed (altered) in Labels.
    I fully agree with kickaha in using Labels.
    The Tag would also have been necessary for EditText views.

    Best regards.
     
  16. GeordieJenner

    GeordieJenner Member Licensed User

    thanks for your assistance, and i liked your progress bar example.
     
  17. Widget

    Widget Well-Known Member Licensed User

    I used the code above but I wasn't able to get my ListView1 to be transparent unless I went to the Designer and set Alpha to 0. I thought ListView1.ScrollingBackgroundColor = Colors.Transparent would be the same as setting Alpha to 0.

    Is there a difference?

    TIA
    Widget
     
  18. Erel

    Erel Administrator Staff Member Licensed User

    You should also set ListView1.Color=Colors.Transparent.
     
  19. Koushik

    Koushik Member Licensed User

    Hi,
    I am very new to Basic4Android.
    I need to create some UI as attached in the screenshot. This is basically to list items with a bitmap and two labels at the bottom similar as Android home screen. The number of items will be determined during runtime.

    Please suggest if it is possible using ListView. Otherwise what is the best approach to achieve similar UI as Android home screen.:sign0085:

    Regards,
    Koushik
     

    Attached Files:

  20. Erel

    Erel Administrator Staff Member Licensed User

    pejmannikravan likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice