[android studio] Convert Any Website to Android App using Android Studio

Hello Everyone, Today in this post we are going to learn how to create Mobile Applications for your WordPress Websites, Blogs, Magazines, or Stores. In this article, I will be demonstrating my website i.e TechsBucket. So, we will discuss how to convert your website into a mobile application using Android Studio with tips on how to create an active mobile app version of your WordPress site for Android which means that you actually take these apps and upload them into google app store and the visitors will be able to download your app through their smartphones.

Requirement

  • A good internet connection
  • A Laptop or Desktop loaded with Android Studio
  • A WordPress Website

Steps to Build a Mobile App

We can build a Mobile App with some basic knowledge in Android Studio. You don’t need to be a hardcore coder or have no need for deep coding here to build your mobile app, you will just need a WordPress-based website and only copy-paste work from this post.

Step 1

Open Android Studio and click on New Project and select Empty Activity.

 

Step 2

IN this screen, give your application name, folder location to store, and select JAVA language. Minimum SDK I will recommend selecting an older version of Android OS because you will get a huge number of users who are using an older version OS, as you can see 94.1 %

 

Step 3

Once you click on Finish, it will take some time to load all the dependencies that depend on your computer and internet speed and performance. You can see my screen is now fully loaded and ready to put a code to build Android App.

 

Step 4

Finally, the project screen is open and you will see two files are already opened one is MainActivity.java and another is activity_main.xml. Select activity_main.java and click on the code you will get exact below like screen

 

Step 5

One more file you will have to open from manifests from the left side menu. Expand manifest and double click on AndroidManifest.xml file.

 

Step 6

In this step, we will start placing the codes. Open activity_main.xml then copy and paste the below code as it is into your activity_main.xml file. This code will convert the Android App into Web View. Very important, replace from <Textview to parent” /> from below code

<WebView
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:id="@+id/webView"
          android:layout_alignParentTop="true"
          android:layout_alignParentLeft="true"
          android:layout_alignParentStart="true"
          android:layout_alignParentBottom="true"
          android:layout_alignParentRight="true"
          android:layout_alignParentEnd="true"
          tools:ignore="MissingConstraints" />

 

Step 7

Allow Internet connection to the Android App by adding the below code in AndroidMinifest.xml file.

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

If the user is not connected to the internet and he should get “No internet connection” after opening the app then simply add the below code in the same file.

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

 

Step 8

Expand the resource from the left side menu, expand values then expand the themes and double click on both the themes.xml file one by one, and find DarkActionBar and Replace with NoActionBarThis code will remove the extra header.

 

Step 9

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

Now add the icon for your application. Copy your icon first then expand res right-click on drawable and paste the copied icon, you will find your icon name under drawable. In my case, my icon name is “myicon.jpg”.

 

 

Step 10

Once the icon is uploaded, go back to the AndroidManifest.xml file and find “@mipmap/ic_launcher” and “@mipmap/ic_launcher_round”. Replace both codes with “@drawable/myicon” ( Replace the code with Your Icon Name )

After Replacing “@mipmap/ic_launcher” to “@drawable/myicon”

 

Step 11

Open MainActivity.java file and copy-paste all the below codes after import. The below code will show “No Internet Connection” message if you are not connected to the internet. If you close your App and go back to App again, you will find the same post which was open previously also you will see an exit message once you will tap on the back. Don’t forget to replace your website’s name in the code below.

import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    String websiteURL = "https://techsbucket.com/"; // sets web url
    private WebView webview;

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

        if( ! CheckNetwork.isInternetAvailable(this)) //returns true if internet available
        {
            //if there is no internet do this
            setContentView(R.layout.activity_main);
            //Toast.makeText(this,"No Internet Connection, Chris",Toast.LENGTH_LONG).show();

            new AlertDialog.Builder(this) //alert the person knowing they are about to close
                    .setTitle("No internet connection available")
                    .setMessage("Please Check you're Mobile data or Wifi network.")
                    .setPositiveButton("Ok", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            finish();
                        }
                    })
                    //.setNegativeButton("No", null)
                    .show();

        }
        else
        {

            //Webview stuff
            webview = findViewById(R.id.webView);
            webview.getSettings().setJavaScriptEnabled(true);
            webview.getSettings().setDomStorageEnabled(true);
            webview.setOverScrollMode(WebView.OVER_SCROLL_NEVER);
            webview.loadUrl(websiteURL);
            webview.setWebViewClient(new WebViewClientDemo());

        }

    }

    private class WebViewClientDemo extends WebViewClient {
        @Override
        //Keep webview in app when clicking links
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;

        }

    }

    //set back button functionality
@Override
public void onBackPressed() { //if user presses the back button do this
    if (webview.isFocused() && webview.canGoBack()) { //check if in webview and the user can go back
        webview.goBack(); //go back in webview
    } else { //do this if the webview cannot go back any further
        new AlertDialog.Builder(this) //alert the person knowing they are about to close
                .setTitle("EXIT")
                .setMessage("Are you sure. You want to close this app?")
                .setPositiveButton("Yes", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        finish();
                    }
                })
                .setNegativeButton("No", null)
                .show();
    }

}

}

class CheckNetwork {

    private static final String TAG = CheckNetwork.class.getSimpleName();

    public static boolean isInternetAvailable(Context context)

    {
        NetworkInfo info = (NetworkInfo) ((ConnectivityManager)

                context.getSystemService(Context.CONNECTIVITY_SERVICE)).getActiveNetworkInfo();

        if (info == null)

        {
            Log.d(TAG,"no internet connection");

            return false;

        }
        else
        {

            if(info.isConnected())

            {

                Log.d(TAG," internet connection available...");

                return true;

            }

            else

            {

                Log.d(TAG," internet connection");

                return true;
            }
        }
    }
}

 

Step 12

Add the next code in the main_activity.xml file, replace the whole <Webview. This code will allow you to “Swipe Down to Refresh”. You will see a loading icon once you swipe down any post.

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:id="@+id/swipeContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/webView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        tools:ignore="MissingConstraints" />

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

After pasting the code, you will see one error for “<androidx.swiperefreshlayout.widget.SwipeRefreshLayout“, just right click on this and select the first option “Add dependancy on androidx.swiper….” or simply press the “Alt+Enter” key.

Now go back to the MainActivity.java and copy the below code after “private WebView webview“. You will see the error for “SwipeRefreshLayout “, simply click on SwipeRefreshLayout and press “Alt+Enter”.

SwipeRefreshLayout mySwipeRefreshLayout;

In the same file find and replace with “private class WebViewClientdemo to second curl bracket } below code.

private class WebViewClientDemo extends WebViewClient {
    @Override
    //Keep webview in app when clicking links
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;

    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        mySwipeRefreshLayout.setRefreshing(false);

    }

};

After replacing the code

And add the below code after “//Webviewstuff” as per the following.

//Swipe to refresh functionality
mySwipeRefreshLayout = (SwipeRefreshLayout)this.findViewById(R.id.swipeContainer);

mySwipeRefreshLayout.setOnRefreshListener(
        new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                webview.reload();
            }
        }

);
 

Step 13

To enable screen rotation, simply add the below code in Android.Manifest.xml file in <application then inside the <activity

android:screenOrientation="portrait">
 
 
 

Step 14

Finally, run your application on a Virtual Mobile device. You will find a play button on the top just click on the play button this will open your App with the virtual mobile device.

 
You might receive error as “manifest merger failed : android:exported needs to be explicitly specified for <activity>. apps targeting android 12…
 
To fix this error simply add the below line code in Android.Manifest.xml in the activity 
android:exported="true"

Finally, reopen App in the Virtual Android Device, you can check the whole app will be working fine.

Congratulations… Android app is running on Android Virtual Device. The next step is to export the whole project along with the Android apk file. Once you get your apk file then this apk can be uploaded on the google play store easily. Watch the video tutorial below of this post and get the information about apk file location after saving the whole project.

 
[출처] https://www.geeksforgeeks.org/how-to-convert-any-website-to-android-app-in-android-studio/

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
121 [android studio] 안드로이드 스튜디오 패키지명 변경 방법 file 졸리운_곰 2024.01.28 0
120 [React Native] 리액트 네이티브 안드로이드 기기 빌드 에러 졸리운_곰 2023.12.17 0
119 [android studio] 안드로이드 앱 내부 배포 시 Play프로텍트에 인증받고 배포하기 file 졸리운_곰 2023.03.23 2
118 [android studio] [Java][Android] 안드로이드 다국어 지원 file 졸리운_곰 2023.03.21 4
117 [android studio] [안드로이드 스튜디오] 다국어 지원 strings.xml 파일 생성 방법 file 졸리운_곰 2023.03.21 11
116 [android studio] 구글 플레이 스토어 등록 어떻게? 2편 - 키스토어 생성과 릴리즈 빌드 하기 file 졸리운_곰 2023.03.21 4
115 [android studio] 구글 플레이 스토어 등록 어떻게? 1편 - 준비해야 할 것들 졸리운_곰 2023.03.21 4
114 [android studio] 웹페이지를 apk 앱으로 | 쉽게 따라하는 웹앱 만들기 file 졸리운_곰 2023.03.21 10
113 [android studio] 안드로이드 아이콘이 2개 생성될 때 졸리운_곰 2023.03.21 1
» [android studio] Convert Any Website to Android App using Android Studio file 졸리운_곰 2023.03.18 0
111 [android studio] How to Convert Any Website to Android App in Android Studio? file 졸리운_곰 2023.03.18 4
110 [phonegap][cordova] [안드로이드] 코도바 앱(App) 개발 환경 세팅 file 졸리운_곰 2023.02.05 8
109 [android studio] 에러 해결: android gradle plugin requires java 11 to run. you are currently using java 1.8. file 졸리운_곰 2022.11.17 3
108 [android sdk] 안드로이드에서 JWT 사용하기 졸리운_곰 2022.07.15 17
107 [Android Studio] Android Native App 에서 mysql , php 연결 : PHP MySQL REST API for Android file 졸리운_곰 2021.12.02 102
106 Android PHP MySQL 예제 - 데이터베이스에서 데이터를 JSON 형식으로 가져오기 file 졸리운_곰 2021.07.24 207
105 Android PHP MySQL 예제 - 데이터베이스 질의(query) 결과 출력하기 file 졸리운_곰 2021.07.24 538
104 [android] 안드로이드에서 mysql 데이터베이스 입력, 접속 / Android PHP MySQL 예제 - 데이터베이스에 데이터 입력하기 file 졸리운_곰 2021.07.24 111
103 Android 에서 Opencv 설치하고 간단한 예제 실행해보기!! file 졸리운_곰 2020.10.31 328
102 안드로이드 나인 패치(9-Patch) 이미지 버튼. (Android Nine-Patch Image Button) file 졸리운_곰 2020.10.10 146
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED