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

0  comments

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.

 

You can also check out this GitHub repository: https://github.com/ResoCoder/TimerAppAndroidTutorial

 

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>

About the author 

Matt Rešetár

Matt is an app developer with a knack for teaching others. Working as a freelancer and most importantly developer educator, he is set on helping other people succeed in their Flutter app development career.

You may also like

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>