If you do not know anything about Android Studio yet, Don’t worry. We will start everything from scratch.
This is how the website look like in PC/Laptop view:
And the Android app look once we complete development:
Try to open your website in your mobile browser and you can see how it look. So make sure your website will be mobile responsive.
The complete step-by-step video available on https://youtu.be/_SDvLYt3MxE(in English) and https://youtu.be/vxy5ukmPfC4(in Hindi).
Few are the things we are using while creating the android app are:
WebView: WebView is a view that display web pages inside your application. You can also specify HTML string and can show it inside your application using WebView. WebView makes turns your application to a web application.
In order to load a web url into the WebView, you need to call a method loadUrl(String url) of the WebView class, specifying the required url. Its syntax is:
WEBVIEW_OBJECT.loadUrl("WEBSITE_URL");
uses-permission: The tag <uses-permission> is used to request a permission, and the attribute android:permission is used to enforce a permission. If a component enforces a particular permission, then your app must request that permission if it wants to access that component.
<uses-permission android:name="android.permission.INTERNET"/>
As we need internet to load website thats why we have to add user-permission of INTERNET.
Step-By-Step to make Android App:
If Android Studio is not install in your system then
Download Android Studio from https://developer.android.com/studio
Then follow these step to install https://developer.android.com/studio/install.
Step 1. Open Android Studion and click on Start a new Android Studio Project.
Step 2. Select Empty Activity and click on NEXT.
Step 3. Name: WebSiteToAndroidApp
Min SDK: API 16: Android 4.1
then click on FINISH.
Step 4. Open activity_main.xml file present at app/src/main/res/layout/activity_main.xml
In the activity_main.xml file we will add WebView code which will open website.
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/id_web_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Step 5. Open MainActivity.java file present at app/src/main/java/com/dreamappsstore/websitetoandroidapp/MainActivity.java
In MainActivity.java file, we will write the main code like here we will define the url which we want to open then we will set javaScript support enable for the webview.
we will define onBackPressed method, the use of method is when user click on back it will open the previous page.
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.id_web_view);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
webView.loadUrl("https://www.vicharyatri.com/");
webView.setWebViewClient(new WebViewClient());
}
@Override
public void onBackPressed() {
if (webView.canGoBack()){
webView.goBack();
}else {
super.onBackPressed();
}
}
}
Step 6. Now, you will see the Manifest folder at the top of the left side in the android studio. Open AndroidManifest.xml file present at app/src/main/AndroidManifest.xml and we will add internet permission in it.(<uses-permission android:name="android.permission.INTERNET"/>).
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.dreamappsstore.websitetoandroidapp">
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
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>
Step 7. Go to Build -> Build Builder(s)/APK(s) -> click on Build APK(s)
Step 8. Once you release apk is generate, transfer it to your mobile and install it.
If you got stuck somewhere then you can check Source Code: https://github.com/DreamAppsStore/WebSiteToAndroidApp
Facebook Page: https://www.facebook.com/DreamsAppsStore
YouTube Channel: https://www.youtube.com/channel/UCBpa57i2Y8BFh7BhH4TQ_zw
Google Play: https://play.google.com/store/apps/dev?id=8456069187984922570
0 Comments