Find and Highlight text in ListView

Follow the steps given below to find and highlight text, entered in EditText, in a custom  ListView  in Sketchware. This method makes the use of class Spannable.

1. In VIEW area of your sketchware project, add an EditText and a ListView (edittext1 and listview1).

2. Add a new CustomView custom.xml. In this CustomView add two TextViews (textview1 and textview2).

3. Now in properties of ListView, select the new CustomView added as it's customView.

4. In LOGIC area of your app, add a new List Map: maplist1., and a new Map: map1. Also add a Number variable index and three String variables Name, Number and term.

5. In onCreate event in your project,
Create a new Map, add items to the Map using keys Name and Number (change or increase keys per your need), and add the Map to the List Map: maplist1. In this way add as many items as desired. In the end use Block setListCustomViewData to display the List Map in ListView. (See image below).

6. Add a new event​ ListView: onBindCustomView and a new event EditText:onTextChanged.

7. In event EditText: onTextChanged, set String term to CharSeq and refresh ListView.

8. In event ListView: onBindCustomView
use blocks and codes as shown in image below.

* First use an add source directly block to declare spannable1 and spannable2 and define fgSpan and bgSpan.
Spannable spannable1;
Spannable spannable2; fgSpan = new; bgSpan = new;

* Then set String Name to key Name of Map List, and set String Number to key Number of List Map maplist1.

* Use another add source directly block to define spannable1 and spannable2.
spannable1 = new SpannableString(Name);
spannable2 = new SpannableString(Number);

* Use an if..then.. block. If String Name contains String term,
set Number index to index of term in Name, and setSpan of spannable1 with fgSpan and bgSpan.
spannable1.setSpan(, (int)index, (int)index + term.length(), 0);

spannable1.setSpan(, (int)index, (int)index + term.length(), 0);

* Use another if..then.. block. If String Number contains String term,
set Number index to index of term in Number, and setSpan of spannable2 with fgSpan and bgSpan.
spannable2.setSpan(, (int)index, (int)index + term.length(), 0);

spannable2.setSpan(, (int)index, (int)index + term.length(), 0);

* Set spannable1 as text of textview1 and spannable2 as text of textview2.

9. Save and run the project to see and search the Custom ListView.

The video below shows the Sketchware project:


  1. Hi sanjeev

    Good woork❤ !💪🏻💪🏻

    i have an question for you please

  2. Visit my website perfect Login With Email Verification

  3. I am new to stketchware...

    My issue is ... there is 6 edittext and a submit button in my project..
    submit button checks all edittext if it is empty then shows message...
    My question is how to stop activity and stay on same page, if first edittext found empty....? submit button should not check all edittext, if there is error in first edittext...

    1. WhatsApp me - I'll make an example for you - 07037800776


Post a Comment

Popular posts from this blog

A Flash Light App in Sketchware

Create Music Player app in Sketchware

In Sketchware: How to create a calculator for any simple formula?

Simple car racing android game in Sketchware

Firebase auth in Sketchware for Login Activity