covert web site to android application

How to convert a website into an Android app from scratch

January 11th 2019
In this tutorial, we will learn How to Convert a Website into an Android Application using Android Studio.
If you do not know anything about Android Studio yet, Don’t worry.
We will start everything from scratch.
This is how the website looks like:
And the Android app, we developed using Android Studio looks like:

Before we begin:

NOTE: If you downloaded Android Studio and already installed in your system then you can skip the part and Go to direct the coding part.
If not
Download Android Studio:
Google provides Android Studio for the Windows, Mac OS X, and Linux platforms. You can download this software from the Android Studio homepage.
Before downloading Android Studio, make sure your platform meets one of the following requirements:
Windows OSMicrosoft Windows 7/8/10 (32-bit or 64-bit)
2 GB RAM minimum, 8 GB RAM recommended
2 GB of available disk space minimum, 4 GB Recommended (500 MB for IDE + 1.5 GB for Android SDK and emulator system image)
1280 x 800 minimum screen resolution
For accelerated emulator: 64-bit operating system and Intel processor with support for Intel VT-x, Intel EM64T (Intel 64), and Execute Disable (XD) Bit functionality
Mac OSMac OS X 10.8.5 or higher, up to 10.11.4 (El Capitan)
2 GB RAM minimum, 8 GB RAM recommended
2 GB of available disk space minimum, 4 GB Recommended (500 MB for IDE + 1.5 GB for Android SDK and emulator system image)
1280 x 800 minimum screen resolution
JDK 6
Linux OS
GNOME or KDE desktop: Tested on Ubuntu 12.04, Precise Pangolin (64-bit distribution capable of running 32-bit applications)
64-bit distribution capable of running 32-bit applications
GNU C Library (glibc) 2.11 or later
2 GB RAM minimum, 8 GB RAM recommended
2 GB of available disk space minimum, 4 GB Recommended (500 MB for IDE + 1.5 GB for Android SDK and emulator system image)
1280 x 800 minimum screen resolution
JDK 8
For accelerated emulator: Intel processor with support for Intel VT-x, Intel EM64T (Intel 64), and Execute Disable (XD) Bit functionality, or AMD processor with support for AMD Virtualization (AMD-V)

Installing Android Studio on 64-bit Windows 8.1

Figure 1. Set up Android Studio
Figure 2. Do you want to install the Android SDK and AVD?
Figure 3. Accept the license agreement to continue the installation
Figure 4. Set the Android Studio and Android SDK installation locations
Figure 5. Create a new shortcut for Android Studio
To complete your installation, leave the Start Android Studio box checked and click Finish.
Figure 6. Leave the Start Android Studio checkbox checked to run this software

Running Android Studio

Android Studio presents a splash screen when it starts running:
If you’re like me and don’t have a previously installed version, you can just keep the default setting and click OK.
Figure 9. Validate your Android SDK and development environment setup
When you click Next, the setup wizard invites you to select an installation type for your SDK components. For now, I recommend you keep the default standard setting.
Figure 10. Choose an installation type
Figure 11. Review settings
The wizard will download and unzip various components. Click Show Details if you want to see more information about the archives being downloaded and their contents.
Figure 12. The wizard downloads and unzips Android Studio components
Your options are to either put up with the slow emulator or use an Android device to speed up development. I’ll discuss the latter option later in the tutorial.
Finally, click Finish to complete the wizard. You should see the Welcome to Android Studio dialog box:
Figure 14. Welcome to Android Studio
You’ve installed and configured Android Studio and created a project for your first Android Studio mobile app; now you’re ready to build your Android application. In Android Studio, this means populating your new project with Java source code and resource files.

Your first Android Studio mobile app

Starting a new project

From our setup so far, you should still have Android Studio running with the Welcome to Android Studio dialog box. From here, click Start a new Android Studio project. Android Studio will respond with the Create New Project dialog box shown in Figure.
Figure 15. Create a new project
Figure 16. Select your target device categories
Click Next, and you will be given the opportunity to choose a template for your app’s main activity. For now, we’ll stick with Empty Activity. Select this template and click Next.
Next, you’ll customize the activity:
Enter W2A as the activity name and main as the layout name, and click Finish to complete this step. Android Studio will respond that it is creating the project, then take you to the project workspace.
Figure 19. Android Studio workspace
The project window is organized into a tree whose main branches are App and Gradle Scripts. The App branch is further organized into manifests, java, and res subbranches:
  • manifests stores AndroidManifest.xml, which is an XML file that describes the structure of an Android app. This file also records permission settings (where applicable) and other details about the app.
  • java stores an app’s Java source files according to a package hierarchy, which is ca.javajeff.w2a in this example.
  • res stores an app’s resource files, which are organized into drawable, layout, mipmap, and values subbranches:
  • drawable: an initially empty location in which to store an app’s artwork
  • layout: a location containing an app’s layout files; initially, main.xml(the main activity’s layout file) is stored here
  • mipmap: a location containing various ic_launcher.png files that store launcher screen icons of different resolutions
  • values: a location containing colors.xml, dimens.xml, strings.xml, and styles.xml
The Gradle Scripts branch identifies various .gradle (such as build.gradle) and .properties (such as local.properties) files that are used by the Gradle-based build system.

Now the coding part will start…

