News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

[TIPS / TRICKS] Create Android App For Your Forum

Started by Hj Ahmad Rasyid Hj Ismail, August 24, 2014, 12:59:50 AM

Previous topic - Next topic

Hj Ahmad Rasyid Hj Ismail

Create Android App For Your Forum

As I promised earlier, I will provide a step by step tips / tricks on how to create an android app for your forum. I won't be writing them all at once, but I will update this OP from time to time until it is complete.

It won't take that long actually since this will only be using a simple webview technique. Ok, not really simple actually but once you get use to it, following this step by step, you will be able to create your own forum app. That's for sure.

Really, it will be nice if you have your own app for your forum though it will not be an advanced version that have notification etc.


What do you need to do?

First Get Ready
1. You will nee to get android developer tool (ADT) i.e. eclipse or android studio (either one only). Get that software working with your laptop / pc. Google is your friend but you can get it here too: http://developer.android.com/sdk/index.html
2. You will be needing JAVA for it to work. I won't teach you this. Please search and read.
3. When your ADT is ready to be used, get mobile theme (free or paid) and install on your forum. This app will work fine but will not have its own css. It will depends on your forum mobile theme css.
4. Don't forget that you need a mod to detect and change your forum to use that mobile theme.


Getting Started
1. Create a new android app by select file > New > Android Application Project (name your project here).
2. Then click next 4 times (your can change things in in that 4 next if you want to), then fill Activity name to MainActivity and layout to main.
3. Finish. You now got your very basic app. It's time to make the app as your forum app.


Modify the basic app to become your forum app

MainActivity.java (src folder)
- This is the firstly created java file (automatic) which you wanna change its content to the given code below.
package my.qom.forum; <=== Change this to your created app package name

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {

private Button button;

public void onCreate(Bundle savedInstanceState) {
final Context context = this;

super.onCreate(savedInstanceState);
setContentView(R.layout.main);

button = (Button) findViewById(R.id.buttonUrl);

button.setOnClickListener(new OnClickListener() {

  @Override
  public void onClick(View arg0) {
    Intent intent = new Intent(context, ForumActivity.class);
    startActivity(intent);
  }

});
}
}


ForumActivity.java (src folder)
- You simply copy paste from the firstly created (above) java file and later change its contents as follows.
// Please change this to your own created app package name
package my.qom.forum;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.webkit.CookieSyncManager;
import android.webkit.WebView;
import android.webkit.WebViewClient;

@SuppressLint("SetJavaScriptEnabled")
public class ForumActivity extends Activity {

private WebView webView;

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
       
// Adds Progress Bar Support
this.getWindow().requestFeature(Window.FEATURE_PROGRESS);
// Makes Progress Bar Visible
getWindow().setFeatureInt( Window.FEATURE_PROGRESS, Window.PROGRESS_VISIBILITY_ON);

// Use forum.xml as webview layout
setContentView(R.layout.forum);

webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);

// Adds Zoom Control (You may not need this)
webView.getSettings().setSupportZoom(true);

// Enables Multi-Touch. if supported by ROM
webView.getSettings().setBuiltInZoomControls(true);

// Change to your own forum url
webView.loadUrl("http://smf-media.com/community/");

webView.setWebViewClient(new WebViewClient() {
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
// Loads only your frum domain and no others!
if(url.contains("smf-media.com") == true) {
view.loadUrl(url);
// Adds Progress Bar Support
    super.onPageStarted(view, url, null);
    findViewById(R.id.progressbar).setVisibility(View.VISIBLE);
// If they are not your domain, use browser instead
    } else {
    Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
    startActivity(i);
    }
    return true;
  }
  @Override
  public void onPageFinished(WebView view, String url) {
// Removes Progress Bar
  findViewById(R.id.progressbar).setVisibility(View.GONE);
// Adds Cookies. Yummy!
  CookieSyncManager.getInstance().sync();
  }
});
}
@Override
public void onBackPressed() {
// Enables going back history
if (webView.copyBackForwardList().getCurrentIndex() > 0) {
webView.goBack();
    }
    else {
// Your exit alert code, or alternatively line below to finish
// Finishes forum activity
super.onBackPressed();
    }
}
}


