Linear Layout

Layout sendiri memiliki suatu atribut "weight" yang mempengaruhi size atau besar dari element child yang ada di dalamnya terhadap layar dari suatu device.

Contoh XML Linear Layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/to" />
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/subject" />
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="@string/message" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="@string/send" />
</LinearLayout>

Hasilnya:

Relative Layout

Relative Layout adalah jenis layout yang mengatur tata letak child element menggunakan posisi relatif. Mungkin agak sedikit membingungkan, yang dimaksud relatif disini adalah letak suatu child mempunyai ketergantungan dengan child lain atau dengan parent nya.

Kalau masih bingung bisa dicoba sendiri, saya juga bingung jelasinnya. . :D

Beberapa layout properties yang dapat digunakan pada Relative Layout (http://developer.android.com/guide/topics/ui/layout/relative.html) :

android:layout_alignParentTop

If "true", makes the top edge of this view match the top edge of the parent.

android:layout_centerVertical

If "true", centers this child vertically within its parent.

android:layout_below

Positions the top edge of this view below the view specified with a resource ID.

android:layout_toRightOf

Positions the left edge of this view to the right of the view specified with a resource ID.

Contoh XML RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp" >
    <EditText
        android:id="@+id/name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/reminder" />
    <Spinner
        android:id="@+id/dates"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/times" />
    <Spinner
        android:id="@id/times"
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentRight="true" />
    <Button
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/times"
        android:layout_alignParentRight="true"
        android:text="@string/done" />
</RelativeLayout>

Web View

Web View merupakan suatu class yang memungkinkan kita untuk menampilkan suatu halaman web application di dalam android activity, atau dengan kata lain apps milik kita ini menjadi suatu web browser yang menampilkan konten web tertentu yang sudah kita buat. Mungkin penggunaan Web View ini memiliki prinsip yang hampir sama dengan penggunaan Phonegap. 

Biasanya WebView sendiri digunakan ketika kita ingin menampilkan sesuatu dari halaman web kita, dimana halaman itu sangatlah dinamis dan selalu membutuhkan koneksi internet.

Tutorial ini adalah lanjutan dari Hello World Android
Untuk Tutorial Selanjutnya Membuat aplikasi android kalkulator sederhana  

Sekian artikel kali ini. . ^_^ GBU

 

1. Application Name adalah nama dari Apps itu sendiri. (Untuk sekarang kita beri nama HelloWorld)
2. Project Name adalah nama dari project directory yang terdapat pada eclipse. (Secara otomatis akan mengikuti Application Name)
3. Package Name adalah suatu namespace untuk Apps kita (seperti pada Java) dan setiap Apps atau program harus memiliki Package Name yang unik.(Akan di generate secara otomatis com.example.HelloWorld)
4. Minimum Required SDK adalah versi terendah dari android yang di support oleh Apps kita.
5. Target SDK adalah versi tertinggi dari OS android yang di support oleh Apps kita.
6. Compile With adalah platform yang digunakan untuk melakukan compiling terhadap Apps.
7. Theme adalah Android UI Style yang akan digunakan pada Apps kita.

sumber : http://www.quickmeme.com/Programmer/

• Tidak bisa diakses dari jarak jauh. 
• Sulit untuk di deploy pada banyak user karena harus melakukan instalasi. 
• Sulit jika ada update.

• Memiliki Performance yang unggul (karena disesuaikan dengan spesifikasi hardware)
• Tidak membutuhkan waktu pengiriman data dari server ke client atau sebaliknya seperti pada web

• Web compability bisa berbeda, tampilan ke setiap user tergantung dari browser yang digunakan.
• Performa bisa lebih lambat karena mengirimkan data dan melakukan request HTML document
• Dibutuhkan juga sistem keamanan yang tinggi karena sistem terpusat dan banyak orang yang bisa mengaksesnya.

• Terpusat, hanya perlu melakukan install sistem di server (keuntungan untuk developer).
• Bisa diakses oleh user dari jarak jauh, lebih mudah export data menggunakan HTTP protocol dibandingkan dengan protocol lain karena tidak mengalami masalah dengan firewall.

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

directionsDisplay = new google.maps.DirectionsRenderer();

             var marker2 = new google.maps.Marker({
                position : new google.maps.LatLng(-7.810217,110.270995),
                icon : 'https://dl.dropboxusercontent.com/u/47464119/congress.png',
                map : map,
                title : 'tujuan',
            });
            google.maps.event.addListener(marker2, 'click', function(event)
            {
                calcRoute(center,event.latLng)
            });

function calcRoute(start,end) { 
  var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}

directionsDisplay.setMap(map);

<div data-role="page">

     <div data-role="header">

     </div>

     <div data-role="content">                         

     </div>

     <div data-role="footer">

     </div>

</div>

]]>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />      

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

                <div data-role="page" id="page1">

                                <div data-role="header" data-position="fixed" data-theme="d">

                                                <h1>Ini Header</h1>

                                </div>

                                <div data-role="content">

                                                <a href="#page2" data-role="button" data-transition="slide">

                                                                Peta

                                                </a>

                                </div>

                                <div data-role="footer" data-position="fixed" data-theme="d">

                                                <h1>Ini Footer</h1>

                                </div>

                </div>

