StopWatch Android App Project - Part 2
In this part we will make the UI of the Stopwatch Android App. In the first part of this project, we created the basic project structure for Stopwatch android app. As we know that the default layout for an Activity consists of a ConstraintLayout holding a TextView with text Hello World!, hence we will have to change it, as we are building a Stop Watch app. For our App, we will setup the screen like shown in the below snapshot, and for that, we will require the below views and layouts :
Remove the existing XML code from the file activity_main.xml and write the following code in the layout file.
<?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 = "match_parent"
tools:context = ".MainActivity">
<!-- Main Scroll View -->
<ScrollView
android:layout_width = "match_parent"
android:layout_height = "wrap_content">
<LinearLayout
android:layout_marginBottom = "0dp"
android:layout_marginTop = "8dp"
android:layout_marginRight = "4dp"
android:layout_marginLeft = "4dp"
android:orientation = "vertical"
android:layout_width = "match_parent"
android:layout_height = "wrap_content">
<!-- Outter Card View -->
<androidx.cardview.widget.CardView
android:id = "@+id/card_clock"
android:elevation = "24dp"
app:cardElevation = "24dp"
app:cardCornerRadius = "24dp"
android:layout_marginTop = "20dp"
android:layout_marginRight = "20dp"
android:layout_marginLeft = "20dp"
android:layout_width = "match_parent"
android:layout_height = "600dp">
<RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent">
<!-- Stopwatch icon image view -->
<ImageView
android:layout_marginLeft = "16dp"
android:layout_marginTop = "14dp"
android:src = "@drawable/swicon"
android:layout_width = "48dp"
android:layout_height = "48dp"/>
<!-- stop watch text view parent -->
<androidx.cardview.widget.CardView
android:layout_marginTop = "8dp"
android:layout_alignParentTop = "true"
android:layout_centerInParent = "true"
android:foregroundGravity = "center"
app:cardCornerRadius = "20dp"
app:cardElevation = "8dp"
app:cardBackgroundColor = "@color/colorPrimary"
android:layout_width = "200dp"
android:layout_height = "64dp">
<!-- stop watch text -->
<TextView
android:textAllCaps = "true"
android:textAlignment = "center"
android:textStyle = "bold"
android:textColor = "@color/whiteColor"
android:layout_marginBottom = "8dp"
android:id = "@+id/title"
android:layout_alignParentTop = "true"
android:layout_marginTop = "8dp"
android:gravity = "center"
android:layout_gravity = "center_horizontal"
android:textSize = "32dp"
android:fontFamily = "sans-serif-condensed-medium"
android:text = "Stop Watch "
android:layout_width = "match_parent"
android:layout_height = "match_parent"/>
</androidx.cardview.widget.CardView>
<!-- stop watch time parent card view -->
<androidx.cardview.widget.CardView
app:cardCornerRadius = "180dp"
android:elevation = "40dp"
app:cardElevation = "40dp"
android:layout_centerInParent = "true"
android:layout_width = "240dp"
android:layout_height = "240dp">
<!-- stopwatch time without ms text view -->
<TextView
android:textAlignment = "center"
android:textStyle = "bold"
android:layout_centerInParent = "true"
android:layout_marginLeft = "8dp"
android:layout_marginRight = "8dp"
android:gravity = "center"
android:text = "0:00:00"
android:layout_gravity = "center"
android:textColor = "@color/textColor"
android:id = "@+id/time_view"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:textSize = "56sp" />
<!-- stopwatch time with ms text view -->
<TextView
android:textAlignment = "center"
android:textStyle = "bold"
android:layout_marginTop = "60dp"
android:id = "@+id/time_view_ms"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_gravity = "center"
android:layout_marginLeft = "8dp"
android:layout_marginRight = "8dp"
android:gravity = "center"
android:text = "00"
android:textColor = "@color/textColor"
android:textSize = "24sp" />
</androidx.cardview.widget.CardView>
<!-- Linear layout containing the start ,stop ,pause ,lap image view -->
<LinearLayout
android:layout_marginBottom = "8dp"
android:layout_centerInParent = "true"
android:layout_alignParentBottom = "true"
android:orientation = "horizontal"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content">
<!-- time lapse image view -->
<ImageView
android:focusable = "true"
android:visibility = "gone"
android:clickable = "true"
android:layout_margin = "8dp"
android:src = "@drawable/lap_icon"
android:id = "@+id/timeLapseBtn"
android:layout_width = "80dp"
android:layout_height = "80dp" />
<!-- time pause image view -->
<ImageView
android:focusable = "true"
android:clickable = "true"
android:visibility = "gone"
android:layout_margin = "8dp"
android:src = "@drawable/pause_icon"
android:id = "@+id/pauseBtn"
android:layout_width = "80dp"
android:layout_height = "80dp" />
<!-- time stop image view -->
<ImageView
android:focusable = "true"
android:clickable = "true"
android:visibility = "gone"
android:layout_margin = "8dp"
android:src = "@drawable/stop_icon"
android:id = "@+id/stopBtn"
android:layout_width = "80dp"
android:layout_height = "80dp" />
<!-- time play image view -->
<ImageView
android:focusable = "true"
android:clickable = "true"
android:layout_margin = "8dp"
android:src = "@drawable/play_icon"
android:id = "@+id/playBtn"
android:layout_width = "80dp"
android:layout_height = "80dp" />
</LinearLayout>
</RelativeLayout>
</androidx.cardview.widget.CardView>
<!-- lap time card view parent -->
<androidx.cardview.widget.CardView
android:paddingTop = "8dp"
android:layout_marginBottom = "20dp"
android:elevation = "24dp"
app:cardElevation = "24dp"
app:cardCornerRadius = "8dp"
android:layout_marginTop = "16dp"
android:layout_marginRight = "20dp"
android:layout_marginLeft = "20dp"
android:layout_width = "match_parent"
android:layout_height = "wrap_content">
<!-- lap time title -->
<TextView
android:layout_marginTop = "4dp"
android:textStyle = "bold"
android:textSize = "24dp"
android:layout_marginLeft = "12dp"
android:text = "Time Laps"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"/>
<!-- scroll view conatining the lap text view -->
<ScrollView
android:layout_marginTop = "32dp"
android:layout_width = "match_parent"
android:layout_height = "wrap_content">
<LinearLayout
android:orientation = "vertical"
android:layout_width = "match_parent"
android:layout_height = "wrap_content">
<!-- lap text view -->
<TextView
android:padding = "16dp"
android:id = "@+id/timeLapse"
android:isScrollContainer = "true"
android:layout_below = "@id/title"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"/>
</LinearLayout>
</ScrollView>
</androidx.cardview.widget.CardView>
</LinearLayout>
</ScrollView>
</RelativeLayout>
Now the above activity_main.xml will look like
Now let's discuss about the above UI. It consists of 4 parts which are enclosed in the vertical scrollview:
1. Heading part - Stopwatch App:
This part contains an Image view and a Textview.
<!-- Stopwatch icon image view -->
<ImageView
android:layout_marginLeft = "16dp"
android:layout_marginTop = "14dp"
android:src = "@drawable/swicon"
android:layout_width = "48dp"
android:layout_height = "48dp"/>
<!-- stop watch text view parent -->
<androidx.cardview.widget.CardView
android:layout_marginTop = "8dp"
android:layout_alignParentTop = "true"
android:layout_centerInParent = "true"
android:foregroundGravity = "center"
app:cardCornerRadius = "20dp"
app:cardElevation = "8dp"
app:cardBackgroundColor = "@color/colorPrimary"
android:layout_width = "200dp"
android:layout_height = "64dp">
<!-- stop watch text -->
<TextView
android:textAllCaps = "true"
android:textAlignment = "center"
android:textStyle = "bold"
android:textColor = "@color/whiteColor"
android:layout_marginBottom = "8dp"
android:id = "@+id/title"
android:layout_alignParentTop = "true"
android:layout_marginTop = "8dp"
android:gravity = "center"
android:layout_gravity = "center_horizontal"
android:textSize = "32dp"
android:fontFamily = "sans-serif-condensed-medium"
android:text = "Stop Watch "
android:layout_width = "match_parent"
android:layout_height = "match_parent"/>
</androidx.cardview.widget.CardView>
The above code will create the following UI:
2. Time part - Stopwatch App:
This part of the UI contains one Textview to show time in hours:minutes:seconds and another Textview to show milliseconds. We create ids of Textview to show time in Textview, which we will use in the MainActivity.java later to show time.
<!-- stop watch time parent card view -->
<androidx.cardview.widget.CardView
app:cardCornerRadius = "180dp"
android:elevation = "40dp"
app:cardElevation = "40dp"
android:layout_centerInParent = "true"
android:layout_width = "240dp"
android:layout_height = "240dp">
<!-- stopwatch time without ms text view -->
<TextView
android:textAlignment = "center"
android:textStyle = "bold"
android:layout_centerInParent = "true"
android:layout_marginLeft = "8dp"
android:layout_marginRight = "8dp"
android:gravity = "center"
android:text = "0:00:00"
android:layout_gravity = "center"
android:textColor = "@color/textColor"
android:id = "@+id/time_view"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:textSize = "56sp" />
<!-- stopwatch time with ms text view -->
<TextView
android:textAlignment = "center"
android:textStyle = "bold"
android:layout_marginTop = "60dp"
android:id = "@+id/time_view_ms"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_gravity = "center"
android:layout_marginLeft = "8dp"
android:layout_marginRight = "8dp"
android:gravity = "center"
android:text = "00"
android:textColor = "@color/textColor"
android:textSize = "24sp" />
</androidx.cardview.widget.CardView>
The above code will create the following UI:
3. Interactive part - Stopwatch App:
This part of the UI contains all the Imageviews to start, pause, stop, and lap controls. In this we display only the start Imageview and hide all the other Imageview (lap, pause, stop). We also create different ids for start, stop, pause, laps Imageview, which we will use in the MainActivity.java later to control the stop watch.
<!-- Linear layout containing the start ,stop ,pause ,lap image view -->
<LinearLayout
android:layout_marginBottom = "8dp"
android:layout_centerInParent = "true"
android:layout_alignParentBottom = "true"
android:orientation = "horizontal"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content">
<!-- time lapse image view -->
<ImageView
android:focusable = "true"
android:clickable = "true"
android:visibility = "gone"
android:layout_margin = "8dp"
android:src = "@drawable/lap_icon"
android:id = "@+id/timeLapseBtn"
android:layout_width = "80dp"
android:layout_height = "80dp" />
<!-- time pause image view -->
<ImageView
android:focusable = "true"
android:clickable = "true"
android:visibility = "gone"
android:layout_margin = "8dp"
android:src = "@drawable/pause_icon"
android:id = "@+id/pauseBtn"
android:layout_width = "80dp"
android:layout_height = "80dp" />
<!-- time stop image view -->
<ImageView
android:focusable = "true"
android:clickable = "true"
android:visibility = "gone"
android:layout_margin = "8dp"
android:src = "@drawable/stop_icon"
android:id = "@+id/stopBtn"
android:layout_width = "80dp"
android:layout_height = "80dp" />
<!-- time play image view -->
<ImageView
android:focusable = "true"
android:clickable = "true"
android:layout_margin = "8dp"
android:src = "@drawable/play_icon"
android:id = "@+id/playBtn"
android:layout_width = "80dp"
android:layout_height = "80dp" />
</LinearLayout>
The above code will create the following UI:
4. Lap part - Stopwatch App:
It contains the UI which is used to show the lapse time. We create an id timeLapse, which we will use in the MainActivity.java later to show lapse time:
<!-- lap time card view parent -->
<androidx.cardview.widget.CardView
android:paddingTop = "8dp"
android:layout_marginBottom = "20dp"
android:elevation = "24dp"
app:cardElevation = "24dp"
app:cardCornerRadius = "8dp"
android:layout_marginTop = "16dp"
android:layout_marginRight = "20dp"
android:layout_marginLeft = "20dp"
android:layout_width = "match_parent"
android:layout_height = "wrap_content">
<!-- lap time title -->
<TextView
android:layout_marginTop = "4dp"
android:textStyle = "bold"
android:textSize = "24dp"
android:layout_marginLeft = "12dp"
android:text = "Time Laps"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"/>
<!-- scroll view conatining the lap text view -->
<ScrollView
android:layout_marginTop = "32dp"
android:layout_width = "match_parent"
android:layout_height = "wrap_content">
<LinearLayout
android:orientation = "vertical"
android:layout_width = "match_parent"
android:layout_height = "wrap_content">
<!-- lap text view -->
<TextView
android:padding = "16dp"
android:id = "@+id/timeLapse"
android:isScrollContainer = "true"
android:layout_below = "@id/title"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"/>
</LinearLayout>
</ScrollView>
</androidx.cardview.widget.CardView>
The above code will create the following UI:
Now that our UI is complete, in the next part of this project tutorial we will write the logic in the MainActivity class to add all the funcationality to our Stopwatch android app.
