Tutorial UI Pada Android

By : Yazid

TUTORIAL UI ANDROID

APOC

1. Textview

a. Menambahkan TextVIew

b. Pengembangan TextView :

Contoh AutoCompleteTextView untuk melengkapi teks secara otomatis.

Contoh 1 :

package app.test;

import android.app.Activity;

import android.os.Bundle;

import android.widget.ArrayAdapter;

import android.widget.AutoCompleteTextView;

By : Yazid

public class Test extends Activity {

String[] presidents =

{

"Dwight D. Eisenhower",

"John F. Kennedy",

"Lyndon B. Johnson",

"Richard Nixon",

"Gerald Ford",

"Jimmy Carter",

"Ronald Reagan",

"George H. W. Bush",

"Bill Clinton",

"George W. Bush",

"Barack Obama"

};

/** Called when the activity is first created.

*/

@Override

public void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

ArrayAdapter adapter = new ArrayAda

pter(this,

android.R.layout.simple_dropdown_it

em_1line, presidents);

AutoCompleteTextView textView = (AutoComple

teTextView)

findViewById(R.id.txtCountries);

textView.setThreshold(3);

textView.setAdapter(adapter);

}

}

//main.xml

By : Yazid

Contoh 2 :

package app.test;



import android.view.View;


import android.widget.AutoCompleteTextView;

import android.widget.Button;

import android.graphics.Color;


@Override

public void onCreate(Bundle icicle) {

super.onCreate(icicle);


ArrayAdapter monthArray = new ArrayAdap

By : Yazid

ter(this,

android.R.layout.simple_list_item_1, Months

);

final AutoCompleteTextView textView = (AutoComp

leteTextView) findViewById(R.id.testAutoComplete);

textView.setAdapter(monthArray);

final Button changeButton = (Button) findViewBy

Id(R.id.autoCompleteButton);

changeButton.setOnClickListener(new Button.OnCl

ickListener() {

public void onClick(View v) {

changeOption(textView);

}

});

final Button changeButton2 = (Button) findViewB

yId(R.id.textColorButton);

changeButton2.setOnClickListener(new Button.OnC

lickListener() {


changeOption2(textView);

}

});

}

static final String[] Months = new String[] { "Ja

nuary", "February",

"March", "April", "May", "June", "July", "Aug

ust", "September",

"October", "November", "December" };

public void changeOption(AutoCompleteTextView tex

t) {

if (text.getHeight() == 100) {

text.setHeight(30);

} else {

text.setHeight(100);

By : Yazid

}

}

public void changeOption2(AutoCompleteTextView te

xt) {

text.setTextColor(Color.RED);

}

}

//main.xml

2. Button

a. Menambahkan Button

By : Yazid

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

b. Menambahkan On click Listener pada button

Contoh 1 :

package app.Test;


import android.content.Intent;

import android.net.Uri;


import android.view.KeyEvent;


import android.view.View.OnClickListener;

import android.view.View.OnKeyListener;


import android.widget.EditText;

public class appTest extends Activity {

private EditText urlText;

private Button goButton;

@Override

By : Yazid

public void onCreate(Bundle savedInstanceState) {



// Get a handle to all user interface elements

urlText = (EditText) findViewById(R.id.url_fiel

d);

goButton = (Button) findViewById(R.id.go_button

);

// Setup event handlers

goButton.setOnClickListener(new OnClickListener

() {

public void onClick(View view) {

openBrowser();

}

});

urlText.setOnKeyListener(new OnKeyListener() {

public boolean onKey(View view, int keyCode,

KeyEvent event) {

if (keyCode == KeyEvent.KEYCODE_ENTER) {

openBrowser();

return true;

}

return false;

}

});

}

/** Open a browser on the URL specified in the te

xt box */

private void openBrowser() {

Uri uri = Uri.parse(urlText.getText().toString(

));

Intent intent = new Intent(Intent.ACTION_VIEW,

uri);

startActivity(intent);

}

By : Yazid

}

//File: main.xml

Contoh 2 :

package app.test;


By : Yazid

import android.app.AlertDialog;








@Override




final AlertDialog.Builder adb = new AlertDialog

.Builder(this);

final EditText addressfield = (EditText) findVi

