Listview and Drawtext to Bitmap

Deleted member 103 · Dec 21, 2010

Hi,

I want to write the variable "betrag" in a bitmap (see example), but I know not how.

Thanks,
Filippo

Erel · Dec 22, 2010

It is possible to do it but it will require a different bitmap for each item. This will only work with short lists.

Deleted member 103 · Dec 22, 2010

how can I achieve something similar?

Erel · Dec 22, 2010

It will be easier to do it with a ScrollView.
There are two related examples:
http://www.b4x.com/forum/basic4andr...946-creating-table-view-based-scrollview.html
http://www.b4x.com/forum/basic4android-getting-started-tutorials/6612-scrollview-example.html

Deleted member 103 · Dec 22, 2010

so, now works!

@Erel
This approach is ok?

Erel · Dec 22, 2010

Your approach is correct. This is what I was thinking about too.

klaus · Dec 22, 2010

Hi Filippo,

I had a look at your code.
In the emulator the alignments are not good.
You are using view dimensions with dip measurements and pixels.
Replaced.

B4X:

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.ImageView.Top=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]42[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

by

B4X:

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.ImageView.Top=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]30dip[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

I was wondering what these two lines were for.

B4X:

 ListView1.Width=100%x + 85
 ListView1.Left=-85

I saw then that the text is right shifted because of the bitmap's default position. Your code widens the ListView width and shifts it to the left to align the texts. Here you are also using pure pixels (85 -> 55dip).

I replaced these lines by:

B4X:

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.Label.Left=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]0[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.SecondLabel.Left=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]0[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

Attached a modified version.

Hallo Filippo,

Ich hab mir Deinen Code angeschaut.
Im Emulator sieht die Ausrichtung nicht gut aus.
Du verwendest für die View Abmessungen dip Masse und auch pure Pixel.
Habe diese Zeile

B4X:

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.ImageView.Top=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]42[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

durch diese ersetzt.

B4X:

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.ImageView.Top=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]30dip[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

Ich hatte mich gewundert was der Zweck dieser zwei Zeilen ist.

B4X:

 ListView1.Width=100%x + 85
 ListView1.Left=-85

Ich hab dann gesehen dass die Texte nach rechts verschoben waren wegen dem originalen Platz des Bistmaps. Dein Code erweitert die Breite des ListViews und verschiebt ihn nach links damit die Texte richtig ausgerichtet sind. Hier benützt Du auch pure Pixes (85 -> 55dip).

Ich habe die Zeilen durch diese ersetzt:

B4X:

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.Label.Left=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]0[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.SecondLabel.Left=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]0[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

Attached a modified version.

Best regards.

Deleted member 103 · Dec 22, 2010

Hallo Klaus,

Ich habe die Zeilen durch diese ersetzt:

ListView1.TwoLinesAndBitmap.Label.Left=0
ListView1.TwoLinesAndBitmap.SecondLabel.Left=0

das ist natürlich die bessere lösung!

Im Emulator sieht die Ausrichtung nicht gut aus.

Die Auflösung von mein Emulator entspricht genau die vom HTC-Desire, deshalb sah die Ausrichtung bei mir gut aus.

Ciao,
Filippo

Cor · Dec 22, 2010

use an extra -10dip for the scrollbar at the right

on my HTC Magic 2.2.1 320x480

B4X:

ListView1.TwoLinesAndBitmap.ImageView.Left=ListView1.Width - 100dip-10dip

Deleted member 103 · Dec 23, 2010

@Cor

use an extra -10dip for the scrollbar at the right

Thank you for the type.

What bothers me even the appearance of text and the bitmap (see picture).
What can we do about it?

klaus · Dec 24, 2010

Hi Filippo,

I don't know what the problem of the line between the items is, I can't reproduce it with the Emulator.
It looks like beeing the lower part of the title bar.
Have you tried to shorten the length of the title text ?

The second problem is the images, the corners of your images are black and with a background color different than black you'll see them.
Attached you find two images with the corner color set to transparent, and it looks like you expect it, png images aloow transparent color and Android supports it.

Best regards.

Hallo Filippo,

Ich weiss nicht woher das Problem mit der Linie zwichen den Eintägen her kommt, ich kann es im Emulator nicht nachvollziehen. Es sieht so aus als wäre es der untere teil der Titelzeile. Has Du mal versucht den Titeltext zu kürzen?

Das zweite Problem kommt von Deinen Bildern, die haben schwarze Ecken und wenn die Hintergrundfarbe nicht schwarz ist sieht man sie. Beiliegend findest Du zwei Bilder mit transparenten Ecken, PNG Bilder erlauben das und Android unterstützt es.

Beste Grüsse.

Deleted member 103 · Dec 24, 2010

Hallo Klaus,

Has Du mal versucht den Titeltext zu kürzen?

Das ist ja mein Problem. Ich müsste vorher wissen wie breit mein Text ist und dann auf Listview-breite kürzen.

Beiliegend findest Du zwei Bilder mit transparenten Ecken, PNG Bilder erlauben das und Android unterstützt es.

Danke, ich habe es nicht gewusst.

Ciao,
Filippo

klaus · Dec 24, 2010

Hi Filippo,

Would this be a solution ?
Wäre das eine Lösung ?

Best regards.

Deleted member 103 · Dec 24, 2010

Hallo Klaus,

Wäre das eine Lösung ?

nicht wirklich, den so wären alle Listview-Item höher als ich es brauchen kann.

Ich möchte nur den sichtbare(Listview-breite) Text anzeigen.

Ciao,
Filippo

klaus · Dec 24, 2010

If you comment out the 2 lines below
Wenn Du die beiden Zeilen auskommentierst

B4X:

[FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' ListView1.TwoLinesAndBitmap.ItemHeight=80dip[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.SecondLabel.Left=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]0[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' ListView1.TwoLinesAndBitmap.Label.Height=45dip[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

you get what you expect.
bekommst Du was Du möchtest.

I added the line below to your previous code to enlarge the text width.
Ich hatte diese Zeile in Dein vorheriges Programm eingefügt um die Textbreite zu vergrössern.

B4X:

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.Label.Width=ListView1.Width-[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]5dip[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

Otherwise the label width is automaticaly shortened due to the bitmap.
Sonst ist die Labelbreite automatisch duch das Bitmapl verkürtzt.

Beste Grüsse.

Deleted member 103 · Dec 26, 2010

It works, unfortunately, still do not.

Es funktioniert leider immer noch nicht.

klaus · Dec 27, 2010

You must limit the length of the text.
In my previous posts I 'just' enlargened the label width.
Attached a version with text legnth limitation.

Best regards.

Du musst die Textlänge begrenzen.
In meinen letzten Posts habe Ich nur die Labellänge vergrössert.
Beiliegend eine Version mit begrenzter Textlänge.

Beste Grüsse.

Deleted member 103 · Dec 27, 2010

Man sollte, damit es richtig funktioniert, die Textbreite in Pixel kennen um es dann auf die gewünchte breite trimmen zu können.
Du kannst nicht einfach nach der Textlänge trimmen.

In mein neu Beispiel habe ich den Text so geändert:

txt="Text Text Text Text Text Text abcdef ghilmn opqrst-"

txt="Text Text Text iiii iiii 1111 iiiiii lllll jjjjj-"

klaus · Dec 27, 2010

I fully agree with you!
I shortened the text in the example code for a 'long' text.
I didn't find a function to determine the width of a text in pixels.
http://www.b4x.com/forum/bugs-wishlist/7096-stringwidth-stringheight.html

Best regards.

Ich bin mit Dir einverstanden.
Ich habe den im Beispielprogramm mit einem 'langen' Text gekürzt.
Ich hatte keine Funktion gefunden um die Textlänge in Pixel zu rechnen.

Beste Grüsse.

Listview and Drawtext to Bitmap

Deleted member 103

Guest

Attachments

B4X founder

Deleted member 103

Guest

Attachments

B4X founder

Deleted member 103

Guest

Attachments

B4X founder

Expert

Attachments

Deleted member 103

Guest

Active Member

Deleted member 103

Guest

Attachments

Expert

Attachments

Deleted member 103

Guest

Attachments

Expert

Attachments

Deleted member 103

Guest

Expert

Attachments

Deleted member 103

Guest

Attachments

Expert

Attachments

Deleted member 103

Guest

Attachments

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency