RSS

User Interface Design In Android

24 Feb
User Interface  Design In Android

Designing User Interface in android

There are 2 methods for designing user interfaces : procedural and declarative…

Procedural

means in code >> when you’re programming an application you write a code to create the user interface objects ( Jframe , Jbutton)..

Declarative

doesn’t involve any code . When you are designing a webpage , you use HTML , that is a markup language based on XML >> describes the design of the webpage not how you want to do it..

In android you can create user interface in either style. You can create it using java code or XML descriptors .If you look up the documentation for any Android user interface component, you’ll see both the Java APIs and the corresponding declarative XML attributes that do the same thing.

Google Advice : use XML code as much as possible . XML code is shorter and easier to understand than java code.

why does android use “XML”?!

you may wonder why & how android uses XML specially that android is optimized for mobile devices with a limited memory .XML is a human readable format not known for its efficiency. Although you see XML when writing your program, the Eclipse plug-in invokes the Android resource compiler, aapt, to preprocess the XML into a compressed binary format. It is this format, not the original XML text, that is stored on the device.

layout

is a container for one or more child and is used to position them on the screen.

Here is the list of the most layouts provided by android :

  • FrameLayout : arranges its children , all start at the top left of the screen.

  • LinearLayout : arranges its children in single row or a column , this is the most common layout u’ll use.

  • RelativeLayout : arranges its children in relation to each other or to the parent (used in forms).

  • TableLayout : arranges its children in rows & columns.

simple sudoku interface:

when you create a sudoku project , the sudoku plugins will create a simple activity in sudoku.java :

what happended in this code >> android calls the onCreate() method to initialize it setContectView() .

R.layout.main >> is a resource identifier that refers to the main.xml file in the res/layout directory .

Main.xml declares the user interface .

Its important to know that R class is managed automatically by the android eclipse plugin . When u put a file in the res directory , the plugin notices the change and adds the new resource Ids in R.java.

The following XML code makes four buttons :.

the first line :

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

all android xml code start with this line , it tells the compiler that the file in xml format and utf-8 encoding .

The following line : defines the xml namespace in android >>

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

the following line takes up the entire width and height of the parent

android:layout_width=”fill_parent”, android:layout_height=”fill_parent”

<TextView> tag defines a simple text label

you have to refer to strings in strings.xml (res>values>strings.xml)

when you run the program now , you should see something like the following figure :

congratulations , ur first interface for beginning new sudoku game was created …

 
2 Comments

Posted by on February 24, 2011 in SmartPhones Development

 

2 responses to “User Interface Design In Android

  1. mahmoud metwally

    February 24, 2011 at 11:17 am

    i like it …. go on
    بما انك قريتى لو عندك ماتريل كويس قليلى اسمها او اى شىء من هذا القبيل

     
    • Marwa Abo-shall

      February 24, 2011 at 12:46 pm

      Thanks alot ..
      yes ,sure >> two books : “Beginning Android 2” & “Pragmatic Hello Android”

       

Leave a comment