Rating Bar Dialog (as a thank you extension)!

tutorial

#1

#A BIG THANK YOU!

Thanks to the Thunkable Community and the awesome team @thunkable, few days ago I received my certification as a Extension Developer. Today with the company of @Carlos_Pedroza, we want to share with you a guide-through to develop your own extensions.

#Rating Bar Dialog


##Description
Extension developed by Andres Cotes and Carlos Pedroza to display a dialog that shows a rating in stars. The user can touch/drag or use arrow keys to set the rating. This extension is based on ThaiCreate’s method and the Developer’s Android Reference about Rating Bar and AlertDialog Builder.

#Methods

  • Show: Method for displaying a Rating Bar in a Dialog. Parameters:
    String title - Text to be shown in the title of the Rating Bar Dialog.
    number numberStars - The number of stars shown in the Rating Bar.
    String acceptText - Text to be shown in the Accept Button.
    String cancelText - Text to be shown in the Cancel Button.
    number color - Specify the color of the stars when are selected.

    How it was made:

/**

  • Method for displaying a Rating Bar in a Dialog.
  • @param String title: Text to be shown in the title of the Rating Bar Dialog.
  • @param int numberStars: The number of stars shown in the Rating Bar."
  • @param String acceptText: Text to be shown in the Accept Button. "
  • @param String cancelText: Text to be shown in the Cancel Button."
  • @param int color: Specify the color of the stars when are selected."
    */
    @SimpleFunction(description = “Method for displaying a Rating Bar in a Dialog.”
  • " Parameters:"
  • " String title: Text to be shown in the title of the Rating Bar Dialog."
  • " number numberStars: The number of stars shown in the Rating Bar."
  • " String acceptText: Text to be shown in the Accept Button. "
  • " String cancelText: Text to be shown in the Cancel Button."
  • " number color: Specify the color of the stars when are selected.")

public void Show(String title, int numberStars, String cancelText, String acceptText, int color){
showRatingBar(title,numberStars,acceptText,cancelText,color);
}

public void showRatingBar(String title, int numberStars, String cancelText, String acceptText, int color){

//Creates a builder for an alert dialog with a material light theme (16974393)
final AlertDialog.Builder popDialog = new AlertDialog.Builder(context,16974393);

//Creates a new RatingBar and specifies the parameters: setNumStars, setStepSize, setRating
final RatingBar ratingBar = new RatingBar(context);
ratingBar.setNumStars(numberStars);
ratingBar.setStepSize(1);
ratingBar.setRating(numberStars);

//Creates the layout where the RatingBar will be and sets some of its parameters
LayerDrawable stars = (LayerDrawable) ratingBar.getProgressDrawable();
stars.getDrawable(2).setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
LinearLayout layout = new LinearLayout(context);
LayoutParams parameters =
new LinearLayout.LayoutParams(
LayoutParams.FILL_PARENT,
LayoutParams.FILL_PARENT);
layout.setLayoutParams(parameters);
layout.setGravity(Gravity.CENTER);
layout.addView(ratingBar);

//Sets the parameters for the dialog: Icon, Title and the view
popDialog.setIcon(android.R.drawable.btn_star_big_on);
popDialog.setTitle(title);
popDialog.setView(layout);

//Defines the accept Buton
popDialog.setPositiveButton(acceptText,
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
float rating = ratingBar.getRating();
AfterRating(rating);
dialog.dismiss();
}
})

//Defines the Cancel Buton
.setNegativeButton(cancelText,
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
AfterCancel();
dialog.cancel();
}
});

//Shows the Rating Bar Dialog
popDialog.create();
popDialog.show();
}

##Event Handlers

  • AfterRating: Event handler when the user chooses the Accept button, it returns the number of stars given by the user.

    How it was made:

/**

  • Event handler when the user chooses the Accept button.
  • @return Number of stars given by the user.
    */
    @SimpleEvent
    public void AfterRating(float value) {
    EventDispatcher.dispatchEvent(this,“AfterRating”, value);
    }
  • AfterCancel: Event handler when the user chooses the Cancel button.

    How it was made:

/**

  • Event handler when the user chooses the Cancel button.
    */
    @SimpleEvent
    public void AfterCancel() {
    EventDispatcher.dispatchEvent(this,“AfterCancel”, value);
    }

##Downloads
https://goo.gl/VXjmE3 .AIX: Link
https://goo.gl/Rc5rSk .JAVA: Link

##Changelog

  • Oct 27th, 2017 - First release.

##Helpful Links
We recommend to read the Developer’s Android Reference about Rating Bar and AlertDialog Builder.


Any example for visual extensions
Dialog background
#2

congratulations!
Taifun


#3

congratulations!


#4

Congratulations, @Andres_Cotes!!!


#5

Congratz! :smiley:


#6

How many types of themes can work in the inventors ?
And what is their code?


#7

Hello! You can check the documentation about it at:
https://developer.android.com/reference/android/R.style.html

Hope you share your findings!


#8

hey,

really nice extension :slight_smile:
but could you remove the automatically added star icon from the title? It does not fit the material design of my apps :see_no_evil: one recommendation: It would be nice if the “not selected” stars would still be visible with light grey background or something :wink:

cheers, Chris