How to create an image from a View and save it in Sketchware

Using codes in add source directly block in Sketchware, we can create bitmap images from any View (like EditText, TextView, LinearLayout, WebView, etc.) in android app. The bitmap images can then be saved to externalcache or to external storage if the permissions to WRITE EXTERNAL STORAGE is added.

To Create an app which can create images from any View and share it, follow the steps given below.

1. Start a new Sketchware project. In VIEW area add an LinearLayout (linear1) containing things to be converted to an image, and a Button (button1) for converting linear1 to image.. If you want to preview the image add an ImageView also.

2. In LOGIC area of project, create a More Block saveView[View:view].

Here use an add source directly block and add following code:
Bitmap returnedBitmap = Bitmap.createBitmap(_view.getWidth(), _view.getHeight(),Bitmap.Config.ARGB_8888);

Canvas canvas = new Canvas(returnedBitmap);
android.graphics.drawable.Drawable bgDrawable =_view.getBackground();
if (bgDrawable!=null) {
bgDrawable.draw(canvas);
} else {
canvas.drawColor(Color.WHITE);
}
_view.draw(canvas);

java.io.File pictureFile = new java.io.File(Environment.getExternalStorageDirectory() + "/Download/myimage.png");
if (pictureFile == null) {
showMessage("Error creating media file, check storage permissions: ");
return; }
try {
java.io.FileOutputStream fos = new java.io.FileOutputStream(pictureFile); returnedBitmap.compress(Bitmap.CompressFormat.PNG, 100, fos);
fos.close();
showMessage("Image Saved in /Download/ folder");
} catch (java.io.FileNotFoundException e) {
showMessage("File not found: " + e.getMessage()); } catch (java.io.IOException e) {
showMessage("Error accessing file: " + e.getMessage());

}

This code defines a class saveView(View), which converts a View to Bitmap image and saves it to Download folder in External storage directory.

3. Now in event onButtonClick, use blocks as shown below.

This will add WRITE EXTERNAL STORAGE permissions to the app, and save linear1 in as image in /Download/ folder.

4. Save and run the project. Now when you click button1, it will save linear1 as image in external storage.

Convert image to base64 String and vice versa

To convert image to base64 String use the code given below.

1. Define a new ByteArrayOutputStream.

java.io.ByteArrayOutputStream baos = new java.io.ByteArrayOutputStream();

2. Convert image in ImageView to Bitmap.

Bitmap bm = ((android.graphics.drawable.BitmapDrawable) imageview1.getDrawable()).getBitmap();

Or convert image in drawable folder to Bitmap.
Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.image);

3. Convert bitmap image to byte array and encode it to String.

bm.compress(Bitmap.CompressFormat.JPEG, 100, baos);

byte[] imageBytes = baos.toByteArray();

String imageString = android.util.Base64.encodeToString(imageBytes, android.util.Base64.DEFAULT);

Base64 String to image

1. Decode String to Byte array

byte[] imageBytes = android.util.Base64.decode(imageString, android.util.Base64.DEFAULT);

2. Convert Byte array to Bitmap

Bitmap decodedImage = BitmapFactory.decodeByteArray(imageBytes, 0, imageBytes.length);

3. Set the Bitmap as image of ImageView.

imageview1.setImageBitmap(decodedImage);

Here imageString is a base64 String.

BarChart in Sketchware android project

In Sketchware, to create an app in which data with numerical values can be added and viewed as a Bar chart, follow the steps given below.

1. Create a new project in Sketchware.

2. In main.xml add two Buttons button1 and button2. Set text of button1 to 'Add' and text of button2 to 'Bar Chart'. Also add a ListView listview2.

3. Create a CustomView items.xml and add two TextViews in it textview1 and textview2.

4. Select items.xml as CustomView of listview2.

5. In MainActivity.java, add a Shared Preferences component sp:sp, a Dialog component dialog_add, and an Intent component i.

6. Add a Map variable map, three String variables jsondata, label and value, and a ListMap maplist.

7. In onCreate event use blocks to get data from shared preferences to maplist and display it in ListView.

8. In onBindCustomView event, display the data from maplist in the TextViews in CustomView items.xml.

9. Create a CustomView dialog_view.xml containing LinearLayout linear2 and linear3 for adding EditText fields created programmatically.

10. In the event button1 onClick, use blocks to display a Custom Dialog Box which can be used to add data to the list.

