Como fazer um app de cronômetro em Android

Primeiramente, a pergunta que você deve estar se fazendo: por que eu iria querer fazer um app de cronômetro?

Um app de cronômetro, genérico, não tem lá muita serventia uma vez que já existem soluções semelhantes. Mas pense que, dentro de um contexto e com as modificações adequadas, um app de cronômetro, por exemplo, pode virar um app de corrida, que registra as suas metas e os tempos alcançados. Pode virar um app de musculação, para ajudar a controlar o tempo de descanso entre as séries. Pode virar um app de natação e outros esportes de resistência, para medir o seu progresso (resistência, apnéia, etc).

Ou seja, eu te ensino como programar o app de cronômetro em Android, mas o que você vai fazer com esse conhecimento, aí fica por conta da sua criatividade e veia empreendedora!

Requisitos: para conseguir acompanhar este tutorial você já deve saber usar componentes de tela, saber programar Java, ter o Android Studio instalado na sua máquina e funcionando (outras opções menos poderosas são NetBeans e Eclipse) e saber usar RecyclerView. Use os links fornecidos para mais informações ou aprenda tudo isso e muito mais em meu livro de Android.

Vamos ver neste tutorial:

Criando o projeto
Tela do cronômetro
Tela do histórico
Funcionando

Vamos lá!

#1 – Criando e configurando o projeto

Crie um novo projeto no Android Studio com o nome de Cronometro. Quando ele pedir para criar a MainActivity, escolha o template Tabbed Activity e na tela seguinte, selecione a opção Action Bar Tabs (with View Pager).

Isso irá criar para você toda a lógica e estrutura básica para ter aquela experiência de uma tela só, com abas que você pode acessar tanto clicando no nome da mesma como deslizando pro lado com o dedo (swipe). Todo esse funcionamento já vem pronto neste template de Activity, apenas temos de personalizar o fragment principal que vem de exemplo de acordo com as nossas necessidades de tela e de pois criar o segundo fragment pra tela de histórico das “cronometradas”. Faremos isso mais tarde.

Primeiro, vamos ajustar os títulos e quantidade de abas.

Fazer isso é bem simples, abra a classe MainActivity.java e procure por uma classe interna chamada SectionsPagerAdapter. Dentro dela você vai encontrar um método getCount() que deve retornar 2 ao invés de 3, e um método getPageTitle com o switch/case que define os títulos das abas, mude para Cronômetro e Histórico, apagando o excedente.

A sua SectionsPagerAdapter deve ficar da seguinte forma:

public class SectionsPagerAdapter extends FragmentPagerAdapter {

        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            // getItem is called to instantiate the fragment for the given page.
            // Return a PlaceholderFragment (defined as a static inner class below).
            return PlaceholderFragment.newInstance(position + 1);
        }

        @Override
        public int getCount() {
            // Show 2 total pages.
            return 2;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            switch (position) {
                case 0:
                    return "CRONÔMETRO";
                case 1:
                    return "HISTÓRICO";
            }
            return null;
        }
    }

public class SectionsPagerAdapter extends FragmentPagerAdapter {

public SectionsPagerAdapter(FragmentManager fm) {

super(fm);

}

@Override

public Fragment getItem(int position) {

// getItem is called to instantiate the fragment for the given page.

// Return a PlaceholderFragment (defined as a static inner class below).

return PlaceholderFragment.newInstance(position + 1);

}

@Override

public int getCount() {

// Show 2 total pages.

return 2;

}

@Override

public CharSequence getPageTitle(int position) {

switch (position) {

case 0:

return "CRONÔMETRO";

case 1:

return "HISTÓRICO";

}

return null;

}

Se você executar esse projeto agora, já verá que ele possui algumas funcionalidades toscas, como mudar o texto central conforme a aba e a navegação entre as abas funciona com swipe e com o toque no nome da mesma.

Mas vamos adiante!

#2 – Tela do cronômetro

Agora vamos personalizar nossa primeira tela.

activity_main.xml é o template padrão para todas telas, então remova o Floating Button desse arquivo de layout, pois não queremos que ele apareça em todas telas, mas apenas na principal (lembre-se também de remover o código na MainActivity.java, dentro do onCreate, que referencia esse FloatingActionButton).

No fragment_main.xml, que representa a primeira view da nossa interface com abas, a view do cronômetro, devemos ter um TextView com o tempo do cronômetro correndo e um botão para iniciar/parar o mesmo (você pode pensar em mais botões se quiser). Como na tela abaixo:

A ideia é a seguinte: o usuário aperta o Play (id:fab), o botão vira Stop e o tempo começa a correr (id:section_label). Quando ele tocar no botão de Stop, ele vira Play novamente, o tempo pára e é registrado na outra tela que lista os tempos realizados (tela de histórico).

Sendo assim, o fragment_main.xml abaixo dá conta do recado:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="br.com.luiztools.cronometro.MainActivity$PlaceholderFragment">

