[TIPS / TRICKS] Create Android App For Your Forum

[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.

Code Select Expand

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.

Code Select Expand

// 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.

Code Select Expand

<?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:

Code Select Expand

<?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.

Code Select Expand

<?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.

Code Select Expand

<?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:

Code Select Expand

<?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]

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]

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).

[Mstcool]

How do we sign it?

[Hj Ahmad Rasyid Hj Ismail]

Google is your friend: http://developer.android.com/tools/publishing/app-signing.html

[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-]

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-]

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.

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:

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:

Code Select Expand

<?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):

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.

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

[Hj Ahmad Rasyid Hj Ismail]

Edit: Everything is working perfectly now

Nice to hear that Captain Ghost.

[-Captain Ghost-]

Edit: Everything is working perfectly now

Nice to hear that Captain Ghost.

request: can a progress bar or loader be added to this.

[Hj Ahmad Rasyid Hj Ismail]

Possible. Will try to add that and cookies for the app soon.

[Chalky]

Thanks for the reply ahrasis.  I haven't a clue what I'm doing  so I followed the steps exactly and to the letter.  What I did do was make tweaks in those initial 4 "next"s in Getting Started to add my own icon.  I have all the files you specified and I did not touch any others.  I too am using Eclipse.

I think I'm going to scrap it and start again in case I did something stupid in those early steps...

[Hj Ahmad Rasyid Hj Ismail]

Updated the OP. Added support for cookies and progress bar. App should now remember cookies until they are expired and will have a progress bar on the top while the page is loading.

Edited: Only ForumActivity.java (with proper comments for easy understanding) and forum.xml files are updated. Attachments and other files' code are not updated yet as nothing is changed.

[Akshtsaklani7]

hey, i'm having some errors







Please help..

Edit:- Google is my best friend. Problem Solved..

[Hj Ahmad Rasyid Hj Ismail]

Yeah. That should be easy to fix. Both pictures shows forum.xml and main.xml not named yet or have different name or not properly spelled.  The same with webView and buttonUrl.

[Bob Marley]

Hello. 

Could the author of this topic help me with this error that i got (On picture)

Thanks

[Hj Ahmad Rasyid Hj Ismail]

Not really. I can only help if you can tell me what you did, step by step until you get that error. You need to do exactly the same as what is stated in the OP.

[Oiled]

Thanks for this guide. I've created a new project in Android Studio, used the files you attached and tried to build the app, I get these errors. Any ideas please?

[Hj Ahmad Rasyid Hj Ismail]

That is the string where you defined things. I did attach the strings.xml in the OP. One more thing, do not copy the file but copy its contents to your files and change accordingly once you have copied it.

[Oiled]

Thanks. I started from scratch and followed these instructions instead: hxxp:developer.chrome.com/multidevice/webview/gettingstarted [nonactive]

Worked perfectly. Now have an app complete with splash screen.

[Hj Ahmad Rasyid Hj Ismail]

Good for you.

[hitsme]

2. You will be needing JAVA for it to work. I won't teach you this. Please search and read.

you can download java here
Control Panel\System and Security\System advanced system settings > advanced > environment variables > system variables > new >variable name = JAVA_HOME value = user\jdk etc

• 
  I found that "<!DOCTYPE project>" was giving me problems.


• In the AndroidManifest.xml
  <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>
  
  
  you have to add your package name .forum

[li] i was also getting this err
[/li][/list]

Code Select Expand

Error: No resource found that matches the given name (at 'title' with value '@string/action_settings').

i added in string.xml <string name="action_settings">something here</string>[/li]



• i would like it should check if it has network conn, if not alert else continue, & on network change alert you need internet conn, to continue <back> close,

my post doesnt display properly is a bug of smf

TIA

[Hj Ahmad Rasyid Hj Ismail]

It has all been covered in the OP except for app notification system.
#1 - No grammar error

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:

Code Select Expand

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

#2 - Creating ForumActivity java file (obviously you have to rename it after copy paste)

ForumActivity.java (src folder)
- You simply copy paste from the firstly created (above) java file and later change its contents as follows.

#3 - Whatever strings you used, define it in here.

strings.xml (res/values folder)
- Language strings for your app.

#4 - Internet permission is already asked. If no internet, then no connection.

AndroidManifest.xml (root folder)
- The main file for your app.

Code Select Expand

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

#5 - You have to have responsive theme OR mobile theme.

First Get Ready
...
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.