main.xml (res/layout folder)
- You can use this as a splash screen later, if you want to further develop it.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/buttonUrl"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/forum" />

</LinearLayout>


forum.xml (res/layout folder)
- This is where your forum is shown as a webview. Simply copy main.xml and rename to forum.xml. Change it as follows:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE project>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

<ProgressBar
    android:id="@+id/progressbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical|center_horizontal" />

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

</LinearLayout>


strings.xml (res/values folder)
- Language strings for your app.
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">MyForumApp</string>
    <string name="forum">Click To Enter Forum</string> <=== Button name

</resources>


AndroidManifest.xml (root folder)
- The main file for your app.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="my.qom.forum"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="9"
        android:targetSdkVersion="19" />

    <uses-permission android:name="android.permission.INTERNET" />  <=== You need to allow internet access

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".ForumActivity"
            android:theme="@android:style/Theme.NoTitleBar" />  <=== Your don't want a bar unless you further customize it

        <activity
            android:name="my.qom.forum.MainActivity" <=== Change this to your created app package name
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>


Note:
1. Remove <=== + its comment.
2. To fix minor validation issue of No grammar constraints (DTD or XML schema) detected, ensure you have this code at the top of all your xml files:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE project>



Validate and sign it. This has actually completed and had been tested in Samsung Note 3. I'll continue and edit and for your easy reference, pictures will be attached as well, later.

All the six files are attached here for reference together with the tested app.

Please feel free to ask and contribute.

Hj Ahmad Rasyid Hj Ismail

Updated with the code but yet to catch and upload pictures.

Hj Ahmad Rasyid Hj Ismail

Interesting topic to note: IMPORTANT --- Security Flaw in TapaTalk as many are using tapatalk for their forum.

I guess this tip / trick may be useful after all. I will see if I can create and upload the step by step pictures soonest.

Mstcool

But we would need to be an Android developer to publish the app to the play store, correct?

Hj Ahmad Rasyid Hj Ismail

Well, that is if you wanna submit to Google play store but you don't have to.

An app for android is like a mod package. Simply attach it in your forum for your user to use it. But don't forget to sign it though. It will be better that way.

Plus there are other third parties who allow you to publish for free. Just google and you'll find few of them reliably offering that services.

Worse come to worse ask a developer friend to submit it for you. I could too you know though with a condition that I will have to sign myself after checking it. ;)

-Captain Ghost-

Hello
First of all thanks for coming up with this i had been waiting for this for long time
I followed your steps but i was getting error [attached screenshots]

It may be due to my mistake also[But i had followed as you stated]

Request:Can you show a snapshot that how it look in android app

Thanks

Chalky

Nice one, I'm going to give this a go!  Thank you  :)

Hj Ahmad Rasyid Hj Ismail

#7
Thank to you too Chalky for testing it.

Captain Ghost, if you haven't save it, then save it. There is a help wizard on the left, the lamp that has an x beside it. Click that. There could be something that you missed and it will give you a clue to it.

Anyway, I posted, the six mentioned files on the first post, so that it will be easier for all of you. I posted the tested app as well.

Hj Ahmad Rasyid Hj Ismail

I have found a simple way to use cookies for webview that we are using in this app. This will ease forum users so that they will not have to log in until the cookies are expired.

As for the notification, I found that it is very much possible as well but will require a lot of works. So, I won't be adding that.

I will be testing testing the code that I have for using cookies and will add it up after a successful test.

Mstcool

Quote from: ahrasis on August 26, 2014, 03:33:34 AM
Well, that is if you wanna submit to Google play store but you don't have to.

An app for android is like a mod package. Simply attach it in your forum for your user to use it. But don't forget to sign it though. It will be better that way.

Plus there are other third parties who allow you to publish for free. Just google and you'll find few of them reliably offering that services.

