Android in the browser

A mobile app is a regular part of the practical INF.04 exam (a Polish vocational IT qualification), and in class it usually means a multi-gigabyte Android Studio and an emulator that takes minutes to start on a school computer. In BitWizards the whole project lives in a browser tab: the activity_main.xml layout with an editor like Android Studio’s, the logic in MainActivity.java and a phone where the app runs as soon as you click Run. The course itself is in Polish.

Course: mobile apps step by step - first lesson

Layout editor: Code, Split and Design

You edit the layout the way you do in Android Studio, in three modes:

• Code - the XML file with syntax highlighting,
• Design - a palette of controls (TextView, Button, EditText, CheckBox, RadioGroup, Switch, SeekBar, Spinner, ListView, ImageView and layouts), the component tree and the attributes panel; you drag controls onto the phone,
• Split - code and design side by side: selecting a view moves the cursor in the code and the other way round.

Every change in Design is a plain edit of the XML text, so formatting and comments stay, and Undo covers code and design together. Supported layouts are LinearLayout with weights, FrameLayout, ScrollView, TableLayout and ConstraintLayout, the default layout of a new project: constraints to the parent and siblings, bias, 0dp size and chains, with constraint handles on the edges of the selected view in Design. An XML error shows its line number, and warnings (missing size, duplicate id) look like Android Studio’s.

Logic in Java

MainActivity.java is a real activity class: onCreate, setContentView, findViewById, setOnClickListener with a lambda or an anonymous class, Toast, ArrayAdapter, listeners for CheckBox, RadioGroup, SeekBar and lists, the android:onClick attribute and the R.string, R.drawable and R.array resources. The code is checked by my custom-built Java engine, the same one as in the Java course, so compile errors look like javac’s. An exception at run time ends the way it does on a phone: the app is stopped and Logcat shows the stack trace and a hint about what went wrong.

Checking like an Espresso test

A mobile app task has a two-part rule:

• layout controls - type, id and attributes (for example an EditText with the id password and inputType="textPassword"), optionally in a given order,
• scenarios - steps on the running app: type text, click, tick, move a slider, pick a list item, then expect a view’s text, a Toast message, visibility or an image.

Checking runs after every Run, and each scenario starts the app again.

For teachers

• Your own tasks: a starter app (layout, code, strings.xml) and a rule builder with a trial run on the model solution.
• Each student’s work history with file tabs and a live view during the lesson.
• Timed mock exams with tab-switch signals.

Limitations

Not available: Kotlin, multiple activities and Intent, fragments, RecyclerView, networking, Room and permissions. ConstraintLayout is simplified (typical exam layouts look the same as in Android Studio, rare solver cases do not). Images come from a built-in set, a task has no files of its own.

Related pages

INF.04 exam - Java - SQLite