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 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 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
