Databases in Android Apps

Mobile form containing data from database

Mobile form containing data from database

After the description of all the Layout issues, I had to struggle with while developing my first Android App ‘Fitness Manager’, this time I want to write about databases in Android Apps. The Layout of the ‘Fitness Manager’ App had to be filled with data, statistics and life.

The integration of a database in Android Apps is very simple and easy. The developer just needs to implement a Java subclass that overwrites the functions onCreate and onUpgrade of the SQLiteOpenHelper API. In order to access the subclass an object of the subclass has to be instantiated.

Java subclass extending SQLiteOpenHelper

Java subclass extending SQLiteOpenHelper

Finished 🙂

No but almost. Now tables have to be created, deleted and filled with values. Many database operations can be handled in different ways with SQLiteOpenHelper.

  1. Create a table by just executing a SQL command.

    SQL command: Create table

    SQL command: Create table

  1. Delete a table by just executing a SQL command.

    SQL command: Delete table

    SQL command: Delete table

  1. Insert an entry into a table by just executing a SQL command.

    SQL command: Insert table entry

    SQL command: Insert table entry

    Insert an entry into a table by using SQLiteOpenHelper API. The function getWriteableDatabase has to be called in the beginning of the operation when putting entries into databases.

    SQLiteOpenHelper: Insert table entry

    SQLiteOpenHelper: Insert table entry

  1. Updating an entry of a table by using SQLiteOpenHelper API. The function getWriteableDatabase has to be called in the beginning of the operation when putting updating entries of databases.

    SQL command: Update table entry

    SQL command: Update table entry

  1. Delete an entry from a table by just executing a SQL command.

    SQL command: Delete table entry

    SQL command: Delete table entry

  1. Selecting a single row entry from a table of the database by using SQLiteOpenHelper. The function getReadableDatabase has to be called in the beginning of the operation when selecting entries from databases.

    SQL command: Select single row entry from table

    SQL command: Select single row entry from table

  1. Selecting multiple row entries from a table of the database by using SQLiteOpenHelper. The function getReadableDatabase has to be called in the beginning of the operation when selecting entries from databases.

    SQL command: Select multiple row entries from table

    SQL command: Select multiple row entries from table

These are the most convenient operations and functions for implementing databases for Android App devices.

In order to receive the data of the database in a virtual Android device of Android Studio, the AVD Manager can be used. The AVD Manager can be found within Tools – Android – AVD Manager or you just click the corresponding ImageButton in the Toolbar of Android Studio.

AVD-Manager in Android Studio Toolbar

AVD-Manager in Android Studio Toolbar

Within the AVD Manager the developer has to switch to the File Explorer tab. After selecting the virtual device in AVD Manager, the database can be found in data/data/<package_name>/databases/<db_name>.db. The database file can be pulled from virtual device by using the small ImageButton in the right top corner of the AVD Manager.

AVD-Manager FileExplorer

AVD-Manager FileExplorer

In order to receive the data of the database in a real device, the ADB Terminal has to be used. The data of a real device is not accessable with the AVD Manager of the Android Studio. The ADB can be found in the folder /Android/sdk/platforms-tools. Most often this directory is located in the user directory. A terminal must be opened at this directory and the PULL command is executed for ADB.

ADB-Terminal

ADB-Terminal

The data of the database can be verified using the SQLiteManager of Firefox. This tool can be found within Firefox – Extras.

That’s it. Sweet.

If you have any questions, any improvement suggestions for the implementation (I mentioned that this is my first Android App) or any improvement suggestions for my English, I really would appreciate if you can leave me a comment.

And I would even more appreciate if you like to check out the ‘Fitness Manager’ App in the Google Play Store or the ‘Fitness Manager’ App in the iTunes Store. See you.

Follow us on

Facebook
Twitter
Google Plus

TabHost in Android Apps

TabHost displaying statistics in Android device

TabHost displaying statistics in Android device