Note: I am in the mid of creating notification system mod and upgrading this app with it but it will take times.

[hitsme]

i would like to add a 2nd button taking to a certain board how would the java file look?

[Hj Ahmad Rasyid Hj Ismail]

Your forum is displayed under ForumActivity.java using its forum.xml. You need to duplicate both and rename them. Change url and button name to your preferred board url in NewBoardActivity.java and button name in board1.xml. That should cover the basic.

[hitsme]

Your forum is displayed under ForumActivity.java using its forum.xml. You need to duplicate both and rename them. Change url and button name to your preferred board url in NewBoardActivity.java and button name in board1.xml. That should cover the basic.

Thanks,
my question was about the MainActivity.java adding the second button

Code Select Expand

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);
  }

});
}
}



how (where) do i add a second button?
TIA i appreciate your help

[Hj Ahmad Rasyid Hj Ismail]

Oh yes. I forgot about that. This is not tested but I think you should be able to simply duplicate and change the duplicate copy of this code:

Code Select Expand

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);
  }


To:

Code Select Expand

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);
  }
button2 = (Button) findViewById(R.id.button2Url);
button2.setOnClickListener(new OnClickListener() {

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



Or something like that. Make sure you add the button by simply duplicating and change the duplicate copy of the button in main.xml too. Note, you can create and apply your own css to the button and all other things including the forum itself. (Please do your own research on this)

[gvill]

Thank you for this tutorial !
I managed to get an apk but i can't launch it on my HTC (Android 2.3), it starts but seems to crash few seconds later. Do you think my android version might be the problem?
Thanks !

[hitsme]

Thank you for this tutorial !
I managed to get an apk but i can't launch it on my HTC (Android 2.3), it starts but seems to crash few seconds later. Do you think my android version might be the problem?
Thanks !

did you sign it or you're using the debug version?

[hitsme]

i used this tutorial works on 2.2 you probably didn't sign it ,

i want that when someone clicks on the activation link it should open with my app & not with the browser

the app should create a cookie and when ever the forum is accessed via the app it should load with the reseller theme otherwise with the default theme

[MetalFox]

Is there anyway to make this run with more apis? If possible newer ones. I managed to run it but with a bit old one. Thank you

[Hj Ahmad Rasyid Hj Ismail]

Ok. We already talk about this on my FB and you managed to resolve this your own.

[JF3000]

Do you still use Eclipse or did you move onto something more robust, since eclipse isn't that user friendly when it comes to Android Apps. Did you check out Android Studio?

[Hj Ahmad Rasyid Hj Ismail]

Still will eclipse as I am not used to Android Studio yet.

[anti-matter]

thanks works a treat
how would I add a background picture?
regards

[Xpresskonami]

Can anybody screenshot how the app look like

[nend]

It should almost look like your site, I say almost depending on the API level. If you are running it on a lower API, some newer standards might not work. However I created a Lollipop webview recently and it still didn't rendered everything correctly.

I would recommend to not go this route unless you want to make a app that interacts with the data and not just display a webpage in webview.

The best method IMHO is to use the web app capable meta attribute and add a manifest to it for a mobile optimized page. This is method I currently deploy.
https://developer.chrome.com/multidevice/android/installtohomescreen

[Hj Ahmad Rasyid Hj Ismail]

It all depends on your forum whether it is capable of being fully mobile responsive.

I would recommend to not go this route unless you want to make a app that interacts with the data and not just display a webpage in webview.

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.

[Technologx]

I know this topic is old but how do I go about adding a splashscreen to this and the ability for users to upload and download from within the app?

[Hj Ahmad Rasyid Hj Ismail]

Users ability to upload and download depends on your forum and not on the app.

[peterwaalker]

Please  need to see an example forum app created from this example as tutored by the original poster.

[Hj Ahmad Rasyid Hj Ismail]

It is in the first post attachements.

[peterwaalker]

Thanks for this great tutorial. i have successfully followed your direction without having any errors.

1. How do i add a splash screen image so that even without internet connection users can still see the forum image/banner?
2. I used android studio to train on this tutorial, how do i possibly finalize and make all these coding to myforum.apk file?
3. Can i add some other tabs on splash screen and possibly do that without error?

[Hj Ahmad Rasyid Hj Ismail]

It should be possible to wrap the files as your own app i.e. yourforum.apk using android studio. Just create a simple app using it, then modify it accordingly. It should be possible to create a splash screen but that you have to learn it on your own.