Creating a timer app with a muddy

** Easy timer with various functions **

I had to write it on December 10, 2019, but it's been over the year.

Then, I will introduce this time ↓

_ "Timer" app! !! !! _

In addition to start, stop, and reset, I added simple functions (functions that I don't really need).

This is the completed image. ↓ Photo_20-01-08-16-38-02.318.png

Things necessary

・ PC

・ Android Studio (mainly 3.0.1)

** _App Creation-1 Preparation _ **

Create the project as usual.

-The API level is 26 (android8.0).

-Empty is specified as the activity type.

** App Creation-2 Screen Creation**

Let's arrange the buttons on the screen.

activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
 ~abridgement~
>


    <TextView
        android:id="@+id/text_view_countdown"
        android:layout_width="395dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="7dp"
        android:layout_marginStart="7dp"
        android:gravity="center"
        android:text="@string/_00_00"
        android:textColor="@android:color/black"
        android:textSize="40sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.48"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.280" />

    <Button
        android:id="@+id/button_start_pause"
        android:layout_width="395dp"
        android:layout_height="43dp"
        android:layout_below="@+id/text_view_countdown"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:text="@string/start"
        app:layout_constraintBottom_toTopOf="@+id/button_reset"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text_view_countdown" />

    <Button
        android:id="@+id/button_reset"
        android:layout_width="395dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button_start_pause"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="8dp"
        android:text="@string/reset"
        android:visibility="invisible"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button_start_pause"
        tools:visibility="visible" />
    <Button
        android:id="@+id/button_pause"
        android:layout_width="395dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button_reset"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="8dp"
        android:text="@string/pause"
        android:visibility="invisible"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button_reset"
        tools:visibility="visible" />

    <Button
        android:id="@+id/button_skip"
        android:layout_width="395dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button_pause"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="8dp"
        android:text="@string/skip"
        android:visibility="invisible"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button_pause"
        tools:visibility="visible" />

    <Button
        android:id="@+id/button_return"
        android:layout_width="395dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button_skip"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="8dp"
        android:text="@string/not_return"
        android:visibility="invisible"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button_skip"
        tools:visibility="visible" />

</android.support.constraint.ConstraintLayout>

Yes, this is View. (Android.support.constraint.ConstraintLayout varies from person to person.)

        android:text="@string/pause"

I think that an error will occur, so I will add strings.xml this time.

<resources>
    <string name="app_name">timer</string>
    <string name="_00_00">00:00</string>
 <string name = "start"> Start </ string>
 <string name = "reset"> reset </ string>
    <string name="stop">STOP</string>
 <string name = "pause"> The World </ string>
 <string name = "skip"> King Crimson </ string>
    <string name="not_return">GER</string>
</resources>

Yes, let's name the pause and skip buttons appropriately

I think that the screen can now be displayed.

** App Creation-3 Timer Processing 1 **

I will write the processing when each button on the screen is pressed in MainActivity.java! !!

But

First, define the field variables.

public class MainActivity extends AppCompatActivity {

 // Timer setting unit milliseconds
    private static final long START_TIME_IN_MILLIS = 180000;

 // Pause setting unit milliseconds
    private static final long PAUSE_IN_MILLIS = 7000;

 // Skip setting Unit Millisecond
    private static final long SKIP_TIME_IN_MILLIS = 5000;

 //カウントダウンタイマー
    private TextView mTextCountDown;
 //ボタン
 private Button mButtonStart; // Start
 private Button mButtonReset; // Reset
 private Button mButtonPause; // Pause
 private Button mButtonSkip; // Skip
 private Button mButtonReturn; // Return

 //CountDownTimerクラス
    private CountDownTimer mCountDownTimer;
 //CallTimeクラス
    private boolean mTimerRunning;

    private long mTime = START_TIME_IN_MILLIS;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
 ~abridgement~

Here you define the initial time of the timer, the stop time of the pause, and the time to skip the skip.

** _App Creation-3 Timer Processing 2 _ **

Write the behavior when each button is pressed first!

 // ~ There is a protected void onCreate (Bundle savedInstanceState) above. ~

 //タイマー再開の処理
    private void startTimer() {
        mCountDownTimer = new CountDownTimer(mTime,1000) {
            @Override
            public void onTick(long millisUntilFinished) {
                mTime = millisUntilFinished;
                updateCountDownText();
            }

            @Override
            public void onFinish() {
 mTimerRunning = false; // Timer stopped
                mTime = START_TIME_IN_MILLIS;
 mButtonStart.setText ("start");
                mButtonReset.setVisibility(View.INVISIBLE);
                mButtonPause.setVisibility(View.INVISIBLE);
                mButtonSkip.setVisibility(View.INVISIBLE);
                mButtonReturn.setVisibility(View.INVISIBLE);
            }
        }.start();

 mTimerRunning = true; // Timer running
 mButtonStart.setText ("pause");
        mButtonReset.setVisibility(View.VISIBLE);
        mButtonPause.setVisibility(View.VISIBLE);
        mButtonSkip.setVisibility(View.VISIBLE);
        mButtonReturn.setVisibility(View.VISIBLE);

    }

 //タイマー一時停止の処理
    private void pauseTimer() {
        mCountDownTimer.cancel();
        mTimerRunning = false;
 mButtonStart.setText ("start");
        mButtonReset.setVisibility(View.VISIBLE);
    }

 //タイマーリセットの処理
    private void resetTimer() {
        mTime = START_TIME_IN_MILLIS;
        updateCountDownText();
        mCountDownTimer.cancel();
 mButtonStart.setText ("start");
        mTimerRunning = false;
        mButtonStart.setVisibility(View.VISIBLE);
        mButtonReset.setVisibility(View.INVISIBLE);
        mButtonPause.setVisibility(View.INVISIBLE);
        mButtonSkip.setVisibility(View.INVISIBLE);
        mButtonReturn.setVisibility(View.INVISIBLE);

    }

 //タイマー表示
    private void updateCountDownText() {
        int minutes = (int)(mTime / 1000) / 60;
        int seconds = (int)(mTime / 1000) % 60;

        String timeFormatted = String.format(Locale.getDefault(), "%02d:%02d",minutes,seconds);
        mTextCountDown.setText(timeFormatted);
    }

With this, I wrote the process that moves when the button is pressed.

Basically, it feels like skipping or stopping is realized by applying "stop timer".

** _App Creation-3 Timer Processing 3 _ **

Implement onClick on the button so that it works when pressed

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTextCountDown  = findViewById(R.id.text_view_countdown);
        mButtonStart    = findViewById(R.id.button_start_pause);
        mButtonReset    = findViewById(R.id.button_reset);
        mButtonPause    = findViewById(R.id.button_pause);
        mButtonSkip     = findViewById(R.id.button_skip);
        mButtonReturn   = findViewById(R.id.button_return);

 //スタートボタン
        mButtonStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
 //タイマーの状態を取得
                if (mTimerRunning) {
 //動いてるなら停止
                    pauseTimer();
                } else {
                    startTimer();
                }
            }
        });

 //リセットボタン
        mButtonReset.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
 //タイマーのリセット
                resetTimer();
            }
        });

 //一時停止ボタン
        mButtonPause.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
 //タイマーを停止
                mCountDownTimer.cancel();
 //7秒後実行
                new Handler(Looper.getMainLooper()).postDelayed(new Runnable() {
                    @Override
                    public void run() {
 //タイマーの再開
                        startTimer();
                    }
                }, PAUSE_IN_MILLIS);

            }
        });

 //スキップボタン
        mButtonSkip.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
 //タイマーを停止
                mCountDownTimer.cancel();
                int futureTime = (int)(mTime - SKIP_TIME_IN_MILLIS);
 //残り時間が0以上あるならスキップ
                if (futureTime >= 0) {
                    mTime = futureTime;
                    int minutes = (futureTime / 1000) / 60;
                    int seconds = (futureTime / 1000) % 60;
                    String timeFormatted = String.format(Locale.getDefault(), "%02d:%02d",minutes,seconds);
                    mTextCountDown.setText(timeFormatted);
 //残り時間0になるならリセット
                } else {
                    resetTimer();
                }
                startTimer();
            }
        });

 //戻るボタン
        mButtonReturn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                resetTimer();
                startTimer();

            }
        });

        updateCountDownText();
    }

