Saturday, September 26, 2020

How to Use AsyncTask in Android for Background Operations

No comments email this post Edit Post

Android applications should never perform heavy operations on the main UI thread.

Tasks such as:

  • Network requests
  • File downloads
  • Database processing
  • Large calculations

can block the UI and make applications unresponsive.

In this tutorial, we will learn how to use AsyncTask in Android to perform background operations while updating the UI safely.


What Is AsyncTask?

AsyncTask is an Android class used to perform background operations and publish results on the UI thread.

It helps developers avoid manually managing:

  • Threads
  • Handlers
  • Runnable objects

Although AsyncTask is deprecated in modern Android development, understanding it is still useful for maintaining older Android projects.


How AsyncTask Works

An AsyncTask typically contains four important methods:

Method Purpose
onPreExecute() Runs before background task starts
doInBackground() Performs heavy background work
onProgressUpdate() Updates progress on UI thread
onPostExecute() Returns result to UI thread

What We Will Build

In this example:

  • User clicks a button
  • Background task starts
  • ProgressBar updates gradually
  • Toast message appears after completion

Step 1 — Create Layout File

Create the UI inside activity_main.xml.


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

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ProgressBar
        android:id="@+id/progress_bar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:visibility="invisible"/>

    <Button
        android:id="@+id/button_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start"/>

</LinearLayout>

Step 2 — Implement MainActivity.java

Open MainActivity.java and add the following code:


package com.example.asynctaskexample;

import androidx.appcompat.app.AppCompatActivity;

import android.os.AsyncTask;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.Toast;

import java.lang.ref.WeakReference;

public class MainActivity extends AppCompatActivity {

    private ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        progressBar = findViewById(R.id.progress_bar);

        Button buttonStart =
                findViewById(R.id.button_start);

        buttonStart.setOnClickListener(
                new View.OnClickListener() {

                    @Override
                    public void onClick(View view) {

                        ExampleAsyncTask task =
                                new ExampleAsyncTask(
                                        MainActivity.this
                                );

                        task.execute(10);
                    }
                });
    }

    private static class ExampleAsyncTask
            extends AsyncTask<Integer, Integer, String> {

        private WeakReference<MainActivity>
                activityWeakReference;

        ExampleAsyncTask(MainActivity activity) {

            activityWeakReference =
                    new WeakReference<>(activity);
        }

        @Override
        protected void onPreExecute() {

            super.onPreExecute();

            MainActivity activity =
                    activityWeakReference.get();

            if (activity == null
                    || activity.isFinishing()) {

                return;
            }

            activity.progressBar
                    .setVisibility(View.VISIBLE);
        }

        @Override
        protected String doInBackground(
                Integer... integers
        ) {

            for (int i = 0;
                 i < integers[0];
                 i++) {

                publishProgress(
                        (i * 100) / integers[0]
                );

                try {

                    Thread.sleep(1000);

                } catch (InterruptedException e) {

                    e.printStackTrace();
                }
            }

            return "Finished!";
        }

        @Override
        protected void onProgressUpdate(
                Integer... values
        ) {

            super.onProgressUpdate(values);

            MainActivity activity =
                    activityWeakReference.get();

            if (activity == null
                    || activity.isFinishing()) {

                return;
            }

            activity.progressBar
                    .setProgress(values[0]);
        }

        @Override
        protected void onPostExecute(String s) {

            super.onPostExecute(s);

            MainActivity activity =
                    activityWeakReference.get();

            if (activity == null
                    || activity.isFinishing()) {

                return;
            }

            Toast.makeText(
                    activity,
                    s,
                    Toast.LENGTH_SHORT
            ).show();

            activity.progressBar.setProgress(0);

            activity.progressBar
                    .setVisibility(View.INVISIBLE);
        }
    }
}

Why WeakReference Is Important

AsyncTask can continue running even after the Activity is destroyed.

If developers keep a strong Activity reference, memory leaks can happen.

Using:


WeakReference<MainActivity>

helps prevent memory leaks by allowing Android to clean destroyed Activities properly.


How This Example Works

The workflow is:

  1. User clicks Start button
  2. AsyncTask starts in background
  3. Progress updates every second
  4. ProgressBar updates on UI thread
  5. Toast appears after completion

Understanding AsyncTask Generic Types


AsyncTask<Params, Progress, Result>
Type Purpose
Params Input parameters
Progress Progress updates
Result Final task result

Common Mistakes Developers Make

1. Updating UI Inside doInBackground()

UI updates should only happen on the main thread.


2. Creating Memory Leaks

Holding strong Activity references can leak destroyed Activities.


3. Running Heavy Infinite Tasks

Long-running operations should use WorkManager or background services instead.


Why AsyncTask Is Deprecated

Google deprecated AsyncTask because:

  • Lifecycle handling is difficult
  • Memory leaks are common
  • Limited threading flexibility
  • Poor scalability

Modern Alternatives to AsyncTask

Modern Android applications should use:

  • Coroutines
  • WorkManager
  • RxJava
  • Executors
  • LiveData + ViewModel

AsyncTask vs Coroutines

AsyncTask Coroutines
Deprecated Modern solution
Complex lifecycle handling Lifecycle-aware support
More boilerplate Cleaner asynchronous code

FAQ

Is AsyncTask still useful in 2026?

Mainly for maintaining older Android projects and interview preparation.

