Convert your website into an Android App

 Converting a website or blog into ab Android Application is one of the way to promote your website and reach out to more people. It also helps you to make people get updated with the changes and updates of your websites. If you convert your website or blog into an Android App, you can upload it on Google Playstore and a lot of people will see and possibly download it. For your blog or website to display well, it must be mobile friendly and responsive. Let’s convert this blog into an Android Application If you have read my previous posts, you will be familiar with most of the things I will be saying. If you are not familiar, you can spare some little time to go through my posts. Create a new project on Android Studio Since we want a full screen Application, we will remove the Action bar. Navigate to styles.xml in your res folder and edit the style Just change the DarkActionBar to NoActionBar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

Navigate to the manifest.xml and add the internet permission, if you don’t add this permission you App won’t display because it can’t access the internet.

Add this above the <application></application>

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

Navigate to the activity_main.xml in the layout folder and add this following lines of code to display the website or blog

<FrameLayout 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">
<!--This view is responsible for the display fo your website or blog-->
    <WebView
        android:id="@+id/webby"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</FrameLayout>

Navigate to the MainActivity.java and add this following lines of code

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    //Strore the URL of the website inside a String variable called      //url
    private String url = "https://wwww.rexandroid.blogspot.com";
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //initialize the webview by calling findViewById
        webView = findViewById(R.id.webby);
        //get the web setiimgs
        //set for javascript containing site
        webView.getSettings().setJavaScriptEnabled(true);
        //responsible for opening links inside the app
        webView.setWebViewClient(new WebViewClient());
        //load the url of the blog you stored inside @url
        webView.loadUrl(url);
    }
//This prevent the App from closing when you press the back key to //go to the previous page
    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

If you wanna add some other functionality to your App like progress bar etc., feel free to do so.

If you need any help, feel free to drop your comment in the comment box.

Android Containers

Android containers are view group containing lists and search views and even web views. Android containers includes ListView, Custom ListView, GridView, WebView, SearchView etc.

ListView

ListView is a view group that displays a list of scrollable items. These list items are inserted from the source using an Adapter Class. The Adapter is like a “middleman” between the items and the ListView. The source could be arrays of any data types or database queries.

Note: You don’t need to create a ScrollView to make the list scrollable. The items are scrollable by default. All thanks to the ListView.

How to implement a ListView to display list of items?

In your .java fie

//Create array that will be our list items
String[] languages = {"Java", "JavaScript", "PHP", "C", "C++", "Python", "SQL"};
//Referencing the listView by its Id
ListView listView = (ListView) findViewById(R.id.listView);
//Define the adapter
//Declare the layout e.g android.R.layout.simple_list_item_1
ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1,languages);
//set the adapter to the ListView
listView.setAdapter(adapter);

In your .xml file

<ListView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/listView"/>

Custom ListView

ArrayAdapter by default is limited in terms of displaying only single view per row. Due to the limitation, Android developers grants us to create a Custom ListView.

Steps to follow in creating a Custom ListView

1.       Create two Layouts, one for the ListView items and the other for the ListView container

2.       Create a custom class.

3.       Create a custom Adapter class.

4.       In the MainActivity, create the data source and create the adapter and set the adapter to the ListView.

Create ListView container Layout

activity-main.xml

An example of a custom ListView with a SearchView

<?xml version="1.0" encoding="utf-8"?>
<ListView 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/list"
    android:padding="16dp">

    </ListView>

Create the Layout for the ListView items

display.xml

<LinearLayout    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.android.rexben.blogdemo.City">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:id="@+id/imageView"/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/city"
        tools:text="Lagos"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/description"
            tools:text="The beautiful City"/>

    </LinearLayout>
</LinearLayout>

Create a Custom Class

public class City {
    private String mCity;
   private String mDescription;
    private int mImage;

    public City(String city, String desc, int image){
        mCity = city;
        mDescription = desc;
        mImage = image;
    }

    public int getmImage() {
        return mImage;
    }

    public String getmCity() {
        return mCity;
    }

    public String getmDescription() {
        return mDescription;
    }
}

Create a custom Adapter Class

public class CityAdapter extends ArrayAdapter<City> {


    public CityAdapter(Context context, ArrayList<City> city) {
        super(context, 0, city);
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View listView = convertView;
        if (listView == null){
            listView = LayoutInflater.from(getContext()).inflate(R.layout.activity_display, parent,false);
        }
        City currentCity = getItem(position);

        TextView city = (TextView) listView.findViewById(R.id.city);
        city.setText(currentCity.getmCity());

        TextView desc = (TextView) listView.findViewById(R.id.description);
        desc.setText(currentCity.getmDescription());

        ImageView imageView = (ImageView) listView.findViewById(R.id.imageView);
        imageView.setImageResource(currentCity.getmImage());

        return listView;
    }
}

In your MainActivity.java

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ArrayList<City> cities = new ArrayList<>();
        cities.add(new City("Lagos", "Center of excelence", R.drawable.lagos));
        cities.add(new City("New York", "Center of civilization", R.drawable.newyork));
        cities.add(new City("Shanghai", "Center of technology", R.drawable.shanghai));
        cities.add(new City("Moscow", "Center of posterity", R.drawable.moscow));
        cities.add(new City("London", "Center of entertainment", R.drawable.london));

        ListView listView = (ListView) findViewById(R.id.list);
        CityAdapter cityAdapter= new CityAdapter(MainActivity.this,cities);
        listView.setAdapter(cityAdapter);

    }
}

GridView

GridView is just like ListView but it displays items in a two-dimensional and scrollable grid.

How to implement the GridView ViewGroup, it is just likeListView as I have stated earlier

In your .java fie

//Create array that will be our list items
String[] languages = {"Java", "JavaScript", "PHP", "C", "C++", "Python", "SQL"};
//Referencing the listView by its Id
GridView gridView = (GridView) findViewById(R.id.gridView);
//Define the adapter
//Declare the layout e.g android.R.layout.simple_list_item_1
ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1,languages);
//set the adapter to the GridView
gridView.setAdapter(adapter);

In your .xml file

<GridView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="2"
    android:id="@+id/gridView"/>

WebView

WebView as the name implies  is a view group that displays website. I will explain further in another post where I will be teaching you how create a Web Apllication for you Website or blog.

In your .xml file

<WebView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/webView"/>

SearchView

SearchView as the name implies provides users the opportunity to enter a search query and submit the search request to a search provider. In a nutshell, it is a view where user can type in keyword in order to search for something.

In your .xml file

<SearchView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/search"
    />

In your .java file

SearchView searchView = (SearchView)findViewById(R.id.search);
    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
       @Override
        public boolean onQueryTextSubmit(String s) {
            return false;

        }
        @Override
        public boolean onQueryTextChange(String s) {
        return false;

        }
    });
}