Skip to main content

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;

android.text.style.ForegroundColorSpan fgSpan = new android.text.style.ForegroundColorSpan(Color.RED);

android.text.style.BackgroundColorSpan bgSpan = new android.text.style.BackgroundColorSpan(Color.YELLOW);

* 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(android.text.style.CharacterStyle.wrap(fgSpan), (int)index, (int)index + term.length(), 0);

spannable1.setSpan(android.text.style.CharacterStyle.wrap(bgSpan), (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(android.text.style.CharacterStyle.wrap(fgSpan), (int)index, (int)index + term.length(), 0);

spannable2.setSpan(android.text.style.CharacterStyle.wrap(bgSpan), (int)index, (int)index + term.length(), 0);

* Set spannable1 as text of textview1 and spannable2 as text of textview2.
textview1.setText(spannable1);
textview2.setText(spannable2);

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

The video below shows the Sketchware project:


Labels:

Comments

Post a Comment

Popular posts from this blog

Create Music Player app in Sketchware

To create a Music Player app in sketchware, follow the steps given below. 1. Create a new project in Sketchware. 2. In VIEW area on main.xml, add a ListView  listview1  with height wrap_content, and weight 1. Add a SeekBar  seekbar1 , an ImageView  imageview1 , and three TextViews  textview1 ,  textview2 , and  textview3 , as shown in the image below. 3. Create a CustomView  mycustom.xml  and add a TextView  textview1 , and an ImageView  imageview1  in it. For listview1 select mycustom.xml as it's customView. 4. Add a MediaPlayer component  mp , a Shared Preferences component  sp:sp  and a Timer component  timer . 5. Create six More Blocks  MPcreate(pos), MPstart , and  MPpause  for the MediaPlayer and  searchFolders ,  getFileList in [filePath]  and  extra . 6. Add three number variables  n, r  and  songPosition , and five String variables  currentfile ...
1 comment
Read more

Admob rewarded video Ads in Sketchware

To integrate Admob Rewarded Video Ads to a Sketchware project, follow the steps given below. Prerequisites An Android project (Sketchware project) Account in Admob Always place the test ad unit ID before placing your ad unit ID. App ID and ad unit ID can be obtained by registering the app on Admob. But for using test ads no registration is required. Do not click on your own Ads. 1. Create an android project in Sketchware. 2. Add the app to your Admob account. For your app, generate an ad unit ID for Rewarded Video Ads. 3. In Sketchware project, navigate to  Library Manager  and open Admob settings. i. Click on Add manually and add the ad unit ID generated on Admob website, or use test ad unit ID ca-app-pub-3940256099942544/5224354917. ii. If you are not using any banner or interstitial ad units, select the same ad unit ID for both banner and interstitial ads. iii. Add Test Device automatically shown by Sketchware. iv. Save it. v. Switch ON Admob and AppCompat and design. ...
1 comment
Read more

Firebase auth in Sketchware for Login Activity

To create a login activity using Firebase Auth in Sketchware, follow the steps given below. This method uses Firebase authentication service for creating login. 1. In your Firebase account, go to Firebase authentication. 2. In Firebase authentication web set-up, go to SIGN-IN method, and enable Email/password and Anonymous. 3. Go to Project settings in your Firebase project and copy the Web API Key, Project ID, and App ID. 4. Paste the Project ID, App ID, and Web API Key in your project in Sketchware, in the Firebase settings. 5. On the  MainActivity  page add a File Shared preferences component  user:user  and an Intent  i . Also add a Timer  t  and a Firebase Auth  testlogin . 6. Create a new page  login.xml  with Activity called  LoginActivity . 7. In  onCreate  event of MainActivity use blocks as shown in image below. It identifies main page with  File user key page . It also checks if user is logged in to  F...
Post a Comment
Read more