TUTORIAL SCOLLING TEXT - ANDROID STUDIO

Assalamualaikum Wr. Wb

Pada kesempatan kali ini, saya akan menjelaskan Tutorial untuk Scrolling Text pada aplikasi android studio. Untuk lebih jelasnya langsung saja mari kita bahas disini secara tuntas. Check this out!!!

*Tampilan akhir/sudah jadi akan tampak seperti berikut*

~~~~ Mari kita masuk ke langkah-langkahnya agar jadi tampil seperti diatas. ~~~~

Buka android studio dan buat proyek baru dengan parameter berikut :

Pergi ke file activity_main.xml untuk mengedit desain UI dan source code.

Ada dalam App > res > layout.
Dibagian root pilih layout RelativeLayout dan hapus saja code ConstraintLayout dan TextView bawaan dari sananya.
Tambahkan TextView dibawah RelativeLayout dibagian desain. Dibagian text tambahkan source code berikut :

Ekstrak sumber daya string Article Title pada android:text.

Letakkan kursor di “Article Title” , tekan ALT + ENTER
Pilih Extract String Resource, lalu edit nama sumber dayanya untuk nilai stringnya article_title

Ekstrak sumber daya dimensi untuk string “10dp” untuk membuat entri dimens.xml

Letakkan kursor di hardcore, tekan ALT+ENTER
Pilih extract dimension resource. Edit nama sumber daya padding_regular.

Tambahkan TextView dibawah TextView yang pertama. Dan tambahkan atribut berikut ini :

Ekstrak sumber daya string Article Subtitle pada android:text.

Letakkan kursor di Article Title, tekan ALT + ENTER Pilih Extract String Resource,
Lalu edit nama sumber dayanya untuk nilai stringnya article_subtitle.

Tambahkan lagi TextView yang berada di bawah TextView yang ke 2 . Tambahkan atribut berikut:

Ekstrak sumber daya “Article text” ke article_text.
Ekstrak juga sumber dimensi “5sp” ke line_spacing.
Beralih ke file App > res > values > strings.xml.

Nilai string yang hendak kita masukan itu terserah kepada kita.
Pada article_title ini kita buat sebagai judul
Pada article_subtitle ini itu judul yang kecilya sama saja subjudul.
Pada article_text ini itu isi dari judul yang kita buat… terserah sih ya bebas saja sesuai apa yg dipikirkan oleh kita saja.

Kode solusi activity_main.xml setelah beberapa tahap diatas ^^^

Menambahkan atribut autoLink untuk link aktif.

Tambahkan code atribut android:autoLink=”web” pada TextView article.

Tambahkan ScrollView kedalam desain/text.

Berada diatas TextView article.
Tambahkan code android:layout_below="@id/article_subheading"di ScrollView dan TextView article. Karena ScrollView akan ditempatkan dibawah dari article_subheading.

Akan tampil seperti berikut ketika semuanya sudah sukses dan tidak terjadi error.

Menambahkan Linear Layout kedalam ScrollView.

Linear layout bedara dibawah ScrollView, tapi berada di atas article.
Maka akan tampak code berikut ini :

    <ScrollView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/article_subheading">

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

    <TextView
        android:id="@+id/article"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/article_subheading"
        android:autoLink="web"
        android:lineSpacingExtra="@dimen/line_spacing"
        android:text="@string/article_text" />

    </LinearLayout>

</ScrollView>

Pindahkan TextView article_subheading kedalam LinearLayout tetapi berada di atas dari article.
Hapus atribut :

android:layout_below="@id/article_heading" dari TextView article_subheading, karena sudah berada dalam LinearLayout dan akan bentrok dengan LinearLayout.

Ubahlah atributyang berada di ScrollView :

android:layout_below="@id/article_subheading" menjadi
android:layout_below="@id/article_heading". Karena sekarang ScrollView berada di bawah article_heading.

Penambahan button ADD COMMENT berada di bawah TextView article.

Maka akan tampak seperti ini.

Kode sulusi untuk activity_main.xml (secara keseluruhan dari project ini)

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="MainActivity">

    <TextView
        android:id="@+id/article_heading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:padding="@dimen/padding_regular"
        android:text="@string/article_title"
        android:textAppearance="@android:style/TextAppearance.Large"
        android:textColor="@android:color/holo_orange_light"
        android:textColorHighlight="@color/colorAccent"
        android:textStyle="bold" />

    <ScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/article_heading">

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

            <TextView
                android:id="@+id/article_subheading"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:text="@string/article_subtitle"
                android:textAppearance="@android:style/TextAppearance" />

            <TextView
                android:id="@+id/article"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:autoLink="web"
                android:lineSpacingExtra="@dimen/line_spacing"
                android:text="@string/article_text" />

            <Button
                android:id="@+id/button"
                android:layout_width="169dp"
                android:layout_height="wrap_content"
                android:text="@string/add_comment"
                tools:text="ADD COMMENT" />
        </LinearLayout>
    </ScrollView>
</RelativeLayout>

Sekian dulu untuk tutorial Scrolling Text kali ini. Apabila ada kata kata yang membuat pembaca kesusahan, langsung saja tulis dikolom komentar ya. Semoga bermanfaat untuk semua pembaca nya.

~~~ REGARD'S ~~~

TUTORIAL SCOLLING TEXT - ANDROID STUDIO

Share this