Android Question How do I achieve this look?

[Ertan]

Hello, how can I access a view like the one in the picture with b4x?
I'm struggling for a text component, there are bound to be several ways to do this. What are these ways?
I think it can be done with B4XRect and B4XPath. But I couldn't do it because I don't know the working logic.
Thank you.

 

[TILogistic]

see:

ImageView - Circular, Hexagonal, Triangular, Bubble, Star Imageviews (with inline Java code)

See attached project with inline Java code to create round imageviews. You only need library JavaObject V2.01 to be enabled.

www.b4x.com

ImageView - Circular, Hexagonal, Triangular, Bubble, Star Imageviews (with inline Java code)

See attached project with inline Java code to create round imageviews. You only need library JavaObject V2.01 to be enabled.

www.b4x.com

or

[B4X] Drawing with BitmapCreator

BitmapCreator (BC) continues to evolve. Version 4.5 update is a large update with several new drawing features. Background At its core BC holds an array of bytes that represent an image. It can quickly extract the raw data from existing bitmaps and it can quickly generate bitmaps from this...

www.b4x.com

 

[Ertan]

I'll tell you how I got this look. First, I drew this and exported it to svg. Then I imported svg to imageview with the ioxSVG library.

    Dim c As Canvas
    Dim b As Bitmap
    Dim svg As ioxSVG

    b.InitializeMutable(img.Width,img.Height)
    
    c.Initialize2(b)
    Color="#067dc1"
    
    svg.Initialize2($"<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg width="100%" height="100%" viewBox="0 0 128 115" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g id="#fc7424ff">
    <path fill="${Color}" opacity="1.00" d=" M 37.22 3.35 C 45.06 -0.03 53.78 0.53 62.09 1.04 C 76.14 3.27 88.01 12.36 96.84 23.13 C 107.21 34.19 117.48 45.36 128.00 56.27 L 128.00 57.76 C 116.32 71.13 103.73 83.71 92.28 97.28 C 84.97 105.16 75.47 111.16 64.97 113.67 C 57.45 114.82 49.69 114.84 42.18 113.56 C 30.18 110.46 19.22 103.11 12.17 92.86 C 6.67 86.03 3.76 77.56 2.04 69.06 C 0.99 63.79 -0.11 58.36 0.85 52.98 C 2.18 45.24 3.63 37.35 7.29 30.31 C 13.44 18.03 24.11 7.82 37.22 3.35 Z" />
    </g>
    </svg>
    "$)
    
    svg.DocumentWidth = img.Width
    svg.DocumentHeight = img.Height
    
    svg.RenderToCanvas(c)
    img.Bitmap=b

You can give the desired color with the Color parameter. I've been trying a lot to get this look with svg. I hope it will inspire any of you. Thanks.
It's so sharp!

 

[TILogistic]

I tell you a secret that is much easier than you think.
and it's cross-platform.

You can change the color, size, rotation, etc.
and you can use it on buttons, labels, action bar, google maps, etc.

 

[Ertan]

I tell you a secret that is much easier than you think.
and it's cross-platform.

You can change the color, size, rotation, etc.
and you can use it on buttons, labels, action bar, google maps, etc.




View attachment 121181

Can you share the project?

 

[TILogistic]

you already have the idea, but you better watch this tutorial and you will realize it.

and if you have questions ask me.

The bad thing is that I have not translated it into English.

B4X - Uso de custom fonts icons (SliderMenu)

Estimados, Comparto un breve uso de fonts icons personalizados que es una alternativa a las imágenes como iconos. ADJUNTO EJEMPLO PARA SU REVISIÓN. Si desea crear sus propios icons fonts utilizar una de estas herramientas. http://fontello.com/ https://icomoon.io/app/#/select En este caso...

www.b4x.com

 

[Ertan]

tips:

View attachment 121182

hmmmmmm...

now I'm starting to understand. I'll try, if I fail, will you send me this?

 

[Ertan]

okay, I got it. I'm doing it. thank you. i have installed my icon as svg.

 

[TILogistic]

Test:

 

[Ertan]

tips:

View attachment 121182

did it happen? ^^

 

[Ertan]

i replaced the solution with yours. Yours is better. Thank you.

 

[Ertan]

Test:

View attachment 121188 View attachment 121189

Well, it's all good. I will ask you something.
I want to do this. But we adjust the size with TextSize. I can't adjust the height. How can I do this?

 

[TILogistic]

View attachment 121194
Well, it's all good. I will ask you something.
I want to do this. But we adjust the size with TextSize. I can't adjust the height. How can I do this?

to center it or adjust it to a label you must treat it as text.

 

[Ertan]

ortalamak veya bir etikete ayarlamak için onu metin olarak ele almalısınız.

View attachment 121195

yes i know. I have tried. I think I need to expand the label from top to bottom.

 

[Ertan]

see:
label inside a panel

Label5.SetTextAlignment("CENTER", "CENTER")

View attachment 121198 View attachment 121199

View attachment 121200

@oparra Do you have any ideas for my question above? or a solution?

 

[TILogistic]

@oparra Do you have any ideas for my question above? or a solution?

Upload an example to see how you use fonts.

 

[Ertan]

Upload an example to see how you use fonts.

I have attached the example.

 

[TILogistic]

To better configure the icon font, it is best to place the icon label within a panel.

With this you can rotate it, align it, change color, etc.

look right icon.

Labelb5x.Rotation = 90

 

[Ertan]

To better configure the icon font, it is best to place the icon label within a panel.

With this you can rotate it, align it, change color, etc.

look right icon.


View attachment 121285

It looks nice and nice. I think you have misunderstood my previous post. I didn't mention it.

It's not right in the middle. I want it to completely cover the panel. If the panel expands and grows, it will automatically synchronize as well.

 

[Ertan]

search forum?

I have already found a solution during the time you have not written a response. I only asked you because I was wondering what kind of solution you could make. I can't avoid saying that I use forum search frequently. Thank you for your solutions. See you.