    <TextView
        android:id="@+id/section_label"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="100dp"
        android:text="00:00"
        android:textSize="80dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="@dimen/fab_margin"
        android:layout_marginRight="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_media_play" />

</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context="br.com.luiztools.cronometro.MainActivity$PlaceholderFragment">

<TextView

android:id="@+id/section_label"

android:layout_centerHorizontal="true"

android:layout_marginTop="100dp"

android:text="00:00"

android:textSize="80dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:layout_alignParentBottom="true"

android:layout_marginBottom="@dimen/fab_margin"

android:layout_marginRight="@dimen/fab_margin"

app:srcCompat="@android:drawable/ic_media_play" />

</RelativeLayout>

Para fazer funcionar essa tela não é muito complicado. Mas também não é muito simples, tem de fazer direito senão não funciona!

Dentro da MainActivity você vai encontrar uma classe estática interna chamada PlaceholderFragment, vamos começar declarando algumas variáveis e constantes novas dentro dela:

private static TextView section_label;
private static long initialTime;
private static Handler handler;
private static boolean isRunning;
private static final long MILLIS_IN_SEC = 1000L;
private static final int SECS_IN_MIN = 60;

private static TextView section_label;

private static long initialTime;

private static Handler handler;

private static boolean isRunning;

private static final long MILLIS_IN_SEC = 1000L;

private static final int SECS_IN_MIN = 60;

Os tipos de algumas variáveis não serão reconhecidos. Apenas use o ALT+ENTER para adicionar os imports necessários no topo do seu projeto. A variável section_label é o display numérico do nosso cronômetro. A variável initialTime será usada mais tarde para calcular o tempo que deve ser exibido no display. Falarei do Handler mais tarde, as constantes falam por si só e o isRunning é uma flag que indica se o cronômetro está “correndo” ou não.

Na sequência, devemos criar um objeto Runnable (logo abaixo das variáveis anteriores), que nada mais é do que um objeto que executará um trecho de código (run()) em uma thread separada. Isso porque não podemos travar a thread da UI com nosso código que atualiza o display do cronômetro. Usar um Runnable é uma boa opção quando você precisa rodar algum código que não trave a tela e a variável Handler que declaramos anteriormente permitirá fazer a “ponte” do Runnable com a UI.

private final static Runnable runnable = new Runnable() {
   @Override
   public void run() {
      if (isRunning) {
         long seconds = (System.currentTimeMillis() - initialTime) / MILLIS_IN_SEC;
         section_label.setText(String.format("%02d:%02d", seconds / SECS_IN_MIN, seconds % SECS_IN_MIN));
         handler.postDelayed(runnable, MILLIS_IN_SEC);
      }
   }
};

private final static Runnable runnable = new Runnable() {

@Override

public void run() {

if (isRunning) {

long seconds = (System.currentTimeMillis() - initialTime) / MILLIS_IN_SEC;

section_label.setText(String.format("%02d:%02d", seconds / SECS_IN_MIN, seconds % SECS_IN_MIN));

handler.postDelayed(runnable, MILLIS_IN_SEC);

}

};

O run() da nossa thread é bem simples, apenas pega o tempo de execução atual, menos o tempo em que o start foi dado para descobrir há quanto tempo o cronômetro está correndo. Com essa informação, imprime no formato hh:mm no display e manda o handler avisar a tela da alteração.

Agora, vamos criar o método que configura o botão para que funcione no modelo start/stop que queremos. Coloque este método na mesma classe PlaceholderFragment que estamos customizando até o momento:

private static void setupStopwatch(View rootView){
   section_label = (TextView)rootView.findViewById(R.id.section_label);

   FloatingActionButton fab = (FloatingActionButton) rootView.findViewById(R.id.fab);
   fab.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
         FloatingActionButton fab = (FloatingActionButton)view;
         if(!isRunning) {
            isRunning = true;
            initialTime = System.currentTimeMillis();
            fab.setImageResource(android.R.drawable.ic_media_pause);
            handler.postDelayed(runnable, MILLIS_IN_SEC);
         }else{
            isRunning = false;
            fab.setImageResource(android.R.drawable.ic_media_play);
            handler.removeCallbacks(runnable);
            section_label.setText("00:00");
         }
      }
   });

   handler = new Handler();
}

