Android Studio | Tutorial Membuat List Nama Mahasiswa ~ WebApps

Asslamu'alaikum... selamat malam..

Pada postingan kali ini kembali membahas Android Studio. Saya akan memberitahu bagaimana cara membuat aplikasi yang berisi list nama beserta foto dan keterangannya. yuk simak langkah-langkah berikut...

1. Buka aplikasi Android Studio anda.

2. Pilih file > New > New Project.
3. Beri nama aplikasi yang akan anda buat. Saya memberi nama aplikasi Mahasiswa List.

4. Pilih Phone and Tablet dengan minimum sdk menggunakan android versi 4.0.3 (IceCreamSandwich) pada target android device.

5. Pilih layout awal activity aplikasi anda. Saya memilih Basic Activity untuk aplikasi saya.

6. Beri nama activity anda. lalu klik finish.

7. Ini gambaran tampilan awal layout activity anda. Lalu hapus tulisan "Hello World" dari layout anda.

8. Drag ListView yang berada pada Pallete ke dalam Design layout avtivity anda.

9. Setelah itu pindah ke Text yang ada di bar bawah. ketik codingan berikut pada content_main.xml.

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

    <ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/listView"
        android:layout_below="@+id/textView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Mahasiswa"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

10. Copy foto yang anda ingin masukan ke dalam aplikasi. Lalu pilih res pada bar project yang ada disebelah kiri. Klik kanan pada drawable > lalu paste.

pastikan kedua foto yang anda pilih sudah di rename ke men dan women.

11. Lalu edit codingan pada MainActivity.java

package com.broadbandpnj.mahasiswalist;

        import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;

import com.broadbandpnj.mahasiswalist.ListNama;
import com.broadbandpnj.mahasiswalist.R;

public class MainActivity extends AppCompatActivity {
    private ListView listView;
    private String names[]={
            "Agustrian Maulana",
            "Angela Tyas Manna",
            "Annisa Pratiwi",
            "Ari Nurhayati",
            "Asri Mayanti Panggabean",
            "Dicky Putra Nugraha",
            "Dicky Putra Pratama",
            "Fully Oktriviani",
            "Gena Pradita",
            "Iman Nurachman",
            "Luthfi Naufal Gibrani",
            "Mega Widyawati",
            "Meiwa Rian ",
            "Merdhika",
            "Millatu Fadhillah",
            "Nabila Shaffa Bestari",
            "Nurmiadha Nisa Karimah",
            "Ocha Armalia Fadelo",
            "Rahat Hidayat",
            "Rayhan Nirmala",
            "Reffy Mahesya",
            "Sarah Najmanita Silvelina Isma",
            "Shavira O",
            "Tasha Dinya",
            "Tiur Nova",
            "Ulima Larisa",
            "Widya Isti",
            "Zahra Jihad",
            "Maudy Rachma"
    };

    private String desc[]={
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia",
            "Jurusan : Broadband Multimedia"
    };

    private String nim[] = {
            "NIM : 4314030020",
            "NIM : 4314030002",
            "NIM : 4314030031",
            "NIM : 4314030003",
            "NIM : 4314030021",
            "NIM : 4314030022",
            "NIM : 4314030023",
            "NIM : 4314030024",
            "NIM : 4314030004",
            "NIM : 4314030005",
            "NIM : 4314030006",
            "NIM : 4314030007",
            "NIM : 4314030008",
            "NIM : 4314030009",
            "NIM : 4314030010",
            "NIM : 4314030011",
            "NIM : 4314030012",
            "NIM : 4314030026",
            "NIM : 4314030027",
            "NIM : 4314030028",
            "NIM : 4314030013",
            "NIM : 4314030015",
            "NIM : 4314030016",
            "NIM : 4314030017",
            "NIM : 4314030018",
            "NIM : 4314030019",
            "NIM : 4314030029",
            "NIM : 4314030030",
            "NIM : 4313030013"
    };

