How To Get Twitter Credentials For Your Mobile App

To use Twitter to the max in your app, the first step to “create” an app within Twitter’s developer section. The address you need will be

https://dev.twitter.com/twitter-kit/android/configure

which leads to this screen:

Developers Fabric Twitter Android

Configure your Twitter app for Android

Read that page to learn what you need to specify in order to create an app with Twitter.

Clicking on the link leads to this screen

Screen to add a new app to Twitter or work with the existing ones

Screen to add a new app to Twitter or work with the existing ones

My was called Share To Twitter, so clicking on that, I get access to my app’s details on Twitter. You will have to visit all four menu options, Details, Settings, Keys and Access Tokens, and Permissions and dully generate and enter all the information required. On the following image we see only the last option — it is important to enable the third option Read, Write and Access direct messages.

app, Twitter, access rights

Set up wide access rights for your app on Twitter

How To Use These Parameters?

To publish to Twitter (or, publish using Twitter), you may use my Share to Twitter plugin, described here. This is only for Android users. This approach uses Android intents and needs not keys, access rights and so  on. Ideal if you already are a mobile Twitter user and have their “original” app already installed.

If you use another of my plugins, called Menu Share, you can also post to Twitter and eleven other social sites, without the need for keys etc. provided you once enter the login and the password.

You will need the keys from the above screens if you want to use an external library such as Twitter4J.  Finally, in the last quarter of 2014 Twitter rolled out their integrated approach to mobile apps building, called Fabric. Now (February 2015) their entire developer site is made into “fabric” and there is no escaping using it. Most examples are also for Android Studio, so if you are still using Eclipse, you may feel like out of luck.

android, fabric, twitter, gradle

Fabric for Twitter is mainly orientated towards, Android Studio, using gradle etc.

For Fabric, which is now a formal library for building Twitter apps, as well as for Twitter4J, you will need the keys and access rights described in the above image.

Share To Twitter — Android Plugin To Post To Twitter

Almost all apps nowadays post to Twitter, Facebook and other social sites. The reason is that in iOS, it is relatively easy to post to social sites, and so was moderately difficult to write plugins to that end. On the Android side, there is no such support so here is for the first time an Android plugin that posts to Twitter. A similar plugin for Android only is also available for Facebook, and there is a third plugin, called Share Menu, that can post to twelve different social sites, provided you first enter the password for each site that you want to post to.

Most people that want to post to Twitter and Facebook will already have their respective “native” apps installed, so the user only has to tap an icon and post to these sites almost automatically or with a minimum of fuss. In this post we concentrate only on posting to Twitter, as posting to Facebook has its own quirks.

How To Post Predefined Text, Image and Link to Twitter

Normal usage for this plugin is to be called from an icon on an action bar. Let us say that you have a plugin such as HTML Pro or HTML Pro AdMob, which is HTML Pro modified to show Ad Mob banners and interstitial ads.The HTML Pro screen may contain information about a location that you may want to visit, a shop to buy shoes from, a cinema to watch movies, and so on. You want to help your user to post the shoes shop to Twitter, so you command that the action bar of the HTML Pro screen contains an icon to post to Twitter. In control panel of the HTML Pro screen there is a field that looks like this:

show_twitter_full_menuIf the first option is activated, the Twitter icon will be shown in the action bar, as in this image:

Twitter, Twitter icon, post to Twitter, HTML Pro

Selecting Yes in the field will make the Twitter icon show in the action bar of the HTML Pro screen

Now, tapping or clicking on that icon will activate the Twitter app and the following screen will show:

download image for Twitter post

The image is being downloaded to post to Twitter, if there is one in the control panel

If in the field Twitter Image Url there is an entry, the image will be first downloaded and then the “post to Twitter” screen will show:

Twitter app

The Twitter app is acitvated, the text is predefined as is the image, but you can change it all on the fly

Tapping on the blue button Tweet, will send the contents of the screen to the Twitter.com and there will appear the message with the image:

Twitter, post to Twitter

