Author: Catzie

Android: underline text in your app

When I need to underline text in an app that I’m developing, I like doing it programmatically. The code is in the Java file, not in the XML.

Maybe we should make a function for this where we pass the ID of the TextView whose content we’d like to underline.

        TextView myTextView = (TextView) findViewById(R.id.myTextViewID);
        String htmlString = “<u>” + myTextView.getText() + “</u>”;
        myTextView.setText(Html.fromHtml(htmlString));

TextView myTextView = (TextView) findViewById(R.id.myTextViewID);

String htmlString = “<u>” + myTextView.getText() + “</u>”;

myTextView.setText(Html.fromHtml(htmlString));

Disadvantages in this method:

It’s done in the Java file, not in UI files such as XML. It makes more sense to add codes for styling in XML files to me.
This underlines all text in the TextView. What if we need to underline only one text in a paragraph?

If you have any suggestion, feel free to comment. 🙂

// EDIT:

Here’s a method I prepared to make underlining TextView values easier:

public void setTextViewUnderline(TextView myTextView){
String htmlString = “” + myTextView.getText() + ““;
myTextView.setText(Html.fromHtml(htmlString));
}

January 21, 2016

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 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:

<ImageView (…) android:adjustViewBounds=”true” />

1
2
3

<ImageView
(...)
android:adjustViewBounds=“true” />

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)

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

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! 😀

January 8, 2016

Charlotte – anime review

This would be a shorter than usual anime review from me. Just some random thoughts about Charlotte anime.

I usually watch the anime series that my office friends and my boyfriend recommend. My boyfriend didn’t like Charlotte that much, but I watched it anyway because it’s one of the series I copied from a friend. It’s not so bad and I kinda liked it.

Charlotte has 13 episodes and I watched them all in 2 or 3 days during the holidays. It made my holidays more enjoyable! 😀

So… how will I remember the anime Charlotte? Hmm.

Charlotte might be the first anime I watched whose main character I did not like that much. In episode 1 you’d see how much of a cheater he is. Later in the series you’d see more of his “dark side”. Don’t get me wrong, I don’t hate him. After all, in the end, he’s gone through many difficulty just to do everyone a favor. And you gotta like how Charlotte showed us a main character who is truly human. Humans are prone to temptation. How can you not be tempted to cheat if you have the power to do so? Charlotte only showed us a character who gave in to temptation, which is refreshing in a way.

Another first for me in Charlotte is that in this anime, an English-speaking non-Japanese character actually sounds like a native speaker of English. Usually in anime series, foreigners speak English in Japanese accent, making it unrealistic.

This anime reminded me of Full Metal Panic in a way, since there were children who acquired special abilities because of certain events. And Steins;Gate shares a similar concept with Charlotte: time-leap.

Charlotte was an anime that made me laugh and shed tears. The teleporter guy always made me laugh because of his suicidal attempts, the way Misa would make me chuckle when she says rude words. There were really sad scenes that brought me in tears, the way some heart-touching scenes did.

There was romance in Charlotte, but don’t get your hopes up too much on it because it’s not good. :p

I’ll also remember that Charlotte featured the Philippines in one of the scenes. The environment did look like what I usually see in my country. 😆

January 6, 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
Steins;Gate anime review

I just finished watching all episodes of the anime Steins;Gate and I LOVED it!

It’s about “mad scientist” Okabe Rintarou and his lab mates, who accidentally discovered/invent a “Phone Microwave” that could send messages to the past. Their experiments and curiosity led into consequences that they couldn’t handle.

Art in Steins;Gate anime

I like the character art of Steins;Gate. They are not like the too cutesy art style that is common in anime, where everyone looks almost the same and looks too young for their age. You’d see how Okabe has a defined face shape, and a some stubble around his chin.

Sound in Steins;Gate anime