The ‘Fitness Manager’ App provides several statistics for the user in order to check the workout progress. The different statistics should be displayed in a TabHost. A TabHost is a container for a tabbed window view. The TabHost holds two children. One child contains a set of tab labels that the user clicks to select a specific tab. The other child contains a FrameLayout object that displays the contents of that page. The TabHost integrated in the Fitness App should meet the following further requirements:

  • Every tab displays a button bar which contains a different amount of buttons depending on the selected tab.

  • Every tab contains an area where the corresponding statistics are plotted.

First I had to define the XML Layout for the TabHost in a XML Layout file. In Android Studio the container for TabHost is provided in the palette of the Android Studio designer. The TabHost can be simply inserted in an empty activity by drag and drop.

When integrating the container for TabHost, first the TabHost itself is defined in the XML Layout definition. The TabHost contains a RelativeLayout of the same size.

TabHost XML Layout definition

TabHost XML Layout definition

The RelativeLayout of the TabHost contains the definition of a TabWidget. The TabWidget displays a list of tab labels representing each page in the parent’s tab collection. The container object for this widget is TabHost. When the user selects a tab, this object sends a message to the parent container TabHost, to tell it to switch the displayed page.

TabWidget XML Layout definition

TabWidget XML Layout definition

The XML Layout definition for TabWidget contains the attribute android:id set to the value @android:id/tabs. This value cannot be changed and therefore the TabWidget cannot be accessed programmatically by using the function findViewbyId.

Additionally the RelativeLayout of the TabHost contains a FrameLayout. The FrameLayout is used for displaying the content of the TabHost.

FrameLayout XML Layout definition

FrameLayout XML Layout definition

The XML Layout definition for FrameLayout also contains the attribute android:id. The value for the attribute android:id is set to the value @android:id/tabs. This value cannot be changed either and therefore cannot be accessed programmatically by using the function findViewbyId. For every tab added to the container TabHost a LinearLayout is defined in the XML Layout definition of the FrameLayout. There you have the base frame for a TabHost. Now the LinearLayouts in the FrameLayouts can be filled with view elements like every other convenient view. GridLayouts or LinearLayouts can be inserted into the LinarLayout for ButtonBars or mobile forms. ImageViews, ScrollViews or ListViews can also be embedded by the LinearLayouts of the FrameLayout.

After finishing the XML Layout definition of the TabHost, the TabHost has to be instantiated programmatically in the onCreate method of the corresponding activity. The TabHost instantiation includes the definition of the single tabs. The tab of a TabHost has a tab indicator, content and a tag that is used to keep track of it. After declaring objects for every tab, the content of the tab is assigned by specifing the id of the corresponding view and the label is set as tab indicator.

TabHost instantiation

TabHost instantiation

In order to handle the user input action, when a different tab is selected, a setOnTabChangedListener must be implemented in the onCreate function of the corresponding activity. In this Listener the content of the selected tab can be set.

TabHost: setOnTabChangedListener

TabHost: setOnTabChangedListener

Now the basic implementation of the TabHost is finished.

But if your app should resize the content of the TabHost depending on the Android device or the orientation of the Android device, then you have to implement a runnable with post functionality. There the content of the tab must be accessed and the tab must be resized, which cannot be handled easily by calling findViewbyId as I already mentioned. The content of the tab can only be accessed via the container TabHost by host.getTabContentView().getChildAt(int i). The same access point is valid for the TabWidget of the TabHost: host.getTabWidget(). getChildAt(int i). Then for example the LayoutParams of the TabWidget or the content of the TabHost can be set.

TabContent LayoutParams definition

TabContent LayoutParams definition

Last issue I want to point out concerning TabHost is the Android device orientation. If the user rotates the Android device while displaying a TabHost in an App, then the tab is always set to the first tab of the TabHost with every rotation, no matter which tab was selected previously to the screen rotation. In order to solve this issue I did overwrite the function onSaveInstanceState of the activity and saved the current tab value.

Activity onSaveInstanceState implementation

Activity onSaveInstanceState implementation

Therefore I could access the savedInstanceState now in the onCreate and onConfigurationChanged functions of the activity and set the tab selected previously to a screen rotation.

Activity access of savedInstanceState

Activity access of savedInstanceState

And done 🙂

