## Pendahuluan

Setiap Perangkat Android datang dengan sekumpulan font bawaan: Droid Sans, Droid Sans Mono dan Droid Serif. Mereka didesain agar optimal saat ditampilkan di layar *handphone*. Meski menjadi font bawaan, suatu saat kita tentu ingin menggunakan font tertentu dengan beberapa properti lain. Oleh karena itu tutorial ini akan membahas TextView dan apa saja yang dapat kita lakukan untuk mengaturnya. 

## Atribut Teks

### Typeface

Seperti yang telah kita bahas tadi, Android akan menggunakan font bawaan yang terdiri atas tiga keluarga: `sans`, `monospace`, dan `serif`. Kita dapat mengaturnya dengan atribut `android:typeface` di XML:

```xml
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="This is a 'sans' demo!"
    android:typeface="sans"
/>
```

Seperti ini lah penampakan teks yang *typeface*-nya telah diubah:

![](http://i.imgur.com/BES7g98.png)

### Text Style

Atribut `android:textStyle` dapat dipakai untuk memberikan penekanan di suatu teks. Nilai yang bisa kita berikan adalah `norma`, `bold`, dan `italic`. Kita juga dapat memberikan nilai lebih dari satu misalnya `bold|italic`.

```xml
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="This is bold!"
    android:textStyle="bold"
/>
```

Berikut penampakan teks yang diatur *textStyle*-nya.

![](http://i.imgur.com/BcX2r9O.png)

## Text Size

Atribut `android:textSize` dapat mengatur ukuran suatu font. Nilainya terdiri dari dua bagian yaitu bilangan desimal yang diikuti oleh satuan. Disarankan untuk menggunakan satuan `sp` saat ingin mengatur ukuran font. 

```
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="14sp is the 'normal' size."
    android:textSize="14sp"
/>
```

Hasilnya dapat terlihat pada gambar di bawah:

![](http://i.imgur.com/4pimMzN.png) 

Terlalu banyak jenis ukuran dapat membuat desain menjadi tidak baik. Kumpulan ukuran teks yang telah teruji terdiri atas 12, 14, 16, 20, dan 34. Ikuti panduan google mengenai tipografi [disini](https://www.google.com/design/spec/style/typography.html#typography-styles).

### Text Truncation

Ada beberapa cara untuk memotong teks didalam `TextView`. Pertama, batasi jumlah baris dari teks yang kita masukkan dengan atribut `android:maxLines` dan `android:minLines`:

```xml
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minLines="1"
    android:maxLines="2"
/>
```

Lalu, kita dapat menambahkan atribut `android:ellipsize` agar memberikan tambahan teks `...`.

```xml
<TextView
    ...
    android:ellipsize="end"
    android:singleLine="true"
/>
```

Nilai yang dapat diberikan untuk `ellipsize` adalah:

- `start` - menghasilkan `...bccc`
- `end` - menghasilkan `aaab...`
- `middle` - menghasilkan `aa...cc`
- `marquee`

### Text Color

Atribut `android:textColor` dan `android:textColorLink` dapat memberikan nilai gambar menggunakan kode hexadesimal. 

```xml
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="A light blue color."
    android:textColor="#00ccff"
    android:textColorLink="#8DE67F"
/>
```

Atribut `android:textColorLink` akan mengontrol pewarnaan *hyperlink* yang ada di dalam TextView. Hasilnya akan seperti ini:

![](http://i.imgur.com/UlLSrEG.png)

Kita dapat mengubah warna TextView lewat Java:

```java
// Based on hex value
textView.setColor(Color.setTextColor(Color.parseColor("#000000"));
// based on a color resource file
textView.setTextColor(ContextCompat.getColor(context, R.color.your_color));
// based on preset colors
textView.setColor(Color.setTextColor(Color.RED));
```

### Text Shadow

Ada empat atribut yang dapat kita pakai untuk menentukan *shadow*:

- `android:shadowColor` - Warna shadow menggunakan format yang sama dengan textColor.
- `android:shadowRadius` - Radius dari shadow yang ditentukan menggunakan bilangan desimal.
- `android:shadowDx` - Menentukan *offset* horizontal dari *shadow*.
- `android:shadowDy` - Menentukan *offset* vertikal dari *shadow*.

Bilangan desimal untuk Dx dan Dx tidak memiliki satuan khusus. 

```xml
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="A light blue shadow."
    android:shadowColor="#00ccff"
    android:shadowRadius="2"
    android:shadowDx="1"
    android:shadowDy="1"
/>
```

Hasilnya:

![](http://i.imgur.com/blFEHxX.png)

### Properti Lain-lain

Ada banyak lagi properti teks diantaranya `android:lineSpacingMultiplier`, `android:letterSpacing`, `android:textAllCaps`,  dan `android:includeFontPadding`. Untuk daftar lengkapnya kunjungi dokumentasi [TextView](http://developer.android.com/reference/android/widget/TextView.html#nestedclasses).

## Menampilkan Format HTML

Kita dapat membaca kode HTML di dalam TextView. Berikut contoh kode Java-nya:

```java
TextView view = (TextView)findViewById(R.id.sampleText);
String formattedText = "This <i>is</i> a <b>test</b> of <a href='http://foo.com'>html</a>";
// or getString(R.string.htmlFormattedText);
view.setText(Html.fromHtml(formattedText));
```

Kode di atas akan menapilkan hasil:

![](http://i.imgur.com/PEl2EKl.png)

Perlu diingat bahwa tidak semua tag HTML dapat kita gunakan. Berikut ini daftar tag HTML yang tersedia ([sumber](http://stacktips.com/tutorials/android/display-html-in-android-textview)):

```xml
<a href=”…”> <b>,  <big>, <blockquote>, <br>, <cite>, <dfn>
<div align=”…”>,  <em>, <font size=”…” color=”…” face=”…”>
<h1>,  <h2>, <h3>, <h4>,  <h5>, <h6>
<i>,  <img src=”…”>,  <p>, <small>
<strike>,  <strong>, <sub>, <sup>, <tt>, <u>
```

### Mengatur Font Color HTML

Teks HTML yang kita berikan dapat diatur warnanya secara independen dengan menggunakan tag <font color='#kode_hexa'></font>.

```java
Html.fromHtml("Nice! <font color='#c5c5c5'>This text has a color</font>. This doesn't"); 
```

### Menyimpan Kode HTML yang Panjang

Jika ingin menyimpan teks HTML di dalam `/res/values/strings.xml`, kita harus menggunakan CDATA:

```xml
<?xml version="1.0" encoding="utf-8"?>
<string name="htmlFormattedText">
    <![CDATA[
        Please <a href="http://highlight.com">let us know</a> if you have <b>feedback on this</b> or if 
        you would like to log in with <i>another identity service</i>. Thanks!   
    ]]>
</string>
```

Lalu akses teks ini dengan `getString(R.string.htmlFormattedText)`.

### Autolinking URL

TextView dapat mendeteksi apabila salah satu teks didalamnya merupakan *link* sehingga dapat di klik lalu membukanya di *browser*. Atribut yang perlu ditambahkan adalah `android:autolink`:

```xml
<TextView
     android:id="@+id/custom_font"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:autoLink="all"
     android:linksClickable="true"
/>
```

Hasilnya:

![](http://i.imgur.com/73bwaRm.png)

## Menampilkan Gambar di TextView

Gambar yang tersimpan di folder "drawable" dapat kita tampilkan bersama dengan TextView di beberapa lokasi dengan atribut `android:drawableRight`/`drawableLeft`/`drawableTop`/`drawableBottom` dan `android:drawablePadding`. Contoh:

```xml
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"     
    android:gravity="center"
    android:text="@string/my_contacts"
    android:drawableRight="@drawable/ic_action_add_group"
    android:drawablePadding="8dp"
/>
```

Hasilnya adalah:

![](https://i.imgur.com/LoN8jpH.png)

Beberapa View lain yang merupakan turunan TextView seperti Button, EditText, dan RadioButton juga memiliki kemampuan yang sama. Contoh, kita dapat tambahkan ikon ke EditText:

```xml
<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/user_name"
    android:drawableLeft="@drawable/ic_action_person"
    android:drawablePadding="8dp"
/>
```

![](https://i.imgur.com/GZiIf1C.png)

## Menggunakan Custom Font

Kita dapat menggunakan jenis font apapun yang kita inginkan. Buka [fontsquirrel](http://www.fontsquirrel.com/) untuk sumber font gratisan. Misalnya kita ingin menggunakan [Chantelli Antiqua](http://www.fontsquirrel.com/fonts/Chantelli-Antiqua). 

File font disimpan di folder `assets`. Di Android Studio pilih **File > New > folder > Assets Folder**. Simpan font yang diunduh ke folder `assets/fonts`.

![](http://i.imgur.com/2dxTeGY.png)

Buat dulu XML-nya:

```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
 
    <TextView
            android:id="@+id/custom_font"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="This is the Chantelli Antiqua font."
    />
</LinearLayout>
```

Lalu, atur *custom font* lewat Java (didalam `onCreate()`):

```java
// Baca TextView
TextView txt = (TextView) findViewById(R.id.custom_font);
// Buat objek dari kelas TypeFace dengan membaca aset TTF
Typeface font = Typeface.createFromAsset(getAssets(), "fonts/Chantelli_Antiqua.ttf");
// aplikasikan TypeFace ke TextView
txt.setTypeface(font);
```

Berikut hasilnya:

![](http://i.imgur.com/jlTQpEY.png)

## Menggunakan Span Untuk Mengatur Style Sebagian dari Teks

Jika ingin mengatur *style* sebagian teks saja yang ada di satu TextView kita dapat menggunakan span. Dengan span kita dapat mengatur  warna, typeface, dll. 

Contoh, apabila kita memiliki satu TextView dan ingin agar kata pertama memiliki warna merah dan kata kedua mendapatkan efek coret (*strikethrough*):

![](https://i.imgur.com/X9tKFmv.png)

Kita bisa membuat teks seperti pada gambar di atas dengan kode:

```java
String firstWord = "Hello";
String secondWord = "World!";

TextView tvHelloWorld = (TextView)findViewById(R.id.tvHelloWorld);

// Create a span that will make the text red
ForegroundColorSpan redForegroundColorSpan = new ForegroundColorSpan(
        getResources().getColor(android.R.color.holo_red_dark));

// Use a SpannableStringBuilder so that both the text and the spans are mutable
SpannableStringBuilder ssb = new SpannableStringBuilder(firstWord);

// Apply the color span
ssb.setSpan(
        redForegroundColorSpan,            // the span to add
        0,                                 // the start of the span (inclusive)
        ssb.length(),                      // the end of the span (exclusive)
        Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); // behavior when text is later inserted into the SpannableStringBuilder
                                           // SPAN_EXCLUSIVE_EXCLUSIVE means to not extend the span when additional
                                           // text is added in later

// Add a blank space
ssb.append(" ");

// Create a span that will strikethrough the text
StrikethroughSpan strikethroughSpan = new StrikethroughSpan();

// Add the secondWord and apply the strikethrough span to only the second word
ssb.append(secondWord);
ssb.setSpan(
        strikethroughSpan,
        ssb.length() - secondWord.length(),
        ssb.length(),
        Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

// Set the TextView text and denote that it is Editable
// since it's a SpannableStringBuilder
tvHelloWorld.setText(ssb, TextView.BufferType.EDITABLE);
```

Catatan: Ada tiga kelas yang berbeda yang bisa kita pakai yaitu [SpannableStringBuilder](http://developer.android.com/reference/android/text/SpannableStringBuilder.html) (dipakai di atas) saat menggunakan *mutable spans* dan *mutable text*, [SpannableString](http://developer.android.com/reference/android/text/SpannableString.html) untuk mutable span, dan [SpannedString](http://developer.android.com/reference/android/text/SpannedString.html) untuk *immutable span* dan *immutable text*. 

## Mengatur Span Agar Dapat Diklik

Dalam beberapa kasus kita ingin ada bagian dari suatu teks di TextView yang memiliki tampilan berbeda dan dapat diklik lalu melakukan sebuah aksi. 

```java
// Membaca dan menentukan isi TexTView
TextView textView = (TextView) findViewById(R.id.textView);
textView.setText("Hey @sarah, where did @jim go? #lost");
// Membuat span dengan tampilan berbeda dan dapat diklik
new PatternEditableBuilder().
    addPattern(Pattern.compile("\\@(\\w+)"), Color.BLUE,
       new PatternEditableBuilder.SpannableClickedListener() {
            @Override
            public void onSpanClicked(String text) {
                Toast.makeText(MainActivity.this, "Clicked username: " + text,
                    Toast.LENGTH_SHORT).show();
            }
       }).into(textView);
```

Berikut ini hasilnya:

![](http://i.imgur.com/OHFMMTc.gif)


Sumber: [Codepath](https://guides.codepath.com/android/Working-with-the-TextView)

Bekerja dengan TextView di Android

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Bekerja dengan TextView di Android

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Hour of Code, Belajar Coding Satu Jam

Jangan Lewatkan, Jogja Geek Job Fair #2 Digelar Lagi Minggu Ini

Wawancara Bersama Luri Darmawan Pembuat AKSI IDE

io.js, Framework JavaScript yang Kompatibel dengan Node.js dan npm

CodeCombat, Belajar Coding Sambil Bermain Game

Mengenal Meteor, Framework JavaScript yang Sedang Naik Daun