Tutorial membuat Scrolling Text menggunakan Android Studio

Oke kali ini kita akan membuat project scrolling text di android studio

Silhkan teman teman ikuti langkahnya:

• Buka software android studio
• Buat Project baru dengan aplikasi name "ScrollingText"
• Company name disesuaikan android.example.com
• Phone and tablet minimum SDK pilih API15 : Android 4.0.3 IceCreamSandwich agar compitable dengan semua versi android (karena sekarang minim2nya menggunakan 4.4 KitKat)
• Template gunakan “Empty Activity”
• Centang kedua kolom (Generate layout file & backward compability) klik finish.
•  Buka activity_main.xml lalu cek tab text untuk melihat kode xml.
• Tambahkan elemen “TextView” diatas “TextView(Hello World)”.
• Lalu tambahkan atribut2 berikut ke TextView yang baru :

<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/white"

    android:textStyle="bold" />

• Arahkan kursor ke Article Title untuk membuat atribut di string.xml nya lalu ubah valuenya ke article_title.
•  Arahkan kursor ke 10dp untuk membuat atribut di dimens.xml nya lalu ubah valuenya ke padding_reguler.
• Tambahkan elemen TextView(3) kembali diatas TextView(Hello World) dan dibawah TextView yang telah anda buat barusan kita sebut saja TextView(2).
• Lalu ketikan atribut2 berikut ke dalam TextView(3) yang baru.

<TextView

    android:id="@+id/article_subheading"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:layout_below="@id/article_heading"

    android:padding="@dimen/padding_regular"

    android:text="Article Subtitle"

    android:textAppearance="@android:style/TextAppearance" />

•  Perhatikan android:padding langsung memanggil padding_regular yang berada di dimens.xml yaitu berisi “10dp”.
• Arahkan kursor ke “Artikel Subtitle” untuk membuat atribut di string.xml nya lalu ubah valuenya ke artikel_subtitle.
• Ubah isi TextView(Hello world), dengan atribut-atribut ini :

<TextView

    android:id="@+id/article"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:lineSpacingExtra="5sp"

    android:text="@string/article_text" />

• Arahkan kursor ke “5sp” untuk membuat atribut di dimens.xml nya lalu ubah valuenya ke line_spacing.
• Expand  App > res > values buka string.xml.
• Masukan nilai string untuk “article_title” dan “article_subtitle” dengan judul atau subjudul yang sudah anda sediakan (saya disini menggunakan artikel dari githubnya).
• “article_text” diisi dengan artikel yang telah anda siapkan juga.

              Jika kalian sudah mengikuti tutorial diatas kode “activity_main.xml” akan seperti 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/white"

        android:textStyle="bold" />

    <TextView

        android:id="@+id/article_subheading"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@id/article_heading"

        android:padding="@dimen/padding_regular"

        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:lineSpacingExtra="@dimen/line_spacing"

            android:text="@string/article_text" />

</RelativeLayout>

 
//Menambahkan tautan WEB agar jika ada link di artikel kalian tersebut android bisa langsung meresponnya ke link yang dituju.

• Tambahkan atribut berikut kedalam TextView(article)

android:autoLink="web"

•  Tambahkan ScrollView di antara TextView article_subheading dan TextView artikel. Saat Anda memasukkan atribut at the end, and presents the android:layout_width and android:layout_height dengan saran. Pilih wrap_content dari saran untuk kedua atribut. Kode sekarang harus terlihat seperti 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/white"

        android:textStyle="bold" />

    <TextView

        android:id="@+id/article_subheading"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@id/article_heading"

        android:padding="@dimen/padding_regular"

        android:text="@string/article_subtitle"

        android:textAppearance="@android:style/TextAppearance" />

    <ScrollView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@id/article_subheading">

        <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" />

    </ScrollView>

</RelativeLayout>

Selanjutnya kita menambahkan button “AddComment” kedalam scrollview. Langkah – langkahnya sebagai berikut :

• Tambahkan Linier layout kedalam ScrollView dengan atribut sebagai berikut

<LinearLayout

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:orientation="vertical">

•  Lanjut dengan menambahkan button di bawah TextView(article_text) dengan atribut 

<Button

    android:id="@+id/button"

    android:layout_width="139dp"

    android:layout_height="wrap_content"

    android:text="@string/add_comment" />

•  Tutup Linier layout diatas tutupan ScrollView

    </LinearLayout>

</ScrollView>

Kenapa kita beri Linier Layout dulu jika untuk hanya menambahan button ke dalam scroll view?

Karena Linier Layout menyatukan semua objek, jadi semua elemen textview dan button berada dalam Linier Layout yang Linier Layout sendiri berada dalam Scroll view, sehingga jika kita scroll kebawah semua elemen seperti text view dan button ikut tersecroll.

                  Berikut ini adalah kode solusi dari penambahan button dan linier layout

<?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/white"

        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="@dimen/padding_regular"

                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="139dp"

                android:layout_height="wrap_content"

                android:text="@string/add_comment" />

        </LinearLayout>

    </ScrollView>

</RelativeLayout>

Hasil :