Tallan's Technology Blog

Tallan's Top Technologists Share Their Thoughts on Today's Technology Challenges

Android Letter Section ListView

Nick Rubino

A recent project required me to create an Android ListView looking like the “out of the box” IOS ListView which separates the items by letter and has the letter at the top of each letter section (IOS example below):

Since there is no switch in Android Development to just turn this feature on, I created a generic library that can be customized and themed to fulfill these needs. This library can be pulled from our GitHub repository.

Tutorial

Once you pull the library from github follow these steps.

  1. Create the object that will be displayed for each item in the list view.
  2. Have this object extend the abstract class LetterSectionListItem.
  3. Implement abstract method getUniqueId(). This should just pass back what every the primary key is for the object.
  4. Implement abstract method calculateSortString(). This is where you put string manipulation logic to find the letter you want to sort the object by. Also make sure you set the Sort String in this method calculateSortString().
    public class Book extends LetterSectionListItem{
    
    	private int bookId;
    	private String bookName;
    	private String authorFirstName;
    	private String authorLastName;
    
    	//Getter and Setters here
    
    	@Override
    	public int getUniqueId() {
    		return bookId;
    	}
    
    	@Override
    	public void calculateSortString() {
    		String sortString = "";
    
    		if (bookName.toUpperCase().startsWith("THE ")) {
    			sortString = bookName.toUpperCase().replaceFirst("THE ", "").trim();
    		} else if (bookName.toUpperCase().startsWith("A ")) {
    			sortString = bookName.toUpperCase().replaceFirst("A ", "").trim();
    		} else {
    			sortString = bookName.toUpperCase().trim();
    		}
    
    		sortString += (authorLastName.trim() + authorFirstName.trim());
    
    		setSortString(sortString);
    	}
    }
    
  5. In the activity or fragment initialize a LetterSectionListAdapter.
  6. Pass the view id into the constructor of the LetterSectionListAdapter (line eight).
  7. Call the super.getView(..) on the first line of the getView() function (line 12).
  8. Use the view passed back from super.getView() to find subviews and set the display data.
        private void createBookList(){
            List books = createBooks();
    
            //Find the list view in my activity
            ListView bookListView = (ListView) findViewById(R.id.booklistview);
    
            //Using custom booklist_row view that the header will be wrapped around
    		LetterSectionListAdapter bookListAdapter = new LetterSectionListAdapter(this, R.layout.booklist_row, books) {
    			@Override
    			public View getView(int position, View v, ViewGroup parent) {
    				//Must call this before to wrap the header around the view
    				v = super.getView(position, v, parent);
    
    				TextView bookTitle = (TextView) v.findViewById(R.id.book_title);
    				TextView authorName = (TextView) v.findViewById(R.id.author_name);
    
    				Book book = (Book) this.getItem(position);
    
    				bookTitle.setText(book.getBookName());
    				authorName.setText(book.getAuthorLastName() + ", " + book.getAuthorFirstName());
    
    				return v;
    			}
    		};	
    
            bookListView.setAdapter(bookListAdapter);
        }
    
  9. To theme the header all you need to do is put a LetterSectionListItem style in your styles.xml.
    
    


There is sample project included on the GitHub repository to play around with.

Hope this helps,
Nick

Tags: Android, Mobile,

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>