Tag: Android app development

Android: dimensions cheat sheets for graphic designers AND developers

Just sharing the link to a “cheat sheet” that I found:

Android Cheatsheet for Graphic Designers

I think that this resource should have been said to be for developers too, because developers need to know about dimensions of graphics in the Android apps they develop.

January 20, 2016

Android transparent overlay without View

We’re not going to use ViewOverlay here. We’ll use Dialog instead.

The overlay does not show on button click. What I did was let the overlay appear when the activity is loaded.

First, create the XML file for the contents of that dialog overlay.

\app\src\main\res\layout\popup_content.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:background=”#78000000″
android:padding=”@dimen/activity_margin”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<TextView
android:textColor=”#ffffff”
android:text=”This is your dialog with transparent background.”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />
<Button
android:id=”@+id/btn_close_overlay”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@color/colorPrimary”
android:textColor=”#ffffff”
android:text=”Dismiss”/>
</LinearLayout>

<?xml version=“1.0” encoding=“utf-8”?>

<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”

android:orientation=“vertical”

android:background=“#78000000”

android:padding=“@dimen/activity_margin”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<TextView

android:textColor=“#ffffff”

android:text=“This is your dialog with transparent background.”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content” />

<Button

android:id=“@+id/btn_close_overlay”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:background=“@color/colorPrimary”

android:textColor=“#ffffff”

android:text=“Dismiss”/>

</LinearLayout>

Then add the following code into your activity’s Java file. Please edit as needed in your project.

Notes:
You might need to add lines of “import” codes yourself for the classes I used.
You might need to fill in missing @color and @dimen values yourself.

app\src\main\java\com\yourpackagename\yourappname\activities\MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener
{
    Dialog dialog;
    private Button btn_close_overlay;

    @Override
    protected void onCreate(Bundle savedInstanceState){
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            dialog = new Dialog(this, android.R.style.Theme_Translucent_NoTitleBar);

            showOverlay();
            btn_close_overlay = (Button) dialog.findViewById(R.id.btn_close_overlay);
            btn_close_overlay.setOnClickListener(new View.OnClickListener(){
               public void onClick(View v){
                   hideOverlay();
               }
            });
    }
    private void showOverlay(){
        dialog.setContentView(R.layout.popup_content);
        dialog.show();
    }

    private void hideOverlay(){
        dialog.dismiss();
    }
}

public class MainActivity extends AppCompatActivity implements View.OnClickListener

{

Dialog dialog;

private Button btn_close_overlay;

@Override

protected void onCreate(Bundle savedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

dialog = new Dialog(this, android.R.style.Theme_Translucent_NoTitleBar);

showOverlay();

btn_close_overlay = (Button) dialog.findViewById(R.id.btn_close_overlay);

btn_close_overlay.setOnClickListener(new View.OnClickListener(){

public void onClick(View v){

hideOverlay();

}

});

}

private void showOverlay(){

dialog.setContentView(R.layout.popup_content);

dialog.show();

}

private void hideOverlay(){

dialog.dismiss();

}

January 20, 2016

Android app dev: background image sizes for different screen sizes

Here are the recommended background image sizes in pixels for Android app development:

xxxhdpi: 1280×1920 px
xxhdpi: 960×1600 px
xhdpi: 640×960 px
hdpi: 480×800 px
mdpi: 320×480 px
ldpi: 240×320 px

…as suggested in this StackOverflow page: Android: Background Image Size (in Pixel) which Support All Devices

January 19, 2016
Android app dev: image sizes for variety of screen sizes

As a mobile app developer, we need to consider various screen sizes for a wide range of Android devices.

Here’s a quick note of recommended image sizes for Android app icons:

36×36 for low-density (LDPI)
48×48 for medium-density (MDPI)
72×72 for high-density (HDPI)
96×96 for extra high-density (XHDPI)
180×180 for extra extra high-density (XXHDPI)
192×192 for extra extra extra highv-density (XXXHDPI)

Image Scaling

Source: Units and measurements – Layout – Google design guidelines

Images can be scaled to look the same across different screen resolutions by using these ratios:

Screen resolution dpi Pixel ratio Image size (pixels)

xxxhdpi 640 4.0 400 x 400

xxhdpi 480 3.0 300 x 300

xhdpi 320 2.0 200 x 200

hdpi 240 1.5 150 x 150

mdpi 160 1.0 100 x 100

For our reference. 🙂

You may read more about Supporting Multiple Devices.

I also want to share MakeAppIcon. Use that online tool to quickly generate resized images for various Android screen sizes for you.

January 18, 2016
Get started: Android Studio app development on Windows 7 (Tested on LG G3 phone)
You can still follow this tutorial if you’re using another version of Windows or if you’re using another Android device. You don’t strictly have to use a Windows 7 computer and an LG G3 phone. 🙂

Being a web developer and a frequent user of Android devices, I’ve always been curious about Android app development. I’m really happy that I’m finally able to create even the simplest Android app (i.e., displaying Hello World! lol) 😆

You are on this page most likely because you are just curious like me, or because you need to learn Android app development for school or work.

My development environment as I wrote this tutorial:
- 3-year-old ASUS laptop, 32-bit system, 4 GB RAM, Intel Core i5-2410M, 2.36GHz processor (Android Studio is slowing this laptop down significantly)
- Windows 7 (you can use any other Windows version to follow this tutorial)
- Android Studio 1.4
- LG G3 as test device (you can use a different phone, of course)
How to say “Hello World!” on your first Android app
1. Install JDK (Java SE Development Kit)
  
