How to convert any blogger blog into a native android app ?

A lot of bloggers would like to convert Blogger blog into native android app. Of course we could view our blog in a mobile web browser if we setup a mobile responsive template, but what if we have to customise our blog's look and feel? What if we have to support additional native features like share to whatsapp ?

We may also make use of a WebView to just load the webpage inside the app, but this provides less chances of customisation, or we may make use of any hybrid app platform to convert blogger blog into native android app.

In fact we have access to some of the blog contents in the form of json apis. You could check here for more details. You could then club the blogger functionalities with other native android features as well.

In this tutorial let us try to make a simple native android app which helps us to view our blog posts in a customised layout.

               

Try the complete app here  or you may check the source code in bitbucket here

This is the json endpoint that we are going to use http://www.your_blog.com/feeds/posts/default?alt=json
Here you will have to replace www.your_blog.com  with your blog url(remember this only works with a blogger blog)

Now let us try some code

The following dependencies will be used :

compile 'com.android.support:cardview-v7:27.1.0'

compile 'com.android.support:design:27.1.0'
compile 'com.squareup.retrofit2:retrofit:2.0.0-beta4'

compile 'com.squareup.retrofit2:converter-gson:2.3.0'
compile 'com.squareup.picasso:picasso:2.71828'

compile 'me.gujun.android.taggroup:library:1.4@aar'

The following is the tree view of the json that we are about to parse

Here the key "entry" is the json array that we are about to parse to get the list of posts. It is basically having the following json structure

{
"feed": {
  "entry" : [
  {
    "id":{..},
    "published":{..},
    "updated":{..},
    "category":{..},
    "tile":{..},
    "content":{..}
  }
]
}
}

Here we will be parsing the title, content objects (which obviously holds the title and content of each post)

First create a layout for  recyclerview in  like this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity">

    <ProgressBar
        android:id="@+id/progress"
        android:visibility="gone"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</RelativeLayout>

Now define the recyclerview in your activity like this

recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));

You should also declare and initialise your progress bar (refer attached source code for the same)

Now create the following POJO classes

BlogResponse.java

public class BlogResponse {
    @SerializedName("feed")
    @Expose
    private BlogFeed blogFeed;

    public BlogFeed getBlogFeed() {
        return blogFeed;
    }

    public void setBlogFeed(BlogFeed blogFeed) {
        this.blogFeed = blogFeed;
    }
}

BlogFeed.java

public class BlogFeed {
    @SerializedName("entry")
    @Expose
    private ArrayList<Post> post = null;

    public ArrayList<Post> getPost() {
        return post;
    }

    public void setPost(ArrayList<Post> post) {
        this.post = post;
    }
}

Post.java

public class Post {
    @SerializedName("category")
    @Expose
    private List<Category> category = null;
    @SerializedName("title")
    @Expose
    private Title title;
    @SerializedName("content")
    @Expose
    private Content content;
    @SerializedName("media$thumbnail")
    @Expose
    private Media$thumbnail media$thumbnail;

    public List<Category> getCategory() {
        return category;
    }

    public void setCategory(List<Category> category) {
        this.category = category;
    }

    public Title getTitle() {
        return title;
    }

    public void setTitle(Title title) {
        this.title = title;
    }

    public Content getContent() {
        return content;
    }

    public void setContent(Content content) {
        this.content = content;
    }

    public Media$thumbnail getMedia$thumbnail() {
        return media$thumbnail;
    }

    public void setMedia$thumbnail(Media$thumbnail media$thumbnail) {
        this.media$thumbnail = media$thumbnail;
    }
}

Category.java

public class Category implements Parcelable {
    @SerializedName("scheme")
    @Expose
    private String scheme;
    @SerializedName("term")
    @Expose
    private String term;

    public Category(Parcel in) {
        this.scheme = in.readString();
        this.term = in.readString();
    }

    public String getScheme() {
        return scheme;
    }

    public void setScheme(String scheme) {
        this.scheme = scheme;
    }

    public String getTerm() {
        return term;
    }

    public void setTerm(String term) {
        this.term = term;
    }

    @Override
    public int describeContents() {
        return 0;
    }

    @Override
    public void writeToParcel(Parcel parcel, int i) {
        parcel.writeString(scheme);
        parcel.writeString(term);
    }

    public static final Parcelable.Creator<Category> CREATOR = new Parcelable.Creator<Category>() {
        @Override
        public Category createFromParcel(Parcel in) {
            return new Category(in);
        }

        @Override
        public Category[] newArray(int size) {
            return new Category[size];
        }
    };
}

