Laporan JOB 7 Silvia

LAPORAN HASIL PRAKTEK

PEMOGRAMAN PERANGKAT BERGERAK

Jobsheet7

DOSEN PEMBIMBING

SRI NOFRI WIHANDARI S,Pd M.Pd T

DISUSUN OLEH

SILVIA NADIVA

(16214049)

PRODI D2 TEKNIK ELEKTRONIKA

AKADEMI KOMUNITAS NEGERI PADANG PARIAMAN

PENDIDIKAN DILUAR DOMISILI FAKULTAS TEKNIK

UNIVERSITAS NEGERI PADANG

2017

USER INTERFACE

Layout Manager 

Untuk meletakan komponen (view) pada layar, android menggunakan layout manager. Karena ukuran layar device Android sangat beragam, tidak ada peletakan posisi widget secara akurat per pixel.

Terdapat empat jenis layout manager yang memiliki fungsi  masing-masing. LinearLayout, TableLayout, RelativeLayout dan FrameLayout. Berikut akan dibahas lebih rinci untuk setiap layout. 

 1. Relative Layout
RelativeLayout mengatur posisi secara relatif berdasarkan posisi widget yang lain atau parentnya. 

Untuk layout_width dan layout_height ada dua pilihan: match_parent (view berusaha sebesar parent) dan wrap_content (view hanya berusaha sebesar content yang berada di dalamnya). Sedangkan padding menyatakan jarak antara pinggir layar dengan komponen.

Perhatikan penggunaan atribut layout_toRightOf  yang menyatakan bahwa EditText berada disebelah kanan label.  Sedangkan atribut layout_baseLine digunakan agar TextView dan EditText  aligned. Jika layout_baseLine dihapus efeknya akan sebagai berikut (Text View terlalu tinggi posisinya):

Beberapa atribut lain yang mengatur posisi widget dibandingkan dengan widget lain adalah:

• android:layout_above
• android:layout_below
• android:layout_toLeftOf
• android:layout_toRightOf.

Untuk mengatur posisi ada tambahan lima atribut: android: layout_alignTop, android:layout_alignBottom, android:layout_alignLeft, android:layout_alignBaseline

Widget juga dapat diatur berdasarkan gravity android:layout_gravity ada beberapa pilihan untuk gravity ini: left, right, center_horizontal, center_vertical, bottom, top.  Gravity ini juga berlaku untuk layout manager yang lain.

 2. Table Layout
Untuk memilih layout manager, selain dengan cara manual dapat juga ditentukan membuat layout (File > New > Other > Android XML Layout File). Saat muncul dialog berikut, pilih Root Element sebagai TableLayout.

TableLayout meletakan komponen dalam bentuk tabel (baris dan kolom), mirip seperti Table yang digunakan di HTML.  Pengguna mendefinisikan baris dengan tag <TableRow> dan sistem secara otomatis mendefinisikan kolomnya.

3. Frame Layout

Framelayout digunakan untuk menampilkan satu komponen dalam satu layar. Jika ada lebih dari satu widget, maka akan ditampilkan secara bertumpuk, walaupun posisi widget dapat diatur dengan gravity.  Layout lain bias ditambahkan sebagai child di dalam frame layout.

1.  Buat project baru dengan nama FrameLayout

2. Sesuaikan source code main.xmlnya sebagai berikut:

3. Copykan gambar ke folder res>drawable

4.Sesuaikan source code FrameLayoutIsurActivity.java

 

5. Hasilnya adalah seperti berikut:

4. Linear Layout

Berikut adalah contoh linear layout dengan satu textview dan satu button.

1.  Buat project baru dengan nama LinearLayout

2. Sesuaikan source code main.xmlnya sebagai berikut:

  <?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/scroller"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true"
    tools:context=".MainActivity" >
<LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/button1"
        android:text="Button" />
</RelativeLayout>

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />   
     <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
     <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
    <Button
        android:id="@+id/button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
    <Button
        android:id="@+id/button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>
</ScrollView>

3.Sesuaikan source code LinearLayoutActivity.java sebagai berikut:

  package linear.layout;

import android.app.Activity;
import android.os.Bundle;

public class LinearLayoutActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

 

 

4. Hasilnya sebagai berikut:

 Secara horizontal

Secara vertical

5. Scroll View

Dengan scrollview,  layout seolah-olah memiliki layar yang lebih luas. Pengguna dapat melakukan scroll. Scrollview hanya mempunyai satu child dan umumnya adalah LinearLayout.  Scrollview hanya dapat melakukan vertical scrolling, gunakan HorizontalScrollView untuk layout yang dapat discroll secara horizontal.

Jangan gunakan Listview bersama layout ini karena listview telah memiliki mekanisme scrolling tersendiri.

6. Kombinasi Layout

1.  Buat project baru dengan nama KombinasiLayout

2. Sesuaikan source code main.xmlnya sebagai berikut:

3.Sesuaikan source code KombinasiLayoutActivity.java sebagai berikut:

 

4. Hasilnya sebagai berikut:

TERIMA KASIH