ewById(R.id.address);

final Button button = (Button) findViewById(R.i

d.launchmap);

button.setOnClickListener(new Button.OnClickLis

tener() {


try {

// Perform action on click

String address = addressfield.getText().t

oString();

address = address.replace(' ', '+');

Intent geoIntent = new Intent(

android.content.Intent.ACTION_VIEW, U

ri

.parse("geo:0,0?q=" + address));

startActivity(geoIntent);

} catch (Exception e) {

AlertDialog ad = adb.create();

ad.setMessage("Failed to Launch");

ad.show();

}

By : Yazid

}

});

}

}

//main.xml

By : Yazid

3. Edit Text

a. Menambahkan EditText

b. Penggunaan Edite Text

Contoh 1 : Mengani Inputan dari User

package app.Test;







import android.view.View.OnClickListener;

By : Yazid

import android.view.View.OnKeyListener;



public class appTest extends Activity {

private EditText urlText;

private Button goButton;

@Override

public void onCreate(Bundle savedInstanceState

) {



// Get a handle to all user interface elemen

ts

urlText = (EditText) findViewById(R.id.url_f

ield);

goButton = (Button) findViewById(R.id.go_but

ton);

// Setup event handlers

goButton.setOnClickListener(new OnClickListe

ner() {

public void onClick(View view) {

openBrowser();

}

});

urlText.setOnKeyListener(new OnKeyListener()

{

public boolean onKey(View view, int keyCod

e, KeyEvent event) {

if (keyCode == KeyEvent.KEYCODE_ENTER) {

openBrowser();

return true;

}

return false;

}

});

By : Yazid

}

/** Open a browser on the URL specified in the

text box */

private void openBrowser() {

Uri uri = Uri.parse(urlText.getText().toStri

ng());

Intent intent = new Intent(Intent.ACTION_VIE

W, uri);

startActivity(intent);

}

}

//main.xml

By : Yazid

Contoh 2 : Mendapatkan teks dari Edit Text

package app.test;

import java.text.NumberFormat;



import android.util.Log;




import android.widget.TextView;


@Override




final EditText myEditField = (EditText)

findViewById(R.id.mealprice);

final TextView answerfield = (TextView)

findViewById(R.id.answer);

final Button button = (Button) findViewB

yId(R.id.calculate);

button.setOnClickListener(new Button.OnC

lickListener() {


try {

String mealprice = myEditFie

By : Yazid

ld.getText().toString();

String answer = "";

if (mealprice.indexOf("$") =

= -1) {

mealprice = "$" + mealpr

ice;

}

NumberFormat nf = java.text.

NumberFormat.getCurrencyInstance();

if (nf == null) {

Log.i("", "NumberFormat

is null");

}

float fmp = nf.parse(mealpri

ce).floatValue();

fmp *= 2;

Log.i("", "Total:" + fmp);

answer = "Full Price:" + nf.

format(fmp);

answerfield.setText(answer);

} catch (java.text.ParseExceptio

n pe) {

Log.i("", "Parse exception c

aught");

answerfield.setText("Failed

to parse amount?");

} catch (Exception e) {

Log.e("", "Failed to Calcula

te Tip:" + e.getMessage());

e.printStackTrace();

answerfield.setText(e.getMes

sage());

}

}

});

}

}

// main.xml

By : Yazid

Contoh 3 : Event pada Edit Text

package app.test;


By : Yazid





import android.widget.TextView.OnEditorActionLis

tener;

public class Test extends Activity implements On

EditorActionListener {

@Override


) {



EditText text1 = (EditText) findViewById(R.i

d.text1);

text1.setOnEditorActionListener(this);

EditText text2 = (EditText) findViewById(R.i

d.text2);

text2.setOnEditorActionListener(this);

}

@Override

public boolean onEditorAction(TextView v, int

actionId, KeyEvent event) {

return false;

}

}

//main.xml

By : Yazid

4. List View

a. Penggunaan List View dengan menurunkan dari kelas ListActivity secara langsung

package com.commonsware.android.fancylists.seven

;



import android.app.ListActivity;


import android.view.ViewGroup;

import android.widget.AdapterView;


import android.widget.RatingBar;

import android.widget.CompoundButton;

