Android Tutorial How they do... #3

How do they... ? #3​

<Version française/french version>

This third tutorial returns to the interface of PlayerPro of BlastOn LLC. We are going to reproduce the artists list and the operation of the customized views of the equalizer. We are also going to add the drag & drop functionality to the tabs bar and deport the ScrollPanel display.

This article assumes that you already know the bases of the development with B4A and that you have read the first two tutorials.

Second part: the artists list



We saw in the previous tutorial how to reproduce the general layout of the application. I'm going to focus this time on the creation of the artists list. It has a noticeable feature: by clicking on the artist, you can expand a list of albums below. In the Android API, this view is a ExpandableListView that we can reproduce easily with the class CheckList.

In the first tutorial, I showed you how to make a mask for an item in the designer and how to load it into the application. I am not going to use this method here because I need maximum speed. You should know that loading a .bal file with LoadLayout is very slow. I timed both methods (loading views created in the designer vs. creation in the code) in several projects and the difference varies from 5 to 7 depending on the project. In this case, my device (a Huawei Honor with a single core 1.4 Ghz) takes 35 seconds to build 1000 entries in the artists list with the first method (loading views created in the designer) and only 5 with the second (creation in the code). So, I advise to avoid using LoadLayout in a loop. That said, you can still use the designer to make models (the visual model helps you to choose the right values for the view properties, in particular Left, Top, Width and Height).

Model for an item of the artists list:


Before creating the views, I have to modify the events handler (cf. previous tutorial) to call my new function CreateArtistList:

In CreateArtistList, I start by loading the static images in memory, that is to say, the images that are not specific to an item (the background image, the icon indicating that an extension is possible and the icon after extension). This will avoid having to read files for each created item. This ensures also there is only one copy of these images in memory:
These three BitmapDrawables have been declared in Globals.

Next, I create the ScrollView holding the list and allowing to scroll it:
Then I create the list itself:
The ScrollView and the list have been declared in Globals:

To reproduce the custom appearance of the PlayerPro list, I cannot leave the appearance management to the class (by default, it does not support the extension indicators). I let it know that I take control by setting the OnPaint listener:
Then I create the event handler:

From now on, whenever an item in the list will change state, I will be informed and I can change its appearance accordingly. I have to manage at least three states:
0 (default): the item is not pressed or extended
4 (pressed): the user just pressed the item
1 (extended): the item has been extended (we will see later how to fill the extension)

I don't forget in CreateArtistList to set the color of the divider separating items:

To fill my list, I need a function creating items:
It is in this function that I avoid to use LoadLayout. All views are created and set in the code.

My function calls another function, Ellipsize, which adds an ellipsis if the artist name is too long:

I fill my list using CreateArtistItem. Example:
I finish my filling with:

What remains is the case of extensions. I indicated while I initialized my list that I wanted to handle the OnClick event. I write the handler:
This handler creates an extension when the item has been clicked and removes the extension if the item already has one.
The extension is filled with AddAlbumItems which will not be detailed here. This function uses a CreateAlbumItem function which is very similar to CreateArtistItem.

Result:


Third part: the little extras

The PlayerPro interface has two characteristics that we are going to reproduce: the ability to change the order of buttons on the tab bar by a long click and the display of the first letter of the artist name when using the fast scroll handle.

The ActionBar class that I used for the tabs has a drag & drop feature. I just have to implement it.
I start by changing the initialization of my buttons to indicate that I want to handle long clicks (no need in this case to have custom handlers, all buttons can have the same). Example:

I write the long click handler:
And the function called after the button is dropped:
The class redraws the button background when the operation ends. So I have to reload the 9-patch with bright color (cf. the second tutorial) if the button is the selected tab.

Drag & drop in action:


Now, let's see the fast scroll handle. We want it to display the first letter of the artist name in a separate label. That is quite easy with the ScrollPanel class. I declare this class and the Label in Globals:
I initialize my class in CreateArtistList:
I initialize the Label and I place it in the center of the screen:
Then I request the display of the first letter for each item:

Problem: the first letter is displayed on the ScrollPanel instead of the Label and the Label is displayed permanently. To remedy that, I add in CreateArtistList:
Then I create two event handlers that change the visibility and content of the Label:

Et voilà:


Note: I initialized the ScrollPanel without activating its cache. This is not a problem here because the list is small, but if your list contains more than a hundred of items, I urge you to turn it on. Disadvantage: you will have to call RefreshCache each time you change the content or order of the list (which in this case should not happen).

Fourth and last part in the next post...