Competency Progress: Laporan Minggu ke-12

Nama : Ersus Saeful Hidayat

NIM : 49012050

Jurusan : TKJMD - STEI - ITB

Laporan Minggu ke-12

Mulai Tanggal 18-22 Februari 2013, Kegiatan minggu ke-12 :

Hari, Tanggal

Kegiatan

Senin, 18 Feb 2013

s.d

Jum’at, 22 Feb 2013

Melaksanakan Magang, dan update data untuk Website sekolah localhost/smpvijayakusumabandung.

Melaksanakan Perkuliah Jarak Jauh, dari website http://course.lskk.ee.itb.ac.id TMD12 Pemrograman Aplikasi Perangkat Bergerak.

A. Mengerjakan Tugas Java Android 2 Batch 6 – Tugas 1 Membuat Program Tampilan List.

Disini kita akan membuat 3 tab berbeda seperti gambar diatas, yang membutuhkan 4 Activity di lokasi folder src/com.saeful.menutab. Satu sebagai frame layout, 3 Activity sebagai view. Juga membutuhkan 4 buah file layout xml di lokasi folder res/layout. Persiapkan 6 buah icon dengan berekstensi .png dengan icon_normal dan icon_grey, membuat folder baru drawable dan tempatkan di folder res/drawable, juga buat 3 buah style xml untuk masing-masing tab.

1. Langkah pertama, buat terlehih dahulu layout-nya, caranya klick kanan folder layout > New > Android XML File.

File main.xml

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

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

android:id="@android:id/tabhost"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<LinearLayout

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TabWidget

android:id="@android:id/tabs"

android:layout_width="fill_parent"

android:layout_height="wrap_content"/>

<FrameLayout

android:id="@android:id/tabcontent"

android:layout_width="fill_parent"

android:layout_height="fill_parent"/>

</LinearLayout>

</TabHost>

File artists.xml

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

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<TextView

android:text="This is the Artists tab \n Noah \n Wali \n Sule"

android:padding="15dip"

android:textSize="18dip"

android:layout_width="fill_parent"

android:layout_height="wrap_content"/>

</LinearLayout>

File albums.xml

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

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<TextView

android:text="This is the Albums tab \n Seperti Seharusnya \n Ingat Shalawat \n Mimin"

android:padding="15dip"

android:textSize="18dip"

android:layout_width="fill_parent"

android:layout_height="wrap_content"/>

</LinearLayout>

File songs.xml

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

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<TextView

android:text="This is the Songs tab \n Raja Negeriku \n Tobat Maksiat \n Mimin"

android:padding="15dip"

android:textSize="18dip"

android:layout_width="fill_parent"

android:layout_height="wrap_content"/>

</LinearLayout>

2. Buat 3 buah file xml dan tempatkan di folder drawable, agar ketika salah satu tab terseleksi maka icon-nya berubah.

File style_artists.xml

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

<item

android:drawable="@drawable/artists_normal"

android:state_selected="true"/>

<item

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

</selector>

File style_albums.xml

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

<item

android:drawable="@drawable/albums_normal"

android:state_selected="true"/>

<item

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

</selector>

File style_songs.xml

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

<item

android:drawable="@drawable/songs_normal"

android:state_selected="true"/>

<item

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

</selector>

3. Pembuatan Activity, karena sudah terdapat satu file Activity yaitu MenuTabActivity.java, hanya perlu membuat 3 activity lainnya.

File MenuTabActivity.java