The code in first add source directly block in the image above, creates two EditText programmatically, adds them to the LinearLayouts in CustomView dialog_view.xml, and sets the CustomView as the View of the Dialog.
final EditText dialog_edittext1 = new EditText(MainActivity.this);
dialog_edittext1.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
dialog_edittext1.setHint("Text");

final EditText dialog_edittext2 = new EditText(MainActivity.this);
dialog_edittext2.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
dialog_edittext2.setHint("Number");
dialog_edittext2.setInputType(InputType.TYPE_CLASS_NUMBER | InputType.TYPE_NUMBER_FLAG_DECIMAL | InputType.TYPE_NUMBER_FLAG_SIGNED);

View inflated_view = getLayoutInflater().inflate(R.layout.dialog_view, null);

LinearLayout dialog_linear1 = inflated_view.findViewById(R.id.linear2);
LinearLayout dialog_linear2 = inflated_view.findViewById(R.id.linear3);

dialog_linear1.addView(dialog_edittext1);
dialog_linear2.addView(dialog_edittext2);
dialog_add.setView(inflated_view);

The code used in second add source directly block in the image above, gets the data from EditText fields to the String variables.
label = dialog_edittext1.getText().toString();
value = dialog_edittext2.getText().toString();

11. Create a new View barchart.xml.

12. In the event button2 onClick in MainActivity.java, save the maplist to Shared Preferences and used Intent to move to BarchartActivity.java.

13. In barchart.xml add a LinearV linear1. Set it's width to match_parent.

14. In BarchartActivity.java add a Shared Preferences component sp:sp, a Map variable map, and a ListMap listmap.

15. In onCreate event use blocks to get data from Shared Preferences to listmap, and codes to display this ListMap in BarChartView.

The code used in add source directly block is
BarChartView chart = new BarChartView(this, listmap, "number", "text");
linear1.addView(chart);
Here 'text' and 'number' are the keys used to add items to List Map in MainActivity.java.

16. Create a More Block extra.

17. In the more block extra, use an add source directly block and put codes to define a View class BarChartView.
}

public class BarChartView extends View {
private int barCol;
private int progressCol;
private int progress=0;
private Paint myPaint;
private ArrayList<HashMap<String, Object>> list = new ArrayList<>();
private String numkey;
private String labelkey;

public BarChartView(Context context, ArrayList<HashMap<String, Object>> list, String numkey, String labelkey){
super(context);
myPaint = new Paint();
barCol = Color.BLACK;
progressCol = Color.RED;
progress = 0;
this.list = list;
this.numkey = numkey;
this.labelkey = labelkey;
}

@Override
protected void onDraw(Canvas canvas) {
int viewWidth = this.getMeasuredWidth();
int viewHeight = this.getMeasuredHeight();

myPaint.setStyle(android.graphics.Paint.Style.STROKE);
myPaint.setStrokeWidth(4);
myPaint.setColor(barCol);
canvas.drawLine(40, viewHeight -40, 40, 40, myPaint);
canvas.drawLine(40, viewHeight -40, viewWidth -20, viewHeight -40, myPaint);

int lastBase = 40;
int barWidth = (int)(viewWidth - 80)/list.size();

int max = Integer.valueOf(list.get(0).get(numkey).toString());
for (int i =0; i<list.size(); i++){
if(max < Integer.valueOf(list.get(i).get(numkey).toString())) {
max = Integer.valueOf(list.get(i).get(numkey).toString());
} }
int maxHeight = viewHeight - 120;

myPaint.setStyle(android.graphics.Paint.Style.FILL);

for (int i =0; i<list.size(); i++){
int col = 100+(155*i/list.size());
myPaint.setColor(Color.rgb(0, col, col));
canvas.drawRect(lastBase+10, viewHeight - (Integer.valueOf(list.get(i).get(numkey).toString())*maxHeight/max), lastBase + barWidth, viewHeight - 40, myPaint);

canvas.save();
canvas.rotate(270f, 0, 0);
myPaint.setColor(Color.BLACK); myPaint.setTextSize(barWidth/2); canvas.drawText(list.get(i).get(labelkey).toString() + " : " +list.get(i).get(numkey).toString(), -viewHeight +100, lastBase+10 +barWidth*2/3, myPaint);
canvas.restore();

lastBase = lastBase + barWidth;
}

}

This code only works for positive integer values and not for decimal values.

18. Save and Run the project.

Bar chart from json array in Sketchware

In Sketchware, to create an app in which data with numerical values can be added and viewed as a Bar chart, follow the steps given below.

1. Create a new project in Sketchware.

2. In main.xml add a Button button1 and a ListView listview2.

3. Create a CustomView items.xml and add two TextViews in it textview1 and textview2.

4. Select items.xml as CustomView of listview2.

5. In MainActivity.java, add a Shared Preferences component sp:sp, and an Intent component i.

6. Add a String variable jsondata, and a ListMap maplist.

7. In onCreate event use blocks to set jsondata to your Json data containing 'text' and 'number' as keys. Convert it to List Map maplist and display it in ListView.

The Json String used here is:
[
{
"text" : "Afghan Afghani",
"number" : "0.9532"
},
{
"text" : "Armenian Dram",
"number" : "0.1487"
},
{
"text" : "Bangladeshi Taka",
"number" : "0.8572"
},
{
"text" : "Cambodian Riel",
"number" : "0.1758"
},
{
"text" : "Indonesian Rupiah",
"number" : "0.005"
},
{
"text" : "Maldivian Rufiyaa",
"number" : "4.674"
},
{
"text" : "Pakistani Rupee",
"number" : "0.5832"
},
{
"text" : "Philippine Peso",
"number" : "1.332"
},
{
"text" : "Thai Baht",
"number" : "2.226"
}
]

8. In onBindCustomView event, display the data from maplist in the TextViews in CustomView items.xml.

9. Create a new View barchart.xml.

10. In the event button1 onClick in MainActivity.java, save the maplist to Shared Preferences and used Intent to move to BarchartActivity.java.

11. In barchart.xml add a LinearV linear1.

12. In BarchartActivity.java add a Shared Preferences component sp:sp, a Map variable map, and a ListMap listmap.

13. In onCreate event use blocks to get data from Shared Preferences to listmap, and codes to display this ListMap in BarChartView.

The code used in add source directly block is
BarChartView chart = new BarChartView(this, listmap, "number", "text");
linear1.addView(chart);
Here 'text' and 'number' are the keys used in Json String in MainActivity.java.

14. Create a More Block extra.

15. In the more block extra, use an add source directly block and put codes to define a View class BarChartView.
}

