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

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

Attachments

  • RoundBitmap.zip
    57.1 KB · Views: 2,414
Last edited:
Click to expand...
A

achtrade

Active Member
Licensed User
Longtime User
Johan Schoeman said:
Here is the JavaObject V2.01 files. Try them and see what happens
Click to expand...

Hello,

I tried with the new lib, I had no error but I had no circular image neither. What I have is a zoom in image. See attached images (30.jpg is the original, capture.jpg is the result)

my code
B4X: 
Sub Activity_Create(FirstTime As Boolean)
   p2.Initialize("")
   p2.AddView(imgTest, 5dip, 2dip, 100dip, 100dip)
   clv1.Add(p2, 160dip, "Test")

   Dim bm, bm2 As Bitmap
   Dim imgTest As ImageView
   bm.Initialize(File.DirRootExternal, "test.jpg")
   bm2 = nativeMe.RunMethod("getBubbleBitmap",Array(bm))
   imgTest.Bitmap = bm2
end sub
 

Attachments

  • 30.jpg
    30.jpg
    2.9 KB · Views: 390
  • Capture.JPG
    Capture.JPG
    11.6 KB · Views: 412
Last edited:
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
achtrade said:
anybody ?
Click to expand...
See attached and comments that I have added in the code. I think it has something to do with the (small) size of your jpg file. Have changed the call to getBubbleBitmap:

B4X: 
   Dim tw As Int = 400                               'play around with this value - it was hardcoded as 1000 in method getBubbleBitmap
Dim th As Int  = 400                              'play around with this value - it was hardcoded as 1000 in method getBubbleBitmap
bm.Initialize(File.DirAssets, "a.jpg")
bm2 = nativeMe.RunMethod("getBubbleBitmap",Array(bm, tw, th))

Replace your getBubbleBitmap code with this:

B4X: 
public static Bitmap getBubbleBitmap(Bitmap scaleBitmapImage, int targetWidth, int targetHeight) {
//      int targetWidth = 400;
//      int targetHeight = 400;

      Bitmap targetBitmap = Bitmap.createBitmap(targetWidth, targetHeight, Bitmap.Config.ARGB_8888);

      Canvas canvas = new Canvas(targetBitmap);
      Path path = new Path();

      path.moveTo((float) targetWidth/2, (float) 0.0);
      path.lineTo(targetWidth, (float) 0.0);
      path.lineTo((float)targetWidth, targetHeight/2);  

      RectF oval = new RectF();
      oval.set(0, 0, targetWidth, targetHeight);
      path.addArc(oval, 0, 270);
      canvas.clipPath(path);
   
      Bitmap sourceBitmap = scaleBitmapImage;
      canvas.drawBitmap(sourceBitmap, new Rect(0, 0, sourceBitmap.getWidth(),
            sourceBitmap.getHeight()), new Rect(0, 0, targetWidth,
            targetHeight), null);
      return targetBitmap;
}

