Latihan 3 Pembuatan Scroll View di Android Studio

Apa itu ScrollView?

Buat satu project android, dengan nama MyViewAndView dengan tipe Empty Activity. Lalu buka berkas build.gradle (Module: app) dan tambahkan satu baris ini di bagian dependecies :

apply plugin: 'com.android.application'
 
android {
    ...
}
 
dependencies {
    ...
    implementation 'de.hdodenhof:circleimageview:3.1.0'
}

Tekanlah Sync Now untuk men-download library dari CircleImageView ke dalam proyek Android Studio kamu. Pastikan ketika melakukan proses tersebut, PC atau laptop terhubung dengan Internet.

Kemudian unduh asetnya di sini. dan salin semua aset yang dibutuhkan ke dalam direktori res → drawable.

Langkah 1: ScrollView Dasar

Selanjutnya buka berkas activity_main.xml pada workspace kamu (res/layout/activity_main.xml), dan ikutin coding seperti di bawah : 

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <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:scaleType="fitXY"
                android:src="@drawable/pixel_google" />
 
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="@style/TextAppearance.AppCompat.Small"
                android:textColor="@android:color/white"
                android:layout_gravity="bottom"
                android:layout_marginStart="16dp"
                android:layout_marginBottom="16dp"
                android:background="#4D000000"
                android:drawablePadding="4dp"
                android:gravity="center_vertical"
                android:padding="8dp"
                android:text="@string/dummy_photos"
                android:drawableStart="@drawable/ic_collections_white_18dp" />
        </FrameLayout>
 
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="8dp"
            android:text="@string/dummy_value"
            android:textSize="32sp" />
 
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="12sp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            android:text="@string/stock" />
 
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp"
            android:lineSpacingMultiplier="1"
            android:text="@string/content_text" />
 
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="12sp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="8dp"
            android:text="@string/specification" />
 
        <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_marginEnd="16dp"
                    android:text="@string/display" />
 
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_weight="1"
                    android:text="@string/content_specs_display" />
            </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:layout_marginEnd="16dp"
                    android:textSize="14sp"
                    android:text="@string/size" />
 
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textSize="14sp"
                    android:text="@string/content_specs_size" />
            </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:layout_marginEnd="16dp"
                    android:textSize="14sp"
                    android:text="@string/battery" />
 
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textSize="14sp"
                    android:text="@string/content_specs_battery" />
            </TableRow>
        </TableLayout>
 
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="12sp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="8dp"
            android:text="@string/seller" />
 
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp">
 
            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/profile_image"
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:layout_centerVertical="true"
                android:layout_marginEnd="16dp"
                android:src="@drawable/photo_2" />
 
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_toEndOf="@+id/profile_image"
                android:text="@string/my_name" />
        </RelativeLayout>
 
        <Button
            android:text="@string/buy"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="16dp" />
    </LinearLayout>
</ScrollView>

Langkah 2: Konfigurasi Resources

dan atur juga resources pada berkas res/values/strings.xml seperti ini : 

<resources>
    <string name="app_name">MyViewAndViews</string>
    <string name="content_text">Google officially announced its much-anticipated Pixel phones;
the Pixel and Pixel XL, on October 4. We attended Google’s London UK event, mirroring the main one taking place in San Francisco, US,
where the firm unwrapped the new Android 7.1 Nougat devices which will apparently usurp Google’s long-standing Nexus series.</string>
    <string name="content_specs_display">5.0 inches
    FHD AMOLED at 441ppi
    2.5D Corning®
Gorilla®
Glass 4</string>
    <string name="content_specs_size">5.6 x 2.7 x 0.2 ~ 0.3 inches 143.8 x 69.5 x 7.3 ~ 8.5 mm</string>
    <string name="content_specs_battery">2,770 mAh battery
    Standby time (LTE): up to 19 days
    Talk time (3g/WCDMA): up to 26 hours
    Internet use time (Wi-Fi): up to 13 hours
    Internet use time (LTE): up to 13 hours
    Video playback: up to 13 hours
    Audio playback (via headset): up to 110 hours
    Fast charging: up to 7 hours of use
from only 15 minutes of charging</string>
    <string name="stock">Stock hanya 5 buah</string>
    <string name="specification">Spesifikasi</string>
    <string name="display">Display</string>
    <string name="size">Size</string>
    <string name="battery">Battery</string>
    <string name="seller">Dijual oleh</string>
    <string name="my_name">Narenda Wicaksono</string>
    <string name="buy">Beli</string>
    <string name="dummy_value">$735</string>
    <string name="dummy_photos">6 photos</string>
</resources>

Langkah 3: Implementasi MainActivity

Selanjutnya setelah selesai, lanjutkan dengan membuka berkas MainActivity.Java dan perbaharui dengan baris-baris di bawah ini :

public class MainActivity extends AppCompatActivity {
  @Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if (getSupportActionBar() != null) {
  getSupportActionBar().setTitle("Google Pixel");
}
}
}

Kesimpulan

*Update Android Studio 4.1
Selamat mencoba, terima kasih.