Simple Android Window part-II “Tab View”

Posted: November 29, 2010 in Android
Tags: , , ,

Bosan dengan tampilan “Hello World” pas pertama kali buat aplikasi, oke…kita akan coba sesuatu yang sedikit lebih menantang.

yang masih ingin mencoba yang simple, nih linknya…………

anda yang pernah memakai / mungkin hanya melihat Android punya temen, pasti tidak asing dengan tampilan “Tab” pada aplikasi yang dibuka.

kita akan buat aplikasi Simple Tab dan view Gallery Android.

Langkah-langkahnya sebagai berikut :

  1. Buat Project Android anda
  2. Set Main Class windowandroid main class digunakan sebagai main project pada aplikasi anda…
    /*
     * To change this template, choose Tools | Templates
     * and open the template in the editor.
     */
    
    package org.me.windowandroid;
    
    import android.app.TabActivity;
    import android.content.Intent;
    import android.content.res.Resources;
    import android.os.Bundle;
    import android.widget.TabHost;
    
    /**
     *
     * @author kurniawandwi
     */
    public class windowandroid extends TabActivity {
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
    
            Resources res = getResources(); // Berfungsi untuk mendapatkan resources Drawable
            TabHost tabHost = getTabHost();  // The activity TabHost
            TabHost.TabSpec spec;  // Resusable TabSpec for each tab
            Intent intent;  // Reusable Intent for each tab
    
            // Create an Intent to launch an Activity for the tab (to be reused)
            intent = new Intent().setClass(this, window1.class);
    
            // Initialize a TabSpec for each tab and add it to the TabHost
            spec = tabHost.newTabSpec("senyum").setIndicator("Senyum",res.getDrawable(R.drawable.ic_window1))
    .setContent(intent);
            tabHost.addTab(spec);
    
            // Do the same for the other tabs
            intent = new Intent().setClass(this, window2.class);
            spec = tabHost.newTabSpec("salam").setIndicator("Salam",res.getDrawable(R.drawable.ic_window2))
    .setContent(intent);
            tabHost.addTab(spec);
    
            intent = new Intent().setClass(this, window3.class);
            spec = tabHost.newTabSpec("sapa").setIndicator("Sapa",res.getDrawable(R.drawable.ic_window3))
    .setContent(intent);
            tabHost.addTab(spec);
    
            tabHost.setCurrentTab(0);
        }
    
    }
    

  3. Buat Activity pada AndroidManifest.xml
    <!--?<span class="hiddenSpellError" pre=""-->xml version="1.0" encoding="UTF-8"?>
    xmlns:android="http://schemas.android.com/apk/res/android" package="org.me.windowandroid">
        <uses-permission android:name="android.permission.INTERNET" />
        <application>
             <activity android:name=".windowandroid" android:label="Kurnix Apps 1" android:theme="@android:style/Theme.NoTitleBar">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN"/>
                    <category android:name="android.intent.category.LAUNCHER"/>
                </intent-filter>
            </activity>
            <activity android:name=".window1">
    	</activity>
            <activity android:name=".window2">
    	</activity>
            <activity android:name=".window3">
    	</activity>
        </application>
    </manifest>
    
  4. Masukkan xml setting tabHost yang digunakan terdapat pada folder Resources/layout/main.xml
    <!--?<span class="hiddenSpellError" pre=""-->xml version="1.0" encoding="utf-8"?>
    xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
    
       <WebView
            android:id="@+id/webview"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:numColumns="auto_fit"
            android:verticalSpacing="10dp"
            android:horizontalSpacing="10dp"
            android:stretchMode="columnWidth"
            android:gravity="center"
        />
        <GridView
            android:id="@+id/gridview"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:columnWidth="90dp"
            android:numColumns="auto_fit"
            android:verticalSpacing="10dp"
            android:horizontalSpacing="10dp"
            android:stretchMode="columnWidth"
            android:gravity="center"
        />
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp" >
            <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>
    
    
  5. buat folder drawable pada folder Resources, folder ini berfungsi untuk memasukkan resource yang anda butuhkan , antara lain gambar, xml file dll.
  6. masukkan beberapa file ke dalam folder drawable yang telah anda buat, beberapa gambar antara lain :

  7. Buat xml file, dan masukkan pada folder /drawable, untuk mengkoordinir tab yang dibuat serta resources yang digunakan.
    – ic_window1.xmlaa

    <?xml version="1.0" encoding="utf-8"?>
    xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- When selected, use grey -->
        <item android:drawable="@drawable/senyum_c"
              android:state_selected="true" />
        <!-- When not selected, use white-->
        <item android:drawable="@drawable/senyum_g" />
    
    </selector>
    

    – ic_window2.xml

    <?xml version="1.0" encoding="utf-8"?>
    xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- When selected, use grey -->
        <item android:drawable="@drawable/salam_c"
              android:state_selected="true" />
        <!-- When not selected, use white-->
        <item android:drawable="@drawable/salam_g" />
    
    </selector>
    

    -ic_window3.xml

    <?xml version="1.0" encoding="utf-8"?>
    xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- When selected, use grey -->
        <item android:drawable="@drawable/sapa_c"
              android:state_selected="true" />
        <!-- When not selected, use white-->
        <item android:drawable="@drawable/sapa_g" />
    </selector>
    
  8. Buat Class baru lagi bernama window1.java, terdapat pada Source package
    package org.me.windowandroid;
    
    import android.app.Activity;
    import android.content.Context;
    import android.os.Bundle;
    import android.view.*;
    import android.widget.*;
    import android.widget.AdapterView.OnItemClickListener;
    
    /**
     *
     * @author kurniawandwi
     */
    public class window1 extends Activity {
    
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.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(window1.this, "Gambar Percobaan.." + position, Toast.LENGTH_SHORT).show();
                }
            });
        }
    
        public class ImageAdapter extends BaseAdapter {
    
            private Context mContext;
    
            public ImageAdapter(Context c) {
                mContext = c;
            }
    
            public int getCount() {
                return mThumbIds.length;
            }
    
            public Object getItem(int position) {
                return null;
            }
    
            public long getItemId(int position) {
                return 0;
            }
    
            // create a new ImageView for each item referenced by the Adapter
            public View getView(int position, View convertView, ViewGroup parent) {
                ImageView imageView;
                if (convertView == null) {  // if it's not recycled, initialize some attributes
                    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(mThumbIds[position]);
                return imageView;
            }
            // Referansi Gambar yang diambil pada Resources/drawable/
            private Integer[] mThumbIds = {
                R.drawable.img0, R.drawable.img1,
                R.drawable.img2, R.drawable.img3,
                R.drawable.img4, R.drawable.img5,
                R.drawable.img6, R.drawable.img7,
                R.drawable.img8, R.drawable.img9,
                R.drawable.img10, R.drawable.img11,
                R.drawable.img12, R.drawable.img13,
                R.drawable.img14
            };
        }
    }
    
  9. Buat Class baru lagi bernama window2.java, terdapat pada Source package
    package org.me.windowandroid;
    
    import android.app.Activity;
    import android.app.ListActivity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.AdapterView.OnItemClickListener;
    import android.widget.ArrayAdapter;
    import android.widget.ListView;
    import android.widget.TextView;
    import android.widget.Toast;
    
    /*
     * To change this template, choose Tools | Templates
     * and open the template in the editor.
     */
    
    /**
     *
     * @author kurniawandwi
     */
    public class window2 extends ListActivity {
        @Override
        public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
    
          setListAdapter(new ArrayAdapter(this, R.layout.list_item, COUNTRIES));
    
          ListView lv = getListView();
          lv.setTextFilterEnabled(true);
    
          lv.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();
            }
          });
        }
        static final String[] COUNTRIES = new String[] {
        "Gresik","Surabaya","Bangkalan","Lamongan","Sumenep","Pamekasan","Sampang"
      };
    }
    
  10. Buat Class baru lagi bernama window3.java, terdapat pada Source package
    package org.me.windowandroid;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.KeyEvent;
    import android.webkit.WebView;
    import android.webkit.WebViewClient;
    
    /*
     * To change this template, choose Tools | Templates
     * and open the template in the editor.
     */
    
    /**
     *
     * @author kurniawandwi
     */
    
    public class window3 extends Activity {
        WebView mWebView;
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
    
            mWebView = (WebView) findViewById(R.id.webview);
            mWebView.getSettings().setJavaScriptEnabled(true);
            mWebView.loadUrl("http://www.otakku.com");
            mWebView.setWebViewClient(new HelloWebViewClient());
        }
    
        private class HelloWebViewClient extends WebViewClient {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        }
    
        @Override
        public boolean onKeyDown(int keyCode, KeyEvent event) {
            if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
                mWebView.goBack();
                return true;
            }
            return super.onKeyDown(keyCode, event);
        }
    
    }
    

