Langkah _ Langkah Membuat MultiScreen

LAPORAN PRAKTIKUM

PEMROGRAMAN MOBILE

“MULTISCREEN APPLICATION”

Disusun Oleh :

Nama                   :        Merry Cahyani

NIM           :        12.12.0142

Kelas          :        SI 12 C

SEKOLAH TINGGI  MANAJEMEN INFORMATIKA DAN ILMU KOMPUTER

 AMIKOM PURWOKERTO

Jl .Let Jend. POL  SUMARTO Watumas Purwoneggoro Purwokerto 53113

2013

MULTISCREEN APPLICATION

Disini kita akan belajar menggunakan beberapa screen dalam satu aplikasi. Silahkan buat user interface dengan tampilan output seperti gambar di bawah ini.

                        

1.    Screen pertama(main_activity)                           2. Screen kedua(second_activity)

Gambar 1 dan Gambar 2 adalah dua screen yang akan saling terhubung dengan suatu button. Langkah-langkah pembuatannya :

1.      Buatlah new android application project dan beri nama multiscreen.

2.      Tahap berikutnya mendesain tampilan antar muka pengguna / user interface. Silahkan ketikkan perintah berikut ini pada bagian resà layout à 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"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

   

    <TextView

        android:id="@+id/nama"

        android:text="Nama"

        android:width="100dp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignBottom="@+id/editnama"

        />

    <EditText

        android:id="@+id/editnama"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_toRightOf="@id/nama"

        />

    <TextView

        android:id="@+id/kelas"

        android:text="Kelas"

        android:width="100dp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignBottom="@+id/editkelas"

        />

    <EditText

        android:id="@+id/editkelas"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@id/editnama"

        android:layout_toRightOf="@id/kelas"

        android:layout_below="@id/editnama"

        />

    <TextView

        android:id="@+id/nim"

        android:text="NIM"

        android:width="100dp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignBottom="@+id/editnim"

        />

    <EditText

        android:id="@+id/editnim"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@id/editkelas"

        android:layout_toRightOf="@id/nim"

        android:layout_below="@id/editkelas"

        />

    <TextView

        android:id="@+id/JK"

        android:text="Jenis Kelamin"

        android:width="100dp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/nim"

        android:layout_marginTop="17dp"

        />

    <RadioButton

         android:id="@+id/rdlaki"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_alignLeft="@+id/nim"

         android:layout_below="@+id/JK"

         android:layout_marginTop="15dp"

         android:text="Laki-laki"

         android:width="130dp"

         />

     <RadioButton

         android:id="@+id/rdperempuan"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_alignBaseline="@+id/rdlaki"

         android:layout_alignBottom="@+id/rdlaki"

         android:layout_toRightOf="@+id/rdlaki"

         android:text="Perempuan"

         />

     <Button

        android:id="@+id/ok"

        android:text="OK"

        android:width="50dp"

        android:height="50dp"

        android:layout_below="@+id/rdlaki"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="18dp"

        />

     <Button

        android:id="@+id/reset"

        android:text="RESET"

        android:layout_below="@+id/rdlaki"

        android:layout_toRightOf="@id/ok"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="18dp"

        />  

    <ImageButton

        android:id="@+id/imageButton1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_above="@+id/next"

        android:src="@drawable/next"

        />   

    <TextView

        android:id="@+id/next"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:layout_marginBottom="10dp"

        android:text="Next"

        />

</RelativeLayout>

