How to find and​ highlight a word in a text field in Sketchware?

We can highlight a particular searched character sequence in a TextView or EditText field or any other text field by using Spannable.

To use Spannable class to highlight a searched text in Sketchware Android Project, follow the steps given below.

1. In VIEW area of your project, add an EditText field (edittext1) which will act as input field for search term.
Add a TextView (textview1) which will display the number of results found.
And add another TextView (textview2) or EditText (edittext2) field which will contain the text in which the word is to be searched.

2. In LOGIC area, in onCreate event set the text to be searched in TextView field.

3. If you want the app to search from any text added by user, use EditText instead textview2 in step no.1 and do not set the text in onCreate.

4. Add a new String variable text. Add three number variables total, len and y.

4. Add a new event edittext1 onTextChanged.

5. In the event edittext1 onTextChanged, use blocks in sequence given below.

a. Set string text to the contents of textview2/edittext2.

b. Add an add source directly block and add following code:
Spannable spannable1 = new SpannableString(text);
android.text.style.ForegroundColorSpan fgSpan = new android.text.style.ForegroundColorSpan(Color.RED);
android.text.style.BackgroundColorSpan bgSpan = new android.text.style.BackgroundColorSpan(Color.YELLOW);

Note that here spannable1 is a new SpannableString created from the String text. This code also defines a foreground color and a background color.

c. Set number variable len to length of charSeq, set y to 0, and set total to 0.

d. Next, use an If..then.. control block to add if text contains charSeq and len>0.

Inside this If..then.. block, use following blocks:

 i. Use a repeat block to find how may times the searched character sequence exist in the string text. The result is returned as number variable total.
The block codes to be used are:
repeat ((lenth of text) - len + 1)
If (text substring y to y+len) equals charSeq
y increase1
total increase1
else
y increase1

ii. Use an add source directly block to add following code:
int x = 0;

iii. Use repeat block. Repeat number variable total times. Inside this repeat block use an add source directly block to add following code:
int n = text.indexOf(_charSeq.toString(), x);
x = n+1;
spannable1.setSpan(android.text.style.CharacterStyle.wrap(fgSpan), n, n + _charSeq.length(), 0);
spannable1.setSpan(android.text.style.CharacterStyle.wrap(bgSpan), n, n + _charSeq.length(), 0);

e. Now outside the outermost if..then.. block, add an add source directly block to add following code:
textview2.setText(spannable1);

f. In the end set the text of textview1 to the number variable total.
6. Save and run the project. Now you can search any text in textview 2.

The video below shows the same:

Comments

  1. Would you make tutorial on how to create school timetable complete with notification..? :)

    ReplyDelete
  2. What is the reason for this message that appears when I want to save the app



    Error in /storage/emulated/0/.sketchware/mysc/634/app/src/main/com/my/
    Newprojet29/MainActivity. Java (line 83)
    Int = text.indexOf(_charSeq, x);

    The method indexOf(int, int) in the tybe String is not applicable for the argument (CharSequence, int)
    -----------
    1 problem (1 error)

    ReplyDelete
  3. What is the reason for this message that appears when I want to save the app



    Error in /storage/emulated/0/.sketchware/mysc/634/app/src/main/com/my/
    Newprojet29/MainActivity. Java (line 83)
    Int = text.indexOf(_charSeq, x);

    The method indexOf(int, int) in the tybe String is not applicable for the argument (CharSequence, int)
    -----------
    1 problem (1 error)

    ReplyDelete
  4. how can i make a sentence from my book app to be highlighted to serve as a bookmark? help please.

    ReplyDelete

Post a Comment

Popular posts from this blog

Simple car racing android game in Sketchware

Creating a Drawing View in Sketchware

Enable Fullscreen for Youtube videos in WebView

How to enable upload from webview in Sketchware?

List of Calendar Format symbols valid in Sketchware