Laporan Tugas

Mata kuliah TMD12 - Pemrograman Aplikasi

Perangkat Bergerak


















1 LAPORAN TUGAS TMD12
D4 TKJMD ITB Batch 8
49013053
Elan Qisthi Aji Wahyudi
Aplikasi Menu Tab
Program menu tab adalah program yang dijalankan pada aplikasi Android untuk
menampilkan menu dengan tampilan tab. Setiap tab adalah sebuah fragment
yang masing-masing memiliki tampilan yang berbeda. Sedangkan tab
menggunakan layout ViewPager. Aplikasi ini dijalankan dengan menggunakan
platform Android Jelly Bean 4.2 pada AVD Emulator

Berikut ini adalah source code dari aplikasi menu tab


2 LAPORAN TUGAS TMD12
Tampilan Aplikasi Menu Tab

MainActivity.java
package me.qisthi.androidmenutab;

import me.qisthi.androidmenutab.adapter.TabsPagerAdapter;
import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.ActionBar.TabListener;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;

public class MainActivity extends FragmentActivity implements TabListener {

private ViewPager viewPager;
private TabsPagerAdapter tAdapter;
private ActionBar actionBar;

//tab titles
private String[] tabs = {"Artist","Albums","Songs"};

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


//actionbar init
viewPager = (ViewPager)findViewById(R.id.pager);
actionBar = getActionBar();
tAdapter = new TabsPagerAdapter(getSupportFragmentManager());

viewPager.setAdapter(tAdapter);
actionBar.setHomeButtonEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

//adding tabs
for(String tabName : tabs)
{

actionBar.addTab(actionBar.newTab().setText(tabName).setTabListener(this));
}

// On swiping the view pager make the tab selected
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener()
{

@Override
public void onPageSelected(int position) {
actionBar.setSelectedNavigationItem(position);

}

3 LAPORAN TUGAS TMD12
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub

}

@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub

}
});
}

@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 onTabReselected(Tab tab, FragmentTransaction arg1) {


}

@Override
public void onTabSelected(Tab tab, FragmentTransaction arg1) {
// TODO Auto-generated method stub
viewPager.setCurrentItem(tab.getPosition());

}

@Override
public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
// TODO Auto-generated method stub

}

}

TabsPagerAdapter.java
package me.qisthi.androidmenutab.adapter;

import me.qisthi.androidmenutab.AlbumFragment;
import me.qisthi.androidmenutab.ArtistFragment;
import me.qisthi.androidmenutab.SongFragment;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class TabsPagerAdapter extends FragmentPagerAdapter{


4 LAPORAN TUGAS TMD12
public TabsPagerAdapter(FragmentManager fm) {
super(fm);
// TODO Auto-generated constructor stub
}


@Override
public Fragment getItem(int index) {
// TODO Auto-generated method stub
switch (index) {
case 0:
return new ArtistFragment();
case 1:
return new AlbumFragment();
case 2:
return new SongFragment();

}
return null;
}

@Override
public int getCount() {
// TODO Auto-generated method stub
return 3;
}

}

AlbumFragment.java
package me.qisthi.androidmenutab;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class AlbumFragment extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup
container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View rootView =
inflater.inflate(R.layout.activity_album_fragment, container,false);

5 LAPORAN TUGAS TMD12
return rootView;
}}
ArtistFragment.java
package me.qisthi.androidmenutab;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ArtistFragment extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup
container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View rootView =
inflater.inflate(R.layout.activity_artist, container,false);

return rootView;
}
}

SongFragment.java
package me.qisthi.androidmenutab;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SongFragment extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup
container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View rootView = inflater.inflate(R.layout.activity_song,
container,false);
return rootView;}}
6 LAPORAN TUGAS TMD12
activity_main.xml
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>

activity_album_fragment.xml & activity_artist.xml &
activity_song.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=".AlbumFragment" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/albumtab" />

</RelativeLayout>


Aplikasi Grid View
GridView adalah tampilan pada Android yang merupakan turunan dari clss
ViewGroup yang menampilkan elemen-elemen dalam bentuk grid atau petak.
Elemen petak tersebut secara otomatis ditambahkan pada GridView dengan
menggunakan ListAdapter
Aplikasi ini dijalankan pada platform Android Jelly Bean 4.2 dengan
menggunakan emulator
Berikut ini adalah tampilan dari aplikasi Grid View
7 LAPORAN TUGAS TMD12

Tampilan Aplikasi Gridview

Gambar sample dari tampilan program diatas bisa diambil dari link berikut
http://developer.android.com/shareables/sample_images.zip. Berikut ini adalah
source code dari aplikasi GridView

MainActivity.java
package me.qisthi.androidgridview;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;
import android.view.View;
8 LAPORAN TUGAS TMD12
import android.widget.AdapterView.OnItemClickListener;;

public class MainActivity extends Activity {

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

GridView gridview =
(GridView)findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));

gridview.setOnItemClickListener(new OnItemClickListener()
{
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
Toast.makeText(MainActivity.this, "" + position,
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;
}

}

ImageAdapter.java
package me.qisthi.androidgridview;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {

9 LAPORAN TUGAS TMD12
private Context mContext;
//reference to image
private int[] imageIds = {
R.drawable.sample_0, R.drawable.sample_1,
R.drawable.sample_2, R.drawable.sample_4,
R.drawable.sample_3, R.drawable.sample_6,
R.drawable.sample_5, R.drawable.sample_7
};

public ImageAdapter(Context c){
mContext = c;
}

//Create new ImageView for each item
@Override
public View getView(int pos, View convertView, ViewGroup
parent) {
// TODO Auto-generated method stub
ImageView imageView;
if(convertView==null)
{
imageView = new ImageView(mContext);
imageView.setLayoutParams(new
GridView.LayoutParams(85,85));

imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
}else{
imageView = (ImageView)convertView;
}
imageView.setImageResource(imageIds[pos]);
return imageView;
}

@Override
public int getCount() {
// TODO Auto-generated method stub
return imageIds.length;
}

@Override
public Object getItem(int arg0) {
// TODO Auto-generated method stub
return null;
}

10 LAPORAN TUGAS TMD12
@Override
public long getItemId(int arg0) {
// TODO Auto-generated method stub
return 0;
}
}

activity_main.xml
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="90dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp" >

</GridView>


Aplikasi ListView
Aplikasi ListView adalah aplikasi yang memperlihatkan tampilan daftar elemen
tertentu. Elemen dari list dimasukkan secara otomatis dengan menggunakan
adapter.
Aplikasi ini dijalankan pada platform Android Jelly Bean 4.2 dengan
menggunakan emulator
Berikut ini adalah tampilan dari aplikasi List View







11 LAPORAN TUGAS TMD12
Tampilan aplikasi listview

Ketika salah satu item dipilih oleh user, maka aplikasi ini akan menampilkan
keterangan nama nama dari item yang user pilih.
Berikut adalah source code dari aplikasi ini

MainActivity.java
package me.qisthi.androidlistview;

import android.os.Bundle;
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;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView;
12 LAPORAN TUGAS TMD12

public class MainActivity extends ListActivity {

static final String[] FRUITS = new String[] { "Apple",
"Avocado", "Banana",
"Blueberry", "Coconut", "Durian", "Guava", "Kiwifruit",
"Jackfruit", "Mango", "Olive", "Pear", "Sugar-apple" };

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

ArrayAdapter<String> adapter = new
ArrayAdapter<String>(this, R.layout.listitem,FRUITS);
setListAdapter(adapter);
ListView listView = getListView();
listView.setTextFilterEnabled(true);

listView.setOnItemClickListener(new OnItemClickListener()
{
public void onItemClick(AdapterView<?> parent, View
view,
int position, long id) {
// When clicked, show a toast with the TextView
text
Toast.makeText(getApplicationContext(),
((TextView) view).getText(),
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;
}

}




13 LAPORAN TUGAS TMD12
listitem.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp"
android:textSize="20sp" >
</TextView>

activity_main.xml
<LinearLayout 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:orientation="vertical" >

<ListView
android:id="@android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>

</LinearLayout>

Aplikasi Spinner
Spinner merupakan suatu jenis interaksi yang menyajikan pilihan - pilihan
dengan tampilan dropdown. Spinner sangat berguna apabila aplikasi
memberikan banyak opsi kepada user, namun dengan jumlah yang terbatas.
Berikut ini adalah tampilan dari aplikasi spinner

14 LAPORAN TUGAS TMD12
Tampilan dari aplikasi Spinner

Pada aplikasi ini terdapat dua jenis spinner yang dibedakan dari cara
pengambilan datanya. Spinner1 yang berisi nama-nama negara datanya diambil
dari string.xml sehingga datanya statis. Sedangkan untuk spinner2 datanya
secara dinamis diambil dengan menggunakan ArrayAdaptor.
Berikut ini adalah source code dari aplikasi ini.

MainActivity.java
package me.qisthi.androidspinner;

import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
15 LAPORAN TUGAS TMD12
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Spinner;
import android.widget.Toast;

public class MainActivity extends Activity {

private Spinner spinner1,spinner2;
private Button btnSubmit;

//add dynamic list
private void addSpinnerItems()
{
ArrayList<String> list = new ArrayList<String>();
spinner2 = (Spinner)findViewById(R.id.spinner2);

list.add("Item 1");
list.add("Item 2");
list.add("Item 3");
list.add("Item 4");
list.add("Item 5");

ArrayAdapter<String> adapter = new
ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item,list);

adapter.setDropDownViewResource(android.R.layout.simple_spinner_drop
down_item);
spinner2.setAdapter(adapter);
}

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

addSpinnerItems();
addListenerOnButton();
}

public void addListenerOnButton() {

spinner1 = (Spinner) findViewById(R.id.spinner1);
spinner2 = (Spinner) findViewById(R.id.spinner2);
btnSubmit = (Button) findViewById(R.id.btnSubmit);

16 LAPORAN TUGAS TMD12
btnSubmit.setOnClickListener(new OnClickListener()
{

@Override
public void onClick(View v) {

Toast.makeText(MainActivity.this,
"OnClickListener : " +
"\nSpinner 1 : "+
String.valueOf(spinner1.getSelectedItem()) +
"\nSpinner 2 : "+
String.valueOf(spinner2.getSelectedItem()),
Toast.LENGTH_SHORT).show();
}

});
}

}

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

<string name="app_name">AndroidSpinner</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>

<string name="country_prompt">Choose a country</string>

<string-array name="country_arrays">
<item>Malaysia</item>
<item>United States</item>
<item>Indonesia</item>
<item>France</item>
<item>Italy</item>
<item>Singapore</item>
<item>New Zealand</item>
<item>India</item>
</string-array>

</resources>

activity_main.xml
17 LAPORAN TUGAS TMD12
<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" >

<Spinner
android:id="@+id/spinner2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/spinner1"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
/>

<Spinner
android:id="@+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/spinner2"
android:layout_alignParentTop="true"
android:layout_marginTop="48dp"
android:entries="@array/country_arrays"
android:prompt="@string/country_prompt" />

<Button
android:id="@+id/btnSubmit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/spinner2"
android:layout_centerHorizontal="true"
android:layout_marginTop="43dp"
android:text="Button" />

</RelativeLayout>



18 LAPORAN TUGAS TMD12
Aplikasi Time & Date Picker
Android menyediakan tampilan dialog kepada user untuk menentukan waktu
ataupun tanggal yang disebut Picker. masing - masing picker memiliki
perbedaan pada parameter yang dimintanya. untuk waktu akan mengambil
parameter berupa jam, menit dan AM/PM sedangkan untuk tanggal mengambil
paramter berupa bulan, hari, tahun. Penggunaan picker sangat berguna untuk
menghindari kesalahan penanggalan karena sudah terformat dengan benar.
Berikut ini adalah tampilan dari aplikasi time & date picker
Tampilan dialog untuk memilih waktu



19 LAPORAN TUGAS TMD12
Tampilan dialog untuk memilih tanggal

Berikut ini adalah source code dari aplikasi date & time picker

MainActivity.java

package me.qisthi.androidpicker;

import android.os.Bundle;
import android.app.Activity;
import android.app.DialogFragment;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {

20 LAPORAN TUGAS TMD12
private Button btnTime, btnDate;

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

btnTime = (Button)findViewById(R.id.button1);
btnDate = (Button)findViewById(R.id.button2);

btnTime.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
DialogFragment timeFragment = new
TimeFragment();
timeFragment.show(getFragmentManager(), "Time
Picker");
}
});

btnDate.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
DialogFragment dateFragment = new
DateFragment();
dateFragment.show(getFragmentManager(), "Date
Picker");
}
});

}

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

}