private static void setupStopwatch(View rootView){

section_label = (TextView)rootView.findViewById(R.id.section_label);

FloatingActionButton fab = (FloatingActionButton) rootView.findViewById(R.id.fab);

fab.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

FloatingActionButton fab = (FloatingActionButton)view;

if(!isRunning) {

isRunning = true;

initialTime = System.currentTimeMillis();

fab.setImageResource(android.R.drawable.ic_media_pause);

handler.postDelayed(runnable, MILLIS_IN_SEC);

}else{

isRunning = false;

fab.setImageResource(android.R.drawable.ic_media_play);

handler.removeCallbacks(runnable);

section_label.setText("00:00");

}

});

handler = new Handler();

}

Neste método eu carreguei o display (section_label), o handler, o botão start/stop (fab) e diss que quando ele for clicado faremos um teste: se o cronômetro estiver parado (!isRunning) nós iniciamos ele e mudamos seu ícone para o stop (eu usei um pause nativo do Android, mas pode usar uma imagem se quiser).

Caso o cronômetro já esteja correndo, ele pára, reseta o display e o ícone volta a ser o start.

E por fim, para que a tela seja carregada corretamente e os componentes sejam configurados (através do método que acabamos de criar), precisamos configurar o método onCreateView que já existe na classe PlaceholderFragment:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   final int VIEW_CRONOMETRO = 1;
   boolean isViewNew = getArguments().getInt(ARG_SECTION_NUMBER) == VIEW_CRONOMETRO;
   int layoutId = isViewNew ? R.layout.fragment_main : R.layout.fragment_history;
   View rootView = inflater.inflate(layoutId, container, false);

   if(isViewNew)
      setupStopwatch(rootView);

   return rootView;
}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

final int VIEW_CRONOMETRO = 1;

boolean isViewNew = getArguments().getInt(ARG_SECTION_NUMBER) == VIEW_CRONOMETRO;

int layoutId = isViewNew ? R.layout.fragment_main : R.layout.fragment_history;

View rootView = inflater.inflate(layoutId, container, false);

if(isViewNew)

setupStopwatch(rootView);

return rootView;

}

Esse método é chamado para criar cada uma das abas da nossa aplicação, sendo cada aba um fragment de layout, por isso que faço o teste pra saber se estou na aba inicial para configurar o cronômetro. Note que referenciei R.layout.fragment_history, que ainda não existe. Crie ele na pasta res/layout como um layout XML qualquer, usaremos ele mais tarde.

Teste sua aplicação, ela já deve estar funcionando como um cronômetro bem simples. Com poucos ajustes no objeto Runnable você consegue adicionar centésimos e milésimos de segundo, caso queira.

#3 – Tela do Histórico

Caso não tenha feito ainda, crie um layout XML chamado fragment_history.xml na pasta res/layout.

Vamos dizer que você esteja treinando para uma prova de resistência. Cada vez que você treina, deseja registrar quanto tempo conseguiu aguentar correndo, pedalando ou nadando, por exemplo. Esse registro é útil para ver se está tendo progresso na sua atividade física, pois em teoria, os tempos devem ser cada vez maiores. Ou o contrário, caso sejam treinos de velocidade.

Sendo assim, na tela de histórico vamos colocar uma lista com todas as execuções do cronômetro, registrando a data da execução e o tempo que o cronômetro marcava quando foi pausado.

