ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to Create Android Apps Using Basic for Android (B4A)

Updated on April 8, 2019
WVitanyi profile image

William is a computer programmer, and also owns and operates Bayla Publishing. His Android apps include Choose and Clues and the BaylaDex.

Android App Design

Many people want to write Android apps, but the learning curve just seems too steep. Indeed, it is difficult to learn the intricacies of Java programming sufficiently well to create even a basic Android app.

Basic for Android, or B4A, is a rapid application design program for Android app design. It makes app design quicker and easier, without sacrificing the ability to create even complex apps.

I have used this program for over five years, and will show here how to create and deploy a simple app called Hello World.

Dark Theme
Dark Theme
Light Theme
Light Theme

The IDE

B4A provides both a coding environment and a screen designer. The coding screen, or IDE (Interactive Design Environment) is shown above in both a light and dark theme. Numerous color combinations are available.

The language used is similar to Visual Basic, and is fairly easy to learn. There is no need to program in Java, as the system compiles your program into the Java file required for upload to the Google Play Store or elsewhere. This allows you to focus on what you want your app to do, as opposed to the intricacies of Java. However, if you are so inclined you can create and use your own Java libraries, or those designed by others.

Installation

B4A is available from:

https://www.b4x.com/b4a.html

After purchase (a free trial is available) you will receive a link via email to download the application. Save it to a known location on your PC, and then double click to run the setup. It installs quickly, and creates an icon on your desktop.

You will also need to install the Java Development Kit (JDK), as well as the Android Software Development Kit (SDK). These are sets of files that are required to create Android apps. The links are:

JDK. Download and run:

https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

SDK. Download and unzip the Android SDK into C:\Android\

https://dl.google.com/android/repository/sdk-tools-windows-4333796.zip

The next step is configuration.

Path Configuration
Path Configuration

Paths Configuration

After you install B4A and the JDK and SDK there is some one-time configuration required. The first part is to configure your local paths. Open B4A and navigate to Tools, Configure Paths. Reference the screenshots above to configure the paths, making adjustments for your local setup as required.

The Additional Libraries location is for libraries that provide more functionality. These are generally free, but sometimes require that you download a file to a specific location.

Shared Modules is used for special cases. You can leave this blank.

Click the Open SDK Manager button.

Set the sdkmanager.bat path to:

C:\ANDROID\sdk-tools-windows-3859397\tools\bin \sdkmanager.bat

(Use the specific path to your local sdkmanager.bat).

There will be a search for components, which can take a while. Install all recommended items. When finished, to continue click Yes.

After the SDK installs, return to B4A Tools, Configure Paths and set the path to android.jar to:

C:\ANDROID\sdk-tools-windows-3859397\platforms\android-28\android.jar

Your path may vary somewhat. In the future if you update the SDK make sure you adjust the android.jar path to your latest version.


Build Configurations
Build Configurations

Build Configurations

From the main menu select Project, Build Configurations. In the Package section enter your application name in the format:

com.yourcompany.helloworld

In the above example the app name used for later deployment under your account to the Google Play Store will be helloworld. Yourcompany is the name of the entity that identifies you as the developer. For my app the Package used would be:

com.baylapublishing.helloworld

Click OK and then save from the main menu. I save my apps under C:/Android/, so this would be C:/Android/HelloWorld/. The B4A main project file has the extension .b4a, so this file would be C:/Android/HelloWorld/HelloWorld.b4a. Note that there are a number of other required folders and files that are automatically created for each app.

In the future to create a new app simply open B4A, enter the app name in the Build Configurations Package section, and save to the new app location.

Installation and Configuration is now complete.

Choose an Icon

You will want to set an icon to represent your app on devices. To do this in Photoshop, create an image using the settings shown above. When you are satisfied with your design, save it as a .png to a location you will remember.

In B4A, select Project, Choose Icon, and navigate to your icon's png file. It will be placed in the appropriate B4A directory, similar to this:

C:\ANDROID\HelloWorld\Objects\res\drawable\icon.png


Keeping Track
Keeping Track

Create the App

Technically your app now exists, but it needs some work to actually do anything.

In the bottom right corner of the IDE there are four tabs. These are for Libraries, Files, Logs, and Modules. Errors and notifications will generally appear in the Logs tab. The Libraries tab contains various areas of functionality that you may want to use. To include a library you simply check the checkbox. That functionality now becomes available to you within the IDE.

Under Files you can see files that are being included with your app, and the Modules tab helps you to see at a glance the structure of your app, and to navigate with one click to any section.

As your expertise grows, you will spend more time in each of these areas.