Add a webView to your activity as shown in the picture below.
layout/activity_main.xml
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android"
xmlns:tools=”http://schemas.android.com/tools" android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.MainActivity”>
<WebView
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:id=”@+id/webView”
android:layout_alignParentLeft=”true”
android:layout_alignParentStart=”true”
android:layout_alignParentTop=”true”
android:layout_alignParentRight=”true”
android:layout_alignParentEnd=”true” />
</RelativeLayout>
src/main/AndroidManifest.xml
<?xml version=”1.0" encoding=”utf-8"?><manifest xmlns:android=”http://schemas.android.com/apk/res/android" package=”com.vinaysomawat.careerhigh”
android:installLocation=”auto”>
<uses-permission android:name=”android.permission.INTERNET”/>
<application
android:allowBackup=”true”
android:icon=”@mipmap/faviconcircular”
android:label=”@string/app_name”
android:roundIcon=”@mipmap/faviconcircular”
android:supportsRtl=”true”
android:theme=”@style/AppTheme”>
<activity android:name=”.SplashActivity” android:theme=”@style/SplashTheme”>
<intent-filter>
<action android:name=”android.intent.action.MAIN” />
<category android:name=”android.intent.category.LAUNCHER” />
</intent-filter>
</activity>
<activity android:name=”.MainActivity” />
</application>
</manifest>
MainActivity.java
package com.vinaysomawat.careerhigh;/**
 * Created by Vinay Somawat on 10-01-2019.
 */
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends ActionBarActivity {
private WebView mywebview;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mywebview = (WebView)findViewById(R.id.webView);
WebSettings webSettings = mywebview.getSettings();
webSettings.setJavaScriptEnabled(true);
mywebview.loadUrl(“https://careerhigh.in");
mywebview.setWebViewClient(new WebViewClient());
}
@Override
public void onBackPressed(){
if(mywebview.canGoBack()) {
mywebview.goBack();
} else
{
super.onBackPressed();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item){
int id = item.getItemId();
if(id == R.id.action_settings){
return true;
}
return super.onOptionsItemSelected(item);
}
}
menu/menu_main.xml
<menu 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" tools:context=”.MainActivity”>
<item android:id=”@+id/action_settings” android:title=”@string/action_settings”
android:orderInCategory=”100" app:showAsAction=”never” />
</menu>
values/styles.xml
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="TextAppearance.AppCompat.Widget.ActionBar.Title" parent="android:TextAppearance">
        <item name="android:textColor">@color/titlecolour</item>
        <item name="android:textSize">30sp</item>
    </style>

</resources>
values/strings.xml
<?xml version="1.0" encoding="utf-8"?><resources>

    <string name="app_name">CareerHigh</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>

</resources>
values/colors.xml
<?xml version="1.0" encoding="utf-8"?><resources>
    <color name="colorPrimary">#000000</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="titlecolour">#398bb7</color>
</resources>
Add a launching activity to App: (It looks nice)
Launching Activity
SplashActivity.java
package com.vinaysomawat.careerhigh;

/**
 * Created by Vinay Somawat on 10-01-2019.
 */import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;


public class SplashActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}
And add some code it values/styles.xml
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowBackground">@drawable/background</item>
</style>
create a drawable/background.xml file:
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimary" />

    <item>
        <bitmap android:src="@drawable/logo2"
            android:gravity="center" />

    </item>
</layer-list>
make sure you add a sample image to drawable folder to display in launching activity.
OUTPUT:
Now run your android app, and you will see the following result

Finally, your first Android App is created.

If you got stuck somewhere

Comments

Post a Comment

Popular posts from this blog

How to build a Wall Mounted Family Calendar and Dashboard

Image
  How to build a Wall Mounted Family Calendar and Dashboard with a Raspberry Pi and cheap monitor Sponsored By I love dashboards. I love Raspberry Pis (tiny $35 computers the size of a set of playing cards). And I'm   cheap   frugal. I found a 24" old LCD at Goodwill (a local thrift shop) and bought it but it's been sitting unused in my garage. Then I stumbled on  DakBoard . The idea is simple - A wifi connected wall display for your photos, calendar, news, weather and to-do. The implementation is simple genius. It's a browser that starts up full screen (kiosk mode) and just sits there and updates occasionally. DakBoard provides the private webpage and tools to make that happen. You can certainly build this yourself with any number of open source tools. I chose  DakBoard  because it was simple, beautiful, and I was able to get the whole thing done in less than an hour. I'm sure I'll spend many hours tweaking it through. There's also the very popular  M...
Read more

Build a Node.js API

Image
Build a Node.js API Node.js can be intimidating to beginners. But its flexible structure and lack of strict guidelines makes it seem more complicated than it is. This tutorial is a quick and simple guide to Node.js, the Express framework, and MongoDB, focusing on the fundamental REST routes and basic database interaction. You’ll build a simple API boilerplate that can then be used as the foundation for any app. Who This Tutorial Is For : You should have a basic understanding of REST APIs and CRUD operations, plus basic JavaScript knowledge. I use ES6 (mainly fat-arrow functions), but nothing too complex. For this tutorial, you’ll create the skeleton of a back-end for a note-taking application — think You want to be able to do all four CRUD actions on your notes: create, read, update, and delete. Setting Up If you don’t have Node installed, . In a new directory, run npm init, and follow along with the prompts, giving your app the name of ‘notable’ (or whatever ...
Read more

Using the SoundCloud API with the JavaScript SDK

Image
Using the SoundCloud API Setup a Basic HTML Document We will create a basic HTML page which will serve as our homepage. We will also include the SDK here, so we can make use of its functionality. <!DOCTYPE html> < html > < head > < title > Include SDK - Using SoundCloud API </ title > < script src = " //connect.soundcloud.com/sdk.js " > </ script > </ head > < body > </ body > </ html > Notice that we have included the SDK in our page directly from SoundCloud’s servers. You can also download the SDK and reference to it like: < script src = " sdk.js " > </ script > To test if the SDK gets loaded in your webpage correctly: Open up the page in a browser (Chrome recommended). Open up Developer Console in the browser ( Ctrl + Shift + J , in Chrome). In the Console, type SC and press enter. SC is a Javascript Object created by the SDK which we just inc...
Read more