    private Integer imageid[]={
            R.drawable.men,
            R.drawable.women,
            R.drawable.women,
            R.drawable.women,
            R.drawable.women,
            R.drawable.men,
            R.drawable.men,
            R.drawable.women,
            R.drawable.women,
            R.drawable.men,
            R.drawable.men,
            R.drawable.women,
            R.drawable.men,
            R.drawable.women,
            R.drawable.women,
            R.drawable.women,
            R.drawable.women,
            R.drawable.women,
            R.drawable.men,
            R.drawable.women,
            R.drawable.men,
            R.drawable.women,
            R.drawable.women,
            R.drawable.women,
            R.drawable.women,
            R.drawable.women,
            R.drawable.women,
            R.drawable.women,
            R.drawable.men
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ListNama mahasiswalist = new ListNama(this, names, desc, nim, imageid);

        listView = (ListView) findViewById(R.id.listView);
        listView.setAdapter(mahasiswalist);

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                Toast.makeText(getApplicationContext(), "You Clicked" + names[i], Toast.LENGTH_SHORT).show();
            }
        });

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

12. Selanjutnya tambah layout baru. Klik kanan layout pada bar project di sebelah kiri > New > XML > Layout XML file.

13. Beri nama layout file anda dengan nama layout.

14. Tambahkan codingan berikut pada Text (di bar bawah sebelah Design) di layout.xml

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="@android:dimen/notification_large_icon_width"
            android:layout_height="@android:dimen/notification_large_icon_height"
            android:id="@+id/imageView"
            android:layout_row ="0"
            android:layout_column="0" />

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:gravity="left">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Text"
                android:layout_columnWeight="1"
                android:id="@+id/textViewName"
                android:layout_row="0"
                android:layout_column="1"
                android:textColor="@android:color/holo_red_dark"
                android:textSize="20dp"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Text"
                android:layout_columnWeight="1"
                android:id="@+id/textViewDesc"
                android:layout_row="1"
                android:layout_column="1"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Text"
                android:layout_columnWeight="1"
                android:id="@+id/textViewNIM"
                android:layout_row="0"
                android:layout_column="1"/>
        </LinearLayout>
    </LinearLayout>
</GridLayout>

15. Tambah javaClass baru dengan cara pilih java yang ada di bar project di sebelah kiri, lalu klik kanan pada com.broadbandpnj.mahasiswalist > New > Java Class.

lalu beri nama class ListNama

16. edit codingan seperti berikut pada ListNama.java

package com.broadbandpnj.mahasiswalist;

import android.app.Activity;
import android.test.ActivityUnitTestCase;
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 com.broadbandpnj.mahasiswalist.R;

public class ListNama extends ArrayAdapter<String> {
    private String [] names;
    private String [] desc;
    private String [] nim;
    private Integer[] imageid;
    private Activity context;

    public ListNama(Activity context, String[] names, String[] desc, String[] nim, Integer[] imageid){
        super (context, R.layout.layout, names);
        this.context = context;
        this.names = names;
        this.nim = nim;
        this.desc = desc;
        this.imageid = imageid;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent){
        LayoutInflater inflater = context.getLayoutInflater();
        View listViewItem = inflater.inflate(R.layout.layout, null, true);
        TextView textViewName = (TextView) listViewItem.findViewById(R.id.textViewName);
        TextView textViewDesc = (TextView) listViewItem.findViewById(R.id.textViewDesc);
        TextView textViewNIM = (TextView) listViewItem.findViewById(R.id.textViewNIM);
        ImageView image = (ImageView) listViewItem.findViewById(R.id.imageView);

        textViewName.setText(names [position]);
        textViewDesc.setText(desc [position]);
        textViewNIM.setText(nim [position]);
        image.setImageResource(imageid[position]);
        return listViewItem;
    }
}

17. langkah selanjutnya adalah Run app. setelah itu pilih sambungan device anda. lalu tunggu sampai prosesnya selesai.