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

Johan Schoeman · Mar 9, 2015

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

achtrade · May 7, 2015

Johan Schoeman said:
Here is the JavaObject V2.01 files. Try them and see what happens

This fixed it.

thanks.

achtrade · May 7, 2015

klaus said:
Yes.
Look at chapter 14.7.2 Additional libraries folder in the Beginner's Guide.

I will. Thanks.

achtrade · Jun 2, 2015

Johan Schoeman said:
Here is the JavaObject V2.01 files. Try them and see what happens

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

achtrade · Jun 4, 2015

anybody ?

Johan Schoeman · Jun 6, 2015

achtrade said:
anybody ?

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)

achtrade · Jun 21, 2015

thank you, that works.

achtrade · Jun 22, 2015

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

ilan · Jun 22, 2015

achtrade said:
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

Try to use DIP..

Dim tw As Int = 180dip
...

achtrade · Jun 24, 2015

ilan said:
Try to use DIP..

Dim tw As Int = 180dip
...

it didn't work with dip

Mashiane · Dec 1, 2015

Hi, you havent converted this into a library by any chance?

Johan Schoeman · Dec 1, 2015

Mashiane said:
Hi, you havent converted this into a library by any chance?

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 · Dec 1, 2015

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.

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

Regards

Kwame Twum · Jan 5, 2016

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 · Jan 5, 2016

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?

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

Kwame Twum · Jan 5, 2016

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

Ikr, just don't know exactly how to do it... the code I posted is borrowed.

Johan Schoeman · Jan 5, 2016

Kwame Twum said:
Ikr, just don't know exactly how to do it... the code I posted is borrowed.

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 · Jan 5, 2016

Johan Schoeman said:
Browse the web and see if you can find something on the Stackoverflow forum

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 · Jan 5, 2016

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

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 · Jan 5, 2016

Johan Schoeman said:
Take a look here

thanks a lot, I'm on it... will revert if anything happens.

Kwame Twum · Jan 5, 2016

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
I don't know if that's the standard way though, but I go it to work the way I wanted .

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

Attachments

Active Member

Active Member

Active Member

Attachments

Active Member

Expert

Attachments

Active Member

Active Member

Attachments

Expert

Active Member

Expert

Expert

Expert

Active Member

Expert

Active Member

Expert

Active Member

Expert

Active Member

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency