Make a Timer App: User Interface (Ep 1) – Android Kotlin Tutorial (Code)

Learn how to create a beautiful material design timer app for Android.

In this course you will learn how to make a user interface. Later we’re going to code a timer which can run in the foreground. Then we are going to upgrade it to be able to run also in the background – and we will control it from notifications! Finally we will create a settings activity where a user will be able to set the length of the timer.

In the first part we’re creating a nice material design user interface (UI). We’re using floating action buttons (FAB) and also a determinate circular progress bar. Finally we also make the action bar menu.

This post contains all the code that’s been written in this YouTube video.

dimens.xml

<resources>
    <dimen name="fab_margin">16dp</dimen>
    <dimen name="fab_bigger_margin">64dp</dimen>
</resources>

activity_timer.xml

<?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"
    tools:context="com.resocoder.timertutorial.TimerActivity">

    <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="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_timer" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_bigger_margin"
        app:srcCompat="@drawable/ic_stop" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_pause"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:layout_margin="@dimen/fab_bigger_margin"
        app:srcCompat="@drawable/ic_pause" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|start"
        android:layout_margin="@dimen/fab_bigger_margin"
        app:srcCompat="@drawable/ic_play_arrow" />

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

build.gradle (app)

...
dependencies {
    ...
    compile 'me.zhanghai.android.materialprogressbar:library:1.4.2'
}

content_timer.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.resocoder.timertutorial.TimerActivity"
    tools:showIn="@layout/activity_timer">

    <TextView
        android:id="@+id/textView_countdown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="10:00"
        android:textSize="70sp"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <me.zhanghai.android.materialprogressbar.MaterialProgressBar
        android:id="@+id/progress_countdown"
        style="@style/Widget.MaterialProgressBar.ProgressBar"
        android:minWidth="306dp"
        android:minHeight="306dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

menu_timer.xml

<menu 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"
    tools:context="com.resocoder.timertutorial.TimerActivity">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="ifRoom"
        android:icon="@drawable/ic_settings"/>
</menu>