21 LAPORAN TUGAS TMD12
DateFragment.java
package me.qisthi.androidpicker;

import java.util.Calendar;

import android.app.DatePickerDialog;
import android.app.Dialog;
import android.app.DialogFragment;
import android.os.Bundle;
import android.widget.DatePicker;

public class DateFragment extends DialogFragment implements
DatePickerDialog.OnDateSetListener{



@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
// TODO Auto-generated method stub
final Calendar c = Calendar.getInstance();
int year = c.get(Calendar.YEAR);
int month= c.get(Calendar.MONTH);
int day = c.get(Calendar.DAY_OF_MONTH);

//create Date Picker Instance
DatePickerDialog datePicker = new
DatePickerDialog(getActivity(), this, year, month, day);
return datePicker;
}

@Override
public void onDateSet(DatePicker view, int year, int
monthOfYear,
int dayOfMonth) {
// TODO Auto-generated method stub

}

}

TimeFragment.java
package me.qisthi.androidpicker;

import java.util.Calendar;
22 LAPORAN TUGAS TMD12

import android.app.Dialog;
import android.app.DialogFragment;
import android.os.Bundle;
import android.text.format.DateFormat;
import android.widget.TimePicker;
import android.app.TimePickerDialog;

public class TimeFragment extends DialogFragment implements
TimePickerDialog.OnTimeSetListener {

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
// TODO Auto-generated method stub
final Calendar c = Calendar.getInstance();
int hour = c.get(Calendar.HOUR_OF_DAY);
int minute = c.get(Calendar.MINUTE);

TimePickerDialog timePicker = new
TimePickerDialog(getActivity(), this, hour, minute,
DateFormat.is24HourFormat(getActivity()));
return timePicker;
}

@Override
public void onTimeSet(TimePicker view, int hour, int minute) {
// TODO Auto-generated method stub

}

}

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" >

<Button
23 LAPORAN TUGAS TMD12
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:layout_marginTop="122dp"
android:text="Pick Time" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/button1"
android:layout_alignBottom="@+id/button1"
android:layout_marginLeft="28dp"
android:layout_toRightOf="@+id/button1"
android:text="Pick Date" />

</RelativeLayout>
24 LAPORAN TUGAS TMD12