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: If you downloaded Android Studio and already installed in your system then you can skip the part and Go to direct the coding part. NOTE: : If not Download Android Studio Google provides Android Studio for the Windows, Mac OS X, and Linux platforms. You can from the Android Studio homepage. download this software Before downloading Android Studio, make sure your platform meets one of the following requirements:**Windows OS**Microsoft Windows 7/8/10 (32-bit or 64-bit)2 GB RAM minimum, 8 GB RAM recommended2 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 resolutionFor 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 OS**Mac OS X 10.8.5 or higher, up to 10.11.4 (El Capitan)2 GB RAM minimum, 8 GB RAM recommended2 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 resolutionJDK 6 : Tested on Ubuntu 12.04, Precise Pangolin (64-bit distribution capable of running 32-bit applications)64-bit distribution capable of running 32-bit applicationsGNU C Library (glibc) 2.11 or later2 GB RAM minimum, 8 GB RAM recommended2 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 resolutionJDK 8For 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) Linux OSGNOME or KDE desktop 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 as the activity name and 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. W2A main 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: 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. manifests stores an app’s Java source files according to a package hierarchy, which is ca.javajeff.w2a in this example. java stores an app’s resource files, which are organized into drawable, layout, mipmap, and values subbranches: res : an initially empty location in which to store an app’s artwork drawable : a location containing an app’s layout files; initially, main.xml(the main activity’s layout file) is stored here layout : a location containing various ic_launcher.png files that store launcher screen icons of different resolutions mipmap : a location containing colors.xml, dimens.xml, strings.xml, and styles.xml values 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” < /> WebViewandroid: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_<? ?>_<manifest xmlns:android=”http://schemas.android.com/apk/res/android" package=”com.vinaysomawat.careerhigh”android:installLocation=”auto”><uses-permission android:name=”android.permission.INTERNET”/><applicationandroid:allowBackup=”true”android:icon=”@mipmap/faviconcircular”android:label=”@string/app_name”android:roundIcon=”@mipmap/faviconcircular”android:supportsRtl=”true”android:theme=”@style/AppTheme”> xml version=”1.0" encoding=”utf-8" <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; @Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout. );mywebview = (WebView)findViewById(R.id. );WebSettings webSettings = mywebview.getSettings();webSettings.setJavaScriptEnabled(true);mywebview.loadUrl(“https://careerhigh.in");mywebview.setWebViewClient(new WebViewClient());} activity_main webView @Overridepublic void onBackPressed(){if(mywebview.canGoBack()) {mywebview.goBack();} else{super.onBackPressed();}} @Overridepublic boolean onCreateOptionsMenu(Menu menu){getMenuInflater().inflate(R.menu. , menu);return true;} menu_main @Overridepublic boolean onOptionsItemSelected(MenuItem item){int id = item.getItemId();if(id == R.id. ){return true;}return super.onOptionsItemSelected(item);}} action_settings **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** _?>_< >< >#000000</ >< >#303F9F</ >< >#FF4081</ >< >#398bb7</ ></ > <? xml version="1.0" encoding="utf-8" resources color name="colorPrimary" color color name="colorPrimaryDark" color color name="colorAccent" color color name="titlecolour" color resources Add a launching activity to App: (It looks nice) Launching Activity **SplashActivity.java** com.vinaysomawat.careerhigh; package _/*** Created by Vinay Somawat on 10-01-2019.*/_ android.content.Intent; android.os.Bundle; android.support.annotation.Nullable; android.support.v7.app.AppCompatActivity; import import import import SplashActivity AppCompatActivity { public class extends @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 < >< >@drawable/background</ ></ > style name="SplashTheme" parent="Theme.AppCompat.NoActionBar" item name="android:windowBackground" item style create a file: drawable/background.xml _?>_< >< /> <? 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 to folder to display in launching activity. sample image drawable 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 Download the Source Code Or use the following command: command-line >git clone https://github.com/vinaysomawat/CareerHigh-App And share your Android App with your friends. Did I get something wrong? Mention it in the comments. I would love to improve.If you learned even a thing or two, clap your hands 👏 as many times as you can to show your support!Hello World, I am Vinay Somawat. A creative developer and a logical designer. You can find me on Linkedin or stalk me on GitHub or maybe follow me on Twitter? If that’s too social for you, just drop a mail to vinaysomawat40@gmail.com if you wish to talk tech with me. Have a nice day!
