Android

Latihan 3 : Pembuatan Scroll View di Android Studio

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 Anda. 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.

Selanjutnya buka berkas activity_main.xml pada workspace Anda (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>

 

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\n
    FHD AMOLED at 441ppi\n
    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\n
    Standby time (LTE): up to 19 days\n
    Talk time (3g/WCDMA): up to 26 hours\n
    Internet use time (Wi-Fi): up to 13 hours\n
    Internet use time (LTE): up to 13 hours\n
    Video playback: up to 13 hours\n
    Audio playback (via headset): up to 110 hours\n
    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>

 

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");
        }
    }
}

 

*Update Android Studio 4.1
Selamat mencoba, terima kasih.



0 Comments


Leave a Reply

Scroll to Top