Custom styled Firemonkey list box item not highlighted on click on android and iOS

Question

I'm building multiplatform( iOS, Android, OSX, Windows APP) in Firemonkey. One of the things I'm trying to do is create a custom listbox item( with more data elements) that will work on all these platforms: will give you ability to select item(s), display properly. According to research I did, probably the best way for this is to create custom style for list box item and define data elements there. That's what I did. I'm creating items from client dataset in this procedure:

    procedure TMasterDetailForm.LoadAvailable;
var i: Integer;
    Item: TListBoxItem;
begin
  lstAvailable.Clear;
  //Add Header
  lstAvailable.BeginUpdate;
  Item := TListBoxItem.Create( lstAvailable );
  Item.Parent := lstAvailable;
  Item.Height := 70;
  //Item.OnApplyStyleLookup := ListItemApplyStyleLookupHandler;
  Item.StyleLookup := AvailableListHeaderStyle;

  //Add Details
  cdsAvailable.First;
  for I := 1 to cdsAvailable.RecordCount do
  begin
    Item := TListBoxItem.Create( lstAvailable );
    Item.Parent := lstAvailable;
    Item.Height := 50;
    //Item.Selectable := True;

    //Item.OnApplyStyleLookup := ListItemApplyStyleLookupHandler;
    Item.StyleLookup := AvailableListItemStyle;
    //Item.StyleLookup := 'ListboxItem1Style1';
    Item.StylesData[ txtWoNum ] := cdsAvailable.FieldByName( 'work package' ).AsString;
    Item.StylesData[ txtAircraft ] := cdsAvailable.FieldByName('aircraft').AsString;
    Item.StylesData[ txtTaskDescription ] := cdsAvailable.FieldByName('task').AsString;
    cdsAvailable.Next;
  end;
  lstAvailable.EndUpdate;
end;

Everything gets styled properly on all platforms, except that tapping(clicking) on ListBoxItem on Android or iOS, doesn't highlight the ListBoxItem. If I unissign style then selecting items also works.I can't figure out how to fix this. Btw, onclick event on ListBox seems to work properly( itemindex changes).

Any input will be greatly appreciated.

Edit( 12/12/2014) : I tried simplifying the example by adding items manually in the ListBox editor and discarding this code here, and I found out that animation for selecting the listbox item changes. So, I customized the listbox item and only changed TextColor to blue. In runtime on Android when you select the listbox item it just changes the color of the text to black instead of painting the whole row. Any ideas how to have listbox behave in similar way like when there is no style attached to it?

Can you say more about what custom data you want to add to it? Does this do what you want? blog.delphiedintorni.it/2014/05/… — FMXExpress

AMT Desarrollos AMT Desarrollos · Accepted Answer · 2015-03-10T19:13:44

Sorry my english is bad.

I have a solution (tested in XE7):

Open a form
Change the IDE Style to "iOS"
Select the TListBox an open a context menu and select "Edit Default Style": the StyleBook2 is created.
Add a TRectangle component in the style "listboxstyle/background" with the name "selection". This is the magic!

Now, Firemonkey found the 'selection' component and work fine!

If you already have StyleBook2 component before these steps, you may need to delete it, be careful!

Custom styled Firemonkey list box item not highlighted on click on android and iOS

1 Answers