import android.widget.ListView;

public class RateListViewDemo extends ListActivi

ty {

String[] items={"lorem", "ipsum", "dolor", "si

t", "amet",

"consectetuer", "adipiscing", "elit",

"morbi", "vel",

"ligula", "vitae", "arcu", "aliquet",

By : Yazid

"mollis",

"etiam", "vel", "erat", "placerat", "a

nte",

"porttitor", "sodales", "pellentesque"

, "augue",

"purus"};

@Override




setListAdapter(new ArrayAdapter(this

,

android.R.layout.simple_

list_item_1,

items));

}

b. Penggunaan List View pada kelas turunan kelas Activity

package apoc.textview;

By : Yazid





import

android.widget.AdapterView.OnItemClickListener;


import android.widget.ListView;

import android.widget.Toast;

public class MainActivity extends Activity

implements OnItemClickListener {

String[] items = { "lorem", "ipsum",

"dolor", "sit", "amet",

"consectetuer", "adipiscing",

"elit", "morbi", "vel", "ligula",

"vitae", "arcu", "aliquet",

"mollis", "etiam", "vel", "erat",

"placerat", "ante", "porttitor",

"sodales", "pellentesque",

"augue", "purus" };

@Override

protected void onCreate(Bundle

savedInstanceState) {


setContentView(R.layout.activity_main);

ListView list = (ListView)

findViewById(R.id.listView1);

list.setAdapter(new

ArrayAdapter(getApplicationContext(),

android.R.layout.simple_list_item_1,

items));

// mengenalkan event pada listview

list.setOnItemClickListener(this);

}

// event on item click pada list view

@Override

By : Yazid

public void onItemClick(AdapterView arg0,

View arg1, int index, long arg3) {

// TODO Auto-generated method stub

Toast.makeText(getApplicationContext(),

"Item yang di klik adalah : "+items[index],

Toast.LENGTH_LONG).show();

}

}

5. Spinner

a. Spinner cara penggunaanya hampir sama dengan List View,

package com.commonsware.android.selection;






import android.widget.Spinner;


public class SpinnerDemo extends Activity

implements AdapterView.OnItemSelectedListener

{

TextView selection;

String[] items={"lorem", "ipsum", "dolor", "si

t", "amet",

"consectetuer", "adipiscing", "elit",

"morbi", "vel",

"ligula", "vitae", "arcu", "aliquet",

"mollis",

"etiam", "vel", "erat", "placerat", "a

nte",

"porttitor", "sodales", "pellentesque"

, "augue", "purus"};

@Override


By : Yazid



selection=(TextView)findViewById(R.id.select

ion);

Spinner spin=(Spinner)findViewById(R.id.spin

ner);

spin.setOnItemSelectedListener(this);

ArrayAdapter aa=new ArrayAdapter(this,

android.R.layout.s

imple_spinner_item,

items);

aa.setDropDownViewResource(

android.R.layout.simple_spinner_dropdown_i

tem);

spin.setAdapter(aa);

}

public void onItemSelected(AdapterView pare

nt,

View v, int posi

tion, long id) {

selection.setText(items[position]);

}

public void onNothingSelected(AdapterView p

arent) {

selection.setText("");

}

}

//res\layout\main.xml

By : Yazid

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

res/android"

android:orientation="vertical"


android:layout_height="fill_parent"

>

b. Mengisikan data pada spiner menggunakan Array adapter

package app.test;


import android.graphics.Color;





import android.widget.Spinner;


@Override




final Spinner spinner = (Spinner) findViewBy

Id(R.id.testSpinner);

ArrayAdapter adapter = new ArrayAdap

By : Yazid

ter(this,

android.R.layout.simple_spinner_item, Mo

nths);

adapter.setDropDownViewResource(android.R.la

yout.simple_spinner_dropdown_item);

spinner.setAdapter(adapter);

final Button changeButton = (Button) findVie

wById(R.id.enableButton);

changeButton.setOnClickListener(new Button.O

nClickListener() {


changeOption(spinner);

}

});

final Button changeButton2 = (Button) findVi

ewById(R.id.backgroundColorButton);

changeButton2.setOnClickListener(new Button.

OnClickListener() {


changeOption2(spinner);

}

});

}