Vamos usar aqui uma RecyclerView, que já usamos neste outro post. Primeiro, vamos criar um layout chamado history_item.xml que será o template utilizado para cada um dos itens do histórico:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp">

    <TextView
        android:id="@+id/tempo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="00:30"
        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"/>

    <TextView
        android:id="@+id/data"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="06/08/2017 19:40"
        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Small"/>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="10dp">

<TextView

android:id="@+id/tempo"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="00:30"

android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"/>

<TextView

android:id="@+id/data"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="06/08/2017 19:40"

android:textAppearance="@android:style/TextAppearance.DeviceDefault.Small"/>

</LinearLayout>

O que resulta neste layout aqui:

Atenção aos ids utilizados: tempo para o texto maior, com o tempo que o cronômetro marcava quando foi parado e data, com a ocasião em que ele foi parado.

Agora que temos o template de um item da lista, vamos adicionar um RecyclerView ao nosso fragment_history.xml, definindo que ela deve usar o history_item.xml como template para seus itens. Nosso fragment_history.xml deve ficar assim:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="br.com.luiztools.cronometro.MainActivity$PlaceholderFragment">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/history"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/history_item">
    </android.support.v7.widget.RecyclerView>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="br.com.luiztools.cronometro.MainActivity$PlaceholderFragment">

<android.support.v7.widget.RecyclerView

android:id="@+id/history"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:listitem="@layout/history_item">

</android.support.v7.widget.RecyclerView>

</RelativeLayout>

Agora é a hora de programarmos para essa RecyclerView funcionar!

Vamos começar criando uma classe HistoryHolder.java para mapear os campos do history_item.xml para variáveis locais:

public class HistoryHolder extends RecyclerView.ViewHolder {

    public TextView tempo, data;

    public HistoryHolder(View itemView) {
        super(itemView);
        tempo = (TextView) itemView.findViewById(R.id.tempo);
        data = (TextView) itemView.findViewById(R.id.data);
    }
}

public class HistoryHolder extends RecyclerView.ViewHolder {

public TextView tempo, data;

public HistoryHolder(View itemView) {

super(itemView);

tempo = (TextView) itemView.findViewById(R.id.tempo);

data = (TextView) itemView.findViewById(R.id.data);

}

Com essa classe criada, vamos criar outra classe, desta vez a classe History, que vai representar um objeto do histórico (simplifiquei bastante aqui, pode usar tipos mais interessantes que String para os dois atributos):

public class History {

    private String tempo;
    private String data;

    public History(String tempo, String data) {
        this.tempo = tempo;
        this.data = data;
    }

    public String getTempo(){ return this.tempo; }
    public String getData(){ return this.data; }
}

public class History {

private String tempo;

private String data;

public History(String tempo, String data) {

this.tempo = tempo;

this.data = data;

}

public String getTempo(){ return this.tempo; }

public String getData(){ return this.data; }

}

E por fim, a classe que faz a união da HistoryHolder com a History: a HistoryAdapter!

public class HistoryAdapter extends RecyclerView.Adapter<HistoryHolder> {

    private final List<History> histories;

    public HistoryAdapter(List<History> clientes) {
        this.histories = clientes;
    }

    public void addHistory(History history){
        histories.add(0, history);
        notifyDataSetChanged();
    }

    @Override
    public HistoryHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new HistoryHolder(LayoutInflater.from(parent.getContext())
                .inflate(R.layout.history_item, parent, false));
    }

    @Override
    public void onBindViewHolder(HistoryHolder holder, int position) {
        History history = histories.get(position);
        holder.data.setText(history.getData());
        holder.tempo.setText(history.getTempo());
    }

    @Override
    public int getItemCount() {
        return histories != null ? histories.size() : 0;
    }
}