/**===========================================================

* TMD12 Pemrograman Aplikasi Perangkat Bergerak

* ===========================================================

* Tugas 1 Menu Tab

* Nama : Ersus Saeful Hidayat

* NIM : 49012050

* Jurusan : TKJMD (Teknik Komputer Jaringan Media Digital) - STEI - ITB

* ===========================================================

package com.saeful.menutab;

import android.app.~~TabActivity~~;

import android.content.Intent;

import android.os.Bundle;

import android.widget.TabHost;

import android.widget.TabHost.TabSpec;

public class MenuTabActivity extends ~~TabActivity~~ {

@Override

public void onCreate (Bundle savedInstanceState){

super.onCreate (savedInstanceState);

setContentView(R.layout.main);

TabHost tabHost = getTabHost();

TabSpec artists = tabHost.newTabSpec("Artists");

artists.setIndicator("Artists", getResources().getDrawable(R.drawable.style_artists));

Intent artistsIntent = new Intent(this, ArtistsActivity.class);

artists.setContent(artistsIntent);

TabSpec albums = tabHost.newTabSpec("Albums");

albums.setIndicator("Albums", getResources().getDrawable(R.drawable.style_albums));

Intent albumsIntent = new Intent(this, AlbumsActivity.class);

albums.setContent(albumsIntent);

TabSpec songs = tabHost.newTabSpec("Songs");

songs.setIndicator("Songs", getResources().getDrawable(R.drawable.style_songs));

Intent songsIntent = new Intent(this, SongsActivity.class);

songs.setContent(songsIntent);

tabHost.addTab(artists);

tabHost.addTab(albums);

tabHost.addTab(songs);

}

File ArtistsActivity.java

package com.saeful.menutab;

import android.app.Activity;

import android.os.Bundle;

public class ArtistsActivity extends Activity {

public void onCreate (Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.artists);

}

File AlbumsActivity.java

package com.saeful.menutab;

import android.app.Activity;

import android.os.Bundle;

public class AlbumsActivity extends Activity {

public void onCreate (Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.albums);

}

File SongsActivity.java

package com.saeful.menutab;

import android.app.Activity;

import android.os.Bundle;

public class SongsActivity extends Activity {

public void onCreate (Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.songs);

}

4. Yang terakhir perlu mendaftarkan file-file activity di atas ke dalam file AndroidManifest.xml.

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

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

package="com.saeful.menutab"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk

android:minSdkVersion="8"

android:targetSdkVersion="17" />

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<activity

android:name="com.saeful.menutab.MenuTabActivity"

android:label="@string/app_name" >

<intent-filter>

</intent-filter>

</activity>

// Mendaftarkan file-file activity

</application>

</manifest>

5. Jalankan via emulator, hasilnya seperti gambar di atas.

B. Mengerjakan Tugas Java Android 2 Batch 6 – Tugas 2 Membuat Program Tampilan Grid.

Disini kita akan membuat galeri photo seperti gambar diatas menggunakan GridView pada platform aplikasi Android, yang membutuhkan 1 Activity bernama GridViewActivity.java di lokasi folder src/com.saeful.menutab berfungsi menghandle frame layout dan GridView. Juga membutuhkan 2 buah file layout xml bernama konten.xml dan main.xml di lokasi folder res/layout. Persiapkan 15 buah photo dengan berekstensi .jpg, buat folder baru drawable di folder res dan tempatkan semua photo di folder res/drawable.

1. Langkah pertama, buat terlehih dahulu layout-nya, layout ini akan digunakan sebagai konten atau isi dari gridview, caranya klick kanan folder layout > New > Android XML File.

File konten.xml

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

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<ImageView

android:id="@+id/imageView1"

android:layout_width="113dp"

android:layout_height="80dp"

android:layout_gravity="center_horizontal" />

<TextView

android:id="@+id/keterangan"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:text="keterangan" />

</LinearLayout>

2. Buat lagi layout xml di folder layout, layout ini akan digunakan sebagai layout utama gridview.

File main.xml

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

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<GridView

android:id="@+id/grid"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:columnWidth="100dip"

android:gravity="center"

android:horizontalSpacing="5dip"

android:numColumns="auto_fit"

android:stretchMode="columnWidth"

android:verticalSpacing="5dip" />

</LinearLayout>

3. Langkah terakhir buat Activity, karena sudah terdapat satu file Activity yaitu GridViewActivity.java, berfungsi untuk menghandle layout dan gridview didalamnya.

File GridViewActivity.java

/**===========================================================

* TMD12 Pemrograman Aplikasi Perangkat Bergerak

* ===========================================================

* Tugas 2 GridView

* Nama : Ersus Saeful Hidayat

* NIM : 49012050

* Jurusan : TKJMD (Teknik Komputer Jaringan Media Digital) - STEI - ITB

* ===========================================================

package com.saeful.gridview;

import android.os.Bundle;

import android.app.Activity;

import android.view.LayoutInflater;

import android.view.Menu;

import android.view.View;

import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.ArrayAdapter;

import android.widget.GridView;

import android.widget.ImageView;

import android.widget.ImageView.ScaleType;

import android.widget.TextView;

import android.widget.Toast;

public class GridViewActivity extends Activity implements OnItemClickListener {

//Data Photo

private static final String[] item = {

"photo 1","photo 2","photo 3","photo 4","photo 5",

"photo 6","photo 7","photo 8","photo 9","photo 10",

"photo 11","photo 12","photo 13","photo 14","photo 15"

};

//Gambar Photo

private int[] imageID = {

R.drawable.photo01, R.drawable.photo02, R.drawable.photo03,

R.drawable.photo04, R.drawable.photo05, R.drawable.photo06,

R.drawable.photo07, R.drawable.photo08, R.drawable.photo09,

R.drawable.photo10, R.drawable.photo11, R.drawable.photo12,

R.drawable.photo13, R.drawable.photo14, R.drawable.photo15

};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

GridView gridView = (GridView) findViewById(R.id.grid);

//Set Adapter GridView

gridView.setAdapter(new IconAdapter());

//Action Click

gridView.setOnItemClickListener(this);

}

private class IconAdapter extends ArrayAdapter<String> {

//Konstruktor memanggil method super() dari class parent

public IconAdapter () {

super(GridViewActivity.this, R.layout.konten, item);

}

@Override

public View getView(int position, View convertView, ViewGroup parent){

//Instansiasi row dari convertView

View row = convertView;

if (row == null){

//Inflate layout

LayoutInflater inflater = getLayoutInflater();

row = inflater.inflate(R.layout.konten, parent, false);

}

ImageView imageView = (ImageView) row.findViewById(R.id.imageView1);

TextView keterangan = (TextView) row.findViewById(R.id.keterangan);

//Set skala photo

imageView.setScaleType(ScaleType.FIT_XY);

//Set Keterangan dan Photo berdasarkan position

keterangan.setText(item[position]);

imageView.setImageResource(imageID[position]);

//Kembali ke Object View

return row;

}

@Override

public void onItemClick(AdapterView<?> arg0, View arg1, int p, long arg3){

//Menampilkan pesan pop up saat click

Toast.makeText(GridViewActivity.this, item[p]+"clicked!", Toast.LENGTH_SHORT).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;

}

4. Jalankan via emulator, hasilnya seperti gambar di atas.

Demikian kegiatan pada minggu ke-12.

Competency Progress

Sunday, March 10, 2013

Laporan Minggu ke-12

No comments:

Post a Comment

Who are We?

Blog Archive