static final String[] Months = new String[] {

"January", "February",

"March", "April", "May", "June", "July", "

August", "September",

"October", "November", "December" };

public void changeOption(Spinner spinner) {

if (spinner.isEnabled()) {

spinner.setEnabled(false);

} else {

spinner.setEnabled(true);

}

By : Yazid

}

public void changeOption2(Spinner spinner) {

spinner.setBackgroundColor(Color.RED);

}

}

//main.xml

6. Radio Button

a. Cara menambahkan Radio button dalam Radio group,

package app.test;



By : Yazid


@Override


) {



}

}

//main.xml

By : Yazid

b. Menambahkan Check Listener Pada Radio Group

Jadi yang diberi event adalah Radio groupnya bukan pada Radio buttonnya.

package app.test;



import android.view.Gravity;

import android.widget.LinearLayout;

import android.widget.RadioGroup;

public class Test extends Activity implements

RadioGroup.OnCheckedChangeListener {

RadioGroup orientation;

RadioGroup gravity;

@Override




orientation = (RadioGroup) findViewById(R.id

.orientation);

orientation.setOnCheckedChangeListener(this)

;

gravity = (RadioGroup) findViewById(R.id.gra

vity);

gravity.setOnCheckedChangeListener(this);

}

By : Yazid

public void onCheckedChanged(RadioGroup group,

int checkedId) {

switch (checkedId) {

case R.id.horizontal:

orientation.setOrientation(LinearLayout.HO

RIZONTAL);

break;

case R.id.vertical:

orientation.setOrientation(LinearLayout.VE

RTICAL);

break;

case R.id.left:

gravity.setGravity(Gravity.LEFT);

break;

case R.id.center:

gravity.setGravity(Gravity.CENTER_HORIZONT

AL);

break;

case R.id.right:

gravity.setGravity(Gravity.RIGHT);

break;

}

}

}

//main.xml

By : Yazid

>

c. Contoh Enabel dan Disabel pada Radio Group

package app.test;



import android.view.Gravity;


By : Yazid



RadioGroup.OnCheckedChangeListener {

RadioGroup orientation;

RadioGroup gravity;

@Override




orientation = (RadioGroup) findViewById(R.id

.orientation);

orientation.setOnCheckedChangeListener(this)

;

gravity = (RadioGroup) findViewById(R.id.gra

vity);

gravity.setOnCheckedChangeListener(this);

}

public void onCheckedChanged(RadioGroup group,

int checkedId) {

switch (checkedId) {

case R.id.horizontal:

orientation.setOrientation(LinearLayout.HO

RIZONTAL);

break;

case R.id.vertical:

orientation.setOrientation(LinearLayout.VE

RTICAL);

break;

case R.id.left:

gravity.setGravity(Gravity.LEFT);

break;

case R.id.center:

By : Yazid

gravity.setGravity(Gravity.CENTER_HORIZONT

AL);

break;

case R.id.right:

gravity.setGravity(Gravity.RIGHT);

break;

}

}

}

//main.xml

By : Yazid

android:id="@+id/left"

android:text="left" />

d. Membersihkan Radio button yang di pilih atau UnCheck

package com.example.android.apis.view;

import com.example.android.apis.R;







import android.widget.RadioButton;


public class RadioGroup1 extends Activity implem

ents RadioGroup.OnCheckedChangeListener,

View.OnClickListener {

private TextView mChoice;

private RadioGroup mRadioGroup;

@Override

protected void onCreate(Bundle savedInstance

State) {


By : Yazid

setContentView(R.layout.radio_group_1);

mRadioGroup = (RadioGroup) findViewById(

R.id.menu);

// test adding a radio button programmat

ically

RadioButton newRadioButton = new RadioBu

tton(this);

newRadioButton.setText(R.string.radio_gr

oup_snack);

newRadioButton.setId(R.id.snack);

LinearLayout.LayoutParams layoutParams =

new RadioGroup.LayoutParams(

RadioGroup.LayoutParams.WRAP_CON

TENT,

RadioGroup.LayoutParams.WRAP_CON

TENT);

mRadioGroup.addView(newRadioButton, 0, l

ayoutParams);

// test listening to checked change even

ts

String selection = getString(R.string.ra

dio_group_selection);

mRadioGroup.setOnCheckedChangeListener(t

his);

mChoice = (TextView) findViewById(R.id.c

hoice);

mChoice.setText(selection + mRadioGroup.

getCheckedRadioButtonId());

// test clearing the selection

Button clearButton = (Button) findViewBy

Id(R.id.clear);

clearButton.setOnClickListener(this);

}

public void onCheckedChanged(RadioGroup grou

By : Yazid

p, int checkedId) {

String selection = getString(R.string.ra

dio_group_selection);

String none = getString(R.string.radio_g

roup_none);

mChoice.setText(selection +

(checkedId == View.NO_ID ? none

: checkedId));

}


mRadioGroup.clearCheck();

}

}

//layout/radio_group_1.xml

- Copyright (C) 2007 The Android Open Source Pro

ject

Licensed under the Apache License, Version

2.0 (the "License");

you may not use this file except in complia

nce with the License.

You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE

-2.0

Unless required by applicable law or agreed

to in writing, software

distributed under the License is distribute

d on an "AS IS" BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIN

D, either express or implied.

See the License for the specific language g

overning permissions and

limitations under the License.

By : Yazid

-->

By : Yazid

r"

android:id="@+id/clear" />

7. Penggunaa CheckBox

a. Menambahkan CheckBox

package app.test;



import android.widget.CheckBox;

import android.widget.CompoundButton;


CompoundButton.OnCheckedChangeListener {

CheckBox cb;

@Override




cb = (CheckBox) findViewById(R.id.check);

cb.setOnCheckedChangeListener(this);

}

public void onCheckedChanged(CompoundButton bu

ttonView, boolean isChecked) {

if (isChecked) {

cb.setText("This checkbox is: checked");

} else {

cb.setText("This checkbox is: unchecked");

}

}

}

//main.xml

By : Yazid

b. mengambil value dari CheckBox

package app.test;







CheckBox plain_cb;

CheckBox serif_cb;

CheckBox italic_cb;

CheckBox bold_cb;

@Override


) {


setTitle("CheckBoxActivity");


find_and_modify_text_view();

}

private void find_and_modify_text_view() {

plain_cb = (CheckBox) findViewById(R.id.plai

By : Yazid

n_cb);

serif_cb = (CheckBox) findViewById(R.id.seri

f_cb);

italic_cb = (CheckBox) findViewById(R.id.ita

lic_cb);

bold_cb = (CheckBox) findViewById(R.id.bold_

cb);

Button get_view_button = (Button) findViewBy

Id(R.id.get_view_button);

get_view_button.setOnClickListener(get_view_

button_listener);

}

private Button.OnClickListener get_view_button

_listener = new Button.OnClickListener() {


String r = "";

if (plain_cb.isChecked()) {

r = r + "," + plain_cb.getText();

}

if (serif_cb.isChecked()) {

r = r + "," + serif_cb.getText();

}

if (italic_cb.isChecked()) {

r = r + "," + italic_cb.getText();

}

if (bold_cb.isChecked()) {

r = r + "," + bold_cb.getText();

}

setTitle("Checked: " + r);

}

};

}

//main.xml

By : Yazid

oid.com/apk/res/android"

android:orientation="vertical"


android:layout_height="fill_parent"

>

By : Yazid

c. Penerapan CheckBox

package app.test;






import android.widget.RadioButton;


import android.widget.RadioGroup.OnCheckedChange

Listener;


import android.widget.ToggleButton;


@Override


) {



Button btnOpen = (Button) findViewById(R.id.

btnOpen);

btnOpen.setOnClickListener(new View.OnClickL

istener() {


String str = "You have clicked the Open

button";

DisplayToast(str);

}

});

Button btnSave = (Button) findViewById(R.id.

By : Yazid

btnSave);

btnSave.setOnClickListener(new View.OnClickL

istener() {


DisplayToast("You have clicked the Save

button");

}

});

CheckBox checkBox = (CheckBox) findViewById(

R.id.chkAutosave);

checkBox.setOnClickListener(new View.OnClick

Listener() {


if (((CheckBox) v).isChecked())

DisplayToast("CheckBox is checked");

else

DisplayToast("CheckBox is unchecked");

}

});