Why should heavy work avoid the UI thread?

Heavy operations can freeze the UI and cause ANR (Application Not Responding) errors.

What is the best replacement for AsyncTask?

Kotlin Coroutines and WorkManager are modern recommended solutions.


Conclusion

AsyncTask helped Android developers perform background operations more easily in older Android applications.

Although deprecated today, understanding AsyncTask is still useful for maintaining legacy projects and understanding Android threading concepts.

Modern Android applications should prefer lifecycle-aware asynchronous solutions such as Coroutines and WorkManager.


About the Author

Salil Jha is a Full Stack and Mobile Developer with experience in Android, React Native, scalable SaaS platforms, fintech systems, and developer tooling applications.

CodeChain Dev — Build Modern Products. Solve Real Problems.

Saturday, September 19, 2020

How to Create a Modal Bottom Sheet in Android Using BottomSheetDialogFragment

No comments email this post Edit Post

Bottom Sheets are one of the most commonly used UI components in modern Android applications.

Applications use Bottom Sheets for:

  • Action menus
  • Filters
  • Payment options
  • Sharing dialogs
  • User interactions

In this tutorial, we will learn how to create a Modal Bottom Sheet in Android using BottomSheetDialogFragment.


What Is a Modal Bottom Sheet?

A Modal Bottom Sheet is a UI component that slides up from the bottom of the screen and temporarily blocks interaction with the underlying content.

It is commonly used to display:

  • Quick actions
  • Options menus
  • Confirmation dialogs
  • Interactive forms

What We Will Build

In this example:

  • User clicks a button
  • Modal Bottom Sheet opens
  • User selects an option
  • Bottom Sheet communicates back to the Activity

Step 1 — Add Material Dependency

Open your build.gradle file and add:


implementation 'com.google.android.material:material:1.11.0'

Then sync your Gradle project.


Step 2 — Create activity_main.xml

Create the main layout file.


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

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <Button
        android:id="@+id/button_open_bottom_sheet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Open Modal Bottom Sheet"/>

    <TextView
        android:id="@+id/text_view_button_clicked"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Button X clicked"
        android:textSize="22sp"/>

</LinearLayout>

Step 3 — Create Bottom Sheet Layout

Create bottom_sheet_layout.xml.


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

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is a Bottom Sheet"
        android:textSize="22sp"/>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"/>

</LinearLayout>

Step 4 — Create ExampleBottomSheetDialog.java

Create a new Java class named ExampleBottomSheetDialog.java.


package com.example.bottomsheetexample;

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import com.google.android.material.bottomsheet.BottomSheetDialogFragment;

public class ExampleBottomSheetDialog
        extends BottomSheetDialogFragment {

    private BottomSheetListener mListener;

    @Nullable
    @Override
    public View onCreateView(
            @NonNull LayoutInflater inflater,
            @Nullable ViewGroup container,
            @Nullable Bundle savedInstanceState
    ) {

        View view = inflater.inflate(
                R.layout.bottom_sheet_layout,
                container,
                false
        );

        Button button1 =
                view.findViewById(R.id.button1);

        Button button2 =
                view.findViewById(R.id.button2);

        button1.setOnClickListener(
                new View.OnClickListener() {

                    @Override
                    public void onClick(View v) {

                        mListener.onButtonClicked(
                                "Button 1 clicked"
                        );

                        dismiss();
                    }
                });

        button2.setOnClickListener(
                new View.OnClickListener() {

                    @Override
                    public void onClick(View v) {

                        mListener.onButtonClicked(
                                "Button 2 clicked"
                        );

                        dismiss();
                    }
                });

        return view;
    }

    public interface BottomSheetListener {

        void onButtonClicked(String text);
    }

    @Override
    public void onAttach(Context context) {

        super.onAttach(context);

        try {

            mListener =
                    (BottomSheetListener) context;

        } catch (ClassCastException e) {

            throw new ClassCastException(
                    context.toString()
                            + " must implement BottomSheetListener"
            );
        }
    }
}

Step 5 — Implement MainActivity.java

Open MainActivity.java and add the following code.


package com.example.bottomsheetexample;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity
        implements ExampleBottomSheetDialog.BottomSheetListener {

    private TextView textViewResult;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        textViewResult =
                findViewById(
                        R.id.text_view_button_clicked
                );

        Button buttonOpenBottomSheet =
                findViewById(
                        R.id.button_open_bottom_sheet
                );

        buttonOpenBottomSheet.setOnClickListener(
                new View.OnClickListener() {

                    @Override
                    public void onClick(View v) {

                        ExampleBottomSheetDialog bottomSheet =
                                new ExampleBottomSheetDialog();

                        bottomSheet.show(
                                getSupportFragmentManager(),
                                "exampleBottomSheet"
                        );
                    }
                });
    }

    @Override
    public void onButtonClicked(String text) {

        textViewResult.setText(text);
    }
}

How This Implementation Works

The workflow is:

  1. User clicks button
  2. Bottom Sheet appears from bottom
  3. User selects an option
  4. Bottom Sheet sends callback to Activity
  5. Activity updates UI

Why Interfaces Are Used

The Bottom Sheet communicates with the Activity using an interface.

This approach:

  • Reduces tight coupling
  • Improves modularity
  • Makes components reusable

Common Mistakes Developers Make

1. Forgetting Material Dependency

Without Material Components dependency, BottomSheetDialogFragment will not work properly.