public class BarChartView extends View {
private int barCol;
private int progressCol;
private int progress=0;
private Paint myPaint;
private ArrayList<HashMap<String, Object>> list = new ArrayList<>();
private String numkey;
private String labelkey;

public BarChartView(Context context, ArrayList<HashMap<String, Object>> list, String numkey, String labelkey){
super(context);
myPaint = new Paint();
barCol = Color.BLACK;
progressCol = Color.RED;
progress = 0;
this.list = list;
this.numkey = numkey;
this.labelkey = labelkey;
}

@Override
protected void onDraw(Canvas canvas) {
int viewWidth = this.getMeasuredWidth();
int viewHeight = this.getMeasuredHeight();

myPaint.setStyle(android.graphics.Paint.Style.STROKE);
myPaint.setStrokeWidth(4);
myPaint.setColor(barCol);
canvas.drawLine(40, viewHeight -40, 40, 40, myPaint);
canvas.drawLine(40, viewHeight -40, viewWidth -20, viewHeight -40, myPaint);

int lastBase = 40;
int barWidth = (int)(viewWidth - 80)/list.size();

float max = Float.valueOf(list.get(0).get(numkey).toString());
for (int i =0; i<list.size(); i++){
if(max < Float.valueOf(list.get(i).get(numkey).toString())) {
max = Float.valueOf(list.get(i).get(numkey).toString());
} }
int maxHeight = viewHeight - 120;

myPaint.setStyle(android.graphics.Paint.Style.FILL);

for (int i =0; i<list.size(); i++){
int col = 100+(155*i/list.size());
myPaint.setColor(Color.rgb(0, col, col));
canvas.drawRect(lastBase+10, viewHeight - (Float.valueOf(list.get(i).get(numkey).toString()))*maxHeight/max, lastBase + barWidth, viewHeight - 40, myPaint);

canvas.save();
canvas.rotate(270f, 0, 0);
myPaint.setColor(Color.BLACK); myPaint.setTextSize(barWidth/2); canvas.drawText(list.get(i).get(labelkey).toString() + " : " +  list.get(i).get(numkey).toString(), -viewHeight +100, lastBase+10 +barWidth*2/3, myPaint);
canvas.restore();

lastBase = lastBase + barWidth;
}

}


This code only works for positive numerical values.

16. Save and Run the project.