Latihan Penggunaan Layout Android

Sub CPMK :

Mahasiswa dapat membuat tampilan yang dapat di-scroll menggunakan ScrollView.
Mahasiswa dapat membuat tampilan menggunakan LinearLayout.
Mahasiswa dapat membuat tampilan menggunakan FrameLayout.
Mahasiswa dapat membuat tampilan menggunakan TableLayout.
Mahasiswa dapat membuat tampilan menggunakan RelativeLayout.

Alat dan Bahan :

Laptop atau PC dengan Spesifikasi Prosesor minimal Corei5 dan RAM 8 GB
Android Studio
Android Device

Langkah Praktikum :

Buat project baru di android studio, dengan kriteria sebagai berikut :

Nama Project	ViewAndViewGroupApp
Target & Minimal SDK	Phone and Tablet, API Level 21
Tipe Activity	Empty Activity
Language	Kotlin

2. Lalu buka berkas strings.xml di res → values. Sesuaikan isinya dengan seperti ini:

<resources>
    <string name="app_name">Belajar View ViewGroup</string>
    <string name="photos">6 Photos</string>
    <string name="harga_avanza">Rp 228.000.000</string>
    <string name="tipe_avanza">All New Avanza 2022</string>
    <string name="deskripsi_avanza">Mobil Avanza terbaru lebih irit. Memberi kenyamanan lebih kepada keluarga Indonesia. New Avanza dengan grille dan garis desain baru. Semakin elegan dan gagah. Menyajikan spesifikasi yang berbeda. Ubahan mendasar datang dari platform baru yang membuat dimensinya jadi lebih besar.</string>
    <string name="spesifikasi">Spesifikasi</string>
    <string name="ukuran">Ukuran</string>
    <string name="ukuran_avanza">Panjang : 4395 mm,\nlebar : 1730 mm,\nTinggi : 1700 mm</string>
    <string name="kapasitas_tangki">Kapasitas Tangki</string>
    <string name="tangki_avanza">1498 cc</string>
    <string name="mesin">Mesin</string>
    <string name="mesin_avanza">1.5L Petrol Engine, 4 Cylinder 16 Valve</string>
    <string name="fitur_terbaru">Fitur Terbaru</string>
    <string name="fitur_avanza">New Striking Full Dashboard Design,
        \nNew Dynamic Head Unit 9" Display,
        \nPre-Collision System,
        \nBlind Spot Monitoring,
        \nConnected to Find My Car Application</string>
    <string name="dijual_oleh">Dijual oleh</string>
    <string name="toyota_nasmoco_semarang">Toyota Nasmoco Semarang</string>
</resources>

3. Selanjutnya, unduh asset-nya di Asset View dan ViewGroup. Bila telah selesai, ekstrak berkas tersebut dan salin semua asset yang dibutuhkan ke dalam direktori res → drawable.

4. Buka berkas activity_main.xml dan ubah layout utama menjadi seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/activity_main"
    android:background="@color/white"
    tools:context=".MainActivity">

</ScrollView>

5. Kemudian tambahkan layout utama di dalam ScrollView

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/activity_main"
    android:background="@color/white"
    tools:context=".MainActivity">
  
  	<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        
    </LinearLayout>

</ScrollView>

6. Kemudian kita masukkan komponen di dalam LinearLayoutyang sudah ditambahkan sebelumnya.

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/activity_main"
    android:background="@color/white"
    tools:context=".MainActivity">
  
  	<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
      	
      	<FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:src="@drawable/avanza"
                android:scaleType="fitXY"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="8dp"
                android:text="@string/photos"
                android:gravity="center_vertical"
                android:drawablePadding="4dp"
                android:textAppearance="@style/TextAppearance.AppCompat.Small"
                android:background="#4D000000"
                android:textColor="@color/white"
                android:layout_marginStart="16dp"
                android:layout_marginBottom="16dp"
                android:layout_gravity="bottom"
                app:drawableStartCompat="@drawable/ic_collections_white_18dp" />
        </FrameLayout>
        
    </LinearLayout>

</ScrollView>

Tampilan saat ini adalah seperti ini:

7. Selanjutnya, tambahkan textview di bawah FrameLayout, menjadi seperti ini:

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/activity_main"
    android:background="@color/white"
    tools:context=".MainActivity">
  
  	<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
      	
      	<FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:src="@drawable/avanza"
                android:scaleType="fitXY"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="8dp"
                android:text="@string/photos"
                android:gravity="center_vertical"
                android:drawablePadding="4dp"
                android:textAppearance="@style/TextAppearance.AppCompat.Small"
                android:background="#4D000000"
                android:textColor="@color/white"
                android:layout_marginStart="16dp"
                android:layout_marginBottom="16dp"
                android:layout_gravity="bottom"
                app:drawableStartCompat="@drawable/ic_collections_white_18dp" />
        </FrameLayout>
      
      	<TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="32sp"
            android:text="@string/harga_avanza"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="8dp"
            android:textColor="@android:color/black"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/tipe_avanza"
            android:textSize="12sp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/deskripsi_avanza"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            android:lineSpacingMultiplier="1"
            android:textColor="@android:color/black"/>
      	
      	
        
    </LinearLayout>