and then play around with the tw and th values in the B4A code as well as the size of the imageview (eg p2.AddView(imgTest, 10%x, 10%y, 30%x, 30%x)
 

Attachments

  • Achtrade.zip
    58.6 KB · Views: 484
  • Achtrade.png
    Achtrade.png
    45.4 KB · Views: 521
Last edited:
A

achtrade

Active Member
Licensed User
Longtime User
Just one thing, Why does the image have different size with different device ?, I'm using the same value here:
Dim tw As Int = 180
Dim th As Int = 180
 

Attachments

  • error.jpg
    error.jpg
    44.2 KB · Views: 473
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
Mashiane said:
Hi, you havent converted this into a library by any chance?
Click to expand...
No, have not. Have not looked at the code in a long time (i.e is it in a B4A class or not). If not in a B4A class then the inline java code can easily be moved to a B4A class and compiled to a B4A library. If already in a B4A class then it just needs to be compiled to a library (i.e from B4A - nothing special required). Will check a bit later - busy with video recorder Front / Back option.
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Johan Schoeman said:
No, have not. Have not looked at the code in a long time (i.e is it in a B4A class or not). If not in a B4A class then the inline java code can easily be moved to a B4A class and compiled to a B4A library. If already in a B4A class then it just needs to be compiled to a library (i.e from B4A - nothing special required). Will check a bit later - busy with video recorder Front / Back option.
Click to expand...

It's ok, let me try my new 'Library' project with it. Will keep you posted.

Regards
 
Kwame Twum

Kwame Twum

Active Member
Licensed User
Longtime User
Hi everyone, I created a different hexagon shape from the inline Java provided in the first examples... Here's the code for my shape:

B4X: 
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;

public Bitmap getHexagonShape(Bitmap scaleBitmapImage) {
    int targetWidth = 200;
    int targetHeight =200;
    Bitmap targetBitmap = Bitmap.createBitmap(targetWidth,
            targetHeight,Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(targetBitmap);

    Path path = new Path();
    float stdW = 200;
    float stdH = 200;
    float w3 =stdW / 2;
    float h2 = stdH / 2;

    float radius=stdH/2-10;
    float triangleHeight = (float) (Math.sqrt(3) * radius / 2);
    float centerX = stdW/2;
    float centerY = stdH/2;
    path.moveTo(centerX, centerY + radius);
    path.lineTo(centerX - triangleHeight, centerY + radius/2);
    path.lineTo(centerX - triangleHeight, centerY - radius/2);
    path.lineTo(centerX, centerY - radius);
    path.lineTo(centerX + triangleHeight, centerY - radius/2);
    path.lineTo(centerX + triangleHeight, centerY + radius/2);
    path.moveTo(centerX, centerY + radius);

    canvas.clipPath(path);
    Bitmap sourceBitmap = scaleBitmapImage;
    canvas.drawBitmap(sourceBitmap,
            new Rect(0, 0, sourceBitmap.getWidth(),
                    sourceBitmap.getHeight()),
                    new Rect(0, 0, targetWidth,
                            targetHeight), null);
    return targetBitmap;
}

This works very well, however I would like to know how to achieve a border around the image. Anyone got an idea how to go about this?
 
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
Kwame Twum said:
Hi everyone, I created a different hexagon shape from the inline Java provided in the first examples... Here's the code for my shape:

B4X: 
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;

public Bitmap getHexagonShape(Bitmap scaleBitmapImage) {
    int targetWidth = 200;
    int targetHeight =200;
    Bitmap targetBitmap = Bitmap.createBitmap(targetWidth,
            targetHeight,Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(targetBitmap);

    Path path = new Path();
    float stdW = 200;
    float stdH = 200;
    float w3 =stdW / 2;
    float h2 = stdH / 2;

    float radius=stdH/2-10;
    float triangleHeight = (float) (Math.sqrt(3) * radius / 2);
    float centerX = stdW/2;
    float centerY = stdH/2;
    path.moveTo(centerX, centerY + radius);
    path.lineTo(centerX - triangleHeight, centerY + radius/2);
    path.lineTo(centerX - triangleHeight, centerY - radius/2);
    path.lineTo(centerX, centerY - radius);
    path.lineTo(centerX + triangleHeight, centerY - radius/2);
    path.lineTo(centerX + triangleHeight, centerY + radius/2);
    path.moveTo(centerX, centerY + radius);

    canvas.clipPath(path);
    Bitmap sourceBitmap = scaleBitmapImage;
    canvas.drawBitmap(sourceBitmap,
            new Rect(0, 0, sourceBitmap.getWidth(),
                    sourceBitmap.getHeight()),
                    new Rect(0, 0, targetWidth,
                            targetHeight), null);
    return targetBitmap;
}

This works very well, however I would like to know how to achieve a border around the image. Anyone got an idea how to go about this?
Click to expand...

You will have to add code to the inline Java code to draw it.
 
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
Kwame Twum said:
Ikr, just don't know exactly how to do it... the code I posted is borrowed.
Click to expand...
Browse the web and see if you can find something on the Stackoverflow forum. Just type in "bitmap draw border bitmap stackoverflow" in you search engine and the learn from the links that pop up from the search.
 
Kwame Twum

Kwame Twum

Active Member
Licensed User
Longtime User
Johan Schoeman said:
Browse the web and see if you can find something on the Stackoverflow forum
Click to expand...
guess we think slightly alike... I did that earlier and after several readings, made this to modification to my code...

B4X: 
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.Color;


public Bitmap getHexagonShape(Bitmap scaleBitmapImage) {

    Paint mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setStyle(Paint.Style.FILL);
    int targetWidth = 200;
    int targetHeight = 200;
    Bitmap targetBitmap = Bitmap.createBitmap(targetWidth,
            targetHeight,Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(targetBitmap);

    Path path = new Path();
    float stdW = 200;
    float stdH = 200;
    float w3 =stdW / 2;
    float h2 = stdH / 2;

    float radius=stdH/2-10;
    float triangleHeight = (float) (Math.sqrt(3) * radius / 2);
    float centerX = stdW/2;
    float centerY = stdH/2;
    path.moveTo(centerX, centerY + radius);
    path.lineTo(centerX - triangleHeight, centerY + radius/2);
    path.lineTo(centerX - triangleHeight, centerY - radius/2);
    path.lineTo(centerX, centerY - radius);
    path.lineTo(centerX + triangleHeight, centerY - radius/2);
    path.lineTo(centerX + triangleHeight, centerY + radius/2);
    path.moveTo(centerX, centerY + radius);

    //I made changes  here

    mPaint.setColor(Color.WHITE);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth((float)5);
  
    canvas.clipPath(path);
  
    Bitmap sourceBitmap = scaleBitmapImage;
    canvas.drawBitmap(sourceBitmap,
            new Rect(0, 0, sourceBitmap.getWidth(),
                    sourceBitmap.getHeight()),
                    new Rect(0, 0, targetWidth,
                            targetHeight), mPaint);   //Added the Paint here
    return targetBitmap;
}

Still shows no border
 
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
Kwame Twum said:
guess we think slightly alike... I did that earlier and after several readings, made this to modification to my code...

B4X: 
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.Color;


public Bitmap getHexagonShape(Bitmap scaleBitmapImage) {

    Paint mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setStyle(Paint.Style.FILL);
    int targetWidth = 200;
    int targetHeight = 200;
    Bitmap targetBitmap = Bitmap.createBitmap(targetWidth,
            targetHeight,Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(targetBitmap);

    Path path = new Path();
    float stdW = 200;
    float stdH = 200;
    float w3 =stdW / 2;
    float h2 = stdH / 2;

    float radius=stdH/2-10;
    float triangleHeight = (float) (Math.sqrt(3) * radius / 2);
    float centerX = stdW/2;
    float centerY = stdH/2;
    path.moveTo(centerX, centerY + radius);
    path.lineTo(centerX - triangleHeight, centerY + radius/2);
    path.lineTo(centerX - triangleHeight, centerY - radius/2);
    path.lineTo(centerX, centerY - radius);
    path.lineTo(centerX + triangleHeight, centerY - radius/2);
    path.lineTo(centerX + triangleHeight, centerY + radius/2);
    path.moveTo(centerX, centerY + radius);

    //I made changes  here

    mPaint.setColor(Color.WHITE);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth((float)5);

    canvas.clipPath(path);

    Bitmap sourceBitmap = scaleBitmapImage;
    canvas.drawBitmap(sourceBitmap,
            new Rect(0, 0, sourceBitmap.getWidth(),
                    sourceBitmap.getHeight()),
                    new Rect(0, 0, targetWidth,
                            targetHeight), mPaint);   //Added the Paint here
    return targetBitmap;
}

Still shows no border
Click to expand...
Take a look here - maybe it puts you on the right track
https://www.b4x.com/android/forum/threads/roundbitmapwithborder-inline-java-code.51848/
 
Kwame Twum

Kwame Twum

Active Member
Licensed User
Longtime User
Yippie!, I did it :)... I had to:
1. Draw a path with a white fill
2. Draw the second path with a slightly lesser dimension..

Thanks a lot @Johan Schoeman...

Took me hours since I'm a bit new to Java o_O
I don't know if that's the standard way though, but I go it to work the way I wanted ;).
done.jpg
 
You must log in or register to reply here.

Similar Threads

DonManfred
  • Article
B4A Library Firebase ML-Vision (OnDevice Text-, Barcode-, Face-, Contour-Recognition and Imagelabeling)
Replies
18
Views
7K
DonManfred
DonManfred
Mr Blue Sky
  • Article
Android Example digital dashboard
Replies
3
Views
5K
Mr Blue Sky
Mr Blue Sky
Erel
  • Locked
  • Article
B4A Library [B4X][XUI] ImageSlider
2
Replies
29
Views
26K
Erel
Erel
DonManfred
  • Article
B4A Library PanoramaImageView
Replies
1
Views
4K
Rantor777
Rantor777
S
  • Question
Android Question Arranging a series of imageviews in a panel
Replies
3
Views
977
klaus
klaus
Top