Mobile 18 May 2021 276 views 0 komentar

Latihan 3 Pembuatan Scroll View di Android Studio

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'</code><br /><code class="language-java"> </code><br /><code class="language-java">android {</code><br /><code class="language-java">    ...</code><br /><code class="language-java">}</code><br /><code class="language-java"> </code><br /><code class="language-java">dependencies {</code><br /><code class="language-java">    ...</code><br /><code class="language-java">    implementation 'de.hdodenhof:circleimageview:3.1.0'</code><br /><code class="language-java">}

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

Langkah 2: Konfigurasi Resources

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

<resources></code><br /><code class="language-java">    <string name="app_name">MyViewAndViews</string></code><br /><code class="language-java">    <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></code><br /><code class="language-java">    <string name="content_specs_display">5.0 inches
</code><br /><code class="language-java">    FHD AMOLED at 441ppi
</code><br /><code class="language-java">    2.5D Corning® Gorilla® Glass 4</string></code><br /><code class="language-java">    <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></code><br /><code class="language-java">    <string name="content_specs_battery">2,770 mAh battery
</code><br /><code class="language-java">    Standby time (LTE): up to 19 days
</code><br /><code class="language-java">    Talk time (3g/WCDMA): up to 26 hours
</code><br /><code class="language-java">    Internet use time (Wi-Fi): up to 13 hours
</code><br /><code class="language-java">    Internet use time (LTE): up to 13 hours
</code><br /><code class="language-java">    Video playback: up to 13 hours
</code><br /><code class="language-java">    Audio playback (via headset): up to 110 hours
</code><br /><code class="language-java">    Fast charging: up to 7 hours of use
from only 15 minutes of charging</string></code><br /><code class="language-java">    <string name="stock">Stock hanya 5 buah</string></code><br /><code class="language-java">    <string name="specification">Spesifikasi</string></code><br /><code class="language-java">    <string name="display">Display</string></code><br /><code class="language-java">    <string name="size">Size</string></code><br /><code class="language-java">    <string name="battery">Battery</string></code><br /><code class="language-java">    <string name="seller">Dijual oleh</string></code><br /><code class="language-java">    <string name="my_name">Narenda Wicaksono</string></code><br /><code class="language-java">    <string name="buy">Beli</string></code><br /><code class="language-java">    <string name="dummy_value">$735</string></code><br /><code class="language-java">    <string name="dummy_photos">6 photos</string></code><br /><code class="language-java"></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 {</code><br /><code class="language-java"> </code><br /><code class="language-java">    @Override</code><br /><code class="language-java">    protected void onCreate(Bundle savedInstanceState) {</code><br /><code class="language-java">        super.onCreate(savedInstanceState);</code><br /><code class="language-java">        setContentView(R.layout.activity_main);</code><br /><code class="language-java"> </code><br /><code class="language-java">        if (getSupportActionBar() != null) {</code><br /><code class="language-java">            getSupportActionBar().setTitle("Google Pixel");</code><br /><code class="language-java">        }</code><br /><code class="language-java">    }</code><br /><code class="language-java">}

Kesimpulan

*Update Android Studio 4.1
Selamat mencoba, terima kasih.

Tags Artikel: #Latihan

Bagikan artikel ini:

Komentar (0)

Belum ada komentar. Jadilah yang pertama memberikan tanggapan!

Tinggalkan Komentar