2. Context Casting Errors

The Activity must implement the BottomSheetListener interface.


3. Using match_parent Height

Bottom Sheets should generally use wrap_content height for better UI behavior.


Modern Android Improvements

Modern Android applications can improve this implementation using:

  • Kotlin
  • Jetpack Compose
  • ViewBinding
  • MVVM architecture
  • Material 3 Bottom Sheets

Bottom Sheet vs Dialog

Bottom Sheet Dialog
Slides from bottom Appears in center
Modern mobile UX Traditional popup UI
Gesture-friendly Less interactive

FAQ

What is the difference between modal and persistent Bottom Sheets?

Modal Bottom Sheets block interaction temporarily, while persistent Bottom Sheets remain visible alongside app content.

Can Bottom Sheets contain RecyclerViews?

Yes. Bottom Sheets can contain complex layouts including RecyclerViews and forms.

Should Bottom Sheets be used instead of dialogs?

For modern Android mobile UX, Bottom Sheets are often preferred over traditional dialogs.


Conclusion

Bottom Sheets are an important part of modern Android UI design.

Using BottomSheetDialogFragment allows developers to create interactive and user-friendly modal components with clean communication patterns.

Modern Android applications should combine Material Design components with lifecycle-aware architecture for scalable UI development.


About the Author

Salil Jha is a Full Stack and Mobile Developer with experience in Android, React Native, scalable SaaS platforms, fintech systems, and developer tooling applications.

CodeChain Dev — Build Modern Products. Solve Real Problems.

Wednesday, September 2, 2020

How to Create a Custom Calendar Date Picker in Android Using TimeSquare Library

No comments email this post Edit Post

Date selection is a common feature in modern Android applications.

Applications use calendar pickers for:

  • Booking systems
  • Travel applications
  • Task scheduling
  • Event management
  • Hotel reservations

Although Android provides a default DatePickerDialog, many developers prefer custom calendar views for better user experience and UI flexibility.

In this tutorial, we will learn how to create a custom Calendar Date Picker in Android using the TimeSquare library.


What Is TimeSquare Library?

TimeSquare is an Android calendar library developed by Square.

It provides:

  • Custom calendar UI
  • Date range selection
  • Single date selection
  • Customizable calendar views

Features of CalendarPickerView

  • Range selection support
  • Minimum and maximum date support
  • Custom date formatting
  • Modern calendar interface
  • Multiple date selection

Step 1 — Add Dependency

Open your build.gradle file and add:


implementation 'com.squareup:android-times-square:1.6.5@aar'

Then sync your Gradle project.


Step 2 — Create activity_main.xml

Create the layout file.


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

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.squareup.timessquare.CalendarPickerView
        android:id="@+id/calendar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3 — Implement MainActivity.java

Open MainActivity.java and add the following code.


package com.example.timesquaredatepicker;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.Toast;

import com.squareup.timessquare.CalendarPickerView;

import java.util.Calendar;
import java.util.Date;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        Date today = new Date();

        Calendar nextYear =
                Calendar.getInstance();

        nextYear.add(Calendar.YEAR, 1);

        CalendarPickerView datePicker =
                findViewById(R.id.calendar);

        datePicker.init(
                today,
                nextYear.getTime()
        )
        .inMode(
                CalendarPickerView.SelectionMode.RANGE
        )
        .withSelectedDate(today);

        datePicker.setOnDateSelectedListener(
                new CalendarPickerView
                        .OnDateSelectedListener() {

                    @Override
                    public void onDateSelected(Date date) {

                        Calendar selectedCalendar =
                                Calendar.getInstance();

                        selectedCalendar.setTime(date);

                        String selectedDate =
                                selectedCalendar.get(
                                        Calendar.DAY_OF_MONTH
                                )
                                + "/"
                                + (
                                selectedCalendar.get(
                                        Calendar.MONTH
                                ) + 1
                        )
                                + "/"
                                + selectedCalendar.get(
                                        Calendar.YEAR
                        );

                        Toast.makeText(
                                MainActivity.this,
                                selectedDate,
                                Toast.LENGTH_SHORT
                        ).show();
                    }

                    @Override
                    public void onDateUnselected(Date date) {
                    }
                });
    }
}

How This Implementation Works

The workflow is:

  1. Calendar initializes with current date
  2. Maximum range extends to next year
  3. User selects dates
  4. Listener detects selected date
  5. Selected date displays using Toast

Understanding Selection Modes

Selection Mode Description
SINGLE Select only one date
RANGE Select multiple dates as a range
MULTIPLE Select multiple independent dates

How Date Formatting Works

The selected date is converted using the Calendar class.


Calendar calendar = Calendar.getInstance();
calendar.setTime(date);

This helps extract:

  • Day
  • Month
  • Year

How to Get Selected Date Range

For range selection, developers can retrieve selected dates using:


List<Date> selectedDates =
        datePicker.getSelectedDates();

This is useful for booking and reservation systems.


Common Mistakes Developers Make

1. Invalid Date Range

Minimum date should always be before maximum date.


2. Forgetting Date Formatting

Raw Date objects are difficult for users to understand.


3. Large Calendar Ranges

Very large date ranges may affect performance.


Modern Android Improvements

Modern Android applications can improve this implementation using:

  • Kotlin
  • Material 3 Date Pickers
  • Jetpack Compose
  • MVVM architecture
  • ViewBinding

TimeSquare vs Default DatePickerDialog

TimeSquare DatePickerDialog
Custom calendar UI Default Android UI
Supports range selection Single date only
More flexible customization Limited UI customization

FAQ

Can TimeSquare select multiple dates?

Yes. It supports single, multiple, and range date selection modes.

Is TimeSquare still useful in 2026?

Yes, especially for maintaining legacy Android projects and creating custom calendar experiences.

What is the modern alternative?

Material 3 Date Pickers and Jetpack Compose date components are modern alternatives.


Conclusion

Custom calendar pickers improve user experience significantly in Android applications.

The TimeSquare library provides flexible date selection functionality with support for custom calendar views and date ranges.

Modern Android applications should combine lifecycle-aware architecture with modern Material Design components for scalable UI development.


About the Author

Salil Jha is a Full Stack and Mobile Developer with experience in Android, React Native, scalable SaaS platforms, fintech systems, and developer tooling applications.

CodeChain Dev — Build Modern Products. Solve Real Problems.

Wednesday, August 26, 2020

How to Build a Countdown Timer in Android Using CountDownTimer

No comments email this post Edit Post

Countdown timers are commonly used in Android applications for:

  • OTP verification screens
  • Quiz applications
  • Workout timers
  • Pomodoro productivity apps
  • Game countdown systems

Android provides a built-in class called CountDownTimer that helps developers implement countdown functionality easily.

In this tutorial, we will learn how to build a Countdown Timer in Android using the CountDownTimer class.


What Is CountDownTimer?

CountDownTimer is an Android utility class used to create timers that count down over a fixed interval.

It provides two important callback methods:

  • onTick() → Called at regular intervals
  • onFinish() → Called when timer completes

What We Will Build

In this Android example:

  • User can start the timer
  • User can pause the timer
  • User can reset the timer
  • Remaining time updates dynamically

Step 1 — Create activity_main.xml

Create the UI layout file.


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

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view_countdown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="10:00"
        android:textColor="@android:color/black"
        android:textSize="60sp"/>

    <Button
        android:id="@+id/button_start_pause"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text_view_countdown"
        android:layout_centerHorizontal="true"
        android:text="Start"/>

    <Button
        android:id="@+id/button_reset"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text_view_countdown"
        android:layout_marginStart="12dp"
        android:layout_toEndOf="@id/button_start_pause"
        android:text="Reset"
        android:visibility="gone"/>

</RelativeLayout>

Step 2 — Implement MainActivity.java

Open MainActivity.java and add the following code.


package com.example.countdowntimer;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.os.CountDownTimer;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import java.util.Locale;

public class MainActivity extends AppCompatActivity {

    private static final long START_TIME_IN_MILLIS =
            600000;

    private TextView textViewCountDown;

    private Button buttonStartPause;

    private Button buttonReset;

    private CountDownTimer countDownTimer;

    private boolean timerRunning;

    private long timeLeftInMillis =
            START_TIME_IN_MILLIS;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        textViewCountDown =
                findViewById(R.id.text_view_countdown);

        buttonStartPause =
                findViewById(R.id.button_start_pause);

        buttonReset =
                findViewById(R.id.button_reset);

        buttonStartPause.setOnClickListener(
                new View.OnClickListener() {

                    @Override
                    public void onClick(View view) {

                        if (timerRunning) {

                            pauseTimer();

                        } else {

                            startTimer();
                        }
                    }
                });

        buttonReset.setOnClickListener(
                new View.OnClickListener() {

                    @Override
                    public void onClick(View view) {

                        resetTimer();
                    }
                });

        updateCountDownText();
    }

    private void startTimer() {

        countDownTimer =
                new CountDownTimer(
                        timeLeftInMillis,
                        1000
                ) {

                    @Override
                    public void onTick(
                            long millisUntilFinished
                    ) {

                        timeLeftInMillis =
                                millisUntilFinished;

                        updateCountDownText();
                    }

                    @Override
                    public void onFinish() {

                        timerRunning = false;

                        buttonStartPause.setText(
                                "Start"
                        );

                        buttonStartPause.setVisibility(
                                View.INVISIBLE
                        );

                        buttonReset.setVisibility(
                                View.VISIBLE
                        );
                    }
                }.start();

        timerRunning = true;

        buttonStartPause.setText("Pause");

        buttonReset.setVisibility(View.INVISIBLE);
    }

    private void pauseTimer() {

        countDownTimer.cancel();

        timerRunning = false;

        buttonStartPause.setText("Start");

        buttonReset.setVisibility(View.VISIBLE);
    }

    private void resetTimer() {

        timeLeftInMillis =
                START_TIME_IN_MILLIS;

        updateCountDownText();

        buttonReset.setVisibility(View.INVISIBLE);

        buttonStartPause.setVisibility(View.VISIBLE);
    }

    private void updateCountDownText() {

        int minutes =
                (int) (timeLeftInMillis / 1000) / 60;

        int seconds =
                (int) (timeLeftInMillis / 1000) % 60;

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

        textViewCountDown.setText(timeFormatted);
    }
}

How This Countdown Timer Works

The workflow is:

  1. User clicks Start button
  2. CountDownTimer begins counting
  3. onTick() updates remaining time every second
  4. User can pause or reset timer
  5. onFinish() triggers after countdown completes