Title.java

public class Title {
    @SerializedName("type")
    @Expose
    private String type;
    @SerializedName("$t")
    @Expose
    private String $t;

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String get$t() {
        return $t;
    }

    public void set$t(String $t) {
        this.$t = $t;
    }

}

Content.java

public class Content {
    @SerializedName("type")
    @Expose
    private String type;
    @SerializedName("$t")
    @Expose
    private String $t;

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String get$t() {
        return $t;
    }

    public void set$t(String $t) {
        this.$t = $t;
    }
}

If you find it difficult to understand how the above POJO classes were generated, please go here and check as i have already explained it in one of my previous posts

You may also use http://www.jsonschema2pojo.org/ where you can automatically generate your pojo classes by pasting in your response.

Now let us look into our retrofit network call

 private void getBlog() {
        Gson gson = new GsonBuilder()
                .setLenient()
                .create();
        Retrofit retrofit = new Retrofit.Builder()
                .addConverterFactory(GsonConverterFactory.create(gson))
                .baseUrl(blog_url)
                .build();
        RequestInterface requestInterface = retrofit.create(RequestInterface.class);
        Call<BlogResponse> call = requestInterface.getBlogData();
        call.enqueue(new Callback<BlogResponse>() {
            @Override
            public void onResponse(Call<BlogResponse> call, Response<BlogResponse> response) {
                progress.setVisibility(View.GONE);
                Toast.makeText(MainActivity.this, "success!", Toast.LENGTH_SHORT).show();
                if (response.isSuccessful()) {
                    if (response.body() != null) {
                        BlogFeed blogFeed = response.body().getBlogFeed();
                        posts = blogFeed.getPost();
                        postAdapter = new PostAdapter(posts, MainActivity.this);
                        recyclerView.setAdapter(postAdapter);
                        SharedPreferences.Editor editor = getSharedPreferences(MY_PREFS_NAME, MODE_PRIVATE).edit();
                        editor.putString("blog", blog_url);
                        editor.apply();
                    }
                } else {
                    Toast.makeText(MainActivity.this, "Oops Something went wrong!", Toast.LENGTH_SHORT).show();
                }
            }

            @Override
            public void onFailure(Call<BlogResponse> call, Throwable t) {
                progress.setVisibility(View.GONE);
                Toast.makeText(MainActivity.this, "Failure", Toast.LENGTH_SHORT).show();
            }
        });
    }

Here we have fetched all our posts to the arraylist like this posts = blogFeed.getPost(); .We can now pass this arraylist to our adapter. So we need to create a recyclerview adapter that accepts a context and above mentioned arraylist in its constructor. See below code for our recyclerview adapter

PostAdapter.java

public class PostAdapter extends RecyclerView.Adapter<PostAdapter.ViewHolder> {
    private ArrayList<Post> records=new ArrayList<>();
    private Context context;
    private ArrayList<Category> category = new ArrayList<>();


    public PostAdapter(ArrayList<Post> records, Context context) {
        this.context=context;
        this.records=records;
    }

    @Override
    public PostAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.post_item, parent, false);
        return new PostAdapter.ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(PostAdapter.ViewHolder holder, final int position) {

        if (records.get(position).getCategory()!=null) {
             category = new ArrayList<>(records.get(position).getCategory());
        }

        holder.title.setText(records.get(position).getTitle().get$t());
        holder.desc.setText(Html.fromHtml(records.get(position).getContent().get$t()));
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Bundle bundle = new Bundle();

                if (category!=null)
                bundle.putParcelableArrayList("category", category);

                Intent intent=new Intent(context,PostDetails.class);
                intent.putExtra("title",records.get(position).getTitle().get$t());
                intent.putExtra("desc",records.get(position).getContent().get$t());
                intent.putExtras(bundle);
                context.startActivity(intent);

            }
        });

    }

    @Override
    public int getItemCount() {
        return records.size();
    }


    public class ViewHolder extends RecyclerView.ViewHolder {
        private TextView title,desc;
        private ImageView post_image;
        public ViewHolder(View view) {
            super(view);

            post_image=(ImageView)view.findViewById(R.id.post_image);
            title=(TextView)view.findViewById(R.id.title);
            desc=(TextView)view.findViewById(R.id.desc);
        }
    }
}

Thats it! you are now all set to generate a native android app for your blogger blog. If you are a blogger without any prior programming knowledge, just download the app from here and set the url to your blog url. The app will start functioning with your blog's posts