Android: User Interface

User Interface:

User interface is built using View and ViewGroup objects
View is called as widgets (eg: Button, TextView)
ViewGroup are the layouts (eg : linear, tabular and relative)
Each element in the xml layout is either view or view Group

Application View:

Components are drawn in pre-order traversal

View:

TextView:

A label is called in android a TextView.
TextViews are typically used to display a caption.
TextViews are not editable, therefore they take no input

Example :

The following example displays a label with text “Enter UserName”

src\com\example\TextViewExActivity.java

package com.example;

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

public class TextViewExActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

res\layout\main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginBottom="20px"
    android:orientation="vertical"
    android:padding="20px" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/White"
        android:padding="20px"
        android:text="Enter UserName"
        android:textColor="@color/BLACK"
        android:textSize="20px"
        android:textStyle="bold"
        android:typeface="serif" />

</LinearLayout>

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="8" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".TextViewExActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Output :

Button:

A Button widget allows the simulation of a clicking action on a GUI.
Button is a subclass of TextView. Therefore formatting a Button’s face is similar to the setting of a TextView.

Example:

The following example displays a login screen if the username and password are same then welcome screen will be displayed if incorrect

“ Invalid login “ message will be displayed

\src\com\ex\LoginActivity.java

package com.ex;

import com.ex.R;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class LoginActivity extends Activity {
    EditText txtUserName;
    EditText txtPassword;
    Button btnLogin;
    Button btnCancel;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        txtUserName = (EditText) this.findViewById(R.id.txtUname);
        txtPassword = (EditText) this.findViewById(R.id.txtPwd);
        btnLogin = (Button) this.findViewById(R.id.btnLogin);
        btnCancel = (Button) this.findViewById(R.id.btnCancel);
        btnLogin.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub

                if ((txtUserName.getText().toString()).equals(txtPassword
                        .getText().toString())) {
                    Intent intent = new Intent(LoginActivity.this,
                            WelcomeActivity.class);
                    Bundle bundle = new Bundle();
                    bundle.putString("user", txtUserName.getText().toString());
                    intent.putExtras(bundle);
                    startActivity(intent);

                } else {
                    Toast.makeText(LoginActivity.this, "Invalid Login",
                            Toast.LENGTH_LONG).show();
                }

            }
        });

        btnCancel.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                txtUserName.setText("");
                txtPassword.setText("");
            }
        });
    }

}

\src\com\ex\WelcomeActivity

package com.ex;

import com.ex.R;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TextView;

public class WelcomeActivity extends Activity {

    private TextView username;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.welcome);
        username = (TextView)findViewById(R.id.welcome);

        Intent intent = getIntent();
        Bundle extras = intent.getExtras();
        String name = extras.getString("user");

        username.setText("Welcome " + name + " !!!");
    }
}

UserInterface :

Displays text view , edit view and button for display.

\res\layout\main.xml

\res\layout\welcome.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <TextView
        android:id="@+id/welcome"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:typeface="serif" >
    </TextView>

</LinearLayout>

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.ex"
    android:versionCode="1"
    android:versionName="1.0" >

    <application
        android:icon="@drawable/icon"
        android:label="@string/app_name" >
        <activity
            android:name=".LoginActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="com.ex.WelcomeActivity" >
        </activity>
    </application>

    <uses-sdk android:minSdkVersion="8" />

</manifest>

Output:

Following out put will be displayed if username and password are same on clicking login button.

Following out put will be displayed if username and password are incorrect same on clicking login button.

Customizing Button:

Changing button background from default to custom.

Code-snippet

\res\drawable\cusbutton.xml

<?xml version="1.0" encoding="utf-8"?>

</selector>

Output:

On focusing the stop button , the button changes to play.

ImageView & ImageButton

ImageView and ImageButon also you to embed images.

ImageView: Embeds image

ImageButon: Adds standard button behavior in addition to image

src\com\example\ImageVActivity.java

package com.example;

import android.app.Activity;
import android.content.res.Resources;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ImageView;

public class ImageVActivity extends Activity {
   ImageButton imageButton;
   ImageView imageView;

   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
       imageButton = (ImageButton) findViewById(R.id.imageButton1);
       imageView = (ImageView) findViewById(R.id.imageView1);

       imageButton.setOnClickListener(new View.OnClickListener() {

           @Override
           public void onClick(View v) {
               Resources res = getResources();
               Drawable drawable = res.getDrawable(R.drawable.followme);
               imageView.setImageDrawable(drawable);
           }
       });

   }
}

\res\layout \main.xml

ImageV\AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="8" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".ImageVActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Output

EditText:

Allows updates
Control configures itself to be editable
To retrieve value from EditText,

editText.getText().toString()

res\layout\main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="PlainText" >

        <requestFocus />
    </EditText>

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPersonName" android:hint="PersonName"/>

    <EditText
        android:id="@+id/editText3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" android:hint="Password"/>

    <EditText
        android:id="@+id/editText4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number" android:hint="Number"/>

    <EditText
        android:id="@+id/editText5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress" android:hint="E-Mail"/>

    <EditText
        android:id="@+id/editText6"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="phone" android:hint="Phone"/>

    <EditText
        android:id="@+id/editText7"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPostalAddress" android:hint="Address"/>

    <EditText
        android:id="@+id/editText8"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textMultiLine" android:hint="MultiLine"/>

</LinearLayout>

Output:

Android

Tuesday, 10 April 2012

User Interface

No comments:

Post a Comment

Contributors

Blog Archive

My Blog List

Popular Posts