Understanding CountDownTimer Parameters


new CountDownTimer(totalTime, interval)
Parameter Description
totalTime Total countdown duration
interval Update interval frequency

How Time Formatting Works

The timer stores values in milliseconds.

We convert milliseconds into:

  • Minutes
  • Seconds

Then format the output using:


String.format("%02d:%02d", minutes, seconds)

Common Mistakes Developers Make

1. Forgetting to Cancel Timer

Timers should be cancelled when no longer needed to avoid memory leaks.


2. Updating UI Incorrectly

UI updates should happen safely inside timer callbacks.


3. Not Handling Activity Lifecycle

Timers may continue running during Activity destruction if lifecycle handling is ignored.


Modern Android Improvements

Modern Android applications can improve this implementation using:

  • Kotlin
  • Coroutines
  • Jetpack Compose
  • ViewModel
  • Lifecycle-aware timers

CountDownTimer vs Coroutines

CountDownTimer Coroutines
Simple built-in solution Modern asynchronous approach
Limited lifecycle support Lifecycle-aware architecture
Good for basic timers Better for scalable apps

FAQ

Can CountDownTimer run in background?

CountDownTimer is tied to the application process and is not ideal for long-running background timers.

Can I create custom intervals?

Yes. Developers can update timers at any interval such as 500ms or 1 second.

What is the modern alternative?

Kotlin Coroutines combined with ViewModel is the preferred modern solution.


Conclusion

Countdown timers are useful for many Android application features including OTP systems, quizzes, and productivity apps.

The CountDownTimer class provides a simple way to implement countdown functionality with regular UI updates.

Modern Android applications should combine timers with lifecycle-aware architecture for better scalability and reliability.


About the Author

Salil Jha is a Full Stack and Mobile Developer with experience in Android, React Native, scalable SaaS systems, fintech applications, and developer tooling platforms.

CodeChain Dev — Build Modern Products. Solve Real Problems.

Tuesday, August 25, 2020

How to Create a Circular Progress Bar in Android Studio

No comments email this post Edit Post

Circular progress bars are commonly used in Android applications to display progress visually in a modern and interactive way.

Examples include:

  • File download progress
  • Fitness tracking
  • Loading indicators
  • Battery percentage
  • Task completion status
  • Dashboard analytics

In this tutorial, we will learn how to create a customizable circular progress bar in Android Studio using:

  • Custom drawable XML
  • Gradient progress effect
  • ProgressBar widget
  • Dynamic progress updates

What We Will Build

In this Android example:

  • Create circular progress bar
  • Add gradient effect
  • Display percentage text
  • Increase and decrease progress dynamically
  • Create modern UI using ConstraintLayout

Step 1 — Create circle.xml Drawable

Create:


res/drawable/circle.xml

Add the following code:


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

<layer-list
    xmlns:android=
    "http://schemas.android.com/apk/res/android">

    <item>

        <shape
            android:shape="ring"
            android:thicknessRatio="16"
            android:useLevel="false">

            <solid
                android:color="#DDDDDD"/>

        </shape>

    </item>

    <item>

        <rotate
            android:fromDegrees="270"
            android:toDegrees="270">

            <shape
                android:shape="ring"
                android:thicknessRatio="16"
                android:useLevel="true">

                <gradient
                    android:startColor=
                    "@color/purple_500"

                    android:endColor=
                    "@color/teal_200"

                    android:type="sweep"/>

            </shape>

        </rotate>

    </item>

</layer-list>

How This Drawable Works

This drawable creates:

  • Gray circular background ring
  • Gradient progress ring
  • Sweep animation effect
  • Circular determinate progress style

Step 2 — Add Circular Progress Style

Inside:


res/values/styles.xml

Add:


<style
    name="CircularDeterminateProgressBar">

    <item
        name="android:indeterminateOnly">
        false
    </item>

    <item
        name="android:progressDrawable">
        @drawable/circle
    </item>

    <item
        name="android:indeterminateDrawable">
        @drawable/circle
    </item>

    <item
        name="android:minHeight">
        200dp
    </item>

    <item
        name="android:maxHeight">
        200dp
    </item>

</style>

Step 3 — Create activity_main.xml

Create:


res/layout/activity_main.xml

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

<androidx.constraintlayout.widget.ConstraintLayout

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <ProgressBar
        android:id="@+id/progress_bar"

        style=
        "@style/CircularDeterminateProgressBar"

        android:layout_width="200dp"

        android:layout_height="200dp"

        android:max="100"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        tools:progress="60"/>

    <TextView
        android:id="@+id/text_view_progress"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textSize="28sp"

        android:textStyle="bold"

        app:layout_constraintTop_toTopOf=
        "@id/progress_bar"

        app:layout_constraintBottom_toBottomOf=
        "@id/progress_bar"

        app:layout_constraintStart_toStartOf=
        "@id/progress_bar"

        app:layout_constraintEnd_toEndOf=
        "@id/progress_bar"

        tools:text="60%"/>

    <Button
        android:id="@+id/button_decr"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="-10%"

        app:layout_constraintTop_toBottomOf=
        "@id/progress_bar"

        app:layout_constraintStart_toStartOf=
        "@id/progress_bar"/>

    <Button
        android:id="@+id/button_incr"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="+10%"

        app:layout_constraintTop_toBottomOf=
        "@id/progress_bar"

        app:layout_constraintEnd_toEndOf=
        "@id/progress_bar"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 4 — Create MainActivity.java

