Convert Any Website Into Android App in 5 Minutes.

 

تحويل اي صفحة ويب الى تطبيق اندرويد

Step 1: Start Android Studio and Create New Project

1-android-studio

2-new-project

Select Minimum

SDK and form factors for your application

3-form-factor-and-tareget

Select Empty Activity

4-empty-activity

Provide Activity and Layout Name

5-layout

Step 2: Customize activity_main.xml

Open activity_main.xml in design mode and add WebView, EditText (Plain Text) and a Button.

6-customize-activity_main

Step 3: Add code

Add Following code in activity_main.xml file:

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
xmlns:tools=”http://schemas.android.com/tools&#8221;
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:paddingBottom=”@dimen/activity_vertical_margin”
android:paddingLeft=”@dimen/activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”
tools:context=”dev.websitetoapp.MainActivity”>
    <WebView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=”@+id/webView”
android:layout_alignParentTop=”true”
android:layout_alignParentLeft=”true”
android:layout_alignParentStart=”true”
android:layout_alignParentRight=”true”
android:layout_alignParentEnd=”true”
android:layout_above=”@+id/btnGo” />
    <Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Go”
android:id=”@+id/btnGo”
android:layout_alignParentBottom=”true”
android:layout_alignParentRight=”true”
android:layout_alignParentEnd=”true” />
    <EditText
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=”@+id/editText”
android:layout_alignTop=”@+id/btnGo”
android:layout_alignParentLeft=”true”
android:layout_alignParentStart=”true”
android:layout_toLeftOf=”@+id/btnGo”
android:layout_toStartOf=”@+id/btnGo” />
</RelativeLayout>

Add Following code in MainActivity.Java file:

package dev.websitetoapp;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
public class MainActivity extends AppCompatActivity {
private Button btnGo;
private EditText txtURL;
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView =(WebView) findViewById(R.id.webView);
txtURL=(EditText)findViewById(R.id.editText);
btnGo=(Button)findViewById(R.id.btnGo);
btnGo.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
webView.setWebViewClient(new WebViewClient());
webView.loadUrl(“https://”+txtURL.getText().toString()+”.com”);
}
});
}
}

Add Following code in AndroidManifest.xml file:

<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
package=”dev.websitetoapp”>
<uses-permission android:name=”android.permission.INTERNET” />
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />
<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>
In the above code ofAndroidManifest.xml
<uses-permission android:name=”android.permission.INTERNET” />
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />
lets your application to access internet

 

Step 4: Run Application

Run your application in emulator or connect your android device to PC
7-output
Type Website name in textbox and click on “GO” button,”https://&#8221; and “.com” will be concatenated with name you type on textbox.

 

Step 4: Since this is the very basic tutorial, you need to customize the code and designing of app to create a good looking app

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s