Android android-app-development Technology web-development website

How to convert a website into an Android app from scratch?

Go to the profile of Vinay Somawat

On this tutorial, we’ll study How to Convert a Website into an Android Software utilizing Android Studio.

In case you have no idea something about Android Studio but, Don’t fear.
We’ll begin every thing from scratch.

That is how the website seems to be like:

And the Android app, we developed utilizing Android Studio appears like:

Earlier than we start:

NOTE: In the event you downloaded Android Studio and already put in in your system then you possibly can skip the half and Go to direct the coding half.

If not
Obtain Android Studio:

Google offers Android Studio for the Home windows, Mac OS X, and Linux platforms. You possibly can obtain this software program from the Android Studio homepage.

Earlier than downloading Android Studio, be sure your platform meets one of many following necessities:
Home windows OS
Microsoft Home windows 7/eight/10 (32-bit or 64-bit)
2 GB RAM minimal, eight GB RAM really helpful
2 GB of obtainable disk area minimal, four GB Really helpful (500 MB for IDE + 1.5 GB for Android SDK and emulator system picture)
1280 x 800 minimal display decision
For accelerated emulator: 64-bit working system and Intel processor with help for Intel VT-x, Intel EM64T (Intel 64), and Execute Disable (XD) Bit performance

Mac OS
Mac OS X 10.eight.5 or greater, up to 10.11.four (El Capitan)
2 GB RAM minimal, eight GB RAM really helpful
2 GB of obtainable disk area minimal, four GB Beneficial (500 MB for IDE + 1.5 GB for Android SDK and emulator system picture)
1280 x 800 minimal display decision
JDK 6

Linux OS
GNOME or KDE desktop: Examined on Ubuntu 12.04, Exact Pangolin (64-bit distribution able to operating 32-bit purposes)
64-bit distribution able to operating 32-bit purposes
GNU C Library (glibc) 2.11 or later
2 GB RAM minimal, eight GB RAM advisable
2 GB of obtainable disk area minimal, four GB Advisable (500 MB for IDE + 1.5 GB for Android SDK and emulator system picture)
1280 x 800 minimal display decision
JDK eight
For accelerated emulator: Intel processor with help for Intel VT-x, Intel EM64T (Intel 64), and Execute Disable (XD) Bit performance, or AMD processor with help for AMD Virtualization (AMD-V)

Putting in Android Studio on 64-bit Home windows eight.1

Determine 1. Arrange Android StudioFigure 2. Would you like to set up the Android SDK and AVD?Determine three. Settle for the license settlement to proceed the installationFigure four. Set the Android Studio and Android SDK set up locationsFigure 5. Create a new shortcut for Android Studio

To finish your set up, depart the Begin Android Studio field checked and click on End.

Determine 6. Depart the Begin Android Studio checkbox checked to run this software program

Operating Android Studio

Android Studio presents a splash display when it begins operating:

In the event you’re like me and don’t have a beforehand put in model, you possibly can simply hold the default setting and click on OK.

Determine 9. Validate your Android SDK and improvement surroundings setup

If you click on Subsequent, the setup wizard invitations you to choose an set up sort in your SDK elements. For now, I like to recommend you retain the default normal setting.

Determine 10. Select an set up typeFigure 11. Evaluate settings

The wizard will obtain and unzip numerous elements. Click on Present Particulars if you would like to see extra details about the archives being downloaded and their contents.

Determine 12. The wizard downloads and unzips Android Studio elements

Your choices are to both put up with the sluggish emulator or use an Android system to velocity up improvement. I’ll talk about the latter choice later within the tutorial.

Lastly, click on End to full the wizard. You need to see the Welcome to Android Studio dialog field:

Determine 14. Welcome to Android Studio

You’ve put in and configured Android Studio and created a venture in your first Android Studio cellular app; now you’re prepared to construct your Android software. In Android Studio, this implies populating your new undertaking with Java supply code and useful resource information.

Your first Android Studio cellular app

Beginning a new challenge

From our setup to date, you must nonetheless have Android Studio operating with the Welcome to Android Studio dialog field. From right here, click on Begin a new Android Studio venture. Android Studio will reply with the Create New Venture dialog field proven in Determine.

Determine 15. Create a new projectFigure 16. Choose your goal gadget classes

Click on Subsequent, and you’ll be given the chance to select a template in your app’s foremost exercise. For now, we’ll keep on with Empty Exercise. Choose this template and click on Subsequent.

Subsequent, you’ll customise the exercise:

Enter W2A because the exercise identify and most important because the format identify, and click on End to full this step. Android Studio will reply that it’s creating the challenge, then take you to the challenge workspace.

Determine 19. Android Studio workspace