Create:


MainActivity.java

package com.example.circularprogressbar;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;

public class MainActivity
        extends AppCompatActivity {

    private Button buttonIncr;

    private Button buttonDecr;

    private ProgressBar progressBar;

    private TextView textViewProgress;

    private int progress = 0;

    @Override
    protected void onCreate(
            Bundle savedInstanceState
    ) {

        super.onCreate(savedInstanceState);

        setContentView(
                R.layout.activity_main
        );

        buttonIncr =
                findViewById(R.id.button_incr);

        buttonDecr =
                findViewById(R.id.button_decr);

        progressBar =
                findViewById(R.id.progress_bar);

        textViewProgress =
                findViewById(
                        R.id.text_view_progress
                );

        updateProgressBar();

        buttonIncr.setOnClickListener(
                new View.OnClickListener() {

            @Override
            public void onClick(View view) {

                if (progress <= 90) {

                    progress += 10;

                    updateProgressBar();
                }
            }
        });

        buttonDecr.setOnClickListener(
                new View.OnClickListener() {

            @Override
            public void onClick(View view) {

                if (progress >= 10) {

                    progress -= 10;

                    updateProgressBar();
                }
            }
        });
    }

    private void updateProgressBar() {

        progressBar.setProgress(progress);

        textViewProgress.setText(
                progress + "%"
        );
    }
}

How This Circular Progress Bar Works

The workflow is:

  1. Custom ring drawable creates circular shape
  2. Gradient sweep displays progress color
  3. ProgressBar updates dynamically
  4. TextView shows current percentage
  5. Buttons control progress changes

Why Use Circular Progress Bars?

Circular progress indicators:

  • Look modern
  • Improve user experience
  • Save UI space
  • Provide visual feedback clearly

Modern Android Recommendations

Modern Android applications often prefer:

  • Material Progress Indicators
  • Jetpack Compose progress components
  • Lottie animations
  • Animated vector drawables

Material Design Circular Indicator

Google Material Design now recommends:


CircularProgressIndicator

from Material Components library for modern applications.


Common Beginner Mistakes

1. Forgetting max Value

Always set:


android:max="100"

2. Using Large Thickness Ratio

Very thick rings may distort the UI.


3. Updating Progress Outside Main Thread

UI updates must occur on the main thread.


ProgressBar vs CircularProgressIndicator

ProgressBar CircularProgressIndicator
Classic Android widget Material Design component
Custom drawable required Modern styling built-in
Flexible customization Better Material integration

Advanced Customization Ideas

  • Animated progress transitions
  • Gradient animations
  • Custom fonts
  • Percentage labels
  • Loading animations
  • Dynamic colors

FAQ

Can circular progress bars animate smoothly?

Yes. ObjectAnimator and ValueAnimator can animate progress updates smoothly.

Can gradient colors be customized?

Yes. Modify:


android:startColor
android:endColor

inside the drawable XML.

What is the modern recommended approach?

Material CircularProgressIndicator or Jetpack Compose progress indicators are recommended for modern Android applications.


Conclusion

Circular progress bars provide visually attractive and interactive progress indicators for Android applications.

Using custom drawable XML with ProgressBar allows developers to build highly customizable circular indicators with gradients and animations.

Modern Android applications should combine Material Design components, smooth animations, and lifecycle-aware updates for professional UI experiences.


About the Author

Salil Jha is a Full Stack and Mobile Developer specializing in Android, React Native, fintech systems, scalable SaaS platforms, and developer tooling products.

CodeChain Dev — Build Modern Products. Solve Real Problems.

Monday, August 10, 2020

How to Implement Bottom Navigation with Fragments in Android

No comments email this post Edit Post

Bottom Navigation is one of the most widely used navigation patterns in modern Android applications.

Applications like:

  • Instagram
  • YouTube
  • Spotify
  • Facebook
  • WhatsApp

all use bottom navigation for switching between major sections of the app.

In this tutorial, we will learn how to create a Bottom Navigation system in Android using:

  • BottomNavigationView
  • Fragments
  • Fragment transactions
  • AndroidX libraries
  • Modern Material Design components

What We Will Build

In this Android example:

  • Create BottomNavigationView
  • Add 3 navigation tabs
  • Switch between Fragments
  • Use FragmentManager
  • Preserve selected tab during rotation

Why Use Bottom Navigation?

Bottom Navigation improves:

  • User experience
  • App navigation
  • Accessibility
  • Mobile usability

It is best suited for applications with:

  • 3 to 5 primary sections
  • Frequently accessed screens
  • Simple navigation hierarchy

Step 1 — Add Material Dependency

Inside:


build.gradle

Add:


implementation
"com.google.android.material:material:1.11.0"

Step 2 — Create Menu Resource

Create:


res/menu/bottom_navigation.xml

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

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

    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_home"
        android:title="Home"/>

    <item
        android:id="@+id/nav_favorites"
        android:icon="@drawable/ic_favorite"
        android:title="Favorites"/>

    <item
        android:id="@+id/nav_search"
        android:icon="@drawable/ic_search"
        android:title="Search"/>

</menu>

Step 3 — Create activity_main.xml

Create:


res/layout/activity_main.xml

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

