Counter Application – Part One

Share on Google+Share on LinkedInEmail this to someoneShare on FacebookTweet about this on Twitter

This is first of three part series article that will show you how to build fully functional application whose purpose is to keep track of multiple counter values that user can update (increments/decrements it’s value).

This first article will describe all functionalities that  application is supposed to have and we I will explain implementation of the presentation piece. Second article will be about persisting  information of all counters using Android SQLite database and third and final article will provide you information how to present counter data and handle events that will trigger updates on the underlying database.

Application that is developed in this article is published on Google Play here.

Now let’s see how final product will look like and what options should it have, below is screenshot of application running on my phone.

As you can see I named application Keep Counting, beside title of application there is application option menu item that is used to create new counter. Selecting this option will bring new dialog that user is supposed to populate with basic information: Title of the counter, starting value, incremental value and color of the counter. Main body of the application represents grid view that holds multiple counters created by user. Each counter is represented as colored square that displays title and current value of the counter. On left and right side of the counter value there are android image buttons  used to increment value of the counter by value defined as increment on creating the counter. Finally for each counter  there are additional two image buttons user to reset counter to it’s original value and another one to delete the counter. Every time user selects delete or reset button, application prompts user to confirm it’s action.

This description provided above is represents all functionalities for this first version of the application and as promise in this first article we shall talk about implementing this presentation layer in our application. As a note, I am using Android Studio for development of this application but you should be able to use this code in any other IDE of your choice.

On creating the project, Android Studio (just like any other IDE) will create project structure and generate MainActivity.java in java folder of the project and activity_main.xml in res folder of the project. I will not go into details of the project structure and what are the files that are generated initially on project creation by IDE, for these details and explanations you can go here on official Android Studio website. Also when I was creating  project in Android Studio for type of activity in New Project wizard I have selected scrolling activity.

So here is the content of the activity_main.xml file:


<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 tools:context="com.anjadev.clickcounter.MainActivity"
 android:background="@android:color/background_dark">

 <android.support.design.widget.AppBarLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:theme="@style/AppTheme.AppBarOverlay">

 <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="?attr/actionBarSize"
 android:background="@android:color/background_dark"
 app:popupTheme="@style/AppTheme.PopupOverlay" />

 </android.support.design.widget.AppBarLayout>

 <include layout="@layout/content_main" android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_behavior="@string/appbar_scrolling_view_behavior"
 android:layout_marginLeft="5dp"
 android:layout_marginTop="5dp"
 android:layout_marginBottom="5dp"
 android:layout_marginRight="5dp"/>



</android.support.design.widget.CoordinatorLayout>

As you can see top tag is CoordinatorLayout that is part of support library, it is in general enhanced FrameLayout that is used when you want to coordinate dependencies between child views. In our case we shall not use it’s “superpowers”. For more details on CoordinatorLayout and how to use it you can check one really nice article here. Contents of this layout represent AppBarLayout that represents application header that contains our toolbar. This toolbar will will in this first version of the application have only one option – to create new counter. Final part of this layout is include tag that actually points to another resource countent_main.xml that represents our grid layout that will contain all our counters. So lets take a look at content_main.xml:


<?xml version="1.0" encoding="utf-8"?>

 <GridView xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/couters_grid"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:numColumns="2"
 android:verticalSpacing="5dp"
 android:horizontalSpacing="5dp"
 android:stretchMode="columnWidth"
 android:gravity="center"
 android:background="@android:color/background_dark" />

As you can see this is just simple GridView, in one of our next articles I will define and explain how to create adapter for this grid that will be used to populate this grid.

Next step is to show layout for the each instance of the counter – those colored squares on application that represent each counter and that contain buttons for interaction with specific counter. This layout resource I have named couter_detail_view.xml


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent" android:layout_height="200dp"
 android:background="@drawable/couter_shape">

 <TextView
 android:text="TextView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/counter_value"
 android:layout_centerVertical="true"
 android:layout_centerHorizontal="true"
 android:textAppearance="@style/TextAppearance.AppCompat.Display1"
 android:textColor="@android:color/darker_gray" />

 <TextView
 android:text="TextView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/counter_title"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="18dp"
 android:textSize="18sp"
 android:textColor="@android:color/darker_gray" />

 <ImageButton
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:srcCompat="@drawable/sub_btn_drawable"

 android:layout_centerVertical="true"
 android:layout_alignParentLeft="true"
 android:layout_alignParentStart="true"
 android:id="@+id/btn_sub" android:background="@null"/>

 <ImageButton
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:srcCompat="@drawable/res_btn_drawable"
 android:id="@+id/btn_res"
 android:background="@null"
 android:layout_alignParentBottom="true"
 android:layout_alignParentLeft="true"
 android:layout_alignParentStart="true" />

 <ImageButton
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:srcCompat="@drawable/del_btn_drawable"
 android:layout_alignParentBottom="true"
 android:layout_alignParentRight="true"
 android:layout_alignParentEnd="true"
 android:id="@+id/btn_del"
 android:background="@null" />

 <ImageButton
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:srcCompat="@drawable/add_btn_drawable"
 android:id="@+id/btn_add"

 android:background="@null"
 android:layout_alignTop="@+id/counter_value"
 android:layout_alignParentRight="true"
 android:layout_alignParentEnd="true" />

</RelativeLayout>

In general this is a relative layout used to place components in position relatively to other components or layout itself. For me to use this relative layout was always hard until Android Studio introduced nice visual designer so you will have to drag and drop components around the screen and Android studio will do rest for you.

Final layout that I will present here will be for the dialog that is opened when user selects to create new counter, this dialog is pretty simple and will contain three EditText components and one Spinner component  all wrapped in linear layout, as you can see below:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:weightSum="1">

 <EditText
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:inputType="textPersonName"
 android:ems="10"
 android:id="@+id/title_value"
 android:maxLength="40"
 android:hint="Title" />

 <EditText
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:inputType="number"
 android:ems="10"
 android:id="@+id/start_value"
 android:hint="Start Value" />

 <EditText
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:inputType="number"
 android:ems="10"
 android:id="@+id/increment_value"
 android:hint="Increment Value" />

 <Spinner
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/color_spinner"
 android:layout_weight="0.05"
 android:entries="@array/color_values" />
</LinearLayout>

This is the end of first part from our three part article on this topic. Please do check blog for next part that should be ready soon.

Share on Google+Share on LinkedInEmail this to someoneShare on FacebookTweet about this on Twitter
Posted in Android Development Tagged with: , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Subscribe for Newsletter

Categories