The contents of the Android screen were posted on Twitter, image too

How To Define the Text, Link and the Image to Post to Twitter From Your Android App Control Panel

The control panel for the HTML Pro screen also contains the fields for the elements of the

Twitter, action bar, Android, icon

Fields to populate the Twitter post

Here is what these fields might look line in practice:

Twitter post

Fields to define the link, the text, the image and “return to” screen within the app

If these fields remain unpopulated, you will get a chance to write text into the app and then, by pressing the Tweet blue button, send it to Twitter. Any combination is possible, no link, no text, no URL address, but the field Twitter Next Screen Item Id should always be populated by an item id of the screen that the app will continue with after the “underlying” Twitter app goes back to sleep.

In this case, the contents of that field points to the “Main Menu” screen, the one that the app starts with. It can be any other screen, really, in some cases, that might be the “upper” menu from which the HTML Pro screen was called.

If this field is left empty, the app tends to be unusable, because  the Tweet screen and the screen before it create a vicious circle, which can be broken by using, say, the menu of the app to go to the home screen.

There Can Be Only One Share To Twitter Screen

There needs to be exactly one and only one instance of the Share To Screen plugin in the app. The HTML Pro plugin, the HTML Pro AdMob plugin and others just transfer the parameters to the Share To Twitter screen, which then interprets them and posts to Twitter. Also, note the item id of that unique Share To Twitter screen and enter that value into the auxiliary plugin called DS_auxiliary.java.

Here is what its relevant part looks like:

plugin, global values, singleton Java

DS_auxiliary plugin acts as a singleton, making certain values global for the ap

 

 

How To Change the Color of the Background in Action Bar For Android

There is an excellent online resource for creating a simple, attractive and seamless custom action bar style for your Android application:

http://jgilfelt.github.io/android-actionbarstylegenerator/

Here is the code on GitHub:

https://github.com/jgilfelt/android-actionbarstylegenerator

 

How to Change the Color of Text in Action Bar for Android

Up to now, the color of the navbar text was always the same in all Buzztouch apps for Android. In this document, you will see how to change the text to one or more colors.

This will be the result of our coding:

navbar text

From black navbar text, to red, to multiple color text

The version used here is Buzztouch Android 3.0, with fragments. You can also download the PDF file from the How-To section in Buzztouch.com official site:

https://www.buzztouch.com/files/howtos/Color_in_action_bar_Android.pdf

To change the color of text in action bar for Android, find the following line in file BT_activity_host.java:

if (actionBar != null) {

In my version of BT_activity_host.java it was around line 1256, however, various versions of this file exist and the line numbers given here may vary. The line you are looking for is in function

public void configureNavBarAndBackgroundForScreen(BT_item theScreenData) {

which for me was in line 1226.

Now let us change the color of the navigation bar text. First we shall find the following text, right below, around line 1259:

// set title...
actionBar.setTitle(navBarTitleText);

The text we want to color is in variable navBarTitleText. There are two ways of entering color:

1) Using an HTML class

The text will be transformed from pure text into HTML text, and we can enter the colors there:

actionBar.setTitle(Html.fromHtml("<font color=\"red\">" + navBarTitleText + "</font>"));

The text will be red when you run the app next. If needed, you can use hex values for color, like this:

actionBar.setTitle(Html.fromHtml("<font color=\'#0000CC\'>" + navBarTitleText + "</font>"));

The text will again be red. Please note that these two lines of Html are not identical character by character, be careful when you paste one or the other into your class.

This approach is idea of forum user CMCOFFEE.

It may well happen that this is the first time your project needs the Html class from Android Java. If there is a red mark on the left of the line Eclipse, you need to import that class into the project. There are several ways of doing it:

a) Enter the following line into the import section of your class:

import android.text.Html;

b) Or, in Windows, press Ctrl-Shift-O to import it automatically.

c) Or, hover over the red mark with the cursor of the mouse and import the needed class from there.

java, red mark, eclipse