3.      Tambahkan satu file xml pada res à layout à activity_second.xml dan tuliskan perintah di bawah ini untuk desain user interface pada screen kedua.

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

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

    android:id="@+id/RelativeLayout1"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

   

    <TextView

        android:id="@+id/hobi"

        android:text="Pilih Hobby Anda"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="15dp"

        android:layout_marginLeft="15dp"

        />

    <CheckBox

        android:id="@+id/cb1"

        android:text="Menyanyi"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/hobi"

        android:layout_alignLeft="@id/hobi"

        />

    <CheckBox

        android:id="@+id/cb2"

        android:text="Membaca"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/cb1"

        android:layout_alignLeft="@id/hobi"

        />

    <CheckBox

        android:id="@+id/cb3"

        android:text="Olahraga"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/cb2"

        android:layout_alignLeft="@id/hobi"

        />

    <CheckBox

        android:id="@+id/cb4"

        android:text="Mendengarkan Musik"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/cb3"

        android:layout_alignLeft="@id/hobi"

        />

    <CheckBox

        android:id="@+id/cb5"

        android:text="Memasak"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/cb4"

        android:layout_alignLeft="@id/hobi"

        />

    <Button

        android:id="@+id/ok"

        android:text="OK"

        android:width="50dp"

        android:height="50dp"

        android:layout_below="@+id/cb5"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="10dp"

        android:layout_alignLeft="@id/hobi"

        />

     <Button

        android:id="@+id/reset"

        android:text="RESET"

        android:layout_below="@+id/cb5"

        android:layout_toRightOf="@id/ok"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="10dp"

        />

    <ImageButton

        android:id="@+id/imageButton1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_above="@+id/back"

        android:onClick="pindah2"

        android:src="@drawable/back"

        />

    <TextView

        android:id="@+id/back"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:layout_marginBottom="10dp"

        android:text="Back"

        />

</RelativeLayout>

4.      Tuliskan perintah di bawah ini pada file MainActivity.Java

package merry.multiscreen;

import android.os.Bundle;

import android.app.Activity;

import android.content.Intent;

import android.view.Menu;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;

import android.widget.ImageButton;

import android.widget.RadioButton;

import android.widget.Toast;

public class MainActivity extends Activity {

      

       private EditText nama,nim,kelas;

       private Button btOK,btReset;

       private RadioButton laki,perempuan;

       private String jk;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

       

        nama = (EditText) findViewById(R.id.editnama);

        nim = (EditText) findViewById(R.id.editnim);

        kelas = (EditText) findViewById(R.id.editkelas);

        laki = (RadioButton) findViewById(R.id.rdlaki);

        laki.setOnClickListener(new View.OnClickListener() {

                     @Override

                     public void onClick(View arg0) {

                           // TODO Auto-generated method stub

                            perempuan.setChecked(false);

                           jk = "Laki-laki";

                     }

              });

       

        perempuan = (RadioButton) findViewById(R.id.rdperempuan);

        perempuan.setOnClickListener(new View.OnClickListener() {

                     @Override

                     public void onClick(View arg0) {

                            // TODO Auto-generated method stub

                           laki.setChecked(false);

                           jk = "Perempuan";

                     }

              });

       

        btReset = (Button) findViewById(R.id.reset);

        btReset.setOnClickListener(new View.OnClickListener() {

                     @Override

                     public void onClick(View arg0) {

                           // TODO Auto-generated method stub

                           nama.getText().clear();

                           nim.getText().clear();

                           kelas.getText().clear();

                           laki.setChecked(false);

                           perempuan.setChecked(false);

                     }

              });

       

        btOK = (Button) findViewById(R.id.ok);

        btOK.setOnClickListener(new View.OnClickListener() {

                     @Override

                     public void onClick(View arg0) {

                           // TODO Auto-generated method stub

                           tampilPesan("Nama\t: "+ nama.getText().toString()+"\n"+

                                  "Kelas\t: "+ kelas.getText().toString()+"\n" +                              "NIM\t\t: "+ nim.getText().toString()+"\n"+

                                  "Jenis Kelamin\t: "+ jk);

                     }

              });

       

        ImageButton startAct = (ImageButton) findViewById(R.id.imageButton1);

        startAct.setOnClickListener(new View.OnClickListener() {

                     @Override

                     public void onClick(View v) {

                            // TODO Auto-generated method stub

Intent myIntent = new Intent (getBaseContext(),SecondActivity.class);

                            startActivity(myIntent);

                     }

              });

    }

   

    public void pindah(View v){

       Intent pindah = new Intent(this,SecondActivity.class);

       startActivity(pindah);

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.main, menu);

        return true;

    }

   

    public void tampilPesan(String pesan){

              Toast.makeText(getBaseContext(), pesan, Toast.LENGTH_LONG).show();

       }

}

5.      Tambahkan satu class baru dengan nama ActivitySecond.Java lalu ketikkan perintah berikut ini.

package merry.multiscreen;

import android.app.Activity;

import android.content.Intent;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.CheckBox;

import android.widget.ImageButton;

import android.widget.Toast;

public class SecondActivity extends Activity {

       private CheckBox nyanyi,baca,OR,musik,masak;

       private Button btOK,btReset;

       private String hobi = "";

      

       @Override

       protected void onCreate(Bundle savedInstanceState){

              super.onCreate(savedInstanceState);

              setContentView(R.layout.activity_second);

              nyanyi = (CheckBox) findViewById(R.id.cb1);

              nyanyi.setOnClickListener(new View.OnClickListener() {

                     @Override

                     public void onClick(View arg0) {

                           // TODO Auto-generated method stub

                           hobi = hobi + "\nMenyanyi";

                     }

              });

              baca = (CheckBox) findViewById(R.id.cb2);

              baca.setOnClickListener(new View.OnClickListener() {

                     @Override

                     public void onClick(View arg0) {

                           // TODO Auto-generated method stub

                           hobi = hobi + "\nMembaca";

                     }

              });

              OR = (CheckBox) findViewById(R.id.cb3);

              OR.setOnClickListener(new View.OnClickListener() {

                     @Override

                     public void onClick(View arg0) {

                           // TODO Auto-generated method stub

                           hobi = hobi + "\nOlahraga";

                     }

              });

              musik = (CheckBox) findViewById(R.id.cb4);

              musik.setOnClickListener(new View.OnClickListener() {

                     @Override

                     public void onClick(View arg0) {

                            // TODO Auto-generated method stub

                           hobi = hobi + "\nMendengarkan Musik";

                     }

              });

              masak = (CheckBox) findViewById(R.id.cb5);

              masak.setOnClickListener(new View.OnClickListener() {

                     @Override

                     public void onClick(View arg0) {

                           // TODO Auto-generated method stub

                           hobi = hobi + "\nMemasak";

                     }

              });

              btOK = (Button) findViewById(R.id.ok);

              btOK.setOnClickListener(new View.OnClickListener() {

                     @Override

                     public void onClick(View arg0) {

                           // TODO Auto-generated method stub

                            tampilPesan("Hobby Anda adalah : " + hobi);

                     }

              });

              btReset = (Button) findViewById(R.id.reset);

              btReset.setOnClickListener(new View.OnClickListener() {

                     @Override

                     public void onClick(View arg0) {

                           // TODO Auto-generated method stub

                           nyanyi.setChecked(false);

                           baca.setChecked(false);

                           OR.setChecked(false);

                           masak.setChecked(false);

                           musik.setChecked(false);

                     }

              });

              ImageButton startAct = (ImageButton)findViewById(R.id.imageButton1);

              startAct.setOnClickListener(new View.OnClickListener() {

                    

                     @Override

                     public void onClick(View v) {

                           // TODO Auto-generated method stub

Intent myIntent = new Intent (getBaseContext(),MainActivity.class);

                           startActivity(myIntent);

                     }

              });

       }

      

       public void pindah2(View v){

              Intent pindah2 = new Intent(this,MainActivity.class);

              startActivity(pindah2);

       }

      

       public void tampilPesan(String pesan){

              Toast.makeText(getBaseContext(), pesan, Toast.LENGTH_LONG).show();

       }

}

6.      Tahap selanjutnya adalah mendaftarkan SecondActivity.Java pada AndroidManifest.xml

Silahkan tambahkan source code berikut pada file AndroidManifest.xml tersebut, tuliskan di bawah activity yang sudah tertulis didalam file AndroidManifest.xml tersebut.

    <activity

            android:name="merry.multiscreen.SecondActivity"

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.SECOND" />

                <category android:name="android.intent.category.DEFAULT" />

            </intent-filter>

</activity>

7.      Jika sudah selesai silahkan jalankan apliksinya dan lihat hasilnya pada emulator Anda  seperti gambar di bawah ini.

Gambar1. Screen pertama

Gambar2. Screen kedua