Automatic text switching using ViewFlipper in Sketchware
1 minute read
In Sketchware, to display a list of sentences one by one by automatically switching to next sentence every few seconds, follow the steps given below.
1. In Sketchware project, in main.xml add a LinearLayout linear1, with width and height as MATCH_PARENT. Set a beautiful image as background of linear1.
2. Add a CustomView customview.xml. In this add a TextView textview1, with text size 40, width and height MATCH_PARENT, and gravity center_horizontal, center_vertical.
3. Add a String List string_list.
4. In onCreate, one by one add sentences to this list.
5. After adding items to string_list, use add source directly block and put following code in it.
ViewFlipper viewFlipper = new ViewFlipper(this);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(20, 20, 20, 20);
layoutParams.gravity = Gravity.CENTER;
viewFlipper.setLayoutParams(layoutParams);
viewFlipper.setFlipInterval(3000);
viewFlipper.setAutoStart(true);
viewFlipper.setInAnimation(this, android.R.anim.slide_in_left);
viewFlipper.setOutAnimation(this, android.R.anim.slide_out_right);
linear1.addView(viewFlipper);
The code above creates a new ViewFlipper, sets it's LayoutParams, sets it's FlipInterval, sets it's in and out animation, and adds it to linear1.
6. After this add another add source directly block and put following codes.
for (String text : string_list) {
View custom = getLayoutInflater().inflate(R.layout.customview, null);
TextView textView = custom.findViewById(R.id.textview1);
textView.setText(text);
viewFlipper.addView(custom);
}
The code above creates a View custom from CustomView customview for each String text in String list string_list. Then for each position, it gets the TextView from custom and sets it's text to the String from string_list.
7. Save and run the project. You will see the texts automatically flipping every 3000 milliseconds.
To add custom fonts to the textView, add a custom font using font manager and add set it as typeface of the TextView created in point 6 above by modifying the code as shown below.
for (String text : string_list) {
View custom = getLayoutInflater().inflate(R.layout.customview, null);
TextView textView = custom.findViewById(R.id.textview1);
textView.setTypeface(Typeface.createFromAsset(getAssets(), "fonts/cac_champagne.ttf"), 0);
textView.setText(text);
viewFlipper.addView(custom);
}
This is a simple ViewFlipper with only texts.