Android Question UltimateListView - Resorting list after dragging item

[rleiman]

Hi Everyone,

I started to experiment with the best ListView. The UltimateListView and took the tutorial MyfirstList2 which displays pictures and a label in the ListView. I added code from the sample app called DragAndDrop_Demo that allows the user to use a long click and internally drag the items in the ListView. When the user releases the finger on the item the ListView re-sorts showing the new position of the item.

For all of you who have been using the UltimateListView, can you look at my code and let me know what additional coding I'm missing to get the items in the ListView to re-sort when taking my finger off the screen?

I already have a message box in the ULV_Dropped sub routine so I do know the dragging and dropping is working. I just need to get the list to re-sort.

Thanks

#Region Module Attributes
    #FullScreen: False
    #IncludeTitle: True
    #ApplicationLabel: My first list
    #VersionCode: 1
    #VersionName:
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

Sub Process_Globals
End Sub

Sub Globals
    Dim ULV As UltimateListView
    Dim Fruits As Map
    Dim ItemHeight As Int = 60dip
   
    ' Dragging and droping.
    '----------------------
    Dim DraggedID As Long = -1

End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Creates a map of fruits (key = name, value = image)
    Fruits.Initialize
    Fruits.Put("Apple", LoadBitmapSample(File.DirAssets, "apple.png", 50dip, 50dip))
    Fruits.Put("Banana", LoadBitmapSample(File.DirAssets, "banana.png", 50dip, 50dip))
    Fruits.Put("Cherry", LoadBitmapSample(File.DirAssets, "cherry.png", 50dip, 50dip))
    Fruits.Put("Coconut", LoadBitmapSample(File.DirAssets, "coconut.png", 50dip, 50dip))
    Fruits.Put("Grapes", LoadBitmapSample(File.DirAssets, "grapes.png", 50dip, 50dip))
    Fruits.Put("Lemon", LoadBitmapSample(File.DirAssets, "lemon.png", 50dip, 50dip))
    Fruits.Put("Mango", LoadBitmapSample(File.DirAssets, "mango.png", 50dip, 50dip))
    Fruits.Put("Melon", LoadBitmapSample(File.DirAssets, "melon.png", 50dip, 50dip))
    Fruits.Put("Orange", LoadBitmapSample(File.DirAssets, "orange.png", 50dip, 50dip))
    Fruits.Put("Pear", LoadBitmapSample(File.DirAssets, "pear.png", 50dip, 50dip))
    Fruits.Put("Pineapple", LoadBitmapSample(File.DirAssets, "pineapple.png", 50dip, 50dip))
    Fruits.Put("Strawberry", LoadBitmapSample(File.DirAssets, "strawberry.png", 50dip, 50dip))

    'Adds an ULV to the activity
    ULV.Initialize(0, 0, "", "ULV")
    ULV.Color = Colors.White
    ULV.ScrollingSpeedWhenDragged = 8 ' Dragging.
    Activity.AddView(ULV, 0, 0, 100%x, 100%y)

    'Changes the pressed drawable of the ULV (the background of the clicked item will be green)
    Dim cd As ColorDrawable
    cd.Initialize(Colors.Green, 16dip)
    ULV.PressedDrawable = cd

    'Creates a layout to display the fruit name and the fruit image
    ULV.AddLayout("FRUIT", "Item_LayoutCreator", "Item_ContentFiller", ItemHeight, True)

    'Builds the items list
    ULV.BulkAddItems(Fruits.Size, "FRUIT", 0)

End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause(UserClosed As Boolean)

    'Cancels any drag in progress
    If ULV.IsDragStarted Then
        ULV.CancelDrag: DoEvents
    End If
End Sub

Sub Item_LayoutCreator(LayoutName As String, LayoutPanel As Panel)
    'Very simple layout: just a Label and an ImageView
    LayoutPanel.LoadLayout("fruitlabelimg")
End Sub