<div data-role="page" id="page2">

                                <div data-role="header" data-theme="d" data-position="fixed">

                                                <div data-role="navbar" data-iconpos="right">

                                                                <ul>

                                                                                <li><a href="#pagenav" data-icon="info" data-transition="none">Navigation</a></li>

                                                                                <li><a href="#optionNear" data-icon="gear" data-transition="none">Options</a></li>                                  

                                                                </ul>

                                                </div><!-- /navbar -->

                                </div>

                                <div data-role="content" id="map_canvas">       

                                </div>

                                <div data-role="footer" data-theme="d" data-position="fixed">

                                                <div data-role="navbar">

                                                                <ul>

                                                                                <li>

                                                                                                <a href="#">

                                                                                                                <div id="ruteinfo">My Maps</div>

                                                                                                </a>

                                                                                </li>                                       

                                                                </ul>

                                                </div>

                                </div>

                </div>

#map_canvas { width: 100%; height: 90%; padding: 0; position:absolute;}

                $(document).ready(function(){

                                                $(document).on('pageshow', '#page2',function(e,data){

                                                                initialize();

                                                });

                                });

                function initialize()

                                {

                                                var center = new google.maps.LatLng(-7.809069,110.267853);

                                                var mapOptions =

                                                {

                                                                center : center,

                                                                zoom : 14,

                                                                mapTypeId : google.maps.MapTypeId.ROADMAP,

                                                                panControl : false,

                                                                streetViewControl : false,

                                                                mapTypeControl : false,

                                                                navigationControl : false,

                                                }

                                                var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

                                                var marker = new google.maps.Marker({

                                                                position : center,

                                                                map : map,

                                                                title : 'Im Here',

                                                });           

                                                var infoWindow = new google.maps.InfoWindow();

                                                google.maps.event.addListener(marker, 'click', function()

                                                {

                                                                $('#ruteinfo').html(marker.title);

                                                                infoWindow.setContent(marker.title);

                                                                infoWindow.open(map,marker);

                                                });

                                }

                                                var mapOptions =

                                                {

                                                                center : center,

                                                                zoom : 14,

                                                                mapTypeId : google.maps.MapTypeId.ROADMAP,

                                                                panControl : false,

                                                                streetViewControl : false,

                                                                mapTypeControl : false,

                                                                navigationControl : false,

                                                }

                                google.maps.event.addListener(marker, 'click', function()

                                                {

                                                                $('#ruteinfo').html(marker.title);

                                                                infoWindow.setContent(marker.title);

                                                                infoWindow.open(map,marker);

                                                });