The Designer

The screen designer allows you to layout exactly how you want your app to display on any smart device. To launch the designer, from the main menu select Designer, Open Designer.

Each component, such as a button or a label, is called a View. To add a view select Add View from the main menu, and choose the desired component. In the example above I have added a label and a button. There are various techniques for positioning these elements, and I have chosen to use the scripting interface (bottom left panel) that works with the designer. The label and button are positioned near the center of the screen horizontally. I have also specified the height and width of the button. Using the Properties I set the background color of the screen that contains the elements.

The scripting code looks as follows.

Label1.HorizontalCenter=50%x

Button1.Height=50dip
Button1.Width=160dip
Button1.HorizontalCenter=50%x

Note the top left panel of the Designer, labeled Variants. Each variant corresponds to a particular screen size or orientation. You may want to design different layouts for different device sizes and orientations. In that case, click on New Variant and select the desired type. Then design as desired, and save with a unique name. You will reference this name in the app’s code, so use a naming convention that makes sense to you. I saved the current layout as PhoneLayout01.

Write Code

Now that we have a layout designed, it is time to write some code. Switch to the main window, which should be open along the bottom toolbar of your PC.

There are two modules shown—the Main module and the Starter module. The Starter module is a special type of Service module. It serves as an entry point to the app whenever it is run. The Main module is an Activity module, which contains code that loads screens and reacts to various user actions, such as pressing buttons.

In our Hello World app we will only reference the Main activity module, because of the simplicity of the app. In the Main module we will modify the code as shown.

Note the changes to lines 2,25,26,31, and 44-54.

Save the app.

#Region  Project Attributes 
	#ApplicationLabel: Hello World!
	#VersionCode: 1
	#VersionName: 
	'SupportedOrientations possible values: unspecified, landscape or portrait.
	#SupportedOrientations: unspecified
	#CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes 
	#FullScreen: False
	#IncludeTitle: True
#End Region

Sub Process_Globals
	'These global variables will be declared once when the application starts.
	'These variables can be accessed from all modules.

End Sub

Sub Globals
	'These global variables will be redeclared each time the activity is created.
	'These variables can only be accessed from this module.

	Private Button1 As Button
	Private Label1 As Label
End Sub

Sub Activity_Create(FirstTime As Boolean)
	'Do not forget to load the layout file created with the visual designer. For example:
	Activity.LoadLayout("PhoneLayout01")

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub


Sub Button1_Click
	
	If Label1.Text <> "Hello World!" Then
		Label1.TextColor=Colors.Green
		Label1.Text= "Hello World!"
	Else
		Label1.TextColor=Colors.Red
		Label1.Text= "Goodbye World!"
	End If
	
End Sub

Test Your Android App

To test your app you can use an emulator, which is a virtual image of an Android device on your PC, or you can use a bridge program or a USB cable to install your app on an actual Android device.

An emulator provides more potential types of devices to test, but installing on an actual device is a real-world test. Plus, if you install to your device you can write apps that you will personally use, even if you never make them available to the public.

B4A-Bridge is a free app which allows for wireless installation of apps from your PC to your Android device. It connects to your wireless router and displays an IP Address. Enter this IP in Tools, B4A Bridge, Connect, New IP.

If using a USB cable from your device to your PC, you will need to enable USB debugging on your Android device under Developer Options:

  1. Go to the Settings, Developer options screen on your Android device.
  2. If Developer options is not visible, select Settings, About device and tap the Build number seven times.
  3. Enable the USB Debugging option from within Settings, Developer options.

With this set, when the USB cable is connected to your device your app will install to your device when you compile it.

If you are going to use the emulator, select Tools, Run AVD Manager. This will bring up the emulator dialogue. Select an installed device type to launch the emulator screen.

To install your app choose Project, Compile & Run. Several lines of text will scroll past, and the app should then either be displayed in the emulator, or installed to your device depending on your selection.

After you allow the install, the app’s icon should now appear on your device. Below, see how Hello World runs on my Android device, as I click, and click again.

Click and Click Again!
Click and Click Again!

Conclusion

It's exciting to see your first app work on a real smart device. An important consideration is which application environment to use, and for speed and ease of use B4A is a great option. I have used it to develop and deploy several apps, including Choose and Clues (a choose your own path mystery solver) and the BaylaDex, a database/note app.

With a tremendous online community, help on almost any topic is just a quick search away.

Thank you for reading this article, please share it with others, and best wishes for your future App efforts.


© 2019 William R Vitanyi Jr

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
    ClickscoThis is a data management platform studying reader behavior (Privacy Policy)