You don't need a computer or a desktop to start your coding journey, with an Android device and internet connection you can start learning to code today! In this article, I'm going to tell you everything you need to know to code on your Android device.
Table Of Contents
- Introduction
- Disclaimer
- Code Editor
- Terminal
- Browser
- Dev Tool
- Desktop View
- Resources
- Too Long; Didn’t Read
Introduction
👋 Hi! I'm Vanza. I had coded on my Android device for about 6 months and now I'm going to share the tools that I used to code on my Android.
This article is going to cover what code editors you should use, terminal (what you should use & how to use it), browsers, browser dev tool (how to use it), how to see your website on large screen size without a desktop device and more!
This is a long article, so let's get started!
Disclaimer
This guideline is mainly focused on front-end web development, although it is possible to do some other stuff, like doing Python, etc.
This guideline is going to cover the basic stuff on using certain tools. For further learning, I have provided the links to help you learn about the specific tool.
Also, keep in mind that coding on Android is only an alternative way to code.
First, let's discuss what code editor you should use.
Code Editor
The first thing that you need to have is a code editor. This is the place where you can write or edit your code.
I have two free and amazing code editors that I would recommend to you. I have tried both code editors and each has pros and cons.
Let's get into the first code editor.
1. Acode (Recommended)
Acode is a freemium and open source code editor developed by foxdebug (a.k.a. Ajit Kumar - deadlyjack on GitHub).
It has a good rating on Google Play Store which is 4.5⭐ for the free version and 4.9⭐ for the paid version, which is epic! 🔥
It has many features as is described in the app description. But I want to mention some of the features that I like:
- Emmet, write HTML & CSS quickly
- Two font families (the default and fira code)
- Customizable
- Open multiple files and folders at once!
The things that I don't like is:
- The autocomplete for JavaScript is not smart (It doesn't like VS Code IntelliSense)
- You can't change the app color theme unless you purchase the pro version
So, that's my brief overview of the app. Overall it is a good code editor that I always used when I was coding on my Android.
2. Spck Editor
Spck Editor is free and very powerful, code editor for front-end web development.
It has a good rating on Google Play Store which is 4.2⭐.
The stuff that I like about this code editor:
- 100% Free
- Emmet, write HTML & CSS quickly
- Git client integration (basic commands only)
- Customizable (dark & light themes, custom fonts, etc)
- It has smart IntelliSense like VS Code for the JavaScript
- Great built-in console (eruda)
- And much more!
But, it also has some limitations:
- You can't open multiple files (to work with) or folders (projects)
- Your local projects will disappear if you uninstall the app
For the second point of the limitations, if your phone is Android 10 or lower, you can prevent it by copying the io.spck
folder to somewhere safe before uninstalling the app. But for Android 11, you can't do anything about it.
Access to files
You can no longer use theACTION_OPEN_DOCUMENT_TREE
or theACTION_OPEN_DOCUMENT
intent action to request that the user select individual files from the following directories:
- The
Android/data/
directory and all subdirectories.- The
Android/obb/
directory and all subdirectories.- From Android Developers page about "Storage updates in Android 11"
Meaning that you can't access the Android/data/io.spck
.
The only way to save all your projects is to push each project to the GitHub repository.
So, Spck Editor offers a lot of awesome features but at the same time gives some limitations that I don't really like.
Which one should I use?
I would recommend trying both of them and picking the one that makes you comfortable to write the code. For me, Acode is the winner.
Terminal
Terminal or command line is a tool that allows you to do many tasks. You can create, modify, and delete file(s), and much more!
For terminal, Termux is the absolute best choice for me.
Now, let's dive into Termux!
Termux
What is Termux?
Termux is an Android terminal emulator and Linux environment application that works directly with no rooting or setup required.
- From the Termux Wiki main page
Here's why it is the best terminal for Android:
- 100% Free & Open Source!
- Easy to use, it gives you additional keys like arrow keys
- Install & update packages easily
- And much more!
Now, If you want to install Termux, install it from the F-Droid. Do not install it from Google Play, since it doesn't receive any updates anymore.
Next, I'm going to tell you how to set up Termux for web development.
Set Up Termux
I would recommend reading the Getting started - Termux Wiki page to get some basic knowledge about Termux. "Why?", because "Knowledge is power".
Now, open your Termux and follow the instructions below.
- First, copy-paste or type the command below
termux-setup-storage
- Second, the Termux will be asking storage permission, and you should grant the permission
- Third, you must update the packages that already exist on the Termux. So, copy-paste or type the command below
pkg upgrade
- During the upgrade process, you might get asked two times or more, just answer it with
Y
*** motd (Y/I/N/O/D/Z) [default=N] ? Y
- After that, you should see a message that says, All packages are up to date . (on the Termux output)
- Now, it is recommended to install all the official packages from Termux. To do that copy-paste or type the below command.
pkg install game-repo && pkg install science-repo && pkg install root-repo && pkg install x11-repo
- Then, Termux will ask you a question and you can just answer it with
Y
- That's it! Now your Termux is ready to use!
The list of the official Termux packages are coming from the Termux Wiki page
Basic Commands
Here are the commands:
-
cd
: change directory/folder
~ $ cd storage/shared
~/storage/shared $
-
mkdir
: make directory/folder(s)
~/storage/shared $ mkdir test
~/storage/shared $
-
ls
: list all the files and folders except the files or folders that start with.
(hidden files or folders). To list all the files and folders, typels -a
~/storage/shared $ ls
Android DCIM
test notes.txt
Note: Yours might be different, but you should see the
test
folder if you follow along.
-
touch
: create file(s)
~/storage/shared $ cd test
~/.../shared/test $ touch index.html style.css
~/.../shared/test $ ls
index.html style.css
~/.../shared/test $
To learn more commands, you can visit the Linux Journey website.
Install Git
Git is a free and open-source that is used to track your file history. It's an important tool for every developer.
Now to install Git, follow the instructions:
- First, type
git
in your Termux and execute it (tap Enter) - Then, Termux should tell you that Git is not installed and tell you what command you should execute to get Git
The program git is not installed. Install it by executing:
pkg install git
- The above step might be useful for you if you want to install new packages, but you don't know what command you should type
- That's it! After executing the
pkg install git
, you should have Git now.
To check whether or not the Git has been installed correctly, you can type git --version
. If it has been installed correctly, Termux should tell what version your git is.
To set up your Git, you can watch this Youtube video.
Keep in mind, that you are using Termux which means you are typically a Linux user (not Mac or Windows user).
Install Vim
Vim is a free and open source text editor that can run on Termux.
For translations of this README see the end.
If you find a bug or want to discuss the best way to add a new feature, please open an issue If you have a question or want to discuss the best way to do something with Vim, you can use StackExchange or one of the Maillists.
What is Vim?
Vim is a greatly improved version of the good old UNIX editor
Vi. Many new
features have been added: multi-level undo, syntax highlighting, command line
history, on-line help, spell checking, filename completion, block operations
script language, etc. There is also a Graphical User Interface (GUI)
available. Still, Vi compatibility is maintained, those who have Vi "in the
fingers" will feel at home
See runtime/doc/vi_diff.txt
for differences with
Vi.
This editor is very useful for editing programs and other plain text files All commands are given with normal keyboard characters,…
You need Vim. Vim allows you to access some files, like git config file and .bashrc
(they are located above the shared/
folder) which can't be accessed by Acode or Spck Editor.
Also if you are using Git there's a chance that Git wants to open a text editor, like solving merge conflict, doing rebase, and other stuff that required the user to decide what Git should do.
So, to install Vim execute the command below:
pkg install vim
After that, you can use it by executing this command:
~/.../shared/test $ vim index.html
Luckily in the Termux version 0.117 already provides you the arrow keys or else you have to use h
, j
, k
, l
.
To learn more about Vim key bindings, visit the Vim Cheat Sheet website
I am going to show you all the things that commonly you will use:
-
i
to get into insert mode (edit file) -
Esc
to go back to initial mode - The below command will only work if you are on initial mode:
- Type
:q
to exit (only work if you don't edit the file) - Type
:q!
to exit without saving the file - Type
:wq
to save and exit (often used)
- Type
Pro tip: Only use Vim for Git stuffs. Once, you are comfortable with Termux and Vim, you can start using them to edit the
.bashrc
file to set up aliases.
Install Node.js
To install Node.js all you have to do is execute the command below and type Y
to proceed with the installation.
pkg install nodejs
Install npm
Packages
Installing any npm
packages on the Termux are the same as installing them on Mac or Windows. But, on Termux, or I should say on Android, you can only install npm
packages globally since Android doesn't allow you to install the packages locally. So, keep that in mind.
There's one npm
package which is chalk that I know can be installed locally.
To install chalk execute the commands below your project folder:
npm init -y && npm install chalk
Now, I'm going to show you how to install Sass (CSS Pre-processor) and live server (automatically reload your website after any changes that you made).
Now, let's install both packages directly.
Execute the command below:
npm install sass live-server --global
The above command will install Sass and live-server globally, which means that you can execute the Sass and live server command from any directory.
To learn how to use Sass and/or live-server, you can see the documentation for each package, or for Sass, you can just type sass
and Termux should give you a useful output.
~/.../shared/test $ sass
Compile Sass to CSS.
Usage: sass <input.scss> [output.css]
sass <input.scss>:<output.css> <input/>:<output/> <dir/>
# more information
Uninstall npm
Packages
Let say, that you don't use Sass and live-server packages, you can uninstall them by executing the below command:
npm uninstall sass live-server --global
Pro Tips
- Don't watch any YouTube tutorials about "Hacking using Termux"
- Update installed packages regularly
- Always read the Termux output
- Don't execute the command that you don't understand
- Learn about
alias
command - Read the Termux Wiki FAQ
- Read the
README
on Termux official GitHub repo - Install
man
package.man
is going to provide documentation about commands.
~ $ pkg install man
# some output
~ $ man cd
# It will show the manual page of the "cd" command
- Have fun with it!
Browser
Browser is the place where you will see what your code is doing (how your website looks like). Choosing the correct browser would be an important step.
I have three options, each browser has different use cases based on my preference.
1. Google Chrome (Recommended)
Google Chrome is without a doubt is the most popular browser. It is free and cross-platform. So, it is a good practice to make sure that your website looks great on Google Chrome.
Now, I am going to give you one suggestion to use Google Chrome for web development.
Make the Text scaling is 50%. To find the setting you can follow these steps:
- Tap the three dots
- Scroll until you find Accessibility and tap it
- Now adjust the Text scaling down to 50%
The reason for doing that is because you want to make sure that the mobile view on your Android is the same as the mobile view on desktop (using responsive mode on a desktop browser).
Unfortunately, if you are using the default value which is 100%, making 1rem
is no longer 16px
. It is around 17px to 18px
. Also, it feels like your website gets to zoom in.
2. Firefox
The second browser is Firefox. It is also free and cross-platform.
My recommendation is to use Firefox to see the mobile and the desktop view at the same time. The desktop view that I'm talking about is the built-in desktop view and the text scaling on the accessibility menu.
To find it, follow the step above (on Google Chrome section).
After you find the Font Size (text scaling in Firefox), what I want you to do is to disable the Automatic font sizing setting and make the Font Size to 100%.
Now, any website that you open should have the same size as you see in Google Chrome.
Here's the trick to see your website on different resolutions in Firefox:
- Try to play around with the Font Size
- Next, try to enable and disable the Desktop site option
- Try to make your phone on landscape mode
If you try to open this website on Firefox with Font Size 50%, see it on landscape mode, and make sure the Desktop site is disabled. Then, you will see that the layout is changing from one column to two columns. The two columns layout is the desktop layout.
Well, you can play around with it as much as you want but keep in mind that it is not working if the developer or you use the px
unit for the @media
query.
/* ❎ This will not have any effect */
@media screen and (min-width: 950px) {
/* ...some code */
}
/* ✅ This will take effect */
@media screen and (min-width: 59.375em) {
/* ...some code */
}
For more information about
px
andem
on@media
query, what's the difference, what to use, I would recommend reading this article from Zell Liew about "PX, EM or REM Media Queries?".
Keep in mind, that this is not the best way to see your website on any screen size. Later, I am going to tell you a better way to see your website on different screen sizes.
3. Brave
The last browser is Brave. It is commonly used to see a website when there's an Adblocker (making sure that it still looks good without ads).
In this case, you can use it to see how your website looks like without JavaScript.
It is much easier to use Brave than other browsers since it only requires the toggle Block Scripts option.
Dev Tool
Developer tool is a tool that can help you debug your code in your browser. Developer tool in front-end web development is commonly used to inspect the element's styling or debug the JavaScript code.
The best (and the only) Android dev tool is Eruda. Let's discuss it!
Eruda
Eruda is a free and open source developer tool for mobile browsers. It's easy to use and the interface is as similar as the dev tool on the desktop.
Eruda
Console for Mobile Browsers.
Demo
Browse it on your phone: https://eruda.liriliri.io/
In order to try it for different sites, execute the script below on browser address bar.
javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
Features
- Console: Display JavaScript logs.
- Elements: Check dom state.
- Network: Show requests status.
- Resource: Show localStorage, cookie information.
- Info: Show url, user agent info.
- Snippets: Include snippets used most often.
- Sources: Html, js, css source viewer.
Install
You can get it on npm.
npm install eruda --save
Add this script to your page.
<script src="node_modules/eruda/eruda.js"></script>
<
…You can directly try it yourself by visiting https://eruda.liriliri.io/. Try to inspect any elements, try all the Snippets, etc.
After you try it, it is powerful, isn't it?
Now to use it on your project, you can put these lines of code inside the <head>
tag.
<head>
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
</head>
If you want to inspect other website, you can follow these steps:
- First, go to this website
- Second, bookmark the website and a box message from the bottom should appear
- Immediately, tap the Edit before the box message disappear
- Next, change the name to Dev Tool
- Then, change the URL with this line of code
javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
- Now, if you want to inspect the website that you're currently add, you can tap the search bar, then remove the URL, and type Dev Tool
- Then, tap the one that has
javascript
- Finally, wait for a couple of seconds and the gear icon should show up on the bottom right of your screen (default position)
Keep in mind, that unfortunately on some websites you can't use the Eruda developer tool.
Desktop View
Viewing your website using a built-in Desktop site is not showing you the exact view of how your website looks like on a real desktop. But, there's a tool that can help you to see your website in different screen sizes easily.
Responsive Testing Tool
The way you view your website on desktop or any screen size is the following:
- Visit the http://responsivetesttool.com/
- Copy and paste this URL :
https://nftcardfrontendmentor.netlify.app/index.html
- Now, you should see a text : 1024 x 600 [ Desktop ], which is showing how your website looks like on 1024px x 600px
- To see your website on a specific screen size, let say on 1440px x 1080px, you should click the icon next to the television icon
- Then, it should show the input text that contains 1024 (right input : width) and 600 (left input : height)
- Next, you can swap 1024 with 1440 and 600 with 1080
- Lastly, you can tap the GO button
Now, you can put your localhost URL and try to see your website on different screen sizes.
Keep in mind, that the URL should always end with .html
or else it will say that it is invalid.
Resources
vanzasetia
/
the-ultimate-resources-to-code-on-android
Contains all the tools that you need to code on Android device.
The Ultimate Resources To Code On Android
Table Of Contents
Introduction
Hi! I'm Vanza! I had coded on my Android for about six months and in this GitHub repo, I'm going to share everything you need to have to code on your Android device.
Here are some of the projects that I created on my Android device:
- Profile Card Component - a responsive card component
- Huddle Landing Page with Single Introductory Section - a responsive landing page
- Huddle Landing Page with Alternating Feature Blocks - a responsive landing page
All the projects that I list are coming from the Frontend Mentor challenges.
Disclaimer
The resources that I'm going to show are mainly for front-end web development. But, it's possible to do some other stuff like Python, etc.
Article
The…
All the resources are in the GitHub repo, which you can frequently check to keep up to date with the latest tools to code on Android.
Too Long; Didn’t Read
-
Code Editor
- Use Acode or Spck Editor or both
-
Terminal
- Termux for the terminal. Learn how to use it from the official Termux Wiki
- Browsers
-
Dev Tool
- Use Eruda, learn how to use it by reading the
README
on the GitHub repo
- Use Eruda, learn how to use it by reading the
-
Desktop View
- Visit the responsive site tool website and make sure the URL always end with
.html
or else it will say that the URL is invalid (both localhost and hosted website)
- Visit the responsive site tool website and make sure the URL always end with
-
Resources
- All the links are in this GitHub repo
Have Fun!
That's it! Hopefully, this is helpful!
Discussion (0)