Karena pada tutorial sebelumnya hanya menampilkan data berupa text, dalam tutorial android kali ini, kita akan mencoba membuat aplikasi android untuk dapat menampilkan kombinasi Image beserta Text dengan memanfaatkan bantuan dari container ListView.
Percobaan Pertama
1. Create project baruBerinama Aplikasi Bendera pada Aplication name. Kemudian pada Target Android Device, pilihlah Phone and Table. Langkah selanjutnya anda melakukan seting untuk set Minimum SKD, disini kita memilih API 10 : Android 2.3.3 (Gingerbread). Kemudian untuk activitnya, pilih Blank Activity, serta biarkan nama defaultnya untuk Activity Name : MainActivity.
2. Buka file res/layout/content_main.xml
Dalam file ini kita akan tambahkan ListView, sehingga koding lengkap untuk file content_main.xml sebagai berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.ilmudetil_blogspot.aplikasibendera.MainActivity"
android:orientation="horizontal"
tools:showIn="@layout/activity_main">
<ListView
android:id="@+id/android:list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
3. Create file mylist.xml
Untuk membuat(create) file mylist.xml, klik kanan pada folder res/layout.Kemudian pilih New->XML->Layout XML File seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
 |
| Gambar.1 |
Kemudian berinama mylist.xml. Lalu copy past kode berikut ke dalam file mylist.xml :
<?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="horizontal">
<ImageView
android:id="@+id/icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:src="@mipmap/ic_launcher" />
<TextView
android:id="@+id/Itemname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:paddingTop="5dp"/>
</LinearLayout>
4. Buka file java/MainActivity.java
Dalam file ini, kita akan mengdefinisikan data-data dalam bentuk Array. Sehingga disini kita masih menggunakan ArrayAdapter. Namun bukannya hanya data dalam bentuk text yang akan ditampilkan, Image juga ikut disertakan, karena kita akan memanggil image yang terdapat pada file mylist.xml dalam kode android:src="@mipmap/ic_launcher". Kode lenkap untuk MainActivity.java :
package com.ilmudetil_blogspot.aplikasibendera;Sehingga aplikasi yang kita buat akan menghasilkan output seperti yang ditunjukkan oleh Gambar.2 dibawah ini :
import android.os.Bundle;
import android.app.ListActivity;
import android.widget.ArrayAdapter;
public class MainActivity extends ListActivity {
String[] itemname ={
"Indonesia",
"Malasyia",
"Thailand",
"Filipina",
"Kamboja",
"Vietnam",
"Singapura",
"Laos"
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
this.setListAdapter(new ArrayAdapter<String>(
this, R.layout.mylist,
R.id.Itemname,itemname));
}
}
 |
| Gambar.2 |
Percobaan Kedua
Pada percobaan pertama, gambar yang dimunculkan akan selalu sama untuk setiap nama negara yang dimunculkan. Sekarang kita akan mencoba menampilkan gambar yang berbeda untuk setiap negara.1. Lakukan langkah 1 seperti pada percobaan pertama.
2. Buka file res/layout/content_main.xml
Pada file ini kita akan tambahkan ListView, sehingga koding lengkap untuk file content_main.xml sebagai berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.ilmudetil_blogspot.aplikasibendera.MainActivity"
android:orientation="horizontal"
tools:showIn="@layout/activity_main">
<ListView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
</LinearLayout>
3. Edit file mylist.xml
Edit file mylist.xml yang telah kita buat pada Percobaan Pertama, kemudian copy paste koding dibawah ini kedalam file mylist.xml
<?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="horizontal">
<ImageView
android:id="@+id/icon"
android:layout_width="60dp"
android:layout_height="60dp"
android:padding="5dp" />
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:padding="2dp"
android:textColor="#33CC33" />
</LinearLayout>
</LinearLayout>
4. Menambah gambar bendera ke folder res/minimap
Tujuan langkah ke-4 ini adalah menambahkan gambar-gambar bendera setiap negara. Pada minimap sudah terdapat folder default ic_launcher. Biasanya setiap gambar kita tambahkan ke res/drawable pada IDE Android yang menggunakan Eclipse. Pada Android Studio kita letakkan pada res/minmap.
Silahkan copy file-file gambar kemudian paste ke folder res/minimap dan berinama, seperti yang ditunjukkan oleh Gambar.3 dibawah ini :
 |
| Gambar.3 |
 |
| Gambar.4 |
5. Create file BenderaAdapter.java
Untuk mengcreate BenderaAdapter.java, klik kanan pada nama package yang telah anda buat seperti yang ditunjukkan oleh Gambar.5 dibawah ini :
 |
| Gambar.5 |
package com.ilmudetil_blogspot.aplikasibendera;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.support.v7.app.AppCompatActivity;
public class BenderaAdapter extends ArrayAdapter<String>{
private final AppCompatActivity context;
private final String[] NamaNegara;
private final Integer[] GbrBendera;
public BenderaAdapter(AppCompatActivity context, String[] NamaNegara, Integer[] GbrBendera) {
super(context, R.layout.mylist, NamaNegara);
this.context=context;
this.NamaNegara=NamaNegara;
this.GbrBendera=GbrBendera;
}
public View getView(int position,View view,ViewGroup parent) {
LayoutInflater inflater=context.getLayoutInflater();
View rowView=inflater.inflate(R.layout.mylist, null,true);
TextView txtTitle = (TextView) rowView.findViewById(R.id.item);
ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);
txtTitle.setText(NamaNegara[position]);
imageView.setImageResource(GbrBendera[position]);
return rowView;
};
}
6. Edit file MainActivity.java
Editi file MainActivity.java yang telah kita buat pada Percobaan Pertama, sehingga koding MainActivity.java menjadi :
package com.ilmudetil_blogspot.aplikasibendera;Output dari percobaan kedua ini ditunjukkan oleh Gambar.6 dibawah ini :
import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
ListView list;
String[] NamaNegara = {
"Indonesia",
"Malasyia",
"Thailand",
"Filipina",
"Kamboja",
"Vietnam",
"Singapura",
"Laos"
};
Integer[] GbrBendera={
R.mipmap.indonesia,
R.mipmap.malaysia,
R.mipmap.thailand,
R.mipmap.filipina,
R.mipmap.kamboja,
R.mipmap.vietnam,
R.mipmap.singapura,
R.mipmap.laos
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
BenderaAdapter adapter=new BenderaAdapter(this, NamaNegara, GbrBendera);
list=(ListView)findViewById(R.id.list);
list.setAdapter(adapter);
list.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
String Pilihitem = NamaNegara[+position];
Toast.makeText(getApplicationContext(), Pilihitem, Toast.LENGTH_SHORT).show();
}
});
}
}
 |
| Gambar.6 |
0 Response to "Contoh Android Custom ListView untuk menampilkan Image dan Text"
Posting Komentar