Sub Item_ContentFiller(ItemID As Long, LayoutName As String, LayoutPanel As Panel, Position As Int)
    'Sets the background color (the dragged item has a darker background)
    If DraggedID = ItemID Then
        LayoutPanel.Color = Colors.ARGB(40, 0, 0, 0)
    Else
        LayoutPanel.Color = Colors.Transparent
    End If

    'Sets the text of the label (fruit name)
    Dim lbl As Label = LayoutPanel.GetView(0) 'First view in the panel
    lbl.Text = Fruits.GetKeyAt(Position)

    'Sets the bitmap of the ImageView (fruit image)
    Dim IV As ImageView = LayoutPanel.GetView(1) 'Second view in the panel
    IV.Bitmap = Fruits.GetValueAt(Position)
End Sub

Sub ULV_ItemClick(ItemID As Long, Position As Int, ClickedPanel As Panel)
    'Shows a MsgBox with the clicked fruit
    Msgbox(Fruits.GetKeyAt(Position), "Click")
End Sub

Sub ULV_ItemLongClick(ItemID As Long, Position As Int, ClickedPanel As Panel)
    'Changes the background color of the dragged item (cf. Item_ContentFiller)
    DraggedID = ItemID

    'Changes the background color of the overlay
    ClickedPanel.Color = Colors.ARGB(220, 51, 181, 229) 'Holo blue

    'Starts the drag & drop operation
    ULV.StartDrag(Position, True, Null)
End Sub

Sub ULV_Dropped(DropView As View, StartPosition As Int, DropPosition As Int)
    'Restores the background color (cf. Item_ContentFiller)
    DraggedID = -1
    ULV.RefreshContent

    Msgbox("Dropped: from " & StartPosition & " to " & DropPosition, "Message")
End Sub

 

[thedesolatesoul]

What do you mean by re-sort?

 

[rleiman]

Hi,

The list reorders itself. For example, the list could have the fruits in this order:

Grapes
Apple
Lemon

I would place my finger on the Lemon and do a long click. Next I would drag the Lemon item to where the Grapes are. Next I would release the Lemon item and the new order should be:

Lemon
Grapes
Apple

At least the DragAndDrop_Demo coding does that.

When I copied the coding from that app, it looks like I missed some coding that will make the list reorder itself when I release the Lemon item.

Maybe you can look at both of these apps from UltimateListView:

MyFirstList2 and DragAndDrop_Demo

and see what I missed.

I'm trying to add internal drag and drop into the MyFirstList2 app.

 

[thedesolatesoul]

Are you saying when you release Lemon it goes back to its original position?

 

[rleiman]

Yes.

 

[thedesolatesoul]

This was a bit hard to wrap my head around initially too.
In the content filler, you fill the content based on position.
Since the new position of lemons is now 3 i.e. whatever grapes was before, but you always fetch item 3. It doesnt matter.

Either you should re-sort your fuits list too, or better, use ItemID to get the value not the position.

See here:

Sub Item_ContentFiller(ItemID As Long, LayoutName As String, LayoutPanel As Panel, Position As Int)
    'Sets the background color (the dragged item has a darker background)
    If DraggedID = ItemID Then
        LayoutPanel.Color = Colors.ARGB(40, 0, 0, 0)
    Else
        LayoutPanel.Color = Colors.Transparent
    End If

    'Sets the text of the label (fruit name)
    Dim lbl As Label = LayoutPanel.GetView(0) 'First view in the panel
    lbl.Text = Fruits.GetKeyAt(Position) <---------
    lbl.Text = Fruits.GetKeyAt(ItemID)   <----------

    'Sets the bitmap of the ImageView (fruit image)
    Dim IV As ImageView = LayoutPanel.GetView(1) 'Second view in the panel
    IV.Bitmap = Fruits.GetValueAt(Position)
End Sub

 

[rleiman]

Thank you so much!

Changing "Position" to "ItemID" worked.

This UltimateListView is amazing!

 

[thedesolatesoul]

Yup indeed.
I already implemented a Drag/Drop + Swipable listview with Informatix help with animations included!

 

[Binary01]

Hi thedesolatesoul,

I already implemented a Drag/Drop + Swipable listview with Informatix help with animations included!

Please give link to me.
Thanks