Fork me on GitHub

Google Keep Style Checklist

Posted on 24 February 2015
Under Blog
Tagged
Android
Google Keep Style Checklist | Jay Rambhia’s Blog

I have been working on a Notes application for quite some time now. One of the essential notes are checklists. Google Keep has really nice implementation of checklist note. So taking inspiration from the layout, I tried making my own checklist.

I tried a lot of things. I added EditText in ListView (ArrayAdapter) and added TextWatcher to every edittext and removed the appropriately but it would just not work. I tried the same thing with RecyclerView, it worked better than ListView but still it was not at all functional. The only possible way that I could think of was having a LinearLayout and adding EditText one by one. It worked. It worked out quite well. I stuck to it.

My Strategy

I created a custom EditText with easy approach to add and remove TextWatcher. I created a custom class extending LineraLayout which would hold CheckBox, EditText and a button to remove the entry. In the Activity, I kept an array which would hold all these views and get me data when needed.

How It Works

  • A new view (checkbox and edittext) is added on start. This view is assigned state as STATE_LAST as it is the last item in the array. When the user enters the first character, a new view is added at the bottom and also in the array. The new view gets the state as STATE_LAST and the current view gets the state as STATE_SECOND_LAST.

  • If the user removes all the text from this view (i.e. STATE_SECOND_LAST), the last view is removed and this view’s state is changed to STATE_LAST. Repeat first step.

  • Let’s assume that user has entered the text and moves to the next edittext. The next view will have STATE_LAST state. Repeate first step. Here, if you have more than 2 views, view with STATE_LAST state gets assigned the STATE_SECOND_LAST state and the view with STATE_SECOND_LAST state gets assigned the STATE_OTHER state.

  • If you change something in the edittext with state STATE_OTHER, nothing much happens. You just have to take care of all the views’ state while adding or removing new views.

Screenshot

Here’s a sample screenshot of the app.

Screenshot

As you can see I have just implemented the part where users can add checklists. Checking an entry and adding to other layout is the next thing on the checklist. Bad pun.

Code

Here’s the main class which takes care of states.

Demo Application

I have started to learn MVP pattern for Android. Model-View-Presenter. Activity/Fragment is treated as view. Most of the logic is implemented in Model and Presenter. Presenter is the communication link between Model and View. You can fork the project here - CheckListDemo

P.S. I have been learning a lot of new things about Android Development and you’ll be bugged to see more posts.

If you liked - Google Keep Style Checklist and found it helpful, please share it with your fellow developers.

comments powered by Disqus


If you have some feedback or questions regarding this post, please add comments. I'd be happy to get some feedback.



If you liked this post, then you should follow Jay on twitter too. He would be excited to know that you like his work.