1 1 st EDITION NENNY MELISSA ABU BAKAR SIDEK POLITEKNIK MUKAH THE BEGINNER’S GUIDE TO DEVELOPING SIMPLE APPLICATION USING ANDROID STUDIO
THE BEGINNER’S GUIDE TO DEVELOPING SIMPLE APPLICATION USING ANDROID STUDIO 1 st EDITION NENNY MELISSA BINTI ABU BAKAR SIDEK POLITEKNIK MUKAH
Published By: POLITEKNIK MUKAH KM 7.5 JALAN OYA 96400 MUKAH, SARAWAK No Tel: +6084-874001 Fax: +6084-874005 Website: https://www.pmu.edu.my/v5/ The Beginner’s Guide to Developing Simple Application Using Android Studio Author: Nenny Melissa binti Abu Bakar Sidek e ISBN 978-967-2097-84-6 Copyright ©2023 All rights reserved. No part of this book may be reproduced or used in any manner without written permission of the copyright owner except for the use of quotations in a book review.
Preface The Beginner’s Guide to Developing Simple Application Using Android Studio is a hands-on guide designed to help the beginner to explore a basic skill in developing simple application project using Android Studio. The guide provides users the steps in managing simple project. After successfully completing the project, you will have the basic skills to develop Android application.
2 The Beginner’s Guide to Developing Simple Application Using Android Studio – 1 st Edition Table of Contents INTRODUCTION ....................................................................................................................4 An Introduction to Android Studio........................................................................................4 Android Studio Project Structure..........................................................................................4 APPLYING LINEAR LAYOUT...................................................................................................8 1.1 Introduction to LinearLayout ......................................................................................8 1.2 Designing LinearLayout Horizontal..............................................................................8 1.3 Designing LinearLayout Vertical ..................................................................................8 1.4 Designing Nested Layout.............................................................................................9 MANAGING TEXT ...............................................................................................................12 2.1 Customizing Text in UI...............................................................................................12 CUSTOMIZING WALLPAPER................................................................................................14 3.1 Customizing Wallpaper in UI.....................................................................................14 MANAGING EDIT TEXT........................................................................................................17 4.1 Customizing EditText in UI ........................................................................................17 APPLYING ICON IN EDIT TEXT.............................................................................................20 5.1 Adding an Icon in EditText.........................................................................................20 MANAGING CUSTOMIZE BUTTON ....................................................................................22 6.1 Customize Button......................................................................................................22 DESIGN CIRCLE IMAGE VIEW..............................................................................................25 7.1 Customizing ImageView ............................................................................................25 DESIGN CARD VIEW............................................................................................................27 8.1 Applying CardView in Layout Editor..........................................................................27 SPLASHSCREEN ...................................................................................................................32 9.1 Applying Splashscreen...............................................................................................32
3 9.2 Managing Java File ....................................................................................................34 9.3 Managing Manifest File.............................................................................................34 MANAGING USER REGISTRATION AND LOG IN.................................................................36 10.1 Connecting Firebase................................................................................................36 10.2 Log In ......................................................................................................................45 10.3 Log out Function......................................................................................................58 10.4 Managing User Registration ...................................................................................63 MANAGING SIMPLE NAVIGATION & APPLYING MULTIMEDIA APPLICATION..................75 11.1 Create Simple Navigation........................................................................................75 11.2 Managing Layout.....................................................................................................75 11.3 Managing raw File ...................................................................................................76 11.4 Managing Java File ..................................................................................................76 HIDING TITLE BAR AND ACTION BAR.................................................................................79 12.1 Hide Title Bar...........................................................................................................79 12.2 Hide Action Bar........................................................................................................79 GUIDES ................................................................................................................................81 REFERENCES........................................................................................................................82
4 Introduction An Introduction to Android Studio Google has made a very useful tool for all Android Developer, the Android Studio. Android Studio is the official IDE for Android development, and with a single download includes everything we need to begin developing Android apps. Android Studio are bundled with Android Software Development Kit (SDK), with all the Android libraries, and the infrastructure to download an Android emulator; we can initially run our application without needing a real device. Emulators are software that mimics the behavior of real devices. Emulators are also called as “Android Virtual Devices (AVDs)” in Android Studio. Android Studio Project Structure The following figure shows the main sections of Android Studio. Figure 1 Basics Sections of Android Studio The sections of Android Studio in the figure above can be summarized as follows:
5 Section 1 : The project files and folders can be viewed from here. In addition, new files and folders can be added from this pane. We need to double-click on the filenames here to open them in the middle pane. Section 2 : The opened files can be activated from the tabs located here for viewing in the middle pane. Section 3 : This is the Run button of Android Studio. We can choose to run the project on an emulator or on a real device. Section 4 : Palette window shows component, layouts, and widgets available in Android Studio. Section 5 : This is the middle pane which contains layout editor. Contents of the active files can be viewed and changed from here. Section 6 : Attributes window shows properties of selected item on the screen. The file structures of an Android project can be viewed in the selection of Android mode, which the default files and folders shown in Figure 2.
6 Figure 2 Folders and File in Android Studio
7 1 manifest Folder This folder has the AndroidManifest.xml file inside. This file contains the configuration parameters of the project such as permissions, services and additional libraries. 2 java Folder This folder contains package which hold the java file. The source code files written in Java programming language reside in this file. 3 res Folder The res (Resources) will contain a different type of folders that are; i. Drawable Folder It will contain the different types of images as per the requirement of application. ii. Layout Folder This folder will contain all XML layout files which we used to define the user interface of our application. iii. Mipmap Folder This folder will contain app / launcher icons that are used to show on the home screen. It will contain different density type of icons such as hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi, to use different icons based on the size of the device. iv. Values Folder This folder will contain various XML files, such as strings, colors, and themes. 4 Gradle Scripts In android, Gradle means automated build system and by using this we can define a build configuration that applies to all modules in our application. In Gradle build.gradle(Project), and build.gradle(Module) files are useful to build configurations that apply to all our app modules or specific to one app module.
8 Applying LinearLayout 1.1 Introduction to LinearLayout The LinearLayout arranges views in a single column or a single row. Child views can be arranges either horizontally or vertically, which explains the need for two different layouts; one for horizontal rows of views and one for vertical columns of views. 1.2 Designing LinearLayout Horizontal To see how LinearLayout Horizontal works, designing the layout editor according to the following example. Figure 1.1 Designing Layout using LinearLayout Horizontal 1.3 Designing LinearLayout Vertical To see how LinearLayout Vertical works, designing the layout editor according to the following example.
9 Figure 1.2 Designing Layout using LinearLayout Vertical 1.4 Designing Nested Layout You may add new activity and name it as RegisterLog. To see how Nested Layout works, consider the following elements typically contained in the activity_registerlog.xml file. <!--Parent layout--> <?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:orientation="vertical" tools:context=".Registerlog"> <ImageView android:id="@+id/logo" android:layout_width="150dp" android:layout_height="150dp" android:layout_gravity="center" android:layout_marginTop="50dp" app:srcCompat="@drawable/logoreg" /> <TextView android:id="@+id/textView10"
10 android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="15dp" android:fontFamily="@font/bigshot_one" android:gravity="center" android:text="REGISTER" android:textSize="20sp" /> <EditText android:id="@+id/email" android:layout_width="350dp" android:layout_height="50dp" android:layout_gravity="center" android:layout_marginTop="10dp" android:background="@drawable/btn_edtext" android:drawableLeft="@drawable/ic_baseline_email_24" android:ems="10" android:hint="Email" android:inputType="textEmailAddress" android:paddingLeft="10dp" /> <EditText android:id="@+id/icno" android:layout_width="350dp" android:layout_height="50dp" android:layout_gravity="center" android:layout_marginTop="10dp" android:background="@drawable/btn_edtext" android:drawableLeft="@drawable/ic_identity" android:ems="10" android:hint="Identity Card Number" android:inputType="textPersonName" android:paddingLeft="10dp" /> <!--first child layout--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="10dp" android:orientation="horizontal"> <androidx.appcompat.widget.AppCompatButton android:id="@+id/btncreate" android:layout_width="50dp" android:layout_height="wrap_content" android:layout_marginLeft="30dp" android:layout_marginRight="5dp" android:layout_weight="1" android:background="@drawable/btn_button" android:text="Create Account" android:textStyle="bold" />
11 <androidx.appcompat.widget.AppCompatButton android:id="@+id/btnreset" android:layout_width="50dp" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginRight="30dp" android:layout_weight="1" android:background="@drawable/btn_button" android:text="Reset" android:textStyle="bold" /> </LinearLayout> </LinearLayout> Figure 1.3 activity_registerlog.xml Source Code Manage the activity_registerlog.xml layout by using Attribute pane. The following result may display in your Layout Editor. Figure 1.4 Designing Layout using Nested LinearLayout
12 Managing Text 2.1 Customizing Text in UI You may follow the following steps to managing customize text in Android Studio. The following result may display in your Layout Editor. Figure 2.1 Customize Text a) Change parent layput below the component tree into LinearLayout (vertical) b) Drop the TextView Tool from the Window Pallete into Component Tree or you can simply drag the TextView into Layout Editor.
13 c) The following Attribites in Figure 3.2 are used: Figure 2.2 Declared Attributes
14 Customizing Wallpaper 3.1 Customizing Wallpaper in UI You may follow the following steps to managing wallpaper in Layout Editor. Figure 3.1 Managing Drawable Resource File a) Under the res folder choose subfolder drawable, right click and select New and Drawable Resource File b) Set your File name and the Root element and click OK. You may find your file in the Drawable folder. Figure 3.2 bg_wallpaper.xml file in Drawable folder c) You may follow the following xml code to manage the wallpaper. You may use html colour code of your own choices.
15 Figure 3.3 bg_wallpaper.xml file d) Select your xml Layout, choose Attribute background, click on Pick a Resource button and click bg_wallpaper.xml file. e) The following result may display in your Layout Editor.
16 Figure 3.4 Customize Wallpaper
17 Managing EditText 4.1Customizing EditText in UI You may follow the following steps to managing EditText in Layout Editor. The following result may display in your Layout Editor. Figure 4.1 Customize EditText a) Under the res folder choose subfolder drawable, right click and select New and Drawable Resource File b) Set your File name and the Root element in the New Resource File window and click OK. You may find your file btn_edText in the Drawable folder.
18 Figure 4.2 btn_edText.xml file in Drawable folder c) You may follow the following xml code to manage EditText. Figure 4.3 Managing btn_edText.xml file d) Drop the editText Tool from the Window Palette into Component Tree or you can simply drag the editText into Layout Editor. You must click once to select your tool in the Layout Editor. e) The following Attributes in Figure 4.4 are used:
19 Figure 4.4 Declared Attributes f) Select your xml Layout , choose Attribute background, click on Pick a Resource button and click btn_edtext.xml file
20 Applying Icon in EditText 5.1 Adding an Icon in EditText You may follow the following steps to adding an icon in EditText. The following result may display in your Layout Editor. Figure 5.1 Icon in EditText a) To create an icon inside Edit Text, you may use Image Asset or you can simply use Vector Asset. b) Assume we are using the Vector Asset to create simple icon inside Edit Text. Go to File > New > Vector Asset c) You may choose the following item in the Asset Studio window:
21 Figure 5.2 Asset Studio Window d) In the Layout Editor select Edit Text and choose drawableLeft > Pick a Resource > Select your icon.
22 Managing Customize Button 6.1 Customize Button You may follow the following steps to customizing button in Layout Editor. The following result may display in your Layout Editor. Figure 6.1 Customize Button a) You may follow the same method in Tutorial 4 to customizing Button in Layout Editor. b) Set the File Name and the Root Element in the New Resource File window and click OK. You may find your btn_button in the Drawable folder.
23 Figure 6.2 btn_button.xml file in drawable Folder c) You may follow the following xml code to manage Button. Figure 6.3 btn_button.xml Code Mode d) Drop Button Tool from Window Palette into Component Tree or you can simply drag the Button into Layout Editor. You must click once to select your tool in the Layout Editor. e) The following Attributes in Figure 6.4 are used:
24 Figure 6.4 Declared Attributes f) In the Layout Editor choose Code Mode and change <Button… to the following xml code. Figure 6.5 Code Mode Layout Editor
25 Design Circle Image View 7.1 Customizing Image View You may follow the following steps to customizing Image View in Layout Editor. The following result may display in your Layout Editor. Figure 7.1 Circle Image View a) To create Circle Image View you are required to add the following dependency in build.gradle(app) :
26 Figure 7.2 dependencies b) In the Layout Editor choose Code Mode and change <ImageView… to the following xml code. Figure 7.3 Code Mode Layout Editor c) Adding Text View and Divider to enhance the look of your layout.
27 Design Card View 8.1 Apply Card View in Layout Editor Create Second Activity and manage your activity_second.xml layout and SecondActivity.java file. You may follow the following steps to customizing Card View in Layout Editor. The following result may display in your Layout Editor. Figure 8.1 CardView in Layout Editor a. Drag or simple drop cardview from window pallete into Component Tree or the Layout Editor. b. You may find the following xml code in Code Mode in the Layout Editor.
28 Figure 8.2 Code Mode in Layout Editor c. Design the cardview by inserting pictures and text. The following xml code in Layout Editor may help you managing the layout. <?xml version="1.0" encoding="utf-8"?> <LinearLayout 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="@drawable/bg_wallpaper" android:orientation="vertical" tools:context=".SecondActivity"> <TextView android:id="@+id/textView2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="5dp"
29 android:fontFamily="@font/bigshot_one" android:gravity="center" android:text="Dashboard" android:textSize="24sp" /> <de.hdodenhof.circleimageview.CircleImageView android:id="@+id/imageView" android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="center" android:layout_marginTop="5dp" android:src="@drawable/profile" app:civ_border_color="#101010" app:civ_border_width="2dp" /> <TextView android:id="@+id/textView3" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:fontFamily="@font/bigshot_one" android:gravity="center" android:text="Nenny Melissa" android:textSize="16sp" android:textStyle="bold" /> <TextView android:id="@+id/textView4" android:layout_width="match_parent" android:layout_height="wrap_content" android:fontFamily="@font/bigshot_one" android:gravity="center" android:text="Lecturer" /> <View android:id="@+id/divider" android:layout_width="300dp" android:layout_height="1dp" android:layout_gravity="center" android:layout_marginTop="5dp" android:background="?android:attr/listDivider" /> <TextView android:id="@+id/textView5" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:fontFamily="@font/covered_by_your_grace" android:gravity="center" android:text="The best study is practice." android:textSize="20sp" android:textStyle="bold" />
30 <TextView android:id="@+id/textView6" android:layout_width="match_parent" android:layout_height="wrap_content" android:fontFamily="@font/covered_by_your_grace" android:gravity="center" android:text="So choose one for your start!" android:textSize="20sp" android:textStyle="bold" /> <androidx.cardview.widget.CardView android:id="@+id/card1" android:layout_width="350dp" android:layout_height="110dp" android:layout_gravity="center" android:layout_marginTop="5dp" app:cardBackgroundColor="#ffffff" app:cardCornerRadius="15dp"> <TextView android:id="@+id/textView7" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:fontFamily="@font/bigshot_one" android:gravity="center" android:text="Mobile Application Development" android:textSize="16sp" /> <ImageView android:id="@+id/imageView2" android:layout_width="200dp" android:layout_height="90dp" android:layout_gravity="center" android:layout_marginTop="10dp" app:srcCompat="@drawable/mobile" /> </androidx.cardview.widget.CardView> <androidx.cardview.widget.CardView android:id="@+id/card2" android:layout_width="350dp" android:layout_height="110dp" android:layout_gravity="center" android:layout_marginTop="5dp" app:cardCornerRadius="15dp"> <TextView android:id="@+id/textView8" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:fontFamily="@font/bigshot_one" android:gravity="center"
31 android:text="Database Design" android:textSize="16sp" /> <ImageView android:id="@+id/imageView3" android:layout_width="200dp" android:layout_height="90dp" android:layout_gravity="center" android:layout_marginTop="10dp" app:srcCompat="@drawable/database" /> </androidx.cardview.widget.CardView> <androidx.cardview.widget.CardView android:id="@+id/card3" android:layout_width="350dp" android:layout_height="110dp" android:layout_gravity="center" android:layout_marginTop="5dp" app:cardCornerRadius="15dp"> <TextView android:id="@+id/textView9" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:fontFamily="@font/bigshot_one" android:gravity="center" android:text="Web Design Technology" android:textSize="16sp" /> <ImageView android:id="@+id/imageView4" android:layout_width="200dp" android:layout_height="90dp" android:layout_gravity="center" android:layout_marginTop="10dp" app:srcCompat="@drawable/web" /> </androidx.cardview.widget.CardView> <View android:id="@+id/divider2" android:layout_width="200dp" android:layout_height="1dp" android:layout_gravity="center" android:layout_marginTop="15dp" android:background="?android:attr/listDivider" /> </LinearLayout> Figure 8.3 activity_second.xml in Layout Editor
32 Splashscreen 9.1 Applying Splashscreen The following result may display in your Layout Editor. Figure 9.1 activity_Splashscreen.xml Layout
33 a. The following xml code in Layout Editor may help you managing the layout. <?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:orientation="vertical" tools:context=".Splashscreen"> <ImageView android:id="@+id/imgLogo" android:layout_width="400dp" android:layout_height="350dp" android:layout_gravity="center" android:layout_marginTop="150dp" app:srcCompat="@drawable/edu2" /> <ProgressBar android:id="@+id/progressBar" style="@android:style/Widget.DeviceDefault.Light.ProgressBar.Lar ge" android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:id="@+id/textfooter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="40dp" android:gravity="center_horizontal" android:text="© 2023 Splash Screen | JTMK.Nenny Melissa\nAll Rights Reserved." android:textColor="@android:color/black" android:textSize="12sp" /> </LinearLayout> Figure 9.2 activity_splashscreen.xml
34 9.2 Managing Java File package pmujtmk.nennymelissa.managingcustomizetext; import androidx.appcompat.app.AppCompatActivity; import android.content.Intent; import android.os.Bundle; import android.os.Handler; import android.view.Window; import android.view.WindowManager; public class Splashscreen extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //this will remove title bar requestWindowFeature(Window.FEATURE_NO_TITLE); this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSC REEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); //-------// setContentView(R.layout.activity_splashscreen); new Handler().postDelayed(new Runnable() { @Override public void run() { startActivity(new Intent(Splashscreen.this, MainActivity.class)); finish(); } }, 5000); } } Figure 9.3 Splashscreen.java Source Code 9.3 Managing Manifest File Insert the following item in your AndroidManifest.xml: android:screenOrientation="portrait" You may follow the following code arrangement and modify the <intent-filter> method below the Splashscreen Activity.
35 Figure 9.4 AndroidManifest.xml Source Code
36 Managing Users Registration and Log In 10.1 Connecting Firebase Access your Firebase at https://firebase.google.com and click Go to console. Click Get started. Figure 10.1 Firebase Console Click Add project. Figure 10.2 Add New Project
37 Set the Project name as V1BTMad and click Continue. Figure 10.3 Assigning Project name Enable Google Analytics and click Continue. Figure 10.4 Enable Google Analytics
38 Set Default Account for Firebase and click Create project. Figure 10.5 Configure Google Analytics Click Continue. Figure 10.6 Setup Window
39 Click the Android logo under ‘Get started by adding Firebase to your app’. Figure 10.7 Project Overview Window Enter package name and you must use the same package name from Android Studio project. Click Register app to continue. Figure 10.8 Register Package
40 Download google-services.json file and move the file into your Android app module root directory. Figure 10.9 Download google-services.json
41 Figure 10.10 Moving google-services.json file Figure 10.11 google-services.json in Android app Module
42 Go back to Firebase console and click Next. Figure 10.12 Continuing Next Step The google services plugin for Gradle loads the goole-services.json file you must downloaded. Modify your build.gradle files to use the plugin. Figure 10.13 Adding dependency in build.gradle (Project)
43 Figure 10.14 Adding dependency in build.gradle (Module:app) Open Project-level build.gradle and modify as below. Figure 10.15 build.gradle (Project) Open App-level build. gradle and modify as below and click Sync Now.
44 Figure 10.15 build.gradle (Module:app) In the Firebase console click Next amd Continue to console. *You also able to use Firebase Assistant to connect to your Andorid project.
45 10.2 Log In Access your Firebase and go to Firebase console. Under Build menu click Authentication. Figure 10.16 Firebase Product categories Click Get started Figure 10.17 Firebase Authentication
46 Choose sign-in method and choose Email/Password. Figure 10.18 Sign-in method Enable Email/Password and click Save. Figure 10.18 Sign-in providers I
47 Figure 10.19 Sign-in provider II Select users tab. Figure 10.20 Users Authentication I Click Add user and fill in user email and password. Figure 10.21 Users Authentication II