Red mark here shows us to import the Html class from Java libraries

That’s all there is to change the color of the navbar!

2) Using spanned arrays

This is a technical name for using a bit of code in Java. The procedure boils down to two consecutive Copy and Paste routines. Once again we need the line

actionBar.setTitle(navBarTitleText);

and find it around line 1256. Comment it out and put beneath it the following lines:

String taraba = "##";
int color = Color.CYAN;
// color = BT_color.getColorFromHexString("#d3d3d3");
CharSequence s = setSpanBetweenTokens(taraba + navBarTitleText + taraba, taraba, new ForegroundColorSpan(color));
actionBar.setTitle(s);

Then, press Ctrl-Shift-arrow down on Windows and go to the end of the current method, which should be

configureNavBarAndBackgroundForScreen

After that function add the following code, taken from here:

http://www.androidengineer.com/2010/08/easy-method-for-formatting-android.html

//==================================
public static CharSequence setSpanBetweenTokens(CharSequence text, String token, CharacterStyle... cs) {
// Start and end refer to the points where the span will apply
int tokenLen = token.length();
int start = text.toString().indexOf(token) + tokenLen;
int end = text.toString().indexOf(token, start);
if (start > -1 && end > -1) {
// Copy the spannable string to a mutable spannable string
SpannableStringBuilder ssb = new SpannableStringBuilder(text);
for (CharacterStyle c : cs)
ssb.setSpan(c, start, end, 0);
// Delete the tokens before and after the span
ssb.delete(end, end + tokenLen);
ssb.delete(start - tokenLen, start);
text = ssb;
}
return text;
}
//==================================

(The above function may go anywhere in the class, but it is just convenient to place it below the place it is used in.)

The function will hunt for the delimiter set in variable taraba and will insert the color codes into the string.

That’s it. Then next time your run your app, its action bar text will be in CYAN. Change the line

int color = Color.CYAN;

to whichever the color you want, including hex codes. You can use the function </>

getColorFromHexString(String hexString)

from BT_color.java, using it like this:

int color = BT_color.getColorFromHexString("#d3d3d3");

and so on.

Pros and Cons

This file, BT_activity_host.java, is one of the fundamental classes for Buzztouch app development system for Android. Change it at your own risk. If you only apply changes described here, everything will be OK, however, bear in mind that if you apply this hack in one app, it will not be transferred to the next app you are making. Make a list of such changes so that you know which files to visit routinely when you start a new app for Android.

This hack will change the color of the navbar text globally for the entire app. This is what you usually want, however, if you wanted different colors in different plugins, this solution will not fit the bill. Ideally, the Buzztouch core system should be changed so that in each plugin you have (or may be able to install) particular color of the navbar text. This may happen in the future, but currently, this hack should be sufficient.

How to Complicate Your Life Further — Using Variables

You may want to create a special variable that will hold the value of color. Later it would be easier to change it, document it and maintain it.

Here is how you could do it even if you do not know or like Java.

String colorString = "red";
String originalString = "<font color=\"red\">" + navBarTitleText + "</font>";
actionBar.setTitle(Html.fromHtml(originalString));
String s1 = "<font color=\"";
String s3 = "\">" + navBarTitleText + "</font>";
actionBar.setTitle(Html.fromHtml(s1 + colorString + s3));

The first line introduces a new local variable colorString. The next two lines introduce another string, called originalString. These two lines do nothing on the outside, I include them here only to show the genesis of code. The last three lines tear originalString into three pieces, variables s1 and s3 are constant, and variable colorString is in the middle. In this way, changing the value of colorString will also change the color of the navbar.

Several Colors in the NavBar

If navBarTitleText contained several words, it would be possible to give each of them their own colors. Here is the code:
String colorString1 = "red";
String colorString2 = "blue";
String s4 = "<font color=\"";
String s5 = "\">" + "Main " + "</font>";
String s6 = "<font color=\"";
String s7 = "\">" + "Menu " + "</font>";
String temp2 = s4 + colorString1 + s5;
String temp3 = s6 + colorString2 + s7;
String tempAll = temp2 + temp3;
actionBar.setTitle(Html.fromHtml(tempAll));

