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>