Minggu, 24 November 2013

PEMROGRAMAN MOBILE “PEMBUATAN APLIKASI MULTISCREEN”

PEMROGRAMAN MOBILE
“PEMBUATAN APLIKASI MULTISCREEN”

Disusun Oleh:
Benedikta Bella Adityana 12.12.0080
SI 12 B

Blog: bdcprograming.blogspot.com

STMIK AMIKOM PURWOKERTO
TAHUN 2013/2014


BAB I
MEMBUAT PROJECT APLIKASI ANDROID

Berikut ini adalah cara membuat berbagai macam aplikasi android sederhana seperti Kalkulator, Linear, CheckBox, Listview, TabLayout, ImagesView, dan MultiScreen.
Membuat Project android baru pada Eclipse, langkah-langkahnya yaitu:
  1. Setelah masuk ke aplikasi Eclipse, pilih menu File – New – Android Application Project, seperti gambar di bawah ini: 
     
  2. Setelah itu, pada tampilan seperti di bawah ini, beri nama project android yang akan dibuat. Contoh di bawah ini saya beri nama MultiScreen’Android. Setelah mengubah nama aplikasi dan package sesuai dengan yang diinginkan, klik Next. 
  3.  Kemudian secara default akan muncul tampilan seperti di bawah ini. Klik Next 
  4.  Pilih icon yang akan mewakili aplikasi yang kita buat. Jika sudah sesuai, klik Next. 
  5.  Untuk melanjutkan, klik Next.
  6.  Untuk menyelesaikan pembuatan project baru ini, klik Finish. 
  7.  Tampilan project aplikasi kita akan muncul seperti gambar di bawah ini.
     
  8. Untuk menjalankan android emulator, pilih menu Windows – Android Virtual Device Manager – pilih device yang telah kita buat – Start – Launch. Maka akan muncul tampilan emulator seperti di bawah ini: 




BAB II
MEMBUAT APLIKASI MULTI SCREEN


  1. Pada activity_main.xml ketikan kode program seperti di bawah ini: 

  2. <RelativeLayoutxmlns: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"

    <Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="40dp"
    android:layout_marginTop="40dp"
    android:text="@string/x"/>

    </RelativeLayout>
  3.   Maka tampilan pada graphical layout akan menjadi seperti di bawah ini: 
  4.  Buat graphical layout menjadi seperti gambar di bawah ini: 
  5.  Langkah selanjutnya yaitu membuat form. Pada bagian Package Explorer, pilih src – New – Other – Android – Android Activity – beri nama form-2 pada activity name – Finish. 
  6.  Setelah itu, pada ActivityMain.java, ketikan kode program di bawah ini: 
package android.multiscreenandroid;

importandroid.os.Bundle;
importandroid.app.Activity;
importandroid.content.Intent;
importandroid.view.Menu;
importandroid.view.View;
importandroid.widget.Button;

publicclassMainActivityextends Activity {
Button btn1;

@Override
protectedvoidonCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

btn1=(Button)findViewById(R.id.button1);
btn1.setOnClickListener(newView.OnClickListener() {
            
             @Override
             publicvoidonClick(View arg0) {
                   // TODO Auto-generated method stub
                   Intent form2=newIntent(getBaseContext(),Form2.class);
                   startActivity(form2);
                  
             }
        });
    }


@Override
publicbooleanonCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
returntrue;
    }

}

BAB III
MEMBUAT APLIKASI KALKULATOR