Example:

This is a navbar without color modification:

default theme, buzztouch apps, navbar color text

This is the default color of the theme in Buzztouch apps

This is the red variation:

red, navbar text

Navigation bar text now is colored in the red, as per the code shown in this text

And this is an example with two colors:

navbar text, text color, html

Text in the navbar can be in different colors, through HTML and variables for color

The sky is the limit here!

How to Contact Dusko Savic

Dusko Savic (DuskoSavic.com) has authored 25 books about programming and software. One of his sites was visited more than 600000 times since 2005. With Buzztouch.com since 2011, Dusko is equally at home with Java for Android and Objective-C for iOS. In 2014, he has created about a two dozen new plugins which he uses in his own apps and/or writes directly for clients.

You can see his Android apps here. His flagship app is Opera Music, download it and enjoy the best opera arias from the best performers in history. See his AdMob plugin in action there, an elegant way of making passive money with Android apps.

If you want your apps to make money, let me know. If you want me to

— code a plugin or an

— entire app for you, either for Android or iOS,

click here to send me an email.

Link to the blog: http://duskosavic.com

Link to the contact page: http://duskosavic.com/blog/contact-dusko-savic/

Link to the Play Store: https://play.google.com/store/search?q=dusko%20savic

Make Money By Integrating AdMob Ads Into Your Android App

If you are like me, you love making apps… the excitement of choosing the right title, gathering material to publish, creating a new and fun user experience… And once you are done, your thoughts meander… ok, great, now how do I make money with all this!?

Why Did I Choose AdMob?

Because Google owns it, because Google owns Android and because Google owns YouTube. A few years ago I had a very good experience with AdSense and some of my sites (Google owns traffic and Google owns AdSense too), until Google stopped sending traffic to my site because one of its infamous “slaps”. So why go with AdMob, which is for apps what AdSense used to be for sites!?

Now there are competitors, that’s why. The biggest competitor is Apple with its App Store, meaning, if Google stops loving my apps, I have elsewhere to go. Also, there are about 40 large and up to 150 not so large sites for distribution of Android apps which are independent from the Google’s Play Store.

I can distribute my apps from my own site if I wanted to, and then the apps can “sell” my other apps on their own, which sites just cannot do.

Finally, AdMob is the largest ads network for apps, they pay always on time, have large inventory of ads and so I feel I’m safe. If they do not like my apps any more, I should be able to switch to another ad network with a turn of a switch, as they say.

Integrating AdMob Code

The basic Java code for AdMob ads took me about three months to write and make perfect. I started that mid 2014, just when Google switched from an older version of AdMob to a new version. About 95% of articles on sites were about the old version, so it really took me weeks and months in the end to get it right.

To complicate things further, the relatively new version of Buzztouch, which is still of interest today, 3.0, works with fragments only. If you must have an activity in your app, you can, but the spirit of BT 3.0 is – fragments. Ok, but it meant additional agony for coding. For instance, if you have an activity, in most places you will use a variable called this, which is an object-oriented way of saying “all the variable in this class”. With fragments, it must be a context, i.e. a variable of type Context, and that usually is

Context context = getActivity().getApplicationContext();

— however, in some cases, it is only the first part, getActivity().

Things like that slowed me down for weeks, until I started getting them right the first time.

Buzztouch Control Panel Concept Applied to AdMob

The beauty of Buzztouch is not in the eye of the beholder but is in its control panel. Each Java class has its control panel and the class and the interactive panel together create a plugin. So, if your app is published in Play Store and you want to expel one ad agency and switch to another, how can you do that? For other apps, that means republishing the app, which can be a tricky process in itself. With Buzztouch control panel, you just set a parameter, save its new value, the app automatically refreshes itself and voila! new ads are now appearing.