RadioGroup radioGroup = (RadioGroup) findVie

wById(R.id.rdbGp1);

radioGroup.setOnCheckedChangeListener(new On

CheckedChangeListener() {

public void onCheckedChanged(RadioGroup gr

oup, int checkedId) {

RadioButton rb1 = (RadioButton) findView

ById(R.id.rdb1);

if (rb1.isChecked()) {

DisplayToast("Option 1 checked!");

} else {

DisplayToast("Option 2 checked!");

}

}

});

ToggleButton toggleButton = (ToggleButton) f

indViewById(R.id.toggle1);

toggleButton.setOnClickListener(new View.OnC

lickListener() {


By : Yazid

if (((ToggleButton) v).isChecked())

DisplayToast("Toggle button is On");

else

DisplayToast("Toggle button is Off");

}

});

}

private void DisplayToast(String msg) {

Toast.makeText(getBaseContext(), msg, Toast.

LENGTH_SHORT).show();

}

}

//main.xml

By : Yazid


android:layout_height="wrap_content"

android:src="@drawable/icon" />

By : Yazid

android:layout_height="wrap_content" />

8. AlertDialog

a. Menampilkan Yes dan No


import android.app.ActivityManager;


import android.app.ActivityManager.MemoryInfo;

import android.content.Context;

import android.content.DialogInterface;

import android.content.DialogInterface.OnClickLi

stener;



import android.text.Html;

class Utils {

public static void showYesNoPrompt(Context _co

ntext, String title, String message, OnClickList

ener onYesListener, OnClickListener onNoListener

) {

AlertDialog.Builder builder = new AlertDialo

g.Builder(_context);

builder.setTitle(title);

builder.setIcon(android.R.drawable.ic_dialog

_info); // lame icon

builder.setMessage(message);

builder.setCancelable(false);

builder.setPositiveButton("Yes", onYesListen

er);

builder.setNegativeButton("No", onNoListener

);

builder.show();

By : Yazid

}

}

b. Menampilkan Popup saat aplikasi pertama kali dijalankan



class UIHelper {

public static void openFirstTimePopup(final Co

ntext context) {

final String html = "Thank you!";

final AlertDialog.Builder builder = new Aler

tDialog.Builder(context).

setCancelable(true).

setTitle("Welcome!").

setMessage(html).

setNegativeButton("Close",null);

final AlertDialog di = builder.create();

di.show();

}

}

c. Menampilkan Pesan


import android.app.ActivityManager;


import android.app.ActivityManager.MemoryInfo;



import android.content.DialogInterface.OnClickLi

stener;



By : Yazid

import android.text.Html;

class Utils {

public static void showMessage(Context _cont

ext, String title, String message, int icon, Dia

logInterface.OnClickListener ackHandler) {

AlertDialog.Builder builder = new AlertDia

log.Builder(_context);

builder.setTitle(title);

builder.setMessage(Html.fromHtml(message))

;

builder.setCancelable(false);

builder.setPositiveButton("Acknowledged",

ackHandler);

builder.setIcon(icon);

builder.show();

}

}

d. Menampilkan Alert

import android.app.AlertDialog.Builder;


class Util {

public static void showAlert(Context context,

String title, String text,

boolean showOk) {

Builder alertBuilder = new Builder(context);

alertBuilder.setTitle(title);

alertBuilder.setMessage(text);

if (showOk)

alertBuilder.setNeutralButton("??", null);

alertBuilder.create().show();

}

public static void showAlert(Context context,

By : Yazid

String title, String text) {

showAlert(context, title, text, true);

}

}

e. Menampilkan Alert Bantuan







class Tools {

/**

* Helper Alert

* @param title

* @param message

*/

public static void AlertDialog(final Conte

xt ctx, final CharSequence title, final CharSequ

ence message) {

new AlertDialog.Builder(ctx)

// .setIcon(R.drawable.icon)

.setTitle(title)

.setMessage(message)

.setPositiveButton("Dismiss", new DialogIn

terface.OnClickListener() {

public void onClick(DialogInterfac

e dialog, int whichButton) {

}

})

.show();

}

}

Documents

Tutorial UI Pada Android