How to Create a Pokedex UI in Android?

Today we will be building the most important gadget that we all wanted in our childhood, The Pokedex. A sample image is given below to get an idea about what we are going to do in this article. 

Our Pokedex

Step by Step Implementation

Step 1: Create New Android Project with empty activity 

You should always use meaningful names for your projects

Step 2: Working with the MainActivity

Lets follow the trend of creating the splash screen as well. Now we have two files activity_main.xml and MainActivity.java. Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/red"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="108dp"
        android:layout_height="108dp"
        android:src="@drawable/icon_logo"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    Context context = this;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                change();
            }
        }, 1500);
    }

    private void change() {
        startActivity(new Intent(context, dashboard.class));
        finish();
    }
}

Output:

Splash Screen

Step 3: Create another Empty Activity

Now create a new empty activity with the name of your desire. Here we will choose dashboard. And it will create two files activity_dashboard.xml and dashboard.java.

Note: All the drawables used  in the project could be downloaded from the link below link: https://drive.google.com/file/d/15c8Nos2U_9DC0rFfxS2x8WNgPBq06dJV/view?usp=sharing

Below is the code for the activity_dashboard.xml file:

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".dashboard">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#CA215A"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="108dp"
                android:layout_marginLeft="24dp"
                android:layout_marginTop="6dp"
                android:layout_marginRight="24dp"
                android:background="@drawable/bg_pokidex_1"
                android:orientation="horizontal"
                android:padding="6dp">

                <ImageView
                    android:id="@+id/dashboard_btn_camera_start"
                    android:layout_width="84dp"
                    android:layout_height="84dp"
                    android:src="@drawable/icon_cam" />

                <ImageView
                    android:layout_width="32dp"
                    android:layout_height="32dp"
                    android:src="@drawable/icon_radar_red" />

                <ImageView
                    android:layout_width="32dp"
                    android:layout_height="32dp"
                    android:src="@drawable/icon_radar_yellow" />

                <ImageView
                    android:layout_width="32dp"
                    android:layout_height="32dp"
                    android:src="@drawable/icon_radar_green" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="6dp"
                android:orientation="horizontal">

                <LinearLayout
                    android:layout_width="216dp"
                    android:layout_height="216dp"
                    android:layout_marginLeft="24dp"
                    android:background="@drawable/bg_screen"
                    android:orientation="vertical">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginTop="3dp"
                        android:orientation="horizontal">

                        <ImageView
                            android:layout_width="16dp"
                            android:layout_height="16dp"
                            android:src="@drawable/icon_radar_red" />

                        <ImageView
                            android:layout_width="16dp"
                            android:layout_height="16dp"
                            android:src="@drawable/icon_radar_red" />
                    </LinearLayout>

                    <FrameLayout
                        android:id="@+id/dashboard_fragment_camera_p"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="6dp"
                        android:layout_marginRight="10dp"
                        android:layout_marginBottom="34dp">
                    </FrameLayout>

                </LinearLayout>

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="108dp"
                    android:layout_height="108dp"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="6dp">

                    <LinearLayout
                        android:id="@+id/linearLayout"
                        android:layout_width="36dp"
                        android:layout_height="36dp"
                        android:background="@drawable/bg_arrow_up"
                        android:gravity="center"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent">

                        <ImageView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:src="@drawable/icon_up" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="36dp"
                        android:layout_height="36dp"
                        android:background="@drawable/bg_arrow_right"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintTop_toTopOf="parent">

                        <ImageView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:src="@drawable/icon_right" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="36dp"
                        android:layout_height="36dp"
                        android:background="@drawable/bg_arrow_left"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent">

                        <ImageView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:src="@drawable/icon_left" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="36dp"
                        android:layout_height="36dp"
                        android:background="@drawable/bg_arrow_down"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent">

                        <ImageView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:src="@drawable/icon_down" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="36dp"
                        android:layout_height="36dp"
                        android:background="@color/blue_dark"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent">

                        <ImageView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:src="@drawable/icon_cam_click" />
                    </LinearLayout>
                </androidx.constraintlayout.widget.ConstraintLayout>

            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#FE1A55"
            android:orientation="vertical"
            android:paddingTop="12dp">

            <TextView
                android:id="@+id/dashboard_tv_ssdpanel"
                android:layout_width="match_parent"
                android:layout_height="84dp"
                android:layout_marginLeft="12dp"
                android:layout_marginTop="6dp"
                android:layout_marginRight="12dp"
                android:layout_marginBottom="6dp"
                android:background="@drawable/bg_input_name"
                android:fontFamily="@font/digital7"
                android:gravity="center"
                android:hint="Enter Name"
                android:maxLength="10"
                android:paddingLeft="12dp"
                android:paddingRight="12dp"
                android:textColor="#fff"
                android:textColorHint="#e9e9e9"
                android:textSize="24dp"
                android:textStyle="bold" />

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="12dp"
                app:cardCornerRadius="12dp">

                <GridLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:columnCount="5"
                    android:rowCount="2">

                    <LinearLayout
                        android:id="@+id/dashboard_btn_A"
                        android:layout_width="0dp"
                        android:layout_height="48dp"
                        android:layout_columnWeight="1"
                        android:background="@drawable/bg_btn_keys"
                        android:gravity="center">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="A"
                            android:textColor="#fff"
                            android:textStyle="bold" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/dashboard_btn_B"
                        android:layout_width="0dp"
                        android:layout_height="48dp"
                        android:layout_columnWeight="1"
                        android:background="@drawable/bg_btn_keys"
                        android:gravity="center">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="B"
                            android:textColor="#fff"
                            android:textStyle="bold" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/dashboard_btn_C"
                        android:layout_width="0dp"
                        android:layout_height="48dp"
                        android:layout_columnWeight="1"
                        android:background="@drawable/bg_btn_keys"
                        android:gravity="center">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="C"
                            android:textColor="#fff"
                            android:textStyle="bold" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/dashboard_btn_D"
                        android:layout_width="0dp"
                        android:layout_height="48dp"
                        android:layout_columnWeight="1"
                        android:background="@drawable/bg_btn_keys"
                        android:gravity="center">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="D"
                            android:textColor="#fff"
                            android:textStyle="bold" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/dashboard_btn_E"
                        android:layout_width="0dp"
                        android:layout_height="48dp"
                        android:layout_columnWeight="1"
                        android:background="@drawable/bg_btn_keys"
                        android:gravity="center">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="E"
                            android:textColor="#fff"
                            android:textStyle="bold" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/dashboard_btn_0"
                        android:layout_width="0dp"
                        android:layout_height="48dp"
                        android:layout_columnWeight="1"
                        android:background="@drawable/bg_btn_keys"
                        android:gravity="center">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="0"
                            android:textColor="#fff"
                            android:textStyle="bold" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/dashboard_btn_1"
                        android:layout_width="0dp"
                        android:layout_height="48dp"
                        android:layout_columnWeight="1"
                        android:background="@drawable/bg_btn_keys"
                        android:gravity="center">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="1"
                            android:textColor="#fff"
                            android:textStyle="bold" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/dashboard_btn_2"
                        android:layout_width="0dp"
                        android:layout_height="48dp"
                        android:layout_columnWeight="1"
                        android:background="@drawable/bg_btn_keys"
                        android:gravity="center">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="2"
                            android:textColor="#fff"
                            android:textStyle="bold" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/dashboard_btn_3"
                        android:layout_width="0dp"
                        android:layout_height="48dp"
                        android:layout_columnWeight="1"
                        android:background="@drawable/bg_btn_keys"
                        android:gravity="center">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="3"
                            android:textColor="#fff"
                            android:textStyle="bold" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/dashboard_btn_4"
                        android:layout_width="0dp"
                        android:layout_height="48dp"
                        android:layout_columnWeight="1"
                        android:background="@drawable/bg_btn_keys"
                        android:gravity="center">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="4"
                            android:textColor="#fff"
                            android:textStyle="bold" />
                    </LinearLayout>
                </GridLayout>
            </androidx.cardview.widget.CardView>

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="12dp">

                <LinearLayout
                    android:id="@+id/dashboard_ll_search"
                    android:layout_width="108dp"
                    android:layout_height="44dp"
                    android:background="@drawable/bg_btn_white"
                    android:gravity="center_horizontal"
                    android:orientation="horizontal"
                    android:paddingTop="8dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="SEARCH"
                        android:textColor="@color/blue_dark"
                        android:textStyle="bold" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/dashboard_ll_clear"
                    android:layout_width="108dp"
                    android:layout_height="44dp"
                    android:layout_marginLeft="12dp"
                    android:background="@drawable/bg_btn_white"
                    android:gravity="center_horizontal"
                    android:orientation="horizontal"
                    android:paddingTop="8dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toEndOf="@id/dashboard_ll_search"
                    app:layout_constraintTop_toTopOf="parent">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="CLEAR"
                        android:textColor="@color/blue_dark"
                        android:textStyle="bold" />
                </LinearLayout>

                <ImageView
                    android:id="@+id/dashboard_iv_key_sign"
                    android:layout_width="44dp"
                    android:layout_height="44dp"
                    android:src="@drawable/icon_radar_yellow"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />
            </androidx.constraintlayout.widget.ConstraintLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="3dp">

                <Button
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_margin="6dp"
                    android:layout_weight="1" />

                <Button
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_margin="6dp"
                    android:layout_weight="1" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="24dp"
        android:background="@drawable/icon_separator"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

For this tutorial, there is nothing to do with the dashboard.java file. For Complete Project goto: https://github.com/navdeepisno1/PokeDex