If you have any questions, any improvement suggestions for the implementation (I mentioned that this is my first Android App) or any improvement suggestions for my English, I really would appreciate if you can leave me a comment.

And I would even more appreciate if you like to check out the ‘Fitness Manager’ App in the Google Play Store or the ‘Fitness Manager’ App in the iTunes Store. See you.

Follow us on

Facebook
Twitter
Google Plus

Mobile forms for Android Apps

Mobile form for Android device

Mobile form for Android device

I think there might be better and easier ways to implement these kind of mobile forms for an Android App because mine seems to me relative complicated and error-prone. Despite I want to share with you my implementation experiences, maybe my readers can leave me better solutions in the comments section and I can grow and learn.

First of all I start with the Layout implementation. LinearLayouts and GridLayouts I did already use for the Layout of the start screen in the Fitness Manager App. The GridLayout contains the raw design definitions for the mobile form. The fine tuning of the design is handled again by LinearLayouts using the layout attributes layout_sum and layout_weight. Additionally to the XML Layout definition the items of the View must be adapted to the display size of the Android device programmatically in the activity. Similar to the implementation of the start screen I added runnables to the layout queue. In these runnables I could request the width and height of single view elements, the DisplayMetrics of the Android device and set the LayoutParams of every view element. In the code snippet below the underlying ScrollView is resized within the runnable. The displayed example for view adaption was also useful for layout adaptions within onConfigurationChange and onResume. Still I’m not sure if this is the best and correct way to adapt views and layouts to different Android devices.

ScrollView Runnable definition

ScrollView Runnable definition

Additionally to the layout requirements I had different requirements concerning the behaviour of the single view elements.

  1. The inputTypes of the EditTexts must be set. This is handled in the XML layout definition of the view elements. There are several options for inputTypes like TextCapSentences, TextAutoCorrect, TextMultiLine or number. The inputType of the EditText does influence the input of the EditText as well as the behaviour and display of the virtual keyboard.

    XML Layout definition for EditText

    XML Layout definition for EditText

  2. The Save-Button should be only enabled and clickable if the user entered a name in the corresponding EditText. Furthermore the design of the button should be different in this two states. In the XML Layout definition I did set the corresponding attribute of the ImageButton android:clickable to false but this was not sufficient.

    ImageButton

    ImageButton

    I also had to disable the Save-Button programmatically in the onCreate function of the activity.

    ImageButton settings in onCreate function

    ImageButton settings in onCreate function

    Furthermore I had to implement an addTextChangedListener that toggeled the ImageButton depending on the input of the EditText for the name. The implementation of the addTextChangedListener is not necessary but the other option is to check the value of the EditText in every ActionListener of every single view element in order to prevent the user to save an object with an empty name.

    EditText addTextChangeListenener

    EditText addTextChangeListenener

  1. If EditTexts are used in a mobile form, it is often necessary to check the value of the EditText when the user finished the input. This is handled by implementing a setOnEditorActionListener. Therefore the XML Layout definition of the EditText must contain the attribute android:ImeOptions with it’s value set to actionDone. The important issue concerning ActionListeners for EditTexts is the handling of the virtual keyboard. The virtual keyboard must be closed programmatically within the ActionListeners. This is realized by using the InputMethodManager.

    EditText setOnEditorActionListener

    EditText setOnEditorActionListener

  1. Often the input of EditTexts is limited by constraints. In order to indicate the constraints of an EditText politely to the user, AlertDialogs can be used. AlertDialogs can contain one or more Buttons with different possible options for the behaviour of the activty.

    AlertDialog

    AlertDialog

If you have any questions, any improvement suggestions for the implementation (I mentioned that this is my first Android App) or any improvement suggestions for my English, I really would appreciate if you can leave me a comment.

And I would even more appreciate if you like to check out the ‘Fitness Manager’ App in the Google Play Store or the ‘Fitness Manager’ App in the iTunes Store. See you.

Follow us on

Facebook
Twitter
Google Plus

ListLayouts for Android Apps

ListView containing icons, images and text

ListView containing icons, images and text

