Delphi XE5 Firemonkey mobile custom listbox

Question

While I am trying to make a custom listbox like the sample provided by embarcadero its looks fine but for mobile applications i need to make a custom listbox item but as I right click on any controls on my form I don't get the option to edit custom style. i need my mobile app to make some customized listbox item to show 2 images and 2 texts in a each items. any advice?

Answer 1

You can't use "Edit custom/default style" in FM mobile application.

I found by-pass, you can load any VCL style into Bitmap Style Designer and save it as FireMonkey style. I did like that few times, have some strange behaviors in some controls.. but if you need just 2 or 3 control types in your app you can try probably with success.

In VCL style you can add 2 TText and 2 TImage components inside another control.

For default in Android App you can use only light and dark default style, but I transform to Android Style also included in IDE blue and green Metropolis Styles and looks like working OK.

Answer 2

Drop Controls into the Listbox Items however you want, like you would with any other control. For a quick example, you can do something like:

ListBox.items.add(''); // blank Text which normally acts as title
BoxItem := ListBox.ListItems[ListBox.Items.Count-1];
NewTitle := TText.create(nil);
NewTitle.Text := 'New Orange Title';
newTitle.color := TAlphaColors.Orange;
NewTitle.parent := BoxItem;
NewTitle.Align := TAlignLayout.Client;

Answer 3

The answer of Jordan Web works very good. I took the liberty to extend his example:

Drop Controls into the Listbox Items however you want, like you would with any other control. For a quick example, you can do something like:

ListBox.items.add(''); // blank Text which normally acts as title
BoxItem := ListBox.ListItems[ListBox.Items.Count-1];
NewTitle := TText.create(nil);
NewTitle.Text := 'New Orange Title';
newTitle.color := TAlphaColors.Orange;
NewTitle.parent := BoxItem;
NewTitle.Align := TAlignLayout.Client;

to:

Example with one image and two text-objects

  procedure TForm10.Button1Click(Sender: TObject);
  var newtitle : Ttext;
      boxitem : tlistboxitem;
      newimage : timage;
      tw : single;
  begin
    ListBox1.items.add('');
    BoxItem := ListBox1.ListItems[ListBox1.Items.Count-1];

    newimage := timage.create(nil);
    newimage.width := 24;
    newimage.height := 24;
    newimage.bitmap := Image1.Bitmap;
    Newimage.Align := TAlignLayout.Left;
    newimage.parent := BoxItem;
    Newimage.HitTest := false;  // otherwise you can't select the listitem

    tw := (ListBox1.Width - newimage.Width)/2;
    NewTitle := TText.create(nil);
    newtitle.TextSettings.Font.Style := [TFontStyle.fsBold];
    NewTitle.Width := tw;   //Set width to avoid partial text
    Newtitle.Margins.Left := 5;
    NewTitle.Text := 'New Orange Title ' + ListBox1.Items.Count.ToString ;
    NewTitle.TextSettings.HorzAlign := TTextAlign.Leading;
    newTitle.color := TAlphaColors.Orange;
    NewTitle.parent := BoxItem;
    NewTitle.Align := TAlignLayout.Left;
    NewTitle.HitTest := false;  //otherwise you can't select the listitem
    boxitem.TagString := NewTitle.Text;  //the required string when clicking the listitem

    NewTitle := TText.create(nil);
    NewTitle.Width := tw;
    NewTitle.Text := 'New Green SubTitle ' + ListBox1.Items.Count.ToString;
    NewTitle.TextSettings.HorzAlign := TTextAlign.Leading;
    newTitle.color := TAlphaColors.Green;
    NewTitle.parent := BoxItem;
    NewTitle.Align := TAlignLayout.right;
    NewTitle.HitTest := false;
  end;


  procedure TForm10.ListBox1Change(Sender: TObject);
  begin
    label1.Text := listbox1.Selected.TagString;
  end;