Tag: tutorial

Android: Basic WebView Tutorial

A WebView lets you pull a web page and display it in your Android app. It doesn’t take long to implement an Android WebView. Read on. I’ll show you how.

AndroidManifest.xml

First, open your manifest file to add this permission for INTERNET:

<uses-permission android:name=”android.permission.INTERNET” />

1	<uses–permission android:name=“android.permission.INTERNET” />

The web page won’t be loaded into your app without this permission.

This is how my manifest file looks like:

Path: ...\MyAndroidStudioProjects\WebView\app\src\main\AndroidManifest.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android”
    package=”net.catzie.webview” >
    <uses-permission android:name=”android.permission.INTERNET” />
    <application
        android:allowBackup=”true”
        android:icon=”@mipmap/ic_launcher”
        android:label=”@string/app_name”
        android:supportsRtl=”true”
        android:theme=”@style/AppTheme” >
        <activity android:name=”.MainActivity” >
            <intent-filter>
                <action android:name=”android.intent.action.MAIN” />
                <category android:name=”android.intent.category.LAUNCHER” />
            </intent-filter>
        </activity>
    </application>
</manifest>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<?xml version=“1.0” encoding=“utf-8”?>

<manifest xmlns:android=“http://schemas.android.com/apk/res/android”

package=“net.catzie.webview” >

<uses–permission android:name=“android.permission.INTERNET” />

<application

android:allowBackup=“true”

android:icon=“@mipmap/ic_launcher”

android:label=“@string/app_name”

android:supportsRtl=“true”

android:theme=“@style/AppTheme” >

<intent–filter>

</intent–filter>

</activity>

</application>

</manifest>

activity_main.xml

Then we’re adding a WebView element to the XML file. My XML file is named activity_main.xml

Path: ...\MyAndroidStudioProjects\WebView\app\src\main\res\layout\activity_main.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<WebView  xmlns:android=”http://schemas.android.com/apk/res/android”
    android:id=”@+id/webview”
    android:layout_width=”fill_parent”
    android:layout_height=”fill_parent”
    />

1

2

3

4

5

6

<?xml version=“1.0” encoding=“utf-8”?>

<WebView xmlns:android=“http://schemas.android.com/apk/res/android”

android:id=“@+id/webview”

android:layout_width=“fill_parent”

android:layout_height=“fill_parent”

/>

MainActivity.java

I have MainActivity.java here, which loads activity_main.xml and then loads a web page (google.com) into the WebView.

Path: ...\MyAndroidStudioProjects\WebView\app\src\main\java\net\catzie\webview\MainActivity.java

