Material Design and Search by the example of a reference application

Introduction

A few years ago I wrote an article on Habr about a math reference application for Android, which was my first development experience for GooglePlay. Today, looking back at my past habrapost and past version of the application, I get scared (to shudder just look at the first screenshot below). Over the past few years, much has changed: AndroidMarket has become GooglePlay with new rules and other things, new OS versions have been released, a certain general google-concept for the design of material-design applications has appeared, new development environments have appeared, and Habr has changed.

In this post we will talk about how to make your application material, add search to it, as well as some thoughts about what kind of advertising to use.


In general, the application has undergone several major design changes during its existence. A short story about how it changed is shown in the screenshots:


')

Material design

Of course material design. Where are without it now in the development of android? I had to get rid of many graphic resources, which at one time were so carefully drawn, but nothing could be done, they did not fit into the concept of material design - they were too non-minimalist. For example, sidebar icons:



With asset icons for different screens, asset studio helps in working with resources, in which, among other things, there are also quite good long shadow and dog-ear effects. In general, asset studio is a great designer that will save a lot of time when working with resources. Also with the help of asset studio new material-icons were made for the purchase of beer and social interaction:




If beer is purchased, then sold out will appear in the lower right corner:



The application icon has also undergone some changes, here I had to open Photoshop and draw:



The most difficult thing is over, we will not talk about graphic resources anymore.

Now we will create several themes for our application and add a FloatingActionButton. In the values ​​/ project folder in the themes.xml file, we will describe two themes for our Light and Dark application:


About what colorPrimary, colorPrimaryDark, colorAccent is well written here and here . But what these topics look like in the application:



I’ll tell you how to apply the theme to all the activities of your application at once. To do this, you need to make the BaseActivity inherited from ActionBarActivity (it does not need to be declared in the manifest and create an xml markup file for it). In the onCreate () method of this activity, we call setTheme () depending on the user's choice in the application settings:


Well, all the other activities of our application, we will inherit from BaseActivity:



When selecting color combinations for a theme in the material style, the materialpalette.com resource can be a great help, offering a full color palette for the theme in two main shades of your choice.

TextDrawable library is great for adding circular icons with text in each list item , which is easy to use and allows you to create not only circular icons of the same type (as in the screenshots), but also icons of different shapes, colors, fonts and even add animation for them.


Floating Action Button (further we will call it fab) should bear in itself the main function of the application. In the reference application, this is of course a search. So clicking on the button will drop SearchView. In order for the fab to scroll down / up beautifully disappear / appear in the list, I recommend using the FloatingActionButton library.


This work on the materialization of application interfaces ends.

Search

Since the contents of the directory are stored in different html-files, in order to make a quick search on them you need:

• Work with the html files themselves - add anchors to each place where the user will go when entering this or that request.
• Use the virtual FTS table (what is it you can read here (English) and here (in Russian) . In short, the FTS allows users to perform full-text searches on multiple documents).

The table contains two columns. The first column (KEY_INPUT) is a list of all section titles and terms contained in the directory, in other words, this is a list of possible user requests. The second column (KEY_ANKER) is a list of html files with anchors (ie, files and positions in these files) corresponding to these requests. As with all other SQLite tables, both virtual and normal, data from FTS tables is obtained using SELECT queries:

 String query = "SELECT docid as _id," + KEY_INPUT + "," + KEY_ANKER + " FROM " + FTS_VIRTUAL_TABLE + " WHERE " + KEY_INPUT + " MATCH '" + inputText + "';"; 

When you enter a text query, the FTS table is searched and options are provided to the user in the drop-down list. When you select a transition to the desired section on the corresponding anchor. The principle is shown in the figure below:




1 . The user enters the search query "data2" in SearchView. The SearchViewer calls the searchAnker () method of the SearchDbAdapter class, which returns a cursor (mCursor) containing queries similar to the entered text and the corresponding html files with anchors:
data2 request 3 - file1.html # an3
data2 request 4 - file2.html # an4
2 Similar requests contained in mCursor are displayed in the drop-down list: data2 request 3, data2 request 4.
3 When clicking on the elements of the drop-down list, the ViewActivity is launched, to which the corresponding html-file name with the anchor from mCursor is transmitted with an intent: file1.html # an3

Advertising and hidden features of the application

Do you need it, advertising? It spoils the interface, and so much time and effort is spent to make it beautiful. Now you can earn something from advertising either with millions of active users, or from aggressive banner advertising that works like this:

• the user downloads an update into which the advertising library is integrated;
• stage of waiting, so that the user, at the moment of the beginning of the most interesting, does not immediately understand why this happens;
• The most interesting thing is that the user has, on top of all interfaces in other applications, huge advertising banners pop up on the full screen, not clicking on which is a difficult task.

Of course, such an advertisement, to put it mildly, very few people like it. I have long ago refused any advertising in the directory, and more, perhaps, of interest, I added the usual donat - buying beer in the app.



Buying beer is easily realized using In-app Billing . To simplify the implementation of billing, there are libraries about which more than once was written on Habré here and here .

In order to somehow revive our Activity with a donate, a small Easter egg has been added. When you click on any area of ​​the screen in the lower right corner Android will appear, reflecting on the beer.



Here is the creativity. Perhaps if Jimmy Wales appeared in the lower right corner of the beer would be poured river .