UI Design

About UI Design: 

• UI design determines the usability of your application, success and profitability.
• UI elements in Android are View classes (widgets).
• Elements are grouped together using ViewGroup classes (layout containers).
• UI elements include items such as buttons, check boxes, radio buttons, menus, text fields, dialog boxes, progress bars, system alerts, etc.

Adding ImageButton to the layout :

• Impressive user interface elements is the image button.
• ImageButton is a class in Android in android.widget package.
• It allows you to use your own custom multistate buttons that are cooler looking than the standard buttons.

Multi – state ImageButton :

• It is little complex than normal button.
• XML file needs to tell Android which image to use for each state of the button.
• Pressed (for touchscreens, the pressed image will be shown when the finger is actually touching the button image on the screen)
• Released or normal (untouched); this is the “default” image state
• Focused (in use currently and/or was last touched and thus is currently holding the UI Focus until another UI widget is utilized [touched or used] by the user)

XML file: 

Create and xml file like button.xml in the drawable folder.

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state pressed="true"

android:drawable="@drawable/button1_pressed" />

<item android:state focused="true"

android:drawable="@drawable/button1_focused" />

<item android:drawable="@drawable/button1_normal" />

</selector> 

Describing XML file:

• A selector tag allows selection between several <item> options contained inside it.
• Each item tag has properties android:state_xxx defines the state like pressed, focused, normal etc , and  android:drawable defines the image to be displayed.
• All the pictures are place inside the drawable folder.
• Select 3 pictures for, when button is focused, pressed and in normal state.

Activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity" >

    <ImageView

        android:id="@+id/imageView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_alignParentTop="true"

        android:layout_marginLeft="98dp"

        android:layout_marginTop="80dp"

        android:src="@drawable/button“ />

</RelativeLayout>

How to run the application:

• android:src="@drawable/button“ is an xml file which is being referenced.
• Right click on the project and run the application
•