Since the ‘Fitness Manager’ App is an app for organizing and scheduling the personal workout, I needed to implement powerful ListViews, which provide the user with helpful information and statues. Still the ListViews must be kept clear. And that is the way how I put my requirements into Java code:

  1. The layout.xml of the activity containing the ListView is very simple.

    Layout definition of ListView

    Layout definition of ListView

  2. In order to realize my design concept for the ListView, I had to insert a layout.xml and a Java class file, where I did define the elements of the single list items of the ListView.

    Layout definition of ListView item

    Layout definition of ListView item

    As displayed in the code snippet of the layout.xml I did use a RelativeLayout with an id and a background image. On the left side of the parent layout I did insert an ImageView. To the right side of the ImageView I did define two TextViews with different text styles. On the right side of the parent layout I did add another ImageView. The values of all elements in the ListView items are dynamic except of the last ImageView. The source for this ImageView is already set in the layout.xml and received from the rescources.

    In the Android Studio Designer the XML layout definition of the ListView items is finally displayed like this:

    Layout definition of ListView item displayed in Android Studio designer

    Layout definition of ListView item displayed in Android Studio designer

    The Java class for a ListView item contains variables, constructors, getter and setter functions for the dynamic elements. Whatever is needed for the ListView item.

    Java class for ListView item definition

    Java class for ListView item definition

  1. In Android every ListView needs an adapter. If you just want to display a simple ListView with ListView items only containing one simple String value, you just need to define a simple ArrayAdapter in the onCreate function of your activity. But if you want to use your own design for the items of the ListView, you also have to define a separate adapter in a Java class file extending the class ArrayAdapter.

    Definition of adapter for ListView

    Definition of adapter for ListView

    The adapter class needs to contain a constructor and the methods getItemId and getView. In the getView funtion the elements of the ListView item with dynamic values are set. First an LayoutInflater must be created in order to get the view. The values for the ListView elements are retrieved from the ArrayList and assigned to the ImageView and TextViews by using the corresponding setter functions of the Java class for the ListView elements.

  1. At least the ListView and the adapter have to be instantiated and assigned in the onCreate function of the activiy.

    Initialization of ListView and corresponding adapter

    Initialization of ListView and corresponding adapter

    After initializing the ListView, an ArrayList is defined and filled with the required data and bitmaps in a for loop. Then the adapter has to be defined and assigned to ListView, which then gets registered the context menu. The implementation of the function setOnItemClickListener of the ListView needs to be handled in the onCreate method of the activity as well.

  1. Most often the appearance of the ListView changes while the activity is running. There are several examples like a new element is added to the ListView, an existing element of the ListView is deleted or a text in one of the TextViews can be changed by another foreground activiy. Then the ListView must be reloaded. This is handled in the onResume function of the activiy.

    Reload of ListView and corresponding adapter

    Reload of ListView and corresponding adapter

    The implementation of the onResume method of the activity is similar to the implementation of the onCreate function. The ArrayList is defined and filled with the required data and bitmaps again. The global variables of the ListView and the adapter are not defined again here, instead the adapter is cleared and the elements of the ListView are added one by one. The call of the function notifyDataSetChanged at the end notifies the attached observers that the underlying data has been changed and any view reflecting data set should refresh itself.

This kind of ListView designs can of course also be used for other types of ListViews like the ExpandableListView.

ExpandableListView

ExpandableListView

I hope you did enjoy reading my Blog about the implementation of ListView Layouts for Android devices.

If you have any questions, any improvement suggestions for the implementation (I mentioned that this is my first Android App) or any improvement suggestions for my English, I really would appreciate if you can leave me a comment.

And I would even more appreciate if you like to check out the ‘Fitness Manager’ App in the Google Play Store or the ‘Fitness Manager’ App in the iTunes Store. See you.

Follow us on
Facebook
Twitter
Google Plus

Layouts for Android Apps

Fitness Manager start screen

Fitness Manager start screen

Unfortunately our awesome, great, incredible, wonderful and joyful travel year is over now. So we have to work and earn money to hopefully continue this experience soon. So I started to program and develop my first Android App. I want to write about the difficulties I ran into while developing my apps. Therefore I have to switch the language of my blog to English and the blog is obviously getting technical. I want to apologize for both. Ok, let’s start and have a look to Layouts for Android Apps.

My first App is called ‘Fitness Manager’ and the app is available for all kind of Apple IOS Devices and for many many different Android Devices. The App provides the user with useful features and functions around planning workout sessions in the gym. The start screen of the app leads the user to different main functionalities like ‘Create a workout schedule’ or ‘View statistics’ and to further sub tasks like ‘Upload data to the cloud’. In order to get this looking good in my eyes on every device I had to take a lot of issues into account.

You can embed LinearLayouts in GridLayouts or you can use TableLayouts surrounded by FrameLayouts. You have depending on the choosen layout several different layout options which you can set. The posibilities concerning the layouts are incredible. But you only have three possible values in the layout.xml to set the layout_width and the layout_height of every view item: match_parent, wrap_content or a fixed value. I wanted to insert a logo, an advertise view element, four big ImageButtons for the main functionalities and 4 small ImageButtons for the sub tasks into the start screen like displayed in the above image. And that’s how layout.xml for the start screen looks like:

  1. All view elements are embedded in a GridLayout with only one column but 5 rows.

    GridLayout of Fitness Manager start screen

    GridLayout of Fitness Manager start screen

  1. The logo is inserted in the first row of the GridLayout and the advertise view (not displayed in the image above) in the second row. In order to center the logo and the advertise view in every device the layout_gravity of every view element has to be set to center.

  1. Logo embedded in LinearLayout

    Logo embedded in LinearLayout

    In the next rows of the GridLayout I did insert the ImageButtons for the main functionalities and the sub tasks. For every row I added one LinearLayout which spreads over the complete width of the screen and then I inserted two to four LinearLayouts which contain the ImageButtons. In order to get the design flexible I did work with the settings layout_sum and layout_weight. The layout_sum is set in the outer LinearLayout. The layout_weight is defined in the inner LinearLayouts. The sum of the layout_weights is defined in the layout_sum. Again I had to center every view element. The orientation of the outer LinearLayout is defined horizontal whereas the orientation of the inner LinearLayout is set to vertical.

    ImageButton embedded in LinearLayouts

    ImageButton embedded in LinearLayouts

    I want to point out the meaning of the LinearLayout orientation here because in the beginning my design looked like displayed below also I had centered every single element. The failure was the orientation of the inner LinearLayouts which was defined horizontal. Maybe this implementation issue is obvious for many many other Android developers but I’m a blonde developer and so I write this for all the blond programmers out there. It almost drove me nuts and I couldn’t find a hint in the internet why my design looked so shitty until I had a close look to the orientation of the LinearLayouts.

    Shitty start screen of Fitness Mangager App displayed in Android Studio Tablet emulator

    Shitty start screen of Fitness Mangager App displayed in Android Studio Tablet emulator

  1. At least I had to adapt the layout progammatically in the corresponding Java File because in the designer of the Android Studio the view was displayed like shown below and moreover the sizes of the ImageButtons needed to be fitted to the different screen sizes of available Android devices:

    Fitness Manager start screen displayed in Android Studio Designer

    Fitness Manager start screen displayed in Android Studio Designer

    If you want to change the sizes of different view elements dependent on the size of other view elements, you cannot implement the changes in the onCreate or onResume funtions of an activity. The drawing phase of the view, which provides the measurements of the single view elements is only finished at the end of onResume function. Therefore I added runnables to the layout queue which will be invoked after the call of setContentView when all view measurements are finished. In these runnables I could request the width and height of single view elements, the DisplayMetrics of the Android device and set the LayoutParams of the ImageButtons.

    ImageButton Runnable

    ImageButton Runnable

If you have any questions concerning my layout design and implementation, any improvement suggestions for the implementation (I mentioned that this is my first Android App) or any improvement suggestions for my English, I really would appreciate if you can leave me a comment.

And I would even more appreciate if you like to check out the ‘Fitness Manager’ App in the Google Play Store or the ‘Fitness Manager’ App in the iTunes Store. See you.

Follow us on
Facebook
Twitter
Google Plus