package net.catzie.webview;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends Activity {
    private WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        /**
         * WebView Begin
         */
        webView = (WebView) findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl(“http://www.google.com”);
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

package net.catzie.webview;

import android.app.Activity;

import android.os.Bundle;

import android.webkit.WebView;

public class MainActivity extends Activity {

private WebView webView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

/**

* WebView Begin

*/

webView = (WebView) findViewById(R.id.webview);

webView.getSettings().setJavaScriptEnabled(true);

webView.loadUrl(“http://www.google.com”);

}

The following line of code attaches the WebView whose id is “webview” to the variable “webView”:

webView = (WebView) findViewById(R.id.webview);

1	webView = (WebView) findViewById(R.id.webview);

And this allows JavaScript in the WebView:

webView.getSettings().setJavaScriptEnabled(true);

1	webView.getSettings().setJavaScriptEnabled(true);

This one is what actually loads a given URl into the WebView:

webView.loadUrl(“http://www.google.com”);

1	webView.loadUrl(“http://www.google.com”);

February 29, 2016

Android transparent overlay without View

We’re not going to use ViewOverlay here. We’ll use Dialog instead.

The overlay does not show on button click. What I did was let the overlay appear when the activity is loaded.

First, create the XML file for the contents of that dialog overlay.

\app\src\main\res\layout\popup_content.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:background=”#78000000″
android:padding=”@dimen/activity_margin”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<TextView
android:textColor=”#ffffff”
android:text=”This is your dialog with transparent background.”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />
<Button
android:id=”@+id/btn_close_overlay”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@color/colorPrimary”
android:textColor=”#ffffff”
android:text=”Dismiss”/>
</LinearLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<?xml version=“1.0” encoding=“utf-8”?>

<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”

android:orientation=“vertical”

android:background=“#78000000”

android:padding=“@dimen/activity_margin”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<TextView

android:textColor=“#ffffff”

android:text=“This is your dialog with transparent background.”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content” />

<Button

android:id=“@+id/btn_close_overlay”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:background=“@color/colorPrimary”

android:textColor=“#ffffff”

android:text=“Dismiss”/>

</LinearLayout>

Then add the following code into your activity’s Java file. Please edit as needed in your project.

Notes:
You might need to add lines of “import” codes yourself for the classes I used.
You might need to fill in missing @color and @dimen values yourself.

app\src\main\java\com\yourpackagename\yourappname\activities\MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener
{
    Dialog dialog;
    private Button btn_close_overlay;

    @Override
    protected void onCreate(Bundle savedInstanceState){
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            dialog = new Dialog(this, android.R.style.Theme_Translucent_NoTitleBar);

            showOverlay();
            btn_close_overlay = (Button) dialog.findViewById(R.id.btn_close_overlay);
            btn_close_overlay.setOnClickListener(new View.OnClickListener(){
               public void onClick(View v){
                   hideOverlay();
               }
            });
    }
    private void showOverlay(){
        dialog.setContentView(R.layout.popup_content);
        dialog.show();
    }

    private void hideOverlay(){
        dialog.dismiss();
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

public class MainActivity extends AppCompatActivity implements View.OnClickListener

{

Dialog dialog;

private Button btn_close_overlay;

@Override

protected void onCreate(Bundle savedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

dialog = new Dialog(this, android.R.style.Theme_Translucent_NoTitleBar);

showOverlay();

btn_close_overlay = (Button) dialog.findViewById(R.id.btn_close_overlay);

btn_close_overlay.setOnClickListener(new View.OnClickListener(){

public void onClick(View v){

hideOverlay();

}

});

}

private void showOverlay(){

dialog.setContentView(R.layout.popup_content);

dialog.show();

}

private void hideOverlay(){

dialog.dismiss();

}

January 20, 2016

Android confirm dialog box with OK and Cancel button

This will probably be one of the Android code snippets that I will need to go back to from time to time.

I’m sharing the codes we need to show an Android confirm dialog to prompt the user to click “yes” or “no”, or in my case, “OK” or “Cancel”.

The following code for Android confirm dialog is in my MainActivity.java file:

(more…)

November 25, 2015

How to make a basic “Login via Facebook” with PHP & JavaScript

You’ve seen how some popular websites let you register or login via Facebook — Pinterest, Vimeo, Lifehacker, and many more.

In this blog post, I’ll show you the very basic setup of the Facebook login button for your website. It is up to you to enhance the functions of your registration system.

Note: There are periodic updates to the Facebook API, sometimes resulting to issues with previously working implementations of the API. So please note that this tutorial was written in the third week August 2015. 🙂

I began writing this tutorial late in August, but because of other projects, was able to publish it when it’s already September.

(more…)

September 8, 2015

How to install Laravel 5 in Windows with XAMPP

This short tutorial is based on my own installation of Laravel 5 on XAMPP that is running on Windows 7.

In this Laravel 5 tutorial, you will need:

Composer – click here for installation instructions
command prompt
Internet connection
XAMPP

There have been major changes in the following: New Folder Structure, Contracts, Route Cache, Route Middleware, Controller Method Injection, Authentication Scaffolding, Event Objects, Commands / Queueing, Database Queue, Laravel Scheduler, Tinker / Psysh, DotEnv, Laravel Elixir, Laravel Socialite, Flysystem Integration, Form Requests, Simple Controller Request Validation, New Generators, Configuration Cache, Symfony VarDumper.

To learn more about the Laravel 5.0 update, read about it here.
(more…)

July 31, 2015

How to install a WHMCS Theme

Today my task at work is to install a WHMCS Theme from whmcsthemes.com. WHMCS Themes has this theme installation instruction video, but I find it a bit difficult to follow cos I have to pause from time to time. So I took down notes in Notepad. And in case there are people searching for these, here they are:
(more…)

January 6, 2012

How to transfer contacts from O2 Xda Atom Exec phone to Samsung Galaxy 5 GT-i5503

I think this is my first ever blog entry about gadgets. lol. I’m not really into gadgets but I ran into a problem last night, so I thought I’d post the solution here.

’twas a troublesome night and morning for me. Since last night I was trying to export / copy all O2 Xda Atom Exec phone contacts into a SIM card. This old cellphone, O2 Xda Atom Exec, by default, can only “Save to SIM” contacts individually. There’s no multiple selection. What I wanted to do was export the O2 Atom contacts into a SIM card, and from the SIM card export to another phone – Samsung Galaxy 5 GT-I5503… or is it GT-15503? 🙂

I had so much trouble doing this last night, and I won’t elaborate that anymore. Here’s the hassle-free (or less hassle) way of moving your contacts from your O2 Xda Atom Exec phone into Samsung Galaxy 5 GT-I5503. This might work too even if the other phone isn’t Samsung Galaxy 5 GT-I5503.

Please bear with me – always mentioning the full model names of the phones! lol.

(more…)

July 15, 2011