Worse come to worse ask a developer friend to submit it for you. I could too you know though with a condition that I will have to sign myself after checking it. ;)

What do you mean by signing it?

NanoSector

Packages contain a key that Android (or any other platform for that matter) uses to verify the source of the package. If it has been tampered with, the package key becomes invalid and the runtime is warned of that. How it will react is up to the runtime; it may refuse to run the app or simply warn/prompt the user. (I don't know what the default Android behaviour is)

Unsigned apps can be run as well but a. can not be verified and b. can not be submit to the Play Store (IIRC).
My Mods / Mod Builder - A tool to easily create mods / Blog
"I've heard from a reliable source that the Answer is 42. But, still no word on what the question is."



Mstcool

Alright, why didn't you just post this in the tips/tricks board? Is it cuz the mods don't check that board? If yes, same thing with me. I posted a topic there a few weeks and it still says awaiting approval...

-Captain Ghost-

Quote from: ahrasis on August 29, 2014, 04:48:33 AM
I have found a simple way to use cookies for webview that we are using in this app. This will ease forum users so that they will not have to log in until the cookies are expired.

As for the notification, I found that it is very much possible as well but will require a lot of works. So, I won't be adding that.

I will be testing testing the code that I have for using cookies and will add it up after a successful test.
Are you talking about toast notifications ?

Hj Ahmad Rasyid Hj Ismail

Mstcool, not if you want to discuss it while waiting for it to be recognized as tip/trick. "Somebody" can transfer it there if this is recognized as one. But IMO, if you started it there, you might not have a chance to discuss it while waiting for approval.

Captain Ghost, if you got notification like PM and want to pass it to the app, then you will need to do some extra work and add some extra code to both SMF and the app.

Mstcool

Thats true, I am still waiting for mine to be approved. :p

-Captain Ghost-

#17
I don't understand but why it is generating r.java and buildconfig.java under gen folder with 'my.qom.forum' name
Even if i delete it it get's automatically generated,

I had already edited every file with necessary information as stated in tutorial

Can anyone confirm this

Thanks


Edit: Everything is working perfectly now

Chalky

I have 10 errors, some in files I haven't even edited  :-\


Hj Ahmad Rasyid Hj Ismail

Dear Chalky, sorry but it is not clear to me that you have followed the steps given in the OP since we didn't enable any other languages and we didn't add abc_search, abc_activity, abc_action as part of the given samples.

Have you followed the following basic steps when starting your forum app? Unless you know what you are doing, you need to follow exactly, the steps given in the OP.
Quote from: ahrasis on August 24, 2014, 12:59:50 AM
Getting Started
1. Create a new android app by select file > New > Android Application Project (name your project here).
2. Then click next 4 times (your can change things in in that 4 next if you want to), then fill Activity name to MainActivity and layout to main.
3. Finish. You now got your very basic app. It's time to make the app as your forum app.

If you did follow those steps, you will have these four main files: AndroidManifest.xml (root folder), MainActivity java file (src folder), main.xml file (res/layout folder) and strings.xml[/u] (res/values folder). You will need to change all these four files first as stated in the OP.

Then as stated in OP, you copy paste MainActivity java file (src folder) to become ForumActivity.java in its same folder, and, you copy paste main.xml file (res/layout folder) to become forum.xml in its same folder. You will also need to change them as advise in the OP as well.

Don't forget the following caveats:
Quote from: ahrasis on August 24, 2014, 12:59:50 AM
Note:
1. Remove <=== + its comment.
2. To fix minor validation issue of No grammar constraints (DTD or XML schema) detected, ensure you have this code at the top of all your xml files:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE project>


If you found any error, the following will help you. (I can't since I am not in front of your PC):
Quote from: ahrasis on August 26, 2014, 06:07:53 PMif you haven't save it, then save it. There is a help wizard on the left, the lamp that has an x beside it. Click that. There could be something that you missed and it will give you a clue to it.

Plus, I am using eclipse. They may be some minor differences but I do believe the steps should be the same.

Advertisement: