Android Widget

Learners at Educative may have an interest in learning about mobile applications. As an author, you can create a course to teach individuals how to develop applications for mobile devices such as smartphones and tablets. You can use the 'Android widget' to create Android-based applications.

We'll cover the following

The Android widget takes away the hassle of downloading the Android Studio. Just running the emulator itself is a tedious task in itself. This is what it looks like:

Press + to interact
Edit mode
Edit mode

What do I need to know?

  • From the top 3 available drop-down menus, you can select the programming language, gradle version, and the emulator of your choice.

Press + to interact

  • Add Hello World for <lang>: You can generate a simple “Hello World” mobile application for the selected language.

  • Code Height: You can specify the size of the coding window in pixels.

  • Output Height: You can specify the size of the output window in pixels.

  • Highlight lines: You can highlight important lines of code in any file. Open the file from the side panel and enter the line ranges. For example:
    1-3
5
    This will highlight lines 1-3 and line 5 of the selected file.

  • Hide File: You may find a file irrelevant to learners. Open the file from the side panel and mark this checkbox.

  • Mark current file as read-only: You may want learners not to alter a particular file. Open the file from the side panel and select this checkbox.

  • Disable Execution: Select this checkbox to make the program non-executable. By default, learners can run the code.

  • Mark as Primary File: You may want learners to view a particular file at first glance. Open the file from the side panel and mark this checkbox.

  • Upload File: You can upload a file locally to your program. This button creates a file in the main directory, i.e., usercode folder at the backend.

  • Upload Folder: You can upload a folder locally to your program. This button creates a file in the main directory, i.e., usercode folder at the backend.

  • Hide Emulator: You can mark this checkbox if you want learners to observe the terminal only and ignore the output console/screen result.

  • New File: You can add a new file to your program. This button creates a file in the main directory, i.e., usercode folder at the backend.

  • New Folder: You can add a new folder to your program. This button creates a file in the main directory, i.e., usercode folder at the backend. Once a folder is created you can create another folder or file inside it.

Press + to interact

Example

Below is a simple Java mobile application example supporting Gradle 4.x running in GenymotionAn Android emulator that allows testing within a safe, virtual environment, giving an experience as if it were running on an actual device..

Initially, there is no code in the widget. You need to click the "Add Hello World for <lang>" button, which generates a basic 'Hello World' code.

package com.educative.android.hello;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  }
}
Hello World

When run successfully, learners see a URL next to the "Run" button, which takes them to a seperate tab where they can see application on full screen.

Project hierarchy

  • Java files: You can add the Java files in the hello folder along with the MainActivity.java file. You can also make different folders based on functionalities.

  • Layout files: You can add the layout files in the /main/res/layout folder.

  • Images: You see any drawable folder as it's not created by default. You can create the folder in the /main/res directory and add images to it.

  • The value folder: You can add other files in the main/res/values folder along with the strings.xml file. For example, you can add the colors.xml and styles.xml files and specify your colors and styles, respectively.

Caching

It is well known that compiling and running Android applications consumes a lot of time. The Android widget provides a built-in caching feature that can help users run their applications more efficiently.

To use this, run the application in the edit mode and let it compile. Once it is done compiling save the current instance of the course and the build dependencies for that widget will get stored in the local cache. Now, when the application is run in published or preview mode, instead of building it from the start, the local cache is used.

Can I link my GitHub account?

It's very common to add our code repositories on GitHub.

  • Provide github token: You can access the code from your GitHub repository by adding your personal access token here.

  • Import code from Github: You can specify the repository path and import programs. The size of the project should be less than 750 KB. Otherwise, the SPA may not work as intended.

GitHub limits the number of times a code can be imported from a repository anonymously. Usually, this limit is not very high to avoid unnecessary spam/attacks. If the limit is reached, the code can not be imported. You can overcome this error by following certain steps. To begin, follow the steps below:

  • Step I: Sign in to your personal GitHub account and visit this page. It will open the page like below:

Press + to interact

  • Step II: In the “Note” field, add a note explaining why you need a token.

  • Step III: Next, you’ll see the “Select scopes” option. If you check any of the options, you’ll allow a third party to perform the chosen operations on your repository. So choosing the write or read key would allow a third party to read/write to your repository. When you scroll to the end of the page, you’ll see the “Generate token” button; click it. You’ll see a section like the one below.

The green section shows the token generated. Copy the token and save it somewhere since you won’t be able to see it again. Paste this token in the “Provide GitHub token” option. Now, go to the “Import code from Github” option and import the required code. This time, error 403 will not show up.

Personal tokens have a much higher import limit since GitHub can identify your account because you’re not anonymously importing; hence, the spam/attack security risk is considered relatively less.

Can I write my build script?

You can write custom commands to run the application. For example, if you want learners to observe whether the build has succeeded, you can write the gradle build in the "Custom Build Script" field. 

package com.educative.android.hello;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  }
}
Build the application

Know the limitations

There are some limitations of the Android widget. It doesn't provide 2 basic IDE features: auto-import the libraries and code completion feature.

  • Auto import libraries: In Android Studio, you don’t have to worry about any basic library since Android Studio automatically imports it for you. For example, when you use “Button” in Android Studio, you don’t import its library. But in our widget, you have to provide all the libraries explicitly. So, make sure you have imported all the necessary libraries in your program files because when you make a new .java or .xml file, it’s empty. You don’t get the basic skeleton that you get in Android Studio.

    See the following image. In lines 3-4, you can see we are importing two libraries. These are already given in the MainActivity.java file, which is provided to you in the beginning, but it won’t be there in any new Java file you create. You have to include the package (line 1) in every Java file too.

Press + to interact

  • Code completion feature: In Android Studio, you start typing, and it shows you the relevant suggestions and gives you the option to complete the code. For example, when you type Button* in any layout file and hit enter, it provides you with a basic skeleton of a button. This is a very handy feature to have and saves a lot of time. Currently, this feature hasn’t been integrated, but don’t worry; our Android Widget is still pretty cool!