Breaking News
Loading...
Selasa, 14 Mei 2013

Tampilan Menu Tab dan List Android

01.16
Aplikasi Menu Tab merupakan aplikasi dasar tentang tampilan aplikasi android khususnya  menu tab seperti yang sering terdapat pada aplikasi adroid. Adapun yang dimaksud menu tab yaitu tampilan menu umum yang dibagi kedalam beberapa layar, seperti pada aplikasi ini terdapat tiga tab atau layar. Adapun tab yang dimaksud yaitu Arist, Playlist, dan Song. Berikut tampilan hasil aplikasi.
       Berikut dijelaskan mengenai cara pembuatan aplikasi. Pertama kali buat project baru, setelah selesai membuat project baru maka secara otomatis akan di-create File xml yang berada dalam folder res(layout/values), File java berada dalam folder src, File generate java File (R.java) berada pada folder gen, serta File AndroidManifest.xml. Pertama akan dijelaskan untuk file class.java.
a.       Utama_activity
Utama_activity merupakan class basic activity yang akan memanggil main.xml dan menghubungkan komponen-komponen yang digunakan pada main.xml. Pada class ini juga terdapat perintah untuk membuat menu tab, pemanggilan class ArtistsActivity, PlaylistActivity, dan SongsActivity. Untuk lebih jelasnya dapat dilihat pada source code berikut.

Utama_activity.java
package com.appmenutab;
import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;
public class Utama_activity extends TabActivity {
      @Override
public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);
      Resources res = getResources();
      TabHost tabHost = getTabHost();
      TabHost.TabSpec spec;
      Intent intent;

      intent = new Intent().setClass(this, ArtistActivity.class);
      spec = tabHost.newTabSpec("Artist").setIndicator("Artist",
      res.getDrawable(R.drawable.ic_tab_artist)).setContent(intent);
      tabHost.addTab(spec);

       intent = new Intent().setClass(this, PlaylistActivity.class);
      spec = tabHost.newTabSpec("PlayList").setIndicator("PlayList",
      res.getDrawable(R.drawable.ic_tab_albums)).setContent(intent);
       tabHost.addTab(spec);

      intent = new Intent().setClass(this, SongsActivity.class);
      spec = tabHost.newTabSpec("Songs").setIndicator("Songs",
      res.getDrawable(R.drawable.ic_tab_songs)).setContent(intent);
      tabHost.addTab(spec);
      tabHost.setCurrentTab(2);

      }
}

b.      ArtistActivity
ArtistsActivity merupakan class activity yang digunakan sebagai layout user interface dari isi menu tab Artist. Class ArtistActivity merupakan class dari menu tab artist yang berisikan daftar artis yang ditampilkan menggunakan list. Dimana class ini nantinya akan dipanggil oleh class Utama_activity. Berikut pengglan kode program dari ArtistActivity.
ArtistActivity.java
package com.appmenutab;

import android.app.Activity;
import android.app.ListActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.TextView;

public class ArtistActivity extends ListActivity {
      String items[] = { "D'masiv", "Drive", "Adera", "Kotak", "Dewa 19",
                  "Sammy", "Lobow", "Kerispatih", "Andra", "Kenny G",
                  "Bruno Mars" };

      public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setListAdapter(new ArrayAdapter<String>(this,
                        android.R.layout.simple_list_item_1, items));
      }
}


c.       PlaylistActivity
PlaylistActivity merupakan class activity yang digunakan sebagai layout user interface dari isi menu tab Playlist. Class PlaylistActivity merupakan class dari menu tab playlist yang berisikan daftar playlist lagu yang ditampilkan menggunakan list. Dimana class ini nantinya akan dipanggil oleh class Utama_activity. Berikut pengglan kode program dari PlaylistActivity.
PlaylistActivity.java
package com.appmenutab;

import android.app.Activity;
import android.app.ListActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.TextView;
import android.widget.ListAdapter;

public class PlaylistActivity extends ListActivity {
String items[] = { "Melukis Bayangmu", "Katakanlah", "Melepasmu",
                  "Bersama Bintang", "Wanita Terindah", "Akulah Dia",
                  "Sedang apa", "Diam Tanpa Kata", "Di Antara Kalian",
                  "Akhirnya kumenemukanmu", "Apa Salahku" };

      public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setListAdapter(new ArrayAdapter<String>(this,
                        android.R.layout. simple_list_item_1, items));

      }
}

d.      SongsActivity
SongsActivity merupakan class activity yang digunakan sebagai layout user interface dari isi menu tab Songs. Class SongsActivity merupakan class dari menu tab songs yang berisikan daftar lagu yang ditampilkan menggunakan list. Dimana class ini nantinya akan dipanggil oleh class Utama_activity. Berikut pengglan kode program dari SongsActivity.
SongsActivity.java
package com.appmenutab;

import android.app.Activity;
import android.app.ListActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.TextView;

public class SongsActivity extends ListActivity {
      String items[] = { "Melukis Bayangmu", "Katakanlah", "Bukan Rahasia",
                  "Roman Picisan", "Pangeran Cinta", "Energi",
                  "Garuda  didadaku","Melepasmu", "Bersama Bintang",
                  "Wanita Terindah", "Akulah Dia","Sedang apa",
                  "Diam Tanpa Kata", "Di Antara Kalian",
                  "Akhirnya kumenemukanmu", "Apa Salahku",
                  "PErempuan Paling cantik", "Aku tetaplah aku", "Angin",
                  "Bayang", "Cemburu", "Bukan Rahasia","Roman Picisan",
                  "Pangeran Cinta", "Energi", "Garuda didadaku" };

      public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setListAdapter(new ArrayAdapter<String>(this,
                        android.R.layout.simple_list_item_1, items));

      }
}

Diatas sudah dijelaskan mengenai class yang terlibat pada aplikasi. Berikut akan dijelaskan mengenai file *.xml yang berfungsi menangani segala jenis style pada tampilan aplikasi.
e.       main.xml
File main.xml merupakan File default yang terdapat dalam folder res/layout yang merupakan user interface awal dari aplikasi menu tab. Berikut merupakan source code dari File main.xml.
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"
        android:padding="5dp"
        android:background="@drawable/background">
        <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"
            android:padding="5dp" />
    </LinearLayout>
</TabHost>

f.       Membuat folder drawable dalam folder res. Dalam folder drawable yang telah dibuat, masukkan icon image untuk tampilan tab, dan membuat 3 File xml yaitu ic_tab_artists, ic_tab_albums, dan ic_tab_songs yang nantinya akan digunakan untuk memanggil icon image untuk tampilan tab.
·         ic_tab_artist.xml
ic_tab_artists merupakan File xml yang terdapat perintah untuk untuk memanggil 2 icon untuk tampilan tab Artist, yaitu icon warna abu dan putih yang berfungsi merubah warna ketika tab diklik. Berikut penggalan programnya.
Ic_tab_artist.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/music_artist_a"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/music_artist" />
</selector>
·         ic_tab_albums.xml
ic_tab_albums merupakan File xml yang terdapat perintah untuk untuk memanggil 2 icon untuk tampilan tab Playlist, yaitu icon warna abu dan putih yang berfungsi merubah warna ketika tab diklik. Berikut penggalan programnya.
Ic_tab_albums.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/music_list"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/music_list_a" />
</selector>
·         ic_tab_songs.xml
ic_tab_songs merupakan File xml yang terdapat perintah untuk untuk memanggil 2 icon untuk tampilan tab Songs, yaitu icon warna abu dan putih yang berfungsi merubah warna ketika tab diklik. Berikut penggalan programnya.
Ic_tab_songs.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/music_file_a"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/music_file" />
</selector>

g.      File AndroidManifest
File AndroidManifest diperlukan oleh setiap aplikasi android, File ini berada pada folder root aplikasi. File ini mendeskripsikan variable global dari paket aplikasi yang kita gunakan. Di dalam File AndroidManifest inilah berisi semua pendefinisian semua hal-hal yang dibutuhkan pada aplikasi MenuTab ini. Untuk lebih jelasnya, berikut dibawah merupakan source code dari File AndroidManifest.
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.appmenutab" android:versionCode="1" android:versionName="1.0">
      <application android:icon="@drawable/icon" android:label="@string/app_name">
      <activity android:name=".Utama_activity" android:label="@string/app_name">
      <intent-filter>
            <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
      </activity>
      <activity android:name=".ArtistActivity" android:label="@string/app_name"
                  android:theme="@android:style/Theme.NoTitleBar">
      </activity>
      <activity android:name=".SongsActivity" android:label="@string/app_name"
                  android:theme="@android:style/Theme.NoTitleBar">
            </activity>
            <activity android:name=".PlaylistActivity" android:label="@string/app_name"
                  android:theme="@android:style/Theme.NoTitleBar">
            </activity>
      </application>
      <uses-sdk android:minSdkVersion="9" />

</manifest>


1 komentar:

 
Toggle Footer