Minggu, 05 Mei 2013

MEMBUAT APLIKASI SEDERNA ANDROID DENGAN OnClike

SHARE ILMU

MEMBUAT APLIKASI SEDERNA ANDROID DENGAN OnClike

Mungkin sebagian dari kita masi bingung dengan pembuatan aplikasi android dan masih awam dengan hal tersebut. Di sini saya ingin membagi ilmu tentang pembuatan perpindahan activity layout pada pembuatan aplikasi android dengan sederhana  yang menggunakan fungsi dari "OneClick"


contoh gambar.




Cara kerja fungsi dari gambar di atas adalah :
  • apabila tab 2 di tekan maka layout 1 akan berpindah ke layout 2
  • jika tab 3 di tekan maka layout 1 akan berpindah ke layout 3
begitu juga sebaliknya.

langkah memulai membuat layout pada eclipe :
1.persiapkan Android project dengan nama "Onclike"



cara membuat botton diatas bisa dengan cara drag  dari  Form widgets atau dengan mengetikan kode xml nya di layout1.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" >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView1"
        android:layout_marginTop="112dp"
        android:layout_toRightOf="@+id/imageView1" >
    </TableRow>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="247dp"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/tableRow1"
        android:layout_centerHorizontal="true"
        android:text="Coba fungsi OneClick1"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/ic_launcher" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:onClick="layout2"
        android:text="Tab 2" />

    <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_alignRight="@+id/textView1"
        android:onClick="layout3"
        android:text="Tab 3" />

</RelativeLayout>


tampilan dari xml di atas

membuat layout baru dengan nama layout2 dan layout3.
pada folder res/layout > klik kanan New. > Other








dan masukan kode xml nya sebagai berikut :

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

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView1"
        android:layout_marginTop="112dp"
        android:layout_toRightOf="@+id/imageView1" >
    </TableRow>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="247dp"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/tableRow1"
        android:layout_centerHorizontal="true"
        android:text="Coba fungsi OneClick2"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <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_alignRight="@+id/textView1"
        android:onClick="layout3"
        android:text="Tab 3" />

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="14dp"
        android:src="@drawable/ic_launcher" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/imageButton1"
        android:onClick="layout1"
        android:text="Tab 1" />

</RelativeLayout>


dan ini tampilan dari kode xml di atas


dan yang terakhir layout 3 pembuatannya sama seperti layout ke2 di atas "hanya pada layout namenya di ubah menjadi layout3






dan kode xml untuk layout yang ke 3 :

<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=".Layout3Activity" >
 <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView1"
        android:layout_marginTop="112dp"
        android:layout_toRightOf="@+id/imageView1" >
    </TableRow>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="247dp"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/tableRow1"
        android:layout_centerHorizontal="true"
        android:text="Coba fungsi OneClick3"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/ic_launcher" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_centerVertical="true"
        android:onClick="layout1"
        android:text="Tab 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:onClick="layout2"
        android:text="Tab 2" />

</RelativeLayout>

dan gambar layoutnya :


layoutnya suda .sekarang kita buat untuk memanggil button tersebut di MainActivity.java

dengan cara buka folder rsc/MainActivity.java

tampilannya adalah sebagai berikut :


dan inilah isi dari MainActivity sesuai gambar :

package com.example.oneclick;

import com.example.oneclick.R;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
public class MainActivity extends Activity {

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

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

public void layout2(View view){
setContentView(R.layout.layout2);
}
public void layout3(View view){
setContentView(R.layout.layout3);
}
public void layout1(View view){
setContentView(R.layout.layout1);
}
}
__________________________________________________________________
Dan ini adalah manifest.beserta isinya sesuaikan dengan yang anda buat.



dan isinya :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.oneclick"
    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.example.oneclick.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
           </application>

</manifest>

___________________
Dan yang terakhir adalah isi dari R.java


isi dari R.java :


/* AUTO-GENERATED FILE.  DO NOT MODIFY.
 *
 * This class was automatically generated by the
 * aapt tool from the resource data it found.  It
 * should not be modified by hand.
 */

package com.example.oneclick;

public final class R {
    public static final class attr {
    }
    public static final class dimen {
        /**  Default screen margins, per the Android Design guidelines. 

         Customize dimensions originally defined in res/values/dimens.xml (such as
         screen margins) for sw720dp devices (e.g. 10" tablets) in landscape here.
    
         */
        public static final int activity_horizontal_margin=0x7f040000;
        public static final int activity_vertical_margin=0x7f040001;
    }
    public static final class drawable {
        public static final int ic_launcher=0x7f020000;
    }
    public static final class id {
        public static final int action_settings=0x7f080006;
        public static final int button1=0x7f080004;
        public static final int button2=0x7f080005;
        public static final int imageButton1=0x7f080003;
        public static final int imageView1=0x7f080001;
        public static final int tableRow1=0x7f080000;
        public static final int textView1=0x7f080002;
    }
    public static final class layout {
        public static final int layout1=0x7f030000;
        public static final int layout2=0x7f030001;
        public static final int layout3=0x7f030002;
    }
    public static final class menu {
        public static final int layout3=0x7f070000;
        public static final int main=0x7f070001;
    }
    public static final class string {
        public static final int action_settings=0x7f050001;
        public static final int app_name=0x7f050000;
        public static final int hello_world=0x7f050002;
        public static final int title_activity_layout3=0x7f050004;
        public static final int title_activity_main=0x7f050003;
    }
    public static final class style {
        /** 
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    

            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        

        Base application theme for API 11+. This theme completely replaces
        AppBaseTheme from res/values/styles.xml on API 11+ devices.
    
 API 11 theme customizations can go here. 

        Base application theme for API 14+. This theme completely replaces
        AppBaseTheme from BOTH res/values/styles.xml and
        res/values-v11/styles.xml on API 14+ devices.
    
 API 14 theme customizations can go here. 
         */
        public static final int AppBaseTheme=0x7f060000;
        /**  Application theme. 
 All customizations that are NOT specific to a particular API-level can go here. 
         */
        public static final int AppTheme=0x7f060001;
    }
}













sedikit share dari saya.  sekian terimakasih.




thax kepada Dyan Angraini yang telah membantu saya dalam hal ini :)