How to Create a Pokedex UI in Android? - GeeksforGeeks

06 Jun, 2021
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 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
Android
Java
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
How to Post Data to API using Retrofit in Android?
Retrofit with Kotlin Coroutine in Android
Arrays in Java
Split() String method in Java with examples
For-each loop in Java
Object Oriented Programming (OOPs) Concept in Java
Arrays.sort() in Java with examples