Telerik blogs

ListView and SideDrawer in Q1 2015 of UI for Android

by Kiril Stanoev
February 27, 2015 Release 0 Comments


The Q1 2015 release of UI for Android is the next step in our quest to provide developers with common tools and practices for native mobile development.
This release adds 3 new controls to the suite: ListView, SideDrawer and DataSource.

ListView

The ListView control is an essential application building block for every platform. It’s what you first use to visualize your data. The Telerik ListView for Android supports all the major functionality inherent for such a control - handling large sets of data through UI virtualization, pull to refresh gesture to refresh the data source, load on demand to update the data source with new items, item selection, filtering, grouping, sorting of the view model, various layout strategies such as horizontal, vertical, wrapped and staggered lists, “swipe to execute”, item reordering, animations etc.

Group, Sort, Filter

Application data is the pipeline that delivers content to your application’s interface. The ListView enables quick reshaping of your app data (view model) through in-memory operations such as sorting, filtering and grouping. It all happens through a ListViewDatSourceAdapter that can take as many sort, group or filter descriptors as you need.

Load on demand

The “load on demand” feature is useful in scenarios where you have to keep your app responsive while working with large sets of data. This feature allows you to control the flow of data updates routed to the list through two “load on demand” modes - manual and automatic. When in manual mode, the ListView displays a special customizable item which resides at the end of the scrollable list. When this item is tapped an event is fired which can be used to feed more data to the list. 
In automatic mode, the ListView updates a listener when the user approaches the end of the scrollable list. In addition, the ListView allows to specify how many items before the end to trigger the event. 
Enabling manual and automatic mode can be done with just few lines of code.

Pull to refresh

The pull-to-refresh feature is in the family of “refreshing the data source” operations and as such allows you to refresh the data list through a simple swipe gesture. You can quickly enable it using the code below:

Have caution while enabling it though. As @cyrilmottier says:

“The ‘pull-to-refresh’ UI pattern is mainly dedicated to power users. I honestly don’t think it is as intuitive as a simple but clear “Refresh” button. Lots of developers use this UI pattern without thinking about their actual audience and how technophile they are. Most of the time a “Refresh” button would have been way easier to implement from a developer perspective and to use from a user point of view. I believe this is one of the -main reasons Apple never used it in any of their stock iOS applications.”

So keep in mind that you have to let your end users know that this functionality is enabled in your app.

Selection

If you have played with the native Android ListView you’d know how difficult it is to enable single and multiple selection. With the Telerik ListView for Android it is easy to provide support for both single and multiple selection.


 





Swipe to execute

The ListView supports the popular “swipe to delete” pattern made famous by apps such as Mail and Calendar. With this functionality you can enable quick actions to be performed on an item without wasting screen space. We hit an interesting case while preparing the API for this feature. What would be better?
  1. Have two properties, or placeholders, for the Left and Right content or 
  2. Have one content placeholder and give the developer the freedom to handle the swipe input himself. 
What do you think?


Reordering

Reordering items through a drag and drop gesture can be enabled by adding an ItemReorderBehavior to the list of behaviors.



Layout Strategies

You can use the built-in Android layout managers to specify how the Telerik ListView positions its items. You can use the LinearLayoutManager to show items in a vertical or horizontal scrolling list, the GridLayoutManager to show items in a grid and the StaggeredGridLayoutManager to display items in a staggered grid. For more advanced layout scenarios you can create a custom layout manager by extending the RecyclerView.LayoutManager class.

Header and Footer

The last major ListView highlight is the support for header and footer - special containers above and below the ListView which developers can use to give additional information (context) to the end-user. All you have to do is inflate the views you’d like to show and pass them to the setHeaderView and setFooterView methods of the ListView.

Let us know what you think about the control on the ListView forum section.

SideDrawer (beta)

If you have played with the native Android NavigationDrawer before then the Telerik SideDrawer would feel very familiar. For those of you who are new to the subject, the SideDrawer is a panel that slides on top of the main application screen and presents the app’s navigation. The goal of the control is to enable quick and easy navigation across all levels of your app.



 The Telerik SideDrawer can display any type of content and can be opened from any edge of the screen. A total of 11 predefined open/close animations can be used to further customize the control.

What’s missing at the moment is an automatic integration with the ActionBar. This feature will be available with the upcoming Service Pack.

Let us know what you think about the control on the SideDrawer forum section.

Calendar

The most requested feature since the official release of the Telerik Calendar for Android was to make it easier for developers to display device calendar events. In a blog post few weeks ago we announced that this feature request is coming so let’s quickly reiterate over the highlights.


Quick and easy setup

The default case of showing device events in the Telerik Calendar can be achieved with just few lines of code.

Display events only for a specific user

The developer can limit the events being displayed to a specific device user.

Display events from multiple calendars

The Telerik Calendar can display events from as many device calendars as necessary.

Support for custom queries

For advanced scenarios, the Telerik Calendar allows for executing custom SQL-like queries which gives developers greater control over the results.


Let us know what you think about the control on the Calendar forum section.

DataSource

The Telerik DataSource is a non-UI adapter that offers an easy way to sort, group and filter in-memory data. We’re in fact using the DataSource internally in the ListView. The DataSource is best used as a ‘hub’ where data is obtained, reshaped and sent to a view to be displayed. 

Our immediate plans for the next version of the DataSource is to provide support for JSON services.



Let us know what you think about the control on the DataSource forum section.

What’s next?

If you like what you’ve read so far, grab the bits from the download page, explore the documentation and play with the sdk examples. We rely on your input to better shape our roadmap so we’d love to see your ideas on the product’s feedback portal or forum section.

All controls that are now part of UI for Android and UI for iOS can be used in cross-platform frameworks such as NativeScript and Xamarin. The upcoming NativeScript Webinar will cover in great lengths this topic so make sure you sign up. Also check out what we have included in UI for Xamarin.

TelerikNEXT 2015

TelerikNEXT is a gathering dedicated to equipping customers, partners and the broader community with insight on the Telerik products. There will be a lot of sessions on native mobile development and how to best utilize the Telerik mobile tools so if you’re interested, visit http://www.teleriknext.com. 


Android, Data, Java, ListView, Release, SideDrawer, UI
About the Author

Kiril Stanoev

Hi, I'm Kiril and I'm the Product Manager of Telerik UI for Android, Windows Universal and Windows Phone. Feel free to ping me on +KirilStanoev or @KirilStanoev

Comments

Comments are disabled in preview mode.