public class HistoryAdapter extends RecyclerView.Adapter<HistoryHolder> {

private final List<History> histories;

public HistoryAdapter(List<History> clientes) {

this.histories = clientes;

}

public void addHistory(History history){

histories.add(0, history);

notifyDataSetChanged();

}

@Override

public HistoryHolder onCreateViewHolder(ViewGroup parent, int viewType) {

return new HistoryHolder(LayoutInflater.from(parent.getContext())

.inflate(R.layout.history_item, parent, false));

}

@Override

public void onBindViewHolder(HistoryHolder holder, int position) {

History history = histories.get(position);

holder.data.setText(history.getData());

holder.tempo.setText(history.getTempo());

}

@Override

public int getItemCount() {

return histories != null ? histories.size() : 0;

}

Este adapter é bem simples de entender:

no construtor esperamos a lista de objetos History que queremos listar;
o método addHistory deve ser chamado sempre que a gente quiser adicionar um novo item na lista. Ele sempre adiciona no topo (últimos primeiros) e manda a lista se renderizar novamente;
no onCreateViewHolder nós carregamos a classe HistoryHolder que criamos anteriormente;
no onBindViewHolder nós fazemos o de-para do objeto History para o HistoryHolder (que por sua vez joga as informações no hostory_item.xml);
por fim, o getItemCount() apenas retorna quantos elementos History nossa lista possui.

Para finalizar a exibição desta tela, vamos adicionar uma nova variável e um novo método na classe estática PlaceholderFragment que fica dentro da MainActivity.java:

private static HistoryAdapter adapter;
private void setupHistory(View rootView) {
   RecyclerView recyclerView = (RecyclerView) rootView.findViewById(R.id.history);
   LinearLayoutManager layoutManager = new LinearLayoutManager(rootView.getContext());
   recyclerView.setLayoutManager(layoutManager);

   adapter = new HistoryAdapter(new ArrayList<History>());
   recyclerView.setAdapter(adapter);
}

private static HistoryAdapter adapter;

private void setupHistory(View rootView) {

RecyclerView recyclerView = (RecyclerView) rootView.findViewById(R.id.history);

LinearLayoutManager layoutManager = new LinearLayoutManager(rootView.getContext());

recyclerView.setLayoutManager(layoutManager);

adapter = new HistoryAdapter(new ArrayList<History>());

recyclerView.setAdapter(adapter);

}

A variável adapter foi declarada fora do método para que seja acessível por outros métodos mais tarde. Esse método setupHistory configura a RecyclerView, definindo que qualquer alteração no adapter deve repercutir na aparência da lista. Note que inicializei o adapter com um ArrayList vazio. Não vou entrar aqui em detalhes sobre persistência de dados local ou remota, coisa que já fiz em outros posts, consulte os links. Neste tutorial de hoje usarei apenas objetos em memória mesmo, o que quer dizer que se fechar o aplicativo e rodar de novo, ele vai iniciar zerado.

Agora apenas devemos chamar este método no onCreateView desta classe PlaceholderFragment. Temos de apenas mudar o trecho abaixo para incluir um else:

if(isViewNew)
   setupStopwatch(rootView);
else
   setupHistory(rootView);

if(isViewNew)

setupStopwatch(rootView);

else

setupHistory(rootView);

Isso é o suficiente para que a tela de histórico apareça vazia nos seus testes no Android Studio. No entanto, precisamos fazer a “conexão” entre ambas telas para que, cada vez que um novo tempo seja marcado no cronômetro, ele seja registrado nessa lista.

#4 – Funcionando

Para fazer a tela do cronômetro se comunicar com a tela de histórico é bem simples, apenas temos de utilizar a variável adapter que deixamos a nível de classe.

Quando você pausa o cronômetro, deve registrar as informações daquela execução e adicionar no adapter, como abaixo (edite o código presente no onClick do FloatingActionButton da PlaceholderFragment, por via das dúvidas incluí o método inteiro de setup do botão):

private static void setupStopwatch(View rootView){
   section_label = (TextView)rootView.findViewById(R.id.section_label);

   FloatingActionButton fab = (FloatingActionButton) rootView.findViewById(R.id.fab);
   fab.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
         FloatingActionButton fab = (FloatingActionButton)view;
         if(!isRunning) {
            isRunning = true;
            initialTime = System.currentTimeMillis();
            fab.setImageResource(android.R.drawable.ic_media_pause);
            handler.postDelayed(runnable, MILLIS_IN_SEC);
         }else{
            isRunning = false;
            fab.setImageResource(android.R.drawable.ic_media_play);
            handler.removeCallbacks(runnable);

            //atualiza a recyclerView
            SimpleDateFormat sdf = new SimpleDateFormat("dd/MM/yyyy hh:mm");
            adapter.addHistory(new History(section_label.getText().toString(), sdf.format(new Date())));
            section_label.setText("00:00");
         }
      }
  });

  handler = new Handler();
}