Within AdMob plugins, you have two kinds of ads, banners and interstitial ads. They are completely different, both from the inside, technically, as well as from the outside, how they feel to the user. They are two different ways of programming, however, I put them together into the same plugin and then give the user parameters in the control panel to play with.

Here is what the control panel looks like:

AdMob, ads, advertising in apps

Parameters in control panel for AdMob ads

Banner Ads for Admob and the Control Panel

The three upper most parameters are about banner ads. Here is what they mean:

Activate Banner Ads

Decide whether you want the banner ads in the app to be active or not. Acts as a general switch. If no, none of the ads can be shown. If yes, show type of ads that you want to, exactly one at any time. Deciding which type of ad to show is in another field, whichAdToShow. You can choose banner ads to appear either at the top or at the bottom of the screen.

Admob, advertising in apps, banner ad

How to activate banner ads in the app

Top Banner AdMob Code

Enter the code for banner AdMob ads that you have gotten from AdMob.com for your app and/or specifically for this screen.

This will be the code for the upper banner ad, provided the “underlying” plugin supports such a placement. For instance, Menu with Image does support such a placement.

Here is what it looks like on the main menu:

admob, ads

Banner ads top of the main menu

Bottom Banner AdMob Code

Enter the code for bottom banner AdMob ads that you have gotten from AdMob.com for your app and/or specifically for this screen.

So you will have two different banner ad codes, if you want to show both.

Interstitial Ads for Admob and the Control Panel

Here are the parameters for interstitial ads:

Interstitial Ads Frequency

If 0 is chosen as the interstitial ads frequency, no ad is shown at all. In other words, if you do not want interstitial ads to appear at all, put 0 here.
Choose 1 to show an interstitial ad each time the plugin is executed.
Choose 2 to show an interstitial ad every second time the plugin is executed.
And so on. You may want to put an even higher number here in order not to alienate the visitors of your mobile app.

admob, interstitial ads

Interstitial Ads Frequency — whether to run them at all, and at which frequency

Interstitial AdMob Timing (in seconds)

After how many seconds will the next interstitial ad appear in the app?
Put 1 for 1 second, 60 for one minute, 180 for three minutes and so on.
If you do not put anything here, the default is 180 which will show a new interstitial ad every three minutes.

admob, interstitial ads, app

Interstitial Admob timing in seconds

Interstitial AdMob Code

Enter the code for interstitial AdMob ads that you have gotten from AdMob.com for your app.

Once again, this will be another code for another type of ad from AdMob site.

General Parameters For Showing AdMob Ads in the App

Which Ads To Show

Choose one SDK and one company that you want to work with in the app.
You can change it later, dynamically.
In this way you can change ad agencies on the fly, without recompiling and resubmitting the app again.
This presupposes that your app was shipped with the all needed SDKs in the first place.
If field Activate Ads was set to NO, none of the ads will show up, regardless of what you select from the list below.

admob, ads, advertisin in apps

Which Ads To Show in the app

These options are taken from the Buzztouch site, when one wants to download the source code for the app. Some of these may not be with us in the future, for example, here Scringo is still shown in spite of its demise in the last weeks of 2014.

Truth to be told, only AdMob is working now. That may change in the future!

Test Ads On or Off

Set to Yes if you want to show test ads only.
This is secure and should be done while you test that app and the ads.
At least in Google AdMob, clicking on your own ads can cost you the loss of account.
Set to No to make money, i.e. to show real ads.

admob, ads

Test Ads On or Off
Set to Yes if you want to show test ads only.

Here is what a test AdMob ad looks like:

admob, ads, advertising in apps

Test banner ads in app Opera Music

This setup of the ads enables one to have maximal flexibility. You can show no ads at all, only at the top, only at the bottom or both; interstitial ads are also on or off. You can show them, say, every fifth time the user enters one type of screen, or every 9 seconds or in combination.

How To Make Money With AdMob Ads In Your App?