  Download it from this page: JDK (Java SE Development Kit)
  
  Make sure to check if you are using 32-bit or 64-bit Windows and download the appropriate installer version. The installers for 32-bit and 64-bit Windows are not interchangeable. In my office laptop I installed jdk-7u79-windows-x64.exe but since it is for 64 bit and incompatible with my 32-bit Windows at home, I downloaded jdk-7u79-windows-i586.exe from the source.
2. Install Android Studio.
  
  When someone in your team, or when you download Android Studio completely for the first time, copy the sdk folder from this path and store it somewhere for future use:
  
  C:\Users\YourUsername\AppData\Local\Android\Sdk
  
  Please note that this can take a while. It took me about 30 minutes to finish copying in an old laptop that uses Intel Core i5 CPU.
  
  The installation of Android Studio requires Internet connection for the contents of the sdk folder, and it will be trouble if you have a very slow connection to the Internet. It will be handy to keep a copy of the sdk folder as backup, so that every time you need to install Android Studio, you just have to “cancel” the download that doesn’t seem to end (when it says Downloading Android SDK Build-tools) and just paste the contents of your backup sdk folder into the folder where you are currently installing SDK into D:\Users\YourUsername\AppData\Local\Android\sdk. When you try to start a new project, you might run into an error saying “Your Android SDK is missing, out of date, or is missing templates.” To fix this, do the following:
  1. Click OK to close the dialog then click Configure.
  2. Click SDK Manager.
  3. Find the field where you can Edit the path for your Android Studio SDK — click on “Edit”.
  4. You probably see this message in red: “An existing Android SDK was detected. The setup wizard will only download missing or outdated SDK components.” Just keep on clicking Next until you can see a Finish button
3. Now, you can start a new Android project in Android Studio!
  1. Press the back button and find the “Start a new Android Studio project” button.
  2. Set your Application Name and Company Domain. Change Project Location if desired. These are up to you.
  3. Click next.
  4. Click next again, leaving only Phone and Tablet as our platform.
  5. Select “Empty Activity” then click next.
  6. Change “Activity Name” and “Layout Name” if desired (I leave them as is), then click Finish button. (It is taking ages for my project to load after creation. Ugh! :lol:)
  7. If Android Studio hasn’t opened MainActivity.java and activity_main.xml for you, then follow these steps:
    
    On the left side of the screen, click Project, then in the directory tree, navigate to app -> res-> layout then double click activity_main.xml to open it.
    
    Make sure you are on the “Design” tab (at the bottom part there should be 2 tabs: Design and Text. Click Design.) This will show you a preview of the app that says Hello World!
  If you see the “Hello World”, good! I would congratulate you, but if you’re like me, you probably didn’t feel any accomplishment in seeing that Hello World in your computer screen. After all, an Android app is supposed to be run in an Android device. You can stop here, or you can read the next steps as I guide you in setting up your computer, Android Studio, and Android device so that you can run the app you are developing in your phone or tablet.
4. Prepare your Android device for running your app.
  
  Allow me to use the words “phone” and “device” interchangeably — just a little warning to keep you from being confused. 😆 After all, the “device” I’m using for this tutorial is a “phone” 🙂
  