</ScrollView>

Tampilan saat ini :

8. Setelah menambahkan beberapa textview, selanjutnya kita akan menambahkan tablelayout.

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/activity_main"
    android:background="@color/white"
    tools:context=".MainActivity">
  
  	<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
      
      	<FrameLayout ...>
        <TextView ...>
        <TextView ...>
        <TextView ...>
      
      	<TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/spesifikasi"
            android:textSize="16sp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="8dp"/>
      	
      	<TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp">
            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_marginRight="16dp"
                    android:text="@string/ukuran"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_weight="1"
                    android:text="@string/ukuran_avanza"
                    android:textColor="@android:color/black"/>
            </TableRow>
            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_marginEnd="16dp"
                    android:text="@string/kapasitas_tangki"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_weight="1"
                    android:text="@string/tangki_avanza"
                    android:textColor="@android:color/black"/>
            </TableRow>
            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_marginEnd="16dp"
                    android:text="@string/mesin"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_weight="1"
                    android:text="@string/mesin_avanza"
                    android:textColor="@android:color/black"/>
            </TableRow>
            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_marginEnd="16dp"
                    android:text="@string/fitur_terbaru"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_weight="1"
                    android:text="@string/fitur_avanza"
                    android:textColor="@android:color/black"/>
            </TableRow>
        </TableLayout>
      	
    </LinearLayout>

</ScrollView>

Tampilan saat ini adalah seperti berikut:

9. Kemudian setelah menambahkan tablelayout, kita masukkan viewgroup lagi. Tambahkan relativelayout dan button di bawah TableLayoutmenjadi seperti ini:

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/activity_main"
    android:background="@color/white"
    tools:context=".MainActivity">
  
  	<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
      
      	<FrameLayout ...>
        <TextView ...>
        <TextView ...>
        <TextView ...>
        <TextView ...>
        <TableLayout ...>
          
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/dijual_oleh"
            android:textSize="12sp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="8dp"/>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp">
            <ImageView
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:src="@drawable/toyota"
                android:layout_centerVertical="true"
                android:id="@+id/profile_image"
                android:layout_marginEnd="16dp"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_toEndOf="@id/profile_image"
                android:text="@string/toyota_nasmoco_semarang"
                android:textColor="@android:color/black"
                android:layout_centerVertical="true"/>
        </RelativeLayout>

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            android:text="@string/beli" />
      	
    </LinearLayout>

</ScrollView>

10. Hasil akhir dari kode yang terdapat di activity_main.xml adalah sebagai berikut :

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/activity_main"
    android:background="@color/white"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:src="@drawable/avanza"
                android:scaleType="fitXY"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="8dp"
                android:text="@string/photos"
                android:gravity="center_vertical"
                android:drawablePadding="4dp"
                android:textAppearance="@style/TextAppearance.AppCompat.Small"
                android:background="#4D000000"
                android:textColor="@color/white"
                android:layout_marginStart="16dp"
                android:layout_marginBottom="16dp"
                android:layout_gravity="bottom"
                app:drawableStartCompat="@drawable/ic_collections_white_18dp" />

        </FrameLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="32sp"
            android:text="@string/harga_avanza"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="8dp"
            android:textColor="@android:color/black"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/tipe_avanza"
            android:textSize="12sp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/deskripsi_avanza"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            android:lineSpacingMultiplier="1"
            android:textColor="@android:color/black"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/spesifikasi"
            android:textSize="12sp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="8dp"/>

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp">
            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_marginRight="16dp"
                    android:text="@string/ukuran"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_weight="1"
                    android:text="@string/ukuran_avanza"
                    android:textColor="@android:color/black"/>
            </TableRow>
            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_marginEnd="16dp"
                    android:text="@string/kapasitas_tangki"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_weight="1"
                    android:text="@string/tangki_avanza"
                    android:textColor="@android:color/black"/>
            </TableRow>
            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_marginEnd="16dp"
                    android:text="@string/mesin"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_weight="1"
                    android:text="@string/mesin_avanza"
                    android:textColor="@android:color/black"/>
            </TableRow>
            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_marginEnd="16dp"
                    android:text="@string/fitur_terbaru"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_weight="1"
                    android:text="@string/fitur_avanza"
                    android:textColor="@android:color/black"/>
            </TableRow>
        </TableLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/dijual_oleh"
            android:textSize="12sp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="8dp"/>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp">
            <ImageView
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:src="@drawable/toyota"
                android:layout_centerVertical="true"
                android:id="@+id/profile_image"
                android:layout_marginEnd="16dp"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_toEndOf="@id/profile_image"
                android:text="@string/toyota_nasmoco_semarang"
                android:textColor="@android:color/black"
                android:layout_centerVertical="true"/>
        </RelativeLayout>

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            android:text="@string/beli" />

    </LinearLayout>

</ScrollView>

11. Terakhir, pada MainActivity tambahkan satu baris kode berikut:

supportActionBar?.title = "Avanza 2022"

Sehingga kode yang ada di MainActivity menjadi seperti berikut:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        supportActionBar?.title = "Avanza 2022"
    }
}

12. Sekarang silakan jalankan aplikasinya. Seharusnya hasilnya seperti ini:

Leave a Reply Cancel reply