The challenge window is organized into a tree whose foremost branches are App and Gradle Scripts. The App department is additional organized into manifests, java, and res subbranches:

  • manifests shops AndroidManifest.xml, which is an XML file that describes the construction of an Android app. This file additionally data permission settings (the place relevant) and different particulars concerning the app.
  • java shops an app’s Java supply information in accordance to a package deal hierarchy, which is ca.javajeff.w2a on this instance.
  • res shops an app’s useful resource information, that are organized into drawable, format, mipmap, and values subbranches:
  • drawable: an initially empty location during which to retailer an app’s paintings
  • format: a location containing an app’s format information; initially, major.xml(the primary exercise’s format file) is saved right here
  • mipmap: a location containing numerous ic_launcher.png information that retailer launcher display icons of various resolutions
  • values: a location containing colours.xml, dimens.xml, strings.xml, and types.xml

The Gradle Scripts department identifies numerous .gradle (resembling construct.gradle) and .properties (comparable to native.properties) information which are utilized by the Gradle-based construct system.

Now the coding half will begin…

Add a webView to your exercise as proven within the image under.

format/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”
instruments: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/major/AndroidManifest.xml
<?xml model=”1.zero” 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 deal com.vinaysomawat.careerhigh;
/**
* Created by Vinay Somawat on 10-01-2019.
*/import android.help.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
personal WebView mywebview;@Override
protected void onCreate(Bundle savedInstanceState)
tremendous.onCreate(savedInstanceState);
setContentView(R.format.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” instruments:context=”.MainActivity”>
<merchandise android:id=”@+id/action_settings” android:title=”@string/action_settings”
android:orderInCategory=”100″ app:showAsAction=”by no means” />
</menu>

values/types.xml

<assets>

<!– Base software theme. –>
<fashion identify=”AppTheme” father or mother=”Theme.AppCompat.Light”>
<!– Customise your theme right here. –>
<merchandise identify=”colorPrimary”>@shade/colorPrimary</merchandise>
<merchandise identify=”colorPrimaryDark”>@shade/colorPrimaryDark</merchandise>
<merchandise identify=”colorAccent”>@shade/colorAccent</merchandise>
</type>
<type identify=”TextAppearance.AppCompat.Widget.ActionBar.Title” father or mother=”android:TextAppearance”>
<merchandise identify=”android:textColor”>@shade/titlecolour</merchandise>
<merchandise identify=”android:textSize”>30sp</merchandise>
</type>

</assets>

values/strings.xml

<?xml model=”1.0″ encoding=”utf-8″?>
<assets>

<string identify=”app_name”>CareerHigh</string>
<string identify=”hello_world”>Good day world!</string>
<string identify=”action_settings”>Settings</string>

</assets>

values/colours.xml

<?xml model=”1.0″ encoding=”utf-8″?>
<assets>
<colour identify=”colorPrimary”>#000000</colour>
<shade identify=”colorPrimaryDark”>#303F9F</colour>
<shade identify=”colorAccent”>#FF4081</colour>
<colour identify=”titlecolour”>#398bb7</shade>
</assets>

Add a launching exercise to App: (It appears good)

Launching Exercise

SplashActivity.java

package deal com.vinaysomawat.careerhigh;

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

public class SplashActivity extends AppCompatActivity

@Override
protected void onCreate(@Nullable Bundle savedInstanceState)
tremendous.onCreate(savedInstanceState);
Intent intent = new Intent(this, MainActivity.class);
startActivity(intent);
end();

And add some code it values/types.xml

<type identify=”SplashTheme” dad or mum=”Theme.AppCompat.NoActionBar”>
<merchandise identify=”android:windowBackground”>@drawable/background</merchandise>
</type>

create a drawable/background.xml file:

<?xml model=”1.0″ encoding=”utf-8″?>
<layer-list xmlns:android=”http://schemas.android.com/apk/res/android”>
<merchandise android:drawable=”@color/colorPrimary” />

<merchandise>
<bitmap android:src=”http://hackernoon.com/@drawable/logo2″
android:gravity=”center” />

</merchandise>
</layer-list>

be sure to add a pattern picture to drawable folder to show in launching exercise.

OUTPUT:

Now run your android app, and you will notice the next outcome

Lastly, your first Android App is created.

Should you acquired caught someplace

Obtain the Supply Code

Or use the next command:

command-line

>git clone https://github.com/vinaysomawat/CareerHigh-App

And share your Android App with your mates.

Did I get one thing incorrect? Point out it within the feedback. I might love to enhance.
For those who discovered even a factor or two, clap your palms 👏 as many occasions as you’ll be able to to present your help!
Hiya World, I’m Vinay Somawat. A artistic developer and a logical designer. Yow will discover me on Linkedin or stalk me on GitHub or perhaps comply with me on Twitter? If that’s too social for you, simply drop a mail to vinaysomawat40@gmail.com if you want to speak tech with me.Have a good day!