<androidx.constraintlayout.widget.ConstraintLayout

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/fragment_container"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintBottom_toTopOf=
        "@id/bottom_navigation"

        app:layout_constraintStart_toStartOf=
        "parent"

        app:layout_constraintEnd_toEndOf=
        "parent"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView

        android:id="@+id/bottom_navigation"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:background="?android:attr/windowBackground"

        app:menu="@menu/bottom_navigation"

        app:layout_constraintBottom_toBottomOf=
        "parent"

        app:layout_constraintStart_toStartOf=
        "parent"

        app:layout_constraintEnd_toEndOf=
        "parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 4 — Create Home Fragment Layout

Create:


res/layout/fragment_home.xml

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background=
    "@android:color/holo_red_light">

    <TextView
        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Home Fragment"

        android:textSize="30sp"

        android:layout_centerInParent="true"/>

</RelativeLayout>

Step 5 — Create HomeFragment.java


package com.example.bottomnavigation;

import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class HomeFragment
        extends Fragment {

    @Nullable
    @Override
    public View onCreateView(
            @NonNull LayoutInflater inflater,
            @Nullable ViewGroup container,
            @Nullable Bundle savedInstanceState
    ) {

        return inflater.inflate(
                R.layout.fragment_home,
                container,
                false
        );
    }
}

Step 6 — Create Favorites Fragment

Create:


fragment_favorites.xml
FavoritesFragment.java

Update text and background accordingly.


Step 7 — Create Search Fragment

Create:


fragment_search.xml
SearchFragment.java

Update text and background accordingly.


Step 8 — Create MainActivity.java


package com.example.bottomnavigation;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;

import android.os.Bundle;
import android.view.MenuItem;

import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity
        extends AppCompatActivity {

    @Override
    protected void onCreate(
            Bundle savedInstanceState
    ) {

        super.onCreate(savedInstanceState);

        setContentView(
                R.layout.activity_main
        );

        BottomNavigationView bottomNav =
                findViewById(
                        R.id.bottom_navigation
                );

        bottomNav.setOnItemSelectedListener(
                navListener
        );

        if (savedInstanceState == null) {

            getSupportFragmentManager()
                    .beginTransaction()
                    .replace(
                            R.id.fragment_container,
                            new HomeFragment()
                    )
                    .commit();
        }
    }

    private final
    BottomNavigationView.OnItemSelectedListener
            navListener =
            new BottomNavigationView
                    .OnItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(
                @NonNull MenuItem item
        ) {

            Fragment selectedFragment =
                    null;

            int id = item.getItemId();

            if (id == R.id.nav_home) {

                selectedFragment =
                        new HomeFragment();

            } else if (
                    id == R.id.nav_favorites
            ) {

                selectedFragment =
                        new FavoritesFragment();

            } else if (
                    id == R.id.nav_search
            ) {

                selectedFragment =
                        new SearchFragment();
            }

            getSupportFragmentManager()
                    .beginTransaction()
                    .replace(
                            R.id.fragment_container,
                            selectedFragment
                    )
                    .commit();

            return true;
        }
    };
}

How This Bottom Navigation Works

The workflow is:

  1. User taps navigation item
  2. Listener detects selected menu
  3. Corresponding Fragment is created
  4. FragmentTransaction replaces container
  5. Selected screen becomes visible

Why Use Fragments with Bottom Navigation?

Fragments improve:

  • Navigation flexibility
  • Screen reusability
  • Memory efficiency
  • Large-screen support

Modern Android Recommendations

Modern Android applications now prefer:

  • Navigation Component
  • Jetpack Compose Navigation
  • Single Activity Architecture
  • ViewBinding
  • MVVM Architecture

BottomNavigationView vs Navigation Component

Classic Fragment Navigation Navigation Component
Manual fragment transactions Automatic navigation handling
More boilerplate code Cleaner architecture
Basic implementation Modern recommended approach

Common Beginner Mistakes

1. Using Old Support Libraries

Always use:


androidx

instead of deprecated:


android.support

2. Recreating Fragments Repeatedly

Large applications should cache fragments for better performance.


3. Forgetting savedInstanceState Check

Without:


if (savedInstanceState == null)

Fragments may overlap during screen rotation.


Advanced Improvements

  • Add badges
  • Use animations
  • Integrate ViewPager2
  • Add deep linking
  • Use Safe Args
  • Implement shared ViewModel

FAQ

How many items should Bottom Navigation contain?

Material Design recommends 3 to 5 navigation items.

Should Bottom Navigation use Activities or Fragments?

Fragments are preferred for modern Android applications.

What is the modern recommended navigation system?

Navigation Component with Single Activity Architecture is recommended for scalable Android applications.


Conclusion

Bottom Navigation provides a clean and user-friendly navigation experience for Android applications.

Using BottomNavigationView with Fragments allows developers to build scalable multi-screen applications with smooth navigation.

Modern Android applications should combine Bottom Navigation with Navigation Component, lifecycle-aware architecture, and Material Design principles for production-grade navigation systems.


About the Author

Salil Jha is a Full Stack and Mobile Developer specializing in Android, React Native, fintech systems, scalable SaaS platforms, and developer tooling products.

CodeChain Dev — Build Modern Products. Solve Real Problems.

Tuesday, June 9, 2020

How to Use GSON Library in Android for JSON Parsing

No comments email this post Edit Post

JSON parsing is one of the most important concepts in Android app development.

Most modern Android applications communicate with APIs and servers using JSON data.

