Android: WebView Load Webpages from URL And Assets

Objective: 
The objective of this Android tutorial is to use Webview and load Webpages from URL and Assets. Refer the screen shots below.

Screenshots:
Part 1: Opening an online website (like google.com)
1. Home page to load the WebView URL http://www.google.com

2. Search for any keyword (like gmail) in Google, which displays the search results as follows:

Part 2: Opening a custom website (html) from local assets folder
1. Let’s imagine we have local html files and images under \src\main\assets folder of the project

2. Index.html will display the image one.jpg file and has hyperlink  (here) to index2.html.

3. On-click of the hyperlink “here” in index1.html, it will take you to index2.html, as shown below

4. Now if you want to open it in mobile, you will see the following output:

5. On-click of “here”, it will open the index2.html, as shown below.

6. On-click of Back button , it will bring it back to previous page. On-click of Back button again, it will close the application.

Instructions to setup:
1. Git clone the project and you should see the project \5_Seekbar_N_Progressbar downloaded.
2. Now open the project in Android Studio
3. Press the keyboard – Shift + F10 to run the App, select the configured virtual device and click OK.

4. You can now see the output in the Android Emulator.

Source Code Explanation:
1. Activity_main.xml ((under \src\res\layout\):
1. Overall Layout is set as "RelativeLayout"
2. Set the Webview component with:
id as "webView"
layout_width as “match_parent”

2. MainActivity.java:
1. Instantiate WebView by using findViewById() by passing their respective id’s as defined in activity_main.xml
2. Set the localURL to point to index.html under assets folder using file:///(i.e  file:///android_asset/index.html).
3. Load the URL using webView.loadURL() function, enable the Javascript (setJavascriptEnabled(true).
4. Set the WebViewClient to instance of new WebViewClient() as shown in the code below.
5. The above logic will load the index.html file.
6. Just incase, if you want to load the google.com, just uncomment webView.loadURL(“http://www.google.com”) and comment out the localURL call.
webView.loadUrl("http://www.google.com");
//webView.loadUrl(localURL);

webView.loadUrl("http://www.google.com");
//webView.loadUrl(localURL);

3. strings.xml (under \src\res\values\)
All string values defined

4. colors.xml (under \src\res\values\):
Default standard colors defined

5. styles.xml (under \src\res\values\)
All the default styles defined.

6. AndroidManifest.xml (under \src\main):
Just add additional line highlighted in yellow to enable the permission to enable Internet.

7. index.html (under src\main\assets\)
“here” having hyperlink (a href) to index2.html.

8. index2.html (under src\main\assets\):

Android: Seekbar and Progressbar

Objective: 
The objective of this Android tutorial is to use Seekbar and Progressbar. Refer the screen shots below.

Screenshots:
1. On swipe of Seekbar to the right, the progress bar below also moves along.

Instructions to setup:
1. Git clone the project and you should see the project \5_Seekbar_N_Progressbar downloaded.
2. Now open the project in Android Studio
3. Press the keyboard – Shift + F10 to run the App, select the configured virtual device and click OK.

4. You can now see the output in the Android Emulator.

Source Code Explanation:
1. Activity_main.xml ((under \src\res\layout\):
1. Overall Layout is set as "RelativeLayout"
2. Set the Seekbar component with:
id as "seekBar"
layout_width as “match_parent”
3. Set the Progressbar component with:
id as "progressBar"
layout_width as “match_parent”

2. MainActivity.java:
1. Instantiate ProgressBar, SeekBar, Button by using findViewById() by passing their respective id’s as defined in activity_main.xml
2. Set the max value of Seekbar to 100.
3. Set OnSeekBarChangeListener() function for the button and inside onPressChanged() function set progressBar value (using setProgress() method) to incoming progress value as shown in the code below.

3. strings.xml (under \src\res\values\)
All string values defined

4. colors.xml (under \src\res\values\):
Default standard colors defined

5. styles.xml (under \src\res\values\)
All the default styles defined.

Android: EditText on Button Click & Toggle Button

Objective: 
The objective of this Android tutorial is to use Android EditText to enter some value and display the same in TextView on button click. Also to use the ToggleButton and on-click should display the pop-up message using Toast. Refer the screen shots below.

Screenshots:
1. Default Home page will display the TextView, EditText with hint “Enter anything here”, Button and Togglebutton (with OFF state).

2. Enter some text (Test in the screenshot below), click the Green Tick mark in the keypad (as highlighted in red below) and click the Button (as highlighted in yellow), it should now display the entered text (Test here) in the TextView area.

3. Now click the Toggle button “OFF”, it will display the Toast message “OFF” below.

4. Now click the Toggle button “ON”, it will display the Toast message “ON” below.

Instructions to setup:
1. Git clone the project and you should see the project \4_Toggle_Button_N_EditText_On_Button_Click downloaded
2. Now open the project in Android Studio
3. Press the keyboard – Shift + F10 to run the App, select the configured virtual device and click OK.

4. You can now see the output in the Android Emulator.

Source Code Explanation:
1. Activity_main.xml ((under \src\res\layout\):
1. Overall Layout is set as "RelativeLayout"
2. TextView component is set with:
id as "textView"
3. EditText component is set with:
id as "editText"
hint as "Enter anything here.."

Cont..
4. Button component is set with:
id as "button"
text as "Button”
5. Toggle Button component is set with:
id as "toggleButton"

2. MainActivity.java:
1. Instantiate TextView, EditText, Button by using findViewById() by passing their respective id’s as defined in activity_main.xml
2. Set On-click listener function for the button and onClick get the text entered from EditText (using getText.toString()) and set it to TextView (setText()) as shown in the code below.
3. Instantiate ToggleButton by using findViewById() by passing the respective id of ToggleButton as defined in activity_main.xml
4. Now invoke the setOnCheckedChangedListenter() function, which accepts a boolean parameter isChecked, which will be true if the ToggleButton is in ON state and will be false, if the ToggleButton is in OFF state.
5. If the isChecked is true, set the Toast text to ON, else set the Toast text to OFF.

3. colors.xml (under \src\res\values\):
Default standard colors defined

4. strings.xml (under \src\res\values\)
All string values defined

5. styles.xml (under \src\res\values\)
All the default styles defined.

Android: Android Intent and start a new Activity

Objective: 
The objective of this Android tutorial is to use Android intent and open a new activity on button click. Refer the screen shots below.
Screenshots:

On-click of “CLICK ME” button, it should display the new activity as shown below.

Instructions to setup:
1. Git clone the project and you should see the project \3_Intent_Start_New_Activity downloaded
2. Now open the project in Android Studio
3. Press the keyboard – Shift + F10 to run the App, select the configured virtual device and click OK.

4. You can now see the output in the Android Emulator.

Source Code Explanation:
1. Activity_main.xml ((under \src\res\layout\):
1. Overall Layout is set as "RelativeLayout"
2. Button component is set with:
id as "button"
background as "holo_blue_dark"
text as "Click Me"

2. MainActivity.java:
1. Instantiate Button bt1 by using findViewById() by passing id name "button", as defined in activity_main.xml
2. Set On-click listener function for the button and onClick invoke the Intent (android.content.Intent) with required parameters – MainActivity.this, SecondActivity.class as shown in the code below.
3. Now invoke startActivity() with intent as input parameter.

3. SecondActivity.java:
Just all the default values in Activity.

4. activity_second.xml (under \src\res\layout\)
1. Overall Layout is set as "RelativeLayout"
2. TextView component is set with:
id as "textView"
background as "holo_blue_dark"
text as "happy_birthday value defined in strings.xml"
textColor as “colorAccent”
textSize as “36sp”
textStyle as “bold”

5. colors.xml (under \src\res\values\):
Default standard colors defined
string.xml (under \src\res\values\)
All string values defined

6.

styles.xml (under \src\res\values\)
All the default styles defined.

Android: Android UI Background Image

Objective: 
The objective of this Android tutorial is to display background with an image. Refer the screen shots below.

Screenshots:
Background Image:

Instructions to setup:
1. Git clone the project and you should see the project \FirstApp downloaded
2. Now open the project in Android Studio
3. Press the keyboard – Shift + F10 to run the App, select the configured virtual device and click OK.

4. You can now see the output in the Android Emulator.

Source Code Explanation:
1. Finalize the background image.
Finalize the background image (usually of the size 540 X 960) and copy it to src\main\res\drawable. Here I copied the image named download.jpg

2. activity_main.xml (under \src\res\layout\)
1. Overall Layout is set as "RelativeLayout"
2. Background is set as @drawable/download (extension of the image i.e .jpg is required)

3. string.xml (under \src\res\values\)
Set the app name to “First Application”.

4. colors.xml (under \src\res\values\)
Change the colours in this colors.xml file to suit the background image.