1.      Setelah kita membuat form2 pada project MutiApp tersebut, buat aplikasi pertama yaitu aplikasi Kalkulator. Pada activity_form2.xml (package explorer – res – layout – activity_form2.xml) , ketikan kode program seperti di bawah ini:
<TableLayout android:orientation="vertical"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent">
    <TableRow android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tableRow1"
        android:layout_weight="1">
        <TextView android:id="@+id/textview1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="angka1"></TextView>
        <EditText android:text="              "
            android:layout_height="wrap_content"
            android:id="@+id/angka1"
            android:inputType="numberDecimal"
            android:layout_width="40dip"></EditText>
        </TableRow>
       
        <TableRow android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tableRow1"
            android:layout_weight="1">
        <TextView android:id="@+id/textView1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Angka 2"></TextView>
        <EditText android:text="             "
            android:layout_height="wrap_content"
            android:id="@+id/angka2"
            android:layout_width="50dip"></EditText>
        </TableRow>
  <View android:background="#FF909090"
      android:layout_width="wrap_content"
      android:id="@+id/view1"
      android:layout_height="2dip"></View>
   <View android:background="#FF909090"
      android:layout_width="wrap_content"
      android:id="@+id/view1"
      android:layout_height="2dip"></View>
   <TableRow android:id="@+id/tableRow2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content">

       <Button
           android:id="@+id/tambah"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginLeft="50dip"
           android:layout_marginTop="7dip"
           android:gravity="center_vertical|left"
           android:tag="reset all"
           android:text="Tambah" />
        <Button
            android:id="@+id/bagi"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dip"
            android:layout_marginTop="7dip"
            android:gravity="center_vertical|left"
            android:tag="reset all"
            android:text="Bagi" />

          </TableRow>
   <TableRow android:id="@+id/tableRow3"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content">

       <Button
           android:id="@+id/kurang"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginLeft="50dip"
           android:layout_marginTop="7dip"
           android:gravity="center_vertical|left"
           android:tag="reset all"
           android:text="Kurang" />
       <Button
           android:id="@+id/kali"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginLeft="50dip"
           android:layout_marginTop="7dip"
           android:gravity="center_vertical|left"
           android:tag="reset all"
           android:text="Kali" />
          </TableRow>

   <TableRow
       android:id="@+id/tableRow3"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" >

       <Button
           android:id="@+id/reset"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginLeft="50dip"
           android:layout_marginTop="7dip"
           android:gravity="left|center_vertical"
           android:tag="reset all"
           android:text="Reset" />
   </TableRow>

          <View android:background="#FF909090"
              android:layout_width="wrap_content"
              android:id="@+id/view1"
              android:layout_height="2dip"></View>
          <TableRow android:id="@+id/tableRow2"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content">
              <TextView android:id="@+id/textView1"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Hasil :"
                  android:maxLines="2"
                  android:textStyle="bold"
                  android:textSize="15dip"></TextView>
              <TextView android:text=""
                  android:layout_height="wrap_content"
                  android:id="@+id/hasil"
                  android:textStyle="bold"
                  android:textSize="20dip"
                  android:layout_width="wrap_content"></TextView>
              </TableRow>
        <TextView android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:maxLines="2"
            android:textStyle="bold"
            android:textSize="15dip"
            android:id="@+id/hemat"
            android:gravity="center_horizontal"
            android:paddingTop="10dip"></TextView>
              </TableLayout>
</RelativeLayout>
1.      Pada form2.java (package explorer pilih src – form2.java ) ketikan kode program di bawah ini:
public class form2 extends Activity {
       EditText angka1, angka2;
       TextView hasil;
       Editable isiangka1, isiangka2;
       Button rset;
       Button tmbah;
       Button krang;
       Button kli;
       Button bgi;
              @Override
              protected void onCreate(Bundle savedInstanceState) {
                     super.onCreate(savedInstanceState);
                     setContentView(R.layout.activity_main_tugas_kalkulator);
                     hasil = (TextView) findViewById(R.id.hasil);
                     angka1 = (EditText) findViewById(R.id.angka1);
                     angka2 = (EditText) findViewById(R.id.angka2);
                     rset = (Button) findViewById(R.id.reset);
                     rset.setOnClickListener(new itung());
                     tmbah = (Button) findViewById(R.id.tambah);
                     tmbah.setOnClickListener(new itung());
                     krang = (Button) findViewById(R.id.kurang);
                     krang.setOnClickListener(new itung());
                     bgi = (Button) findViewById(R.id.bagi);
                     bgi.setOnClickListener(new itung());
                     kli = (Button) findViewById(R.id.kali);
                     kli.setOnClickListener(new itung());

              }
       private class itung implements OnClickListener{

              public void onClick(View v){
                     try{
switch(v.getId()){
case R.id.tambah:
Double a = Double.parseDouble(angka1.getText().toString());
Double b = Double.parseDouble(angka2.getText().toString());
double hsl= a + b;
DecimalFormat df = new DecimalFormat("@@##");
hasil.setText(df.format(hsl));
break;
case R.id.kurang:
Double c = Double.parseDouble(angka1.getText().toString());
Double d= Double.parseDouble(angka2.getText().toString());
double hsll= c - d;
DecimalFormat dff = new DecimalFormat("@@##");
hasil.setText(dff.format(hsll));
break;
case R.id.kali:
Double e = Double.parseDouble(angka1.getText().toString());
Double f= Double.parseDouble(angka2.getText().toString());
double hslll= e * f;
DecimalFormat dfff = new DecimalFormat("@@##");
hasil.setText(dfff.format(hslll));
break;
case R.id.bagi:
Double g = Double.parseDouble(angka1.getText().toString());
Double h= Double.parseDouble(angka2.getText().toString());
double hsllll= g / h;
DecimalFormat dffff = new DecimalFormat("@@##");
hasil.setText(dffff.format(hsllll));
break;
case R.id.reset:
angka1.setText("");
angka2.setText("");
hasil.setText("");
break;
                                 
              }
                     }catch (Exception e){
              }
3. Output dari aplikasi kalkulator pada saat dijalankan adalah seperti di bawah ini:


BAB IV
MEMBUAT APLIKASI LINEAR



1.      Buat satu buah form baru untuk menampung aplikasi Linear.  Pada activity_form3.xml (package explorer – res – layout – activity_form3.xml) , ketikan kode program seperti di bawah ini:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    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" >
   
    <RadioGroup
        android:id="@+id/orientation"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:padding="5px">
             <RadioButton
                 android:id="@+id/horizontal"
                 android:text="horizontal"/>
             <RadioButton
                 android:id="@+id/vertical"
                 android:text="vertical"/>
             </RadioGroup>
             <RadioGroup
                 android:id="@+id/gravity"
             android:orientation="vertical"
             android:layout_width="fill_parent"
                   android:layout_height="wrap_content"
                   android:padding="5px">
             <RadioButton
                 android:id="@+id/left"
                 android:text="left"/>
             <RadioButton
                 android:id="@+id/center"
                 android:text="center"/>
             <RadioButton
                 android:id="@+id/right"
                 android:text="right"/>
             </RadioGroup>
            
            
</LinearLayout>


1.      Pada form3.java (package explorer pilih src – form3.java ) ketikan kode program di bawah ini:
import android.os.Bundle;
import android.app.Activity;
import android.view.Gravity;
import android.view.Menu;
import android.widget.LinearLayout;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;

public class form3 extends Activity implements OnCheckedChangeListener {
     
      private RadioGroup orientation, gravity;
     
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        kontent();
    }
    public void kontent () {
      orientation = (RadioGroup) findViewById(R.id.orientation);
      orientation.setOnCheckedChangeListener(this);
     
      gravity = (RadioGroup) findViewById(R.id.gravity);
      gravity.setOnCheckedChangeListener(this);
    }


    @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;
    }
      @Override
      public void onCheckedChanged(RadioGroup arg0, int cinta) {
             // TODO Auto-generated method stub
             switch (cinta) {
             case R.id.horizontal:
                   orientation.setOrientation(LinearLayout.HORIZONTAL);
                   break;
             case R.id.vertical:
                   orientation.setOrientation(LinearLayout.VERTICAL);
                   break;
             case R.id.left:
                   gravity.setGravity(Gravity.LEFT);
                   break;
             case R.id.center:
                   gravity.setGravity(Gravity.CENTER);
                   break;
             case R.id.right:
                   gravity.setGravity(Gravity.RIGHT);
                   break;
             }
            
    }



Output dari aplikasi Linear pada saat dijalankan yaitu seperti gambar di bawah ini: 



BAB V
MEMBUAT APLIKASI LIST VIEW & CHECK BOX


LIST VIEW
1.       Buat satu buah form baru untuk menampung aplikasi ListView.  Pada activity_form4.xml (package explorer – res – layout – activity_form4.xml) , ketikan kode program seperti di bawah ini:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/yangDipilih"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<ListView
android:id="@android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawSelectorOnTop="false"
/>
</LinearLayout>
2.      Pada form4.java (package explorer pilih src – form4.java ) ketikan kode program di bawah ini:
import android.os.Bundle;
import android.app.Activity;
import android.app.ListActivity;
import android.view.Menu;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class form4 extends Activity {
      TextView seleksi;
      String[] pilihan = { "Senin", "Selasa", "Rabu", "Kamis", "Jum'at",
             "Sabtu","minggu"};
      @Override
      protected void onCreate(Bundle savedInstanceState) {
             super.onCreate(savedInstanceState);
             setContentView(R.layout.activity_main);
            
             setListAdapter(new ArrayAdapter<String>(this,
                          android.R.layout.simple_list_item_1, pilihan));
            
      }
     
      public void onListItemClick(ListView parent, View v, int posisi, long id) {
             Toast.makeText(getBaseContext(), "anda memilih  " + pilihan[posisi], Toast.LENGTH_LONG).show();
      }

      @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;
      }




Output aplikasi ListView adalah:





CHECK BOX
1.       Buat satu buah form baru untuk menampung aplikasi CheckBox.  Pada activity_form5.xml (package explorer – res – layout – activity_form5.xml) , ketikan kode program seperti di bawah ini:
<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" >