private static void setupStopwatch(View rootView){

section_label = (TextView)rootView.findViewById(R.id.section_label);

FloatingActionButton fab = (FloatingActionButton) rootView.findViewById(R.id.fab);

fab.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

FloatingActionButton fab = (FloatingActionButton)view;

if(!isRunning) {

isRunning = true;

initialTime = System.currentTimeMillis();

fab.setImageResource(android.R.drawable.ic_media_pause);

handler.postDelayed(runnable, MILLIS_IN_SEC);

}else{

isRunning = false;

fab.setImageResource(android.R.drawable.ic_media_play);

handler.removeCallbacks(runnable);

//atualiza a recyclerView

SimpleDateFormat sdf = new SimpleDateFormat("dd/MM/yyyy hh:mm");

adapter.addHistory(new History(section_label.getText().toString(), sdf.format(new Date())));

section_label.setText("00:00");

}

});

handler = new Handler();

}

Apenas duas linhas foram alteradas nesse método inteiro, exatamente as duas logo após meu comentário “atualiza a recyclerView”. Aqui eu instancio um SimpleDateFormat pra definir o formato de data que aparecerá na interface e adiciono um novo histórico com o tempo que aparecia no display do cronômetro quando o mesmo foi pausado, bem como a data atual para registro.

Se você executar agora esse aplicativo no simulador e mandar rodar o cronômetro algumas vezes, quando você acessa a aba Histórico (seja tocando no nome da aba ou deslizando a tela pra direita) você deve ver algo parecido com abaixo:

E isso é tudo pelo tutorial de hoje.

Claro, existem inúmeras coisas que você pode fazer, sendo a mais óbvia salvar os dados na nuvem ou localmente no app. Mas tem outras mudanças que podem ser legais, desde personalizar essa interface bem simples, registrar os centésimos de segundo, criar gráficos de performance do atleta (uma feature paga!), incluir recursos de geolocalização pro atleta saber onde estava naquele treino ou até mesmo para calcular a distância percorrida (no caso de um cronômetro de corrida, caminhada ou ciclismo), entre muitas outras coisas.

Isso tudo eu deixo para você e sua criatividade!

TAGS: android mobile

Android SDK

Olá, tudo bem?

O que você achou deste conteúdo? Conte nos comentários.

3 Replies to “Como fazer um app de cronômetro em Android”

Diorgines Lacerda , 25/08/2017 às 11:00

Muito bom, ótimo exercício!!

Responder

Chinnon Santos , 07/02/2018 às 16:28

Muito bom esse post, vou deixar minha sugestão de código para quem deseja trabalhar com Horas nesse cronometro:

//…
long secondsMillis = ( System.currentTimeMillis() – initialTime ) / MILLIS_IN_SEC;
long seconds = ( secondsMillis % SECS_IN_MIN );
long minutes = ( secondsMillis / SECS_IN_MIN );
long hours = ( minutes / MINS_IN_HOUR );
if ( minutes > 59 ) {
minutes = minutes – ( hours * MINS_IN_HOUR );
}

section_label.setText( String.format( “%02d:%02d:%02d”, hours, minutes, seconds ) );
//…

Responder

Luiz Fernando Jr , 08/02/2018 às 07:25

Obrigado pela contribuição!

Erros comuns com as APIs da Binance

Como consumir a Graph API da PancakeSwap V3 com JS

Como criar WebHooks em Node.js

Como atualizar Smart Contracts em Solidity (Proxy)

Android SDK

Como fazer um app de cronômetro em Android

Junte-se a mais de 34 mil devs

Entre para minha lista e receba conteúdos exclusivos e com prioridade

#1 – Criando e configurando o projeto

#2 – Tela do cronômetro

#3 – Tela do Histórico

#4 – Funcionando

Olá, tudo bem?

3 Replies to “Como fazer um app de cronômetro em Android”

Entre para minha lista e receba conteúdos exclusivos e com prioridade

Categorias

Últimas Novidades

Tags