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.
Updated with the code but yet to catch and upload pictures.
Interesting topic to note: IMPORTANT --- Security Flaw in TapaTalk (http://www.simplemachines.org/community/index.php?topic=522911.0) 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.
But we would need to be an Android developer to publish the app to the play store, correct?
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. ;)
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
Nice one, I'm going to give this a go! Thank you :)
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.
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.
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?
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).
How do we sign it?
Google is your friend: http://developer.android.com/tools/publishing/app-signing.html
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...
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 ?
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.
Thats true, I am still waiting for mine to be approved. :p
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
I have 10 errors, some in files I haven't even edited :-\
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.
Quote from: -Captain Ghost- on August 31, 2014, 02:51:58 AM
Edit: Everything is working perfectly now
Nice to hear that Captain Ghost.
Quote from: ahrasis on September 01, 2014, 02:54:00 AM
Quote from: -Captain Ghost- on August 31, 2014, 02:51:58 AM
Edit: Everything is working perfectly now
Nice to hear that Captain Ghost.
request: can a progress bar or loader be added to this.
Possible. Will try to add that and cookies for the app soon.
Thanks for the reply ahrasis. I haven't a clue what I'm doing :P 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...
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.
hey, i'm having some errors
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FaRNCqi8.jpg&hash=538e93d38d316e572a8dc45d459920f74b4e043d)
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FtwSEdCG.jpg&hash=62759760fe7be5731e2ebe46d777069621cdd35a)
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FZzgg5HW.jpg&hash=c1014348714d6eccdf61451b663e92d27a517ab8)
Please help..
Edit:- Google is my best friend. Problem Solved..
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. ;)
Hello. 8)
Could the author of this topic help me with this error that i got (On picture)
Thanks
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.
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?
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.
Thanks. I started from scratch and followed these instructions instead: https://developer.chrome.com/multidevice/webview/gettingstarted
Worked perfectly. Now have an app complete with splash screen.
Good for you.
Quote2. You will be needing JAVA for it to work. I won't teach you this. Please search and read.
you can download java here (http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html)
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]
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
It has all been covered in the OP except for app notification system.
#1 - No grammar error
Quote from: ahrasis on August 24, 2014, 12:59:50 AM
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>
#2 - Creating ForumActivity java file (obviously you have to rename it after copy paste)
Quote from: ahrasis on August 24, 2014, 12:59:50 AM
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.
Quote from: ahrasis on August 24, 2014, 12:59:50 AM
strings.xml (res/values folder)
- Language strings for your app.
#4 - Internet permission is already asked. If no internet, then no connection.
Quote from: ahrasis on August 24, 2014, 12:59:50 AM
AndroidManifest.xml (root folder)
- The main file for your app.
...
<uses-permission android:name="android.permission.INTERNET" />
#5 - You have to have responsive theme OR mobile theme.
Quote from: ahrasis on August 24, 2014, 12:59:50 AM
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. :)
i would like to add a 2nd button taking to a certain board how would the java file look?
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.
Quote from: ahrasis on February 02, 2015, 09:37:32 AM
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
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
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:
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:
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)
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 !
Quote from: gvill on February 04, 2015, 07:45:16 AM
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?
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
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
Ok. We already talk about this on my FB and you managed to resolve this your own.
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?
Still will eclipse as I am not used to Android Studio yet.
thanks works a treat
how would I add a background picture?
regards
Can anybody screenshot how the app look like ???
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
It all depends on your forum whether it is capable of being fully mobile responsive.
Quote from: nend on April 26, 2016, 08:40:08 PM
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.
Quote from: ahrasis on August 24, 2014, 12:59:50 AMReally, 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.
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?
Users ability to upload and download depends on your forum and not on the app.
Please need to see an example forum app created from this example as tutored by the original poster.
It is in the first post attachements.
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?
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.