If you write so far, you can operate it as a timer. Please compile it and run it on the actual machine.

Photo_20-01-08-16-38-00.994.png


** _ Postscript _ **

Thank you for reading.

Most of the source is solid, but I didn't write much because I just used CountDownTimer.

(I wanted to add various other things, but due to time constraints, I'll do it so far. It's almost a month overdue.)

At first, I was thinking of making it a counter app. (Every time you press the button, it counts up and the durandal sticks from top to bottom in the animation)

To Be Continued

Recommended Posts

Creating a timer app with a muddy
How to get started with creating a Rails app
[Rails] Creating a new project with rails new
[Rails6] Create a new app with Rails [Beginner]
I made a rock-paper-scissors app with kotlin
[Rails 5] Create a new app with Rails [Beginner]
I made a rock-paper-scissors app with android
Create a simple search app with Spring Boot
Creating a browser automation tool with Ruby + Selenium
Let's create a timed process with Java Timer! !!
Creating a common repository with Spring Data JPA
A simple CRUD app made with Nuxt / Laravel (Docker)
Practice making a simple chat app with Docker + Sinatra
Creating a Cee-lo game with Ruby 4th Creating a game progress process
Create a Chat app with WebSocket (Tyrus) + libGDX + Kotlin
Creating a local repository
A memorandum when creating a REST service with Spring Boot
Creating a test case
Rough procedure verbalized output when creating an app with Rails
[Rails] I tried to create a mini app with FullCalendar
The first WEB application with Spring Boot-Making a Pomodoro timer-
Summary of initial work when creating an app with Rails
Create a Hello World web app with Spring framework + Jetty
How to specify db when creating an app with rails
iOS app development: Timer app (2. Timer display)
Creating a Scala custom ExecutionContext
Creating a calendar using Ruby
[Rails] Creating a search box
I made a chat app.
Create a playground with Xcode 12
Draw a gradient with CAGradientLayer
iOS app development: Timer app (summary)
A story stuck with NotSerializableException
The story of the first Rails app refactored with a self-made helper
[Rails] Avoid SELECT issued when creating a model with belongs_to defined!
Create a memo app with Tomcat + JSP + Servlet + MySQL using Eclipse
Create a JVM for app distribution with JDK9 modules and jlink
(For myself) Try creating a C # environment with docker + code-server, cloud9
Naming convention when creating a new controller or model with rails
Creating a new user with rails was angry with unknown attribute'password' for User.
Create a restaurant search app with IBM Watson + Gurunavi API (with source)
[Self-study] Creating a portfolio (original app) after completing the Rails tutorial