After you install them and take a new AdMob ad code for each place in every screen that you show ads at, start counting. Soon you will know how many ad views your app has, how much money each ad has brought. You will see all that in the AdMob.com interface, or, you can also watch it at the AdSense site, if you happen to show AdSense ads as well.

In my experience, interstitial ads bring no money at all, probably I am too agressive. They say good results with interstitial ads can be achieved if you show them at natural breaks in the app, or, say, only once per app, when the user is leaving the app.

The best money maker is at the very first screen that the user sees. In my apps, that is the main menu. You should make more money if you managed to show more ads, which was the reason I added the option to show bottom banner ads, and then to show both the top and bottom ads at the same time.

Google is my friend in all this. I started showing ads in a new version of Opera Music app on the 10th of September 2014. At first the ads were off target, but in December, the ads were much more targeted per country, so Google both has large inventory of ads and optimizes their placement and timing as well.

How to Contact Dusko Savic

Dusko Savic (DuskoSavic.com) has authored 25 books about programming and software. One of his sites was visited more than 600000 times since 2005. With Buzztouch.com since 2011, Dusko is equally at home with Java for Android and Objective-C for iOS. In 2014, he has created about a two dozen new plugins which he uses in his own apps and/or writes directly for clients.

You can see his Android apps here. His flagship app is Opera Music, download it and enjoy the best opera arias from the best performers in history. See his AdMob plugin in action there, an elegant way of making passive money with Android apps.

If you want your apps to make money, let me know. If you want me to

— code a plugin or an

— entire app for you, either for Android or iOS,

click here to send me an email.

Link to the blog: http://duskosavic.com

Link to the contact page: http://duskosavic.com/blog/contact-dusko-savic/

 

 

How To Share a Link from My Android App to Facebook

The most important link to learn how to share links from your Android apps to Facebook is this.

Here is the Getting Started Guide for Facebook. Since I had previously already had created a Facebook app, imaginatively called “Test On Android”, I just had to download the SDK. Unzip, and take it from D:\Downloads\facebook-android-sdk-3.21.1(1) on my local disk. From Eclipse, File Import, but without copying the SDK physically into the workspace, as per Facebook instructions.

Not much luck, Facebook files came setup to Android 9, which Google does not seem to offer any more. However, FacebookSDK was installed safely, asking for version 10 or 2.3.3, which is totally OK. Now I go to my current app, called ShareMenuDemo and import the jar file for Facebook:

add_facebooksdkClick Apply to confirm and that’s it, no red marks in Eclipse, everything normal. Now put the app identifier into the strings.xml and androidManifest.xml files, like this:

The placement of Facebook app identifier in the Android Manifest file

The placement of Facebook app identifier in the Android Manifest file

 Link to read more about Facebook Dialogue.

Facebook SDK for Android Reference

 

 

 

How To Integrate Twitter Into Your Own Android Apps

I searched for the key phrase “develop twitter app android emulator” and decided to use the following page to start:

http://www.tutorialspoint.com/android/android_twitter_integration.htm

Additional pages that were needed are:

Create a new twitter application at https://apps.twitter.com/app/new

http://twitter4j.org/en/code-examples.html

http://twitter4j.org/en/configuration.html

Continued on the 11th of December 2014

Interesting link, because I need to send both text and an image to be posted on Twitter.

That leads to this piece of source code on GitHub.

Continued on the 14th of December 2014

Having just finished the Share To Facebook plugin for Android, I installed the Twitter app into the emulator.

Here is a good link how to download anything from the Play Store. In the end, it boiled down to this site:

http://apps.evozi.com/apk-downloader/?id=com.twitter.android

The Twitter app downloaded without real problems; it gave warnings but I was able to just use the downloaded file from the \temp\ folder. Finally, the line

adb install com.twitter.android

did the job. Twitter works on the emulator and I can test my new Share To Twitter plugin.

How To Install Facebook App On an Adroid Emulator

I want to install Facebook app on Android emulator / simulator to be able to test new plugins that I write. Searching for phrase “install facebook app android emulator” I decided to listen to this source of knowledge:

http://stackoverflow.com/questions/15760402/how-to-install-facebook-api-on-emulator-in-windows-7

After clicking on this link, I agreed to become a Facebook developer. Then I gave a name to the app that I will be making, it gave a Facebook app ID, and then I downloaded the Facebook SDK. The file was called facebook-android-sdk-3.21.1,

Facebook installed on Android emulator

Install Facebook application into a running android emulator, from a Terminal (CMD) screen

then I also downloaded the version for the emulator. It is called Facebook-11.zip and will actually contain only one file, Facebook-11.apk. And voila!, I have Facebook app on my emulator!

Android emulator can run Facebook app

Facebook App Starting

I’ve got Facebook app running on my emulator. It is not running very smoothly, or not running at all sometimes, but still, this is what I wanted and this is what I’ve got.

From Kindle Ebooks to Android Apps — Case Study of Six Ebooks of Mine

Currently I have 17 apps published in Dusko Savic Google Play account. Six out of these 17 titles already live their electronic lives in Kindle store. Just as a point of reference here are the links so the you can compare the app versions against the Kindle versions:

Kindle account Play store
1) Homepathic Remedies for Teething in Kindle store Teething
2) Cure Acute Otitis Media and Glue Ear Without Antibiotics and Save Your Child From Adenoidectomy Cure Otitis Media
3) Eczema in Children: Short Guide To Efficient Treatment Eczema In Children
4) Perfect Food For Your Child Perfect Food
5) Perfect Diet: Turn Your Obese Child into an Agile, Joyful, Well Balanced, and Calm Minded Kid Perfect Diet
6) Homeopathic Remedies for Baby Colics Baby Colics

I described here how I developed software to turn Kindle HTML files into apps, literally under one minute per conversion. In total, it takes under one hour from receiving a HTML file to have it published in the Play store, provided everything else is in place.

If you are interested in this kind of conversion, contact me here.

Best CMS To Have Members, Forum and Chat

What would be the best software to build a site with members, forums and chat?

Here is my answer.
You have many options and here I will outline just a few.

1) Use WordPress

It is the most popular CMS (Content Management System) in the world, with some 15% of all sites built on it. It is easy to install, easy to setup (it gets a little technical but you will have dozens of sites to help you out immediately), and you can all do it on your own.

Basic WordPress will not do what you want now, but you will be able to install plugins and themes, which is another name for pieces of software that fit into WordPress and enhance its capabilities. There is also something called BuddyPress, which will enhance basic WordPress to the level of a full social media site.

bbPress would be the name of the forum for WordPress but there are many others.

With WordPress, possibilites are endless but you will have to experiment. Out of the box, WordPress will fall short for you want.

2) Joomla

Joomla would be the best choice for what you want: it has membership functions right in, and you can add additional software to it via so called extensions. Most extensions are free and there are paid ones, which usually are complete software solutions on their own. In Joomla, you will be able to have many levels of users, user groups and you will be able to control who has access to what. I have one membership site like that, where I sell courses in astrology and energy healing and it functions just right.

There will be some steep learning path with Joomla, especially if you have never seen it in action. But it is free, it adapts to various screen factors automatically (meaning the site will show well on mobile devices) and so on.

You will be able to add forums (the best is called Kunena), chats and so on for free, just roam through the extensions site on joomla.org.

3) Make it on your own.

That what I currently with do PHP, a framework called CakePHP and a plugin called User Management. PHP and CakePHP are free, the plugin costs $50 but gives me exactly what you want: ability to create new user accounts, manage them in the background and create any style of site that I want. It is also much less prone to hacks and attacks than WordPress and Joomla, because hackers all over the world attack those two easily and joyfully.

For forum, chat etc. you would have to find already existing plugins for CakePHP or write your own.

There is a steep, steeep learning curve for CakePHP but once you get it, you will be able to produce unusual but optimized sites at will.

The verdict? In your case, Joomla.

P.S. If you want to compare various CMS systems, try the following link:

http://www.cmsmatrix.org/