Category: Technology

  • 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

  • Android ImageView has unwanted padding: layout troubleshooting


    If you use ImageView in your android app layout and you get that unwanted padding around the image, here’s an Android XML attribute that helped me solved the layout issue:

    Add android:adjustViewBounds="true" attribute to your ImageView XML tag and you’ll probably see the unwanted padding go away.

    According to the ImageView docs:

    android:adjustViewBounds

    Set this to true if you want the ImageView to adjust its bounds to preserve the aspect ratio of its drawable.

    You might also want to check the related Java method: setAdjustViewBounds(boolean)

  • 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.

  • Laravel 5 Folder Structure, Before and After


    Hey! 🙂 This is a page I’m preparing quickly for developers who are used to the folder structure of Laravel 4 and older, just to serve as reference on where we can find things in Laravel 5 now.

    If like me, you are new to Laravel 5 but have developed apps using older Laravel versions, you might also be a little confused with the new folder structure. Let the following table of data guide you. Don’t worry, after a while, I’m sure you’ll get used to the Laravel 5 folder structure. 🙂

    Find what? Before Laravel 5 In Laravel 5
    routes.php /app/routes.php /app/Http/routes.php
    Controllers Folder /app/controllers /app/Http/Controllers
    Models Folder /app/models usually /app or /app/models
    Views Folder /app/views /resources/views
    Config Folder /app/config /config

    I know, I wrote this Laravel 5 setup tutorial earlier. But I honestly haven’t really gotten used to the changes in Laravel 5 yet because I got caught up in learning Android app development. Not a bad thing though! 😀

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

    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:
        1. 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.
        2. 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…
        1. 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.
        2. I installed PdaNet from Google Play Store into my phone, as instructed by the PdaNet installer on my computer.
        3. After PdaNet was installed to my phone, I opened it and enabled the “Activate USB Tether” option.
        4. 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.
        5. 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. 😀

  • Android: 2-dimensional List String (List of List)

    For a web developer who used mostly PHP and JavaScript for several years, plunging into Java can be challenging especially when it comes to data types.

    PHP and JavaScript are loosely typed languages, while Java is strict about types.

    I was told that in Android, List<String> is very commonly used, even more than arrays. And now I’ve come to the point when I need to use a 2-dimensional List<String>.

    Here’s a sample code:

    Output of System.outprintln(Arrays.deepToString(ls.toArray())); is this:

    The output of Log.d("serialized", listOfList.toString()); is this:

  • Android confirm dialog box with OK and Cancel button

    Android confirm dialog box with OK and Cancel button

    This will probably be one of the Android code snippets that I will need to go back to from time to time.

    I’m sharing the codes we need to show an Android confirm dialog to prompt the user to click “yes” or “no”, or in my case, “OK” or “Cancel”.

    The following code for Android confirm dialog is in my MainActivity.java file:

    (more…)

  • Android Studio dark theme (change into Darcula theme)

    Android Studio dark theme (change into Darcula theme)

    You might feel more comfortable with a dark theme in Android Studio, but the default theme is light in color.

    Default light theme in Android Studio
    Default light theme in Android Studio

    I’m one of the developers who always code in dark screens since it’s less tiring to the eyes.

    Android Studio dark theme
    Android Studio dark theme — Darcula

    If you’re like me who prefers dark themes while coding, then I’ll show you how to change into a dark theme called Darcula in Android Studio here. (more…)

  • How to change app name in Android Studio

    How to change app name in Android Studio

    I’m trying to learn how to build a simple app in Android just to satisfy my curiosity. This will also be a very handy skill because I use Android phones often, and there are times that the apps I download from Google Play Store lack features that I need.

    This will be a very simple guide on how to change app name in Android Studio, something that most beginners in Android development probably want to know.

    It is assumed in this guide that you have prior knowledge in coding.

    The app name that I’m referring to is the one that says “My Application”, as marked on the image below:

    How to change app name in Android Studio

    To change that, go to your Project and find the app folder. Under app, find AndroidManifest.xml and edit android:label="My Application", replacing “My Application” with the name you’d like to use.

    Refer to the image below:

    android-studio-android-manifest

    Your changed app name should be reflected in the live preview now, if you have it activated. If you don’t have live preview yet, check this out: Where is Android Studio layout preview?

    Updates…

    How to rename project folders of Android Studio

    You may also want to change the name of your Android app’s folder. Check this folder, it’s probably where your Android project folder is located — C:\Users\catkeng\AndroidStudioProjects\

    How to rename package in Android Studio

    Right-click on your package name in the Project tree. It’s probably under app->java. Then choose “Refactor”, then choose “Rename”. Take note that you’ll see “Rename package” and “Rename folders” button here — you might need to go back to this screen later to click “Rename folders”. For now, click the “Rename package” button. Type the new name that you want to use, then click “Refactor”. If that hasn’t changed all package name instances for you, follow the same steps until you can click “Rename folders” button too. That should do it!

  • CCNA V5 Curriculum Download – Portable Offline Study (Routing & Switching)

    CCNA V5 Curriculum Download – Portable Offline Study (Routing & Switching)

    An older blog post about CCNA Exploration 4.0 Curriculum was one of my most popular pages in this site. A guest requested that I share CCNA V5 Curriculum Download links here for Routing and Switching, and I decided to try to fulfill such request because I think this will help a lot of people who are studying to get certified by Cisco.

    These are portable offline curriculum files for CCNA Routing & Switching — there’s no need for installation I’m not sure yet if it’s the same but more updated version of CCNA Exploration or completely different.

    Extract the .rar files into your computer so that you can study for CCNA even when you are offline. You can also make the curriculum portable by extracting the contents into your USB flash drive and take your CCNA V5 curriculum with you anywhere.

    Please download these and check if they are what you need for your CCNA studies. Let me know what you think. 🙂 (more…)