Google provides the powerful GSON Library to easily:

  • Convert Java objects into JSON
  • Convert JSON into Java objects
  • Serialize data
  • Deserialize API responses
  • Map JSON keys to Java variables

In this tutorial, we will learn how to use the GSON library in Android Studio with practical examples.


What We Will Learn

  • What is GSON?
  • How to add GSON dependency
  • Convert Java object to JSON
  • Convert JSON to Java object
  • Use @SerializedName annotation
  • Parse JSON efficiently

What is GSON?

GSON is a Java library developed by Google that simplifies:

  • JSON serialization
  • JSON deserialization

GSON automatically maps JSON data to Java classes with minimal code.


Why Use GSON in Android?

GSON is widely used because:

  • Easy to use
  • Fast parsing
  • Lightweight
  • Works well with Retrofit
  • Supports nested JSON
  • Supports custom field names

Step 1 — Add GSON Dependency

Inside:


build.gradle

Add:


implementation 'com.google.code.gson:gson:2.10.1'

Step 2 — Create Employee.java Class

Create:


Employee.java

package com.example.gsonexample;

import com.google.gson.annotations.SerializedName;

public class Employee {

    @SerializedName("first_name")
    private String firstName;

    @SerializedName("age")
    private int age;

    @SerializedName("mail")
    private String email;

    public Employee(
            String firstName,
            int age,
            String email
    ) {

        this.firstName = firstName;
        this.age = age;
        this.email = email;
    }

    public String getFirstName() {
        return firstName;
    }

    public int getAge() {
        return age;
    }

    public String getEmail() {
        return email;
    }
}

What is @SerializedName?

The:


@SerializedName

annotation allows different JSON keys and Java variable names.

Example:


@SerializedName("first_name")
private String firstName;

JSON key:


"first_name"

maps to:


firstName

Step 3 — Convert Java Object to JSON

Inside:


MainActivity.java

package com.example.gsonexample;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;

import com.google.gson.Gson;

public class MainActivity
        extends AppCompatActivity {

    @Override
    protected void onCreate(
            Bundle savedInstanceState
    ) {

        super.onCreate(savedInstanceState);

        setContentView(
                R.layout.activity_main
        );

        Gson gson = new Gson();

        Employee employee =
                new Employee(
                        "John",
                        30,
                        "john@gmail.com"
                );

        String json =
                gson.toJson(employee);

        Log.d("JSON_OUTPUT", json);
    }
}

Generated JSON Output


{
  "first_name":"John",
  "age":30,
  "mail":"john@gmail.com"
}

Step 4 — Convert JSON to Java Object


package com.example.gsonexample;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;

import com.google.gson.Gson;

public class MainActivity
        extends AppCompatActivity {

    @Override
    protected void onCreate(
            Bundle savedInstanceState
    ) {

        super.onCreate(savedInstanceState);

        setContentView(
                R.layout.activity_main
        );

        Gson gson = new Gson();

        String json =
                "{\"first_name\":\"John\",\"age\":30,\"mail\":\"john@gmail.com\"}";

        Employee employee =
                gson.fromJson(
                        json,
                        Employee.class
                );

        Log.d(
                "EMPLOYEE_NAME",
                employee.getFirstName()
        );
    }
}

How GSON Parsing Works

The workflow is:

  1. JSON string received from API
  2. GSON reads JSON structure
  3. Maps JSON keys to Java variables
  4. Creates Java object automatically

Example JSON File

employee.json


{
  "age": 30,
  "first_name": "John",
  "mail": "john@gmail.com"
}

Real-World Use Cases

GSON is commonly used in:

  • REST API integration
  • Retrofit networking
  • Firebase APIs
  • Local JSON storage
  • Configuration files
  • Caching systems

Modern Android Recommendation

Most modern Android applications combine:

  • Retrofit
  • OkHttp
  • GSON
  • MVVM Architecture
  • Coroutines

for scalable networking systems.


Common Beginner Mistakes

1. Using Wrong JSON Keys

JSON key names must match:


@SerializedName

2. Forgetting Getters

Always create getters if object data must be accessed later.


3. Invalid JSON Format

Malformed JSON causes parsing exceptions.


GSON vs Moshi vs Kotlin Serialization

Library Advantages
GSON Simple and beginner friendly
Moshi Modern and optimized
Kotlin Serialization Best for Kotlin-first apps

Advanced GSON Features

  • Nested object parsing
  • Array parsing
  • Custom serializers
  • Custom deserializers
  • TypeToken support
  • Null handling

FAQ

Can GSON parse API responses?

Yes. GSON is commonly used with Retrofit for parsing API responses automatically.

Is GSON still widely used?

Yes. Although newer alternatives exist, GSON remains very popular in Android development.

Can GSON parse arrays?

Yes. GSON can parse:

  • Lists
  • Arrays
  • Nested objects
  • Complex JSON structures

Conclusion

GSON simplifies JSON serialization and deserialization in Android applications.

It allows developers to convert Java objects and JSON data easily with minimal boilerplate code.

Modern Android applications frequently use GSON with Retrofit and MVVM architecture for scalable networking systems.


About the Author

Salil Jha is a Full Stack and Mobile Developer specializing in Android, React Native, fintech systems, scalable SaaS platforms, and developer tooling products.

CodeChain Dev — Build Modern Products. Solve Real Problems.