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.
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.
B4A is available from:
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:
SDK. Download and unzip the Android SDK into C:\Android\
The next step is 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:
(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:
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.
From the main menu select Project, Build Configurations. In the Package section enter your application name in the format:
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:
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:
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 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.
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.
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.
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:
- Go to the Settings, Developer options screen on your Android device.
- If Developer options is not visible, select Settings, About device and tap the Build number seven times.
- 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.
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.
- Bayla Publishing: Indy Books And Creative Android Apps.
Books include office humor, massage therapy, and tech fiction. Android apps: Choose and Clues - choose your own path. BaylaDex – note filing. | Bayla Pub
© 2019 William R Vitanyi