Android: Setting Cursor Starting and Ending Position in EditText Widget

EditText Widget is a widely used widget in Android User Interface design. You will need it for almost every time when comes to input.

The default EditText widget in Android UI bundle is pretty simple but good enough for most cases. However, it will comes to sometime you want or be asked to customize the eidttext box for some purpose, maybe for Branding, or just for better looking.

Like this:

Andorid EditText Box

The approach for this design is very simple. First got two images with all the text and icon on it, then set them as the background of the edittext box. Adjust their position and size and good to go.

However, you will encounter a problem here. The position of the cursor.

If you don’t do any modification. The default of the cursor will start at the very left of the box. When you typing, the text inputed will block the background images. That is, it will first block the ‘Username’ since it is not real text but just image, then if you input longer, it will block the end small icon.

To solve this problem, we using Padding to set the start and end position of the input cursor. I believe this trick works for any input type widget, you could go find yourself.

Here is the code in the layout file about how to do it:

   
   
        

        

        

        


    

By setting

android:paddingLeft="100dp"

We move the start position of cursor 100dp right from left end. Just avoid any blocking problem with that imaged ‘Username’ area. And same way, by setting

android:paddingRight="30dp"

, We move the end position 30dp left from right end. Avoid that small icon area.

This is my approach. I am not sure whether there is some other way to do the same (I believe there is), please leave your solution here if you like!

Android NDK Tutorial 2: Run First Sample App

After setting up your development environment properly, now its time to run our first app. Google provide some examples with the NDK package you downloaded and installed, so it is a good start point to try these examples out.

Open you Eclipse, Click File->Import->Android->Existing Android Code Into Workspace. In the open window, select Browse…, then choose the folder which contains the Example App we will try, like the image below:

HelloJni

After you select the project folder and click Open, you will back to the Import Projects Window. This HelloJin Example is a very simple app that will display a text on the screen. The only difference is it using C language rather than pure Java. It actually contains two project, the main project and tests project. For simple, here we will just import the main project.

Next you will want to select that ‘Copy projects into workspace’ option, otherwise you will modify the original project directly.

So here is the setup you should have before you click Finish button.

HelloJinImport

You may notice that there will be error appear in the Console. (If you didn’t open your console yet, get it open from Window->Show View->Console.) That is because we didn’t setup our project property. The sample app will need some higher building target than Android 2.2.

HelloJinImportError

In the Project Explorer, right click ‘HelloJni’ project we just imported, select ‘Properties’ from the list.(Or, if you prefer, when the project is been select, press Command + I to open the Properties window.)

In the Properties Setting Window, select ‘Android’ from left panel. On the right panel, you will see ‘Project Build Targe’ selection. Change the Target to Android 4.0 or higher, than click OK to apply the change.

HelloJinProjectSetting

Now your first project is good to go. Right click the project and select Run As -> Android Application. If everything went well, you will se the result on your Mobile Device or Emulator.

Android NDK Tutorial 1: Set Up Development Environment on Mac

Please start learning Android NDK with me. This is a great tool for android development. Though we know that Java is very powerful language. Sometimes C/C++ are just get upper hand on problem solving.

For learning through this tutorial, I assume that you have basic knowledge about how Android development is like. That is said, you know how to use SDK, how to use Eclipse to simpler your work, how to debug and know how to read documents from Android’s website. Otherwise, if you are completely new to the Android world, I recommend you stop here since the learning will be really hard if you have no background.

In this post, I will very quick go through a environment setup, which you may already done.

I done all my development work on Mac, so if you have other system, there maybe small difference in some step.

Step 1: Checking JDK, ANT and GNU are installed correctly.

Open your terminal, and type in these commands:

javac - version
ant -version
make -version

The PASS result should be like:

DepCheck

If any of these not pass, you may want to find them and install properly.

Step 2: Download and Install Android SDK for Mac

I believe you already done this. But you may want to open your SDK manager and check for a update.

Step 3:Download and Install Android NDK for Mac

Now this is the place. Go to Android NDK Page and select the right version for you. As I wrote this post the lastes version is r8d.

The file you downloaded should be in a tar.bz2 from. If you have proper unarchiver software installed, you can just unarchived it and put it into a directory you feel well. If you don’t have such app, you can unarchive it from command line:

cd /android
tar jxvf ~/Downloads/android-ndk-r8d-darwin-x86.tar.bz2

Now you should have a folder named android-ndk-r8d in your /android

Tips: You may also want add this NDK path to your $PATH variable so you can access its tools from anywhere through command line. To do that, you will need to modify your path variables. There are many ways to do this. My approach is modify the most rooted one.

Open your terminal and open /etc/paths. You will need add sudo command with it to edit this file. For example:

sudo vim /etc/paths

You will find some path in this file. Just added the path of the NDK you just downloaded and unarchived.
Like /android/android-ndk-r8d

Notice that there is no “/” at the end of the line.

Save it, quit terminal and re-open it. Test with command: [cc lang="bash"]ndk-build[/cc].

If the terminal promotes you with something like “Android NDK: Could not find application project directory”. You are all set to go.

Step 4: Install Eclipse and ADT for Eclipse

I will skip this part since I believe you already done all of these.

Step 5: Set up Android NDK path for Eclipse

Now you almost done. You have the NDK, IDE and your terminal works with NDK’s tools. The last step of this walkthrough will be let eclipse know your NDK’s path so it can build your future project from there.

Open Eclipse and click the ‘Eclipse’ on left-top corner -> Preferences – > Android -> NDK, on the right plane, you will either type in the path of your NDK or using browser to select it. The result will be like:

NDKforEclipse

Till now, you should have done everything needed for setting up a Android NDK development. We will start with a Example next time.

Welcome!

Welcome to my blog. My name is Arthur Wang and this is my personal tech blog.

As a developer, lifehacker and game lover, I suppose I will have a lot of thing to write here. Some professional, like guides, reviews, tutorials, etc. Some maybe personal, like how to cook the best beef pod.

I want to share something with the world, to know, to share with people with passion of life.

Of course, I believe I wrote enough about my professional skills on the About Me page, also I include enough social buttons everywhere. So if you need any help with your website development or Mobile app, I am glad to help!

So that’s it! Let me share my life with you!

Themes Test Page

This post is meat to test result of different format on themes.

1. Text:

believe in many things. Crazy, happy,sad things, maybe, but that’s me: a little bit crazy, a little bit sad and happy. Who isn’t? You shouldn’t stop believing in a thing just because people will judge you. You have to becareless and avoid the people that are not in tune with you. Believing is something that keeps us strong. It makes us feel we live for a purpose. And YES! You are here to complete a mission, but we don’t know what’s yours. As you travel through your life you will know.

I believe in many things. In family, an important relationship. We get love and support from our family members, and we need it! I believe that there is a soul mate out there that is waiting for me. Maybe I am being foolish, but this thought makes me smile. I believe in forgiveness, in honesty, in faith and hope. Listen to me! Don’t ever give up! Fight till’ the end. I believe in positive attitude! In living the moment. Stop and smell a rose. Concentrating on what you can do not on what you can’t. Follow through on promises! You know what? I believe in aliens and withces and all those mystic creatures?! Yeah, maybe I am crazy, but these things keeps my flame burning.

Remember! Don’t let your flame burn out! :)

 

Bold Text

I believe in many things. Crazy, happy,sad things, maybe, but that’s me: a little bit crazy, a little bit sad and happy. Who isn’t? You shouldn’t stop believing in a thing just because people will judge you. You have to becareless and avoid the people that are not in tune with you. Believing is something that keeps us strong. It makes us feel we live for a purpose. And YES! You are here to complete a mission, but we don’t know what’s yours. As you travel through your life you will know.

   I believe in many things. In family, an important relationship. We get love and support from our family members, and we need it! I believe that there is a soul mate out there that is waiting for me. Maybe I am being foolish, but this thought makes me smile. I believe in forgiveness, in honesty, in faith and hope. Listen to me! Don’t ever give up! Fight till’ the end. I believe in positive attitude! In living the moment. Stop and smell a rose. Concentrating on what you can do not on what you can’t. Follow through on promises! You know what? I believe in aliens and withces and all those mystic creatures?! Yeah, maybe I am crazy, but these things keeps my flame burning. 

    Remember! Don’t let your flame burn out! :)

Quoted Text:

  I believe in many things. Crazy, happy,sad things, maybe, but that’s me: a little bit crazy, a little bit sad and happy. Who isn’t? You shouldn’t stop believing in a thing just because people will judge you. You have to becareless and avoid the people that are not in tune with you. Believing is something that keeps us strong. It makes us feel we live for a purpose. And YES! You are here to complete a mission, but we don’t know what’s yours. As you travel through your life you will know.

I believe in many things. In family, an important relationship. We get love and support from our family members, and we need it! I believe that there is a soul mate out there that is waiting for me. Maybe I am being foolish, but this thought makes me smile. I believe in forgiveness, in honesty, in faith and hope. Listen to me! Don’t ever give up! Fight till’ the end. I believe in positive attitude! In living the moment. Stop and smell a rose. Concentrating on what you can do not on what you can’t. Follow through on promises! You know what? I believe in aliens and withces and all those mystic creatures?! Yeah, maybe I am crazy, but these things keeps my flame burning.

Remember! Don’t let your flame burn out! :)

Images:
e78caa1
Codes:
[cc lang="java"]
package com.example.test;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

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

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

}
[/cc]

List:

      Monday

 

      Tuesday

 

      Wednesday

 

      Thursday

 

      Friday

 

      Saturday

 

    Sunday

Headlines

This is H1 Font

This is H2 Font

This is H3 Font

This is H4 Font

This is H5 Font
This is H6 Font

This is H7 Font

Color:
This is Red!
This is orange!
This is blue
This is green!

Links:
Google
Twitter
This Post
Linkdin