Oke, semua sudah dilakukan, dan silahkan running program anda.

kalau semua berjalan normal , hasilnya akan seperti ini😀

Download SourceCode , secepatnya saya taruh d Menu SourceCode.

Comments
  1. […] Pembahasan Simple Android Window part-II “Tab View” , disalah satu tabnya terdapat window yang menampilkan halaman web. pada artikel kali ini kita akan […]

  2. Mike Pike says:

    I am from the United States and am having a hard time reading the instructions so I was wondering if the source code is available for download anywhere? I see what looks like may be a link but I do not see a way to get it… if it is available how would I get it?🙂

  3. Mike Pike says:

    Thank you very much!!! I actually have subscribed to your website, you have invaluable resources! You are gifted!

    • kurniawandwi says:

      Your welcome bro…😀

      • Mike Pike says:

        I downloaded the source, and when trying to rest run I get a build error of “The Type R is already defined”… I am very new to Android (done iOS stuff though)…

        Is there a trick to getting it to compile?

        Thanks! This project looks incredible!

  4. kurniawandwi says:

    thanks mike for your response…

    first I want ask u
    1. What a Dev GUI tool? netbeans / eclipse
    2. try with a simple source and compile source ? look’s are that running correctly
    try with a simple source from
    http://developer.android.com/resources/tutorials/views/index.html

  5. erlangga says:

    umm kok saya muncul errorrnya avd not compaible. padahal min sdk nya cuma 4. trus avd yg saya gunain API lv 9. knapa masih muncul errorr begitu ya? (fast response please) thx

  6. edy says:

    maaf mas sya mau tny ini webview’y dh d grabbing blm?

  7. benny says:

    Gan…ini yang tab web viewnya bisa di touch screen ga? pnya gw koq gak bisa di click ya bisanya pake cursor atas bawah keyboard doankkk…mohon penjelasannya

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s