Telegram Like Progress Bar Dialog in Sketchware Pro

 


This is a simple tutorial on how to make a telegram like progress loader in Sketchware Pro!


It only takes few minutes to do... Jest create a moreblock, name it “telegramLoaderDialog” Then add a Boolean variable with name “isVisible”.



Then create the moreblock. Open the moreblock and add a IfElse block. Then as the condition drag the “isVisible” boolean. Then inside the if statement, add a ASD (Add Source Directly) block and paste the following code.


=Code

_____________________________________________


if (core program == null){


coreprog = new ProgressDialog(this);


coreprog.setCancelable(false);


coreprog.setCanceledOnTouchOutside(false);


coreprog.requestWindowFeature(Window.FEATURE_NO_TITLE);  coreprog.getWindow().setBackgroundDrawable(new android.graphics.drawable.ColorDrawable(Color.TRANSPARENT));


}


coreprog.show();


coreprog.setContentView(R.layout.loading);


LinearLayout linear_base = (LinearLayout)coreprog.findViewById(R.id.linear_base);


LinearLayout back = (LinearLayout)coreprog.findViewById(R.id.background);


LinearLayout layout_progress = (LinearLayout)coreprog.findViewById(R.id.layout_progress);


android.graphics.drawable.GradientDrawable gd = new android.graphics.drawable.GradientDrawable(); 


gd.setColor(Color.parseColor("#FFFFFF")); /* color */


gd.setCornerRadius(45); /* radius */


gd.setStroke(0, Color.WHITE); /* stroke heigth and color */


linear_base.setBackground(gd);


RadialProgressView progress = new RadialProgressView(this);


layout_progress.addView(progress);

____________________________________________


After that on the else statement again add a new ASD block and paste the following code:


= Code

_____________________________________________

if (coreprog != null){

coreprog.dismiss();

}

_____________________________________________

Now at last outside the ifElse condition paste the last code:

=Code

____________________________________

}

private ProgressDialog coreprog;

{

_____________________________________________

So the moreblock has been made successfully! Now your block should look like this:


After that done. open the "view" section, and create a new Custom View with the name "loading". Then follow these steps:

i) Add a Linear (H) Layout, change the id to "background", set the height and width to "MATCH_PARENT" and set gravity to "CENTER_HORIZONTAL" and "CENTER_VERTICAL".

ii) Add another Linear (H) Layout inside the layout with id "background", set the id to "layout_base". set the width and height to "WRAP_CONTENT". 

iii) Now at last add another Linear (H) Layout with id  "layout_progress" and set the height and width to "65 dp".

Now your last step has arrived! it is simple... Download the   RadialProgressView.java   file by clicking the button below:

After downloading the file go to the "Java" section of the project by clicking the three dots on the top right. Then you can add the "RadialProgressView.java" file that you have downloaded now. 

 SUCCESS! Now you are set to go! you can use the moreblock on a button click event and set the boolean value to true then the progress bar will be visible!

 NOTE: if you are copy & pasting the file content of RadialProgressView.java, don't forget to change the package name to your app's package name, then only it will work.

 Got any Problem? just leave a comment, I will definitely help you!
Telegram Like Progress Bar Dialog in Sketchware Pro