  Install PdaNetfor USB debugging of your phone (ADB driver):
  
  Source: PdaNet download page
  1. Download PdaNet installer here. Just follow the instructions from the installer during the process. You need to finish this so that Android Studio can run apps on your phone.
  2. Let me tell you how I successfully let my Android Studio run apps on my LG G3 phone…
    
    While PdaNet was installing, I closed Android Studio (it consumes a huge portion of memory in mine) during the process, hoping my computer runs the pdanet installation a little faster.
    
    I installed PdaNet from Google Play Store into my phone, as instructed by the PdaNet installer on my computer.
    
    After PdaNet was installed to my phone, I opened it and enabled the “Activate USB Tether” option.
    
    When I run Android Studio again, with my MainActivity.java and activity_main.xml still open, I pressed Shift + F10 to attempt to run the app on my phone.
    
    Yes, my LG G3 was listed as a connected device but Android Studio says that my device is offline.
    To fix the “device is offline” problem, what I did was unplug my phone from the computer and then plug it back in. On my phone, there was a prompt to “Allow USB Debugging” and I allowed it. Then, pressing Shift + F10 again on Android Studio allowed me to choose my LG G3 phone. When I pressed OK, the Hello World! screen was displayed on my LG G3. 🙂
  Your device is still not able to run your app from Android Studio? Try any of these:
  
  Possible fix #1: Set connection mode on your phone from MTP to PTP
  
  You probably read earlier that unplugging and plugging my device back into my computer let Android Studio detect my LG G3 as an online device. I realized that my connection was already set to PTP back then.
  
  I tried switching to MTP and as a result, Android Studio took out my device from the list.
  
  I switched back into PTP mode and Android Studio brought my device back to the list.
  
  So, that confirmed that LG G3 needs to connect to the computer in PTP mode so that Android Studio can run apps in it.
  
  Possible fix #2: Install LG program/driver(s)
  1. When you plug your device into the computer, you’ll see something like “Connected as Media Device (MTP)”.
  2. Go to your notifications panel and click on such notification.
  3. A popup will appear: “Install PC programs required when connected to computer. -If you have installed on your computer, skip by checking Don’t show this again.” Then if you click OK, you’ll see “Installing PC programs. Please check your PC.”
  4. On your computer you’ll see AutoPlay dialog, click on Run_LG_PC_Programs.exe.
  5. Now on your computer you’ll see “LG USB driver for LG phone is being installed”. KEEP THE DEVICE CONNECTED TO YOUR COMPUTER DURING THIS PROCESS!
  6. When done, you’ll see a message in the computer: “The drivers for LG phone are now installed. You can connect your PC and phone.”
  7. Click OK.
  (If you’re using an LG phone and if this doesn’t work try to install LG drivers from this link too …I had to download that one for my phone to work on my office laptop’s Android Studio. )
Other notes

Each time you run the app, an APK file is generated in app/folder/app/build/outputs/apk/

Thanks, acknowledgement, sources…

Thanks to my office friends Nethki, Allen, and Peng for ideas and guidance, as well as to my boyfriend. 🙂 I probably couldn’t have started anything at all without you all. 😀
January 5, 2016

Screen resolution	dpi	Pixel ratio	Image size (pixels)
xxxhdpi	640	4.0	400 x 400
xxhdpi	480	3.0	300 x 300
xhdpi	320	2.0	200 x 200
hdpi	240	1.5	150 x 150
mdpi	160	1.0	100 x 100

Tag: Android app development

Android: dimensions cheat sheets for graphic designers AND developers

Android transparent overlay without View

\app\src\main\res\layout\popup_content.xml

app\src\main\java\com\yourpackagename\yourappname\activities\MainActivity.java

Android app dev: background image sizes for different screen sizes

Android app dev: image sizes for variety of screen sizes

Image Scaling

Get started: Android Studio app development on Windows 7 (Tested on LG G3 phone)

My development environment as I wrote this tutorial:

How to say “Hello World!” on your first Android app

Install JDK (Java SE Development Kit)

Install Android Studio.

Now, you can start a new Android project in Android Studio!

Prepare your Android device for running your app.

Install PdaNetfor USB debugging of your phone (ADB driver):

Other notes

Thanks, acknowledgement, sources…