Posts

Creating a Drawing View in Sketchware

Image
 To create a DrawingView with undo button, follow the instructions given below. 1. Create a new project in Sketchware. 2. In main.xml , add a LinearLayout linear1 with height wrap_content, weight 1, and padding 0. Add a LinearHorizontal below it, containing following ImageViews: imageview_stroke_width , imageview_stroke_color , imageview_background , imageview_undo,  and  imageview_clear. 3. Create a more block canvas and put following codes in it. Here we create a new View class called DrawingView and a new class called PathPaint. } DrawingView dv; private Paint mPaint; private Canvas mCanvas; private ArrayList<PathPaint> all_paths = new ArrayList<>(); public class DrawingView extends View { private Bitmap mBitmap; private Paint mBitmapPaint; Context context; private Paint circlePaint; private Path circlePath; private Path mPath; public DrawingView(Context c) { super(c); context=c; mPath = new Path(); mBitmapPaint = new Paint(Paint.DITHER_FLAG); circlePath = new Path();

Create a full screen dialog with CropImageView

Image
To create a fullscreen dialog with CropImageView in Sketchware, follow the steps given below. 1. Add an ImageView imageview1 for displaying image. 2. Add a FilePicker component fp: image/* for picking images. 3. In imageview1 onClick event use block FilePicker fp pick files . 4. Download CropUtils.zip from this url: http://apktutor.com/wp-content/uploads/2021/11/CropUtils.zip 5. Extract CropUtils.java at .sketchware/mysc/(Project number)/app/src/main/java/(package name)/CropUtils.java 6. Open CropUtils.java and change package name ( package com.my.dmchat; ) to your project's package name. 7. Create a more block extra . Here declare a CropImageView crp , a Bitmap image and define rotateBitmap(Bitmap) . } CropUtils.CropImageView crp; Bitmap image; public Bitmap rotateBitmap(Bitmap bitmap){ android.graphics.Matrix matrix = new android.graphics.Matrix(); matrix.postScale((float)1, (float)1); matrix.postRotate(90); Bitmap bitmap2 = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidt

Image Slider using ViewPager in Sketchware

Image
 To add a front screen with sliding images using ViewPager in Sketchware, follow the instructions given below. 1. Create a new project in Sketchware. 2. Switch on AppCompat and design. 3. In main.xml add a  linear1 and linear2. Set padding of both these linears to 0. Set gravity of linear2 to center_horizontal. We will add ViewPager to linear1, and TabLayout to linear2. 4. Add four images: store, home, gift, and fast_food. 5. Create a CustomView custom2.xml . In this View, add an ImageView with scale type fit_center. 6. Create a more block extra . Add following codes in it. } androidx.viewpager.widget.ViewPager viewPager1; int[] image_list = { R.drawable.store, R.drawable.home, R.drawable.gift, R.drawable.fast_food }; private class MyPagerAdapter extends androidx.viewpager.widget.PagerAdapter { public int getCount() { return image_list.length; } public Object instantiateItem(ViewGroup collection, int position) { View view = getLayoutInflater().inflate(R.layout.custom2, null); ((androi

Get frames in a video in Sketchware

Image
 This sample shows how to get the frames in a video and display it in a GridView in Sketchware. 1. Create a new project in Sketchware. 2. In main.xml add a LinearLayout linear1 . Below this add a ListView listview1 . 3. Create a more block custom.xml . Add an ImageView imageview1 in it. 4. For listview1 , select custom.xml as Custom View. Set height of linear1 to match_parent . 5. In View main.xml add a Floating Action Button _fab . 6. Add a FilePicker Component fp: video/* , and a Camera component cam . 7. Create a More block extra and declare GridView gridview1 and a list of bitmap images frames using following codes: } GridView gridview1; ArrayList<Bitmap> frames; { 8. Create a String path , a Map variable map , a List String list and a List Map imagelist . 9. In onCreate event put following codes. gridview1 = new GridView(this); gridview1.setLayoutParams(new GridView.LayoutParams(GridView.LayoutParams.MATCH_PARENT, GridView.LayoutParams.MATCH_PARENT)); gridview1.setB

Rotate and crop image in Sketchware

Image
 Here is how we can create a sample app in Sketchware which can rotate and crop image and save it as .jpg file. Follow the steps given below. 1. Create a new project in Sketchware. In main.xml add LinearLayout linear2 , linear3 , and linear1 . For linear2 set weight to 1. Inside linear2 add LinearLayout linear4 (In linear4 we will add CropImageView). For linear4 set padding to 0. In linear1 add Button button_rotate , button_crop , and button_save . Inside linear3 add Button button_pick and button_images . Watch video below (Sadly the images are not working on blogger). 2. In onCreate , * make linear1 visibility GONE. * Put following codes in an add source directly block crp = new CropImageView(MainActivity.this); LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT); lp.setMargins(0, 0, 0, 0); crp.setLayoutParams(lp); crp.setScaleType(ImageView.ScaleType.FIT_CENTER); crp.setAdjustViewBounds(true);