Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

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

stopwatch android project for beginners

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:

stopwatch android project for beginners

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:

stopwatch android project for beginners

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:

stopwatch android project for beginners

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:

stopwatch android project for beginners

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.