    <CheckBox
        android:id="@+id/check"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/checkBox" >
       
        </CheckBox>
       
</RelativeLayout>

2.      Pada form5.java (package explorer pilih src – form5.java ) ketikan kode program di bawah ini:
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;

public class form5 extends Activity implements OnCheckedChangeListener {

//memesan variabel
CheckBox cb;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//proses instansiasi / pencarian id
cb = (CheckBox) findViewById(R.id.check);

//proses set cb dg checked agr proses centang'a berfungsi
cb.setOnCheckedChangeListener(this);
}

@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;
}

@Override
public void onCheckedChanged(CompoundButton arg0, boolean dicek) {
// TODO Auto-generated method stub
if (dicek){
cb.setText("horree,aku dicentang");
} else {
cb.setText("Aku Tidak di centang;(");
}
}

 Output aplikasi Check Box ketika dijalankan adalah seperti gambar di bawah ini:




BAB VI
MEMBUAT APLIKASI TABLE LAYOUT

1.      Buat satu buah form baru untuk menampung aplikasi TableLayout.  Pada activity_form6.xml (package explorer – res – layout – activity_form6.xml) , ketikan kode program seperti di bawah ini:
<TableLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/TableLayout1"
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">

<TableRow>
<Button
android:id="@+id/bckbutton"
android:text="Back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</TableRow>
<TableRow>
<TextView
android:text="First Name :"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
/>
<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</TableRow>
<TableRow>
<TextView
android:text="Last Name :"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
/>
<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</TableRow>
<TableRow>
<Button
android:id="@+id/btnpanjang"
android:text="Button Panjang"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="4"
/>
</TableRow>
</TableLayout>

2.       Pada form6.java (package explorer pilih src – form6.java ) ketikan kode program di bawah ini:
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class form6 extends Activity {

      @Override
      protected void onCreate(Bundle savedInstanceState) {
             super.onCreate(savedInstanceState);
             setContentView(R.layout.activity_main);
      }

      @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;
      }

}

Output aplikasi Table Layout ketika dijalankan yaitu:



BAB VII
MEMBUAT APLIKASI IMAGE VIEW


1.       Buat satu buah form baru untuk menampung aplikasi ImageView.  Pada activity_form7.xml (package explorer – res – layout – activity_form7.xml) , ketikan kode program seperti di bawah ini:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/TableLayout1"
    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" >

    <TableRow>
        <RelativeLayout >



        <Button
            android:id="@+id/view2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="view2"
            android:height="75dp"
            android:width="135dp"/>
        <Button
            android:id="@+id/view1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="view1"
            android:width="135dp"
            android:height="150dp"
            android:layout_toRightOf="@id/view2" />
        <Button
            android:id="@+id/view3"
            android:text="view3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/view2"
            android:height="75dp"
            android:width="135dp"/>
       
        </RelativeLayout>
    </TableRow>
   
    <TableRow >
        <RelativeLayout >
            <Button
                android:id="@+id/view4"
                android:text="view4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:height="80dp"
                android:width="270dp"/>
        </RelativeLayout>
    </TableRow>
    <TableRow >
        <RelativeLayout >
            <Button
                android:id="@+id/view5"
                android:text="view5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:width="135dp"
                android:height="150dp"/>
            <Button
            android:id="@+id/view6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="view6"
            android:height="75dp"
            android:width="135dp"
            android:layout_toRightOf="@id/view5"/>

            <Button
                android:id="@+id/view7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_below="@+id/view6"
                android:height="75dp"
                android:text="view7"
                android:width="135dp" />

        </RelativeLayout>
    </TableRow>

</TableLayout>

Output dari aplikasi ketika dijalankan yaitu: