Hallo sobat android mania, setelah pada postingan sebelumnya kita telah belajar cara membuat RecyrcleView dan CardView pada kesempatan kali ini mari kita sama-sama belajar cara membuat custom font. Textview dengan custom font.
Kita akan belajar membuat custom font dengan cara menyimpan file-file font yang akan kita pakai di folder assets aplikasi kita.
Kita akan belajar membuat custom font dengan cara menyimpan file-file font yang akan kita pakai di folder assets aplikasi kita.
Prosesnya sangat simple.
Secara garis besar yaitu kita tinggal bikin object TypeFace baru dengan perintah:
TypeFace typeFace =TypeFace.createFromAssets(AssetManager, "namafileDiAasets");
Secara garis besar yaitu kita tinggal bikin object TypeFace baru dengan perintah:
TypeFace typeFace =TypeFace.createFromAssets(AssetManager, "namafileDiAasets");
Kemudian typeface tersebut kita terapkan ke object TextView yang ingin kita ubah jenis fontnya.
Perintahnya
TextView.setTypeFace(typeFace);
Perintahnya
TextView.setTypeFace(typeFace);
Ok langsung saja kita mulai dengan membuat proyek baru.
Buat Project Baru
Buat proyek baru dengan rincian sebagai berikut
Nama app : Custom_Font
Nama package : inyong.contoh.customfobt
Buat proyek baru dengan rincian sebagai berikut
Nama app : Custom_Font
Nama package : inyong.contoh.customfobt
Tambahkan File-file Font
Masuk ke folder app/src/main/ dan buat folder assets jika belum ada.
Kemudian masuk ke folder asssets yang baru saja kita buat kemudian buat folder lagi di dalamnya. Nama foldernya bebas. Dalam contoh ini kita namai foldernya fonts.
Copy file-file font (file berformat ttf) yang akan digunakan ke dalam folder assets/fonts/
Masuk ke folder app/src/main/ dan buat folder assets jika belum ada.
Kemudian masuk ke folder asssets yang baru saja kita buat kemudian buat folder lagi di dalamnya. Nama foldernya bebas. Dalam contoh ini kita namai foldernya fonts.
Copy file-file font (file berformat ttf) yang akan digunakan ke dalam folder assets/fonts/
Mengatur layout
Dalam contoh ini kita akan menampilkan pilihan fontnya menggunakan listview.
Saat klik pada item di listview textview utama akan kita set dengan typeface sesuai dengan urutan item yang diklik.
Dalam contoh ini kita akan menampilkan pilihan fontnya menggunakan listview.
Saat klik pada item di listview textview utama akan kita set dengan typeface sesuai dengan urutan item yang diklik.
Ubah file res/layout/main.xml menjadi seperti berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dp"
android:gravity="center_horizontal">
<TextView
android:id="@+id/mainTextView"
android:layout_marginBottom="20dp"
android:layout_marginTop="20dp"
android:text="Android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="60sp"/>
<ListView
android:id="@+id/mainListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dp"
android:gravity="center_horizontal">
<TextView
android:id="@+id/mainTextView"
android:layout_marginBottom="20dp"
android:layout_marginTop="20dp"
android:text="Android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="60sp"/>
<ListView
android:id="@+id/mainListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
Membuat Adapter Untuk ListView
Masuk ke folder src/main/java/inyong/contoh/customfont/ dan buat class baru dengan nama AdapterListView. Kemudian edit dan masukkan code berikut:
Masuk ke folder src/main/java/inyong/contoh/customfont/ dan buat class baru dengan nama AdapterListView. Kemudian edit dan masukkan code berikut:
package inyong.contoh.customfont;
import android.view.*;
import android.widget.*;
import java.util.*;
import android.content.*;
import android.content.res.*;
import java.io.*;
import android.graphics.*;
public class AdapterListView extends BaseAdapter
{
private Context context;
private String[] listFontDiAsset;
private AssetManager assetManager;
public AdapterListView(Context context){
this.context=context;
assetManager=context.getAssets();
try
{
listFontDiAsset = assetManager.list("fonts");
}
catch (IOException e)
{
listFontDiAsset=new String[0];
}
}
@Override
public int getCount()
{
// TODO: Implement this method
return listFontDiAsset.length;
}
@Override
public Object getItem(int p1)
{
// TODO: Implement this method
return Typeface.createFromAsset(assetManager,"fonts/"+listFontDiAsset[p1]);
}
@Override
public long getItemId(int p1)
{
// TODO: Implement this method
return p1;
}
@Override
public View getView(int posisi, View view, ViewGroup p3)
{
// TODO: Implement this method
TextView textView=new TextView(context);
textView.setPadding(20,20,20,20);
textView.setTextSize(20f);
textView.setText(listFontDiAsset[posisi]);
textView.setTypeface(Typeface.createFromAsset(assetManager,"fonts/"+listFontDiAsset[posisi]));
return textView;
}
}
Sesuaikan MainActivity
Langkah terakhir, ubah isi file MainActivity.java menjadi seperti berikut:
Langkah terakhir, ubah isi file MainActivity.java menjadi seperti berikut:
package inyong.contoh.customfont;
import android.app.*;
import android.os.*;
import android.widget.*;
import android.view.*;
import android.graphics.*;
import android.os.*;
import android.widget.*;
import android.view.*;
import android.graphics.*;
public class MainActivity extends Activity
{
private TextView textView;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
textView=(TextView)findViewById(R.id.mainTextView);
ListView listView=(ListView)findViewById(R.id.mainListView);
final AdapterListView adapterKu=new AdapterListView(this);
listView.setAdapter(adapterKu);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener(){
{
private TextView textView;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
textView=(TextView)findViewById(R.id.mainTextView);
ListView listView=(ListView)findViewById(R.id.mainListView);
final AdapterListView adapterKu=new AdapterListView(this);
listView.setAdapter(adapterKu);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener(){
@Override
public void onItemClick(AdapterView<?> p1, View p2, int posisi, long p4)
{
// TODO: Implement this method
textView.setTypeface((Typeface)adapterKu.getItem(posisi));
}
});
}
}
Compiling...
Ok sekarang kita compile proyeknya dan liat hasilnya.
Jika tidak ada error tampilannya seperti berikut dan saat klik pada item di listview font textview akan berubah sesuai pilihan yang diklik.
public void onItemClick(AdapterView<?> p1, View p2, int posisi, long p4)
{
// TODO: Implement this method
textView.setTypeface((Typeface)adapterKu.getItem(posisi));
}
});
}
}
Compiling...
Ok sekarang kita compile proyeknya dan liat hasilnya.
Jika tidak ada error tampilannya seperti berikut dan saat klik pada item di listview font textview akan berubah sesuai pilihan yang diklik.