There’s a sound effect that I really like. It’s when “something happens to someone over and over and over again”… there’s that spine-chilling sound effect that they play. I think it helped convey the mood to us viewers, while we think “Ohshitohshitohshit why is this happening?!?!” Try episode 13 at 20:35 to check out what I mean.

Story in Steins;Gate anime

Steins;Gate has an exciting plot. I personally like mystery and thrill in the shows I watch, and Steins;Gate sure didn’t lack it.

What I think about each character in Steins;Gate…

Okabe Rintarou

You gotta like Okabe for caring for his lab mates. He can also be funny because he’s a chuunibyou (delusive behavior where one thinks he has a superpower that nobody else has)

Makise Kurisu

She’s my favorite character in Steins;Gate. She’s a cute type of tsundere, and a genius! As I watched the series I always wished she would end up with Okabe because I think they have the chemistry. xD Whether they end up with each other or not, is for you to find out if you haven’t yet.

Mayushi Shiina

Mayushi is an adorable character to me… cute, kind, and all innocent. At some point in the anime, I thought I’ll be happy if Okabe ends up with Kurisu or Mayuri, but not with any other girl. 😆 I still liked Kurisu better for Okabe because I couldn’t feel any romantic chemistry between Okabe and Mayushi. They seem to be more like siblings to me than a couple.

Itaru “Daru” Hashida

Daru is a guy who makes a lot of perverted statements and says he’s not a pervert but a “gentleman pervert”. Setting that aside, I like his geeky character. I always adore people who are savvy in technology and programming so… Daru is also a likable character to me. 🙂

Moeka Kiryuu

Attractive but very weird, this girl is. 😆

“Faris”

I’m not saying the full name of Faris here to avoid spoilers. But I personally don’t like characters who act/speak like cats. In Rokka no Yuusha, I disliked how Hans would always add “meows” or “nyan” to his speech.

Suzuha Amane

Suzuha is someone I saw as just a carefree “part time warrior” but later on in the story as more details were revealed about her, I saw her as a cool, awesome girl. :3

Okay, that would be all for my thoughts on the Steins;Gate characters.

Ruka Urushibara

Cute, polite, very feminine… and might be more feminine than most women. But he’s a dude. 😆

I find it a little disturbing how someone who totally looks and acts like a girl is actually a boy! xD

Concluding this Steins;Gate anime review…

I’ll be honest. Every time I watched a Steins;Gate episode, I was about to fall asleep because I only watched after finishing my house chores in those times. xD So, maybe that’s why I don’t have much to say in this review.

The ending was a bit predictable, but still good.

I’ll definitely watch the movie “Steins;Gate: Fuka Ryouiki no Déjà vu” some time.

By the way, there was a 25th episode included in the copy I had. I think it’s a bonus/special episode. 😀 You’ll see Suzuha’s mother in that episode! 😉

Edit: Could this special episode be the one called “Steins;Gate: Oukoubakko no Poriomania” ?

Extra: What would you do if you can do a “time leap”?

In Steins;Gate, there’s a concept called “time leap” where you can leap back in time and still retain your memory.

What would you do if you can perform a time leap?

If you ask me, I would do a time leap after learning more about Android app development, which I’m trying to rush in the middle of a hectic schedule right now. xD I would tinker with codes for hours, then do a time leap and be at an earlier time of the day while preserving new things I learned… and do this over and over until I’m good enough to be called an “Android app developer”. 😆

Credits

I used character photos from MyAnimeList.

December 31, 2015

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

Author: Catzie

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

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

Image Scaling

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…

Art in Steins;Gate anime

Sound in Steins;Gate anime

Story in Steins;Gate anime

What I think about each character in Steins;Gate…

Okabe Rintarou

Makise Kurisu

Mayushi Shiina

Itaru “Daru” Hashida

Moeka Kiryuu

“Faris”

Suzuha Amane

Ruka Urushibara

Concluding this Steins;Gate anime review…

Extra: What would you do if you can do a “time leap”?

Credits