Membuat Daftar View User dengan Android Studio





 

 

Disini kita akan coba membuat daftar user view dengan Android Studio, adapun langka-langkah yang dapat di ikuti sebagai berikut :

 

  1. Membuat Project Baru di Android Studio Klik FIle-> New-> New Project. Lalu Pilih Empty  Activity dan klik Next




 

  1. 2.     Setelah itu kita masuk pada bagian pengisian Name Project dan Bahasa yang akan di pakai, disini saya mengunakan nama project sebgai ListView dan Bahasa Java, lalu klik Finish

3.     Dan setelah membuat new project maka tampil awal yang akan kita temukan adalah Hello World seprti gambar berikut ini :



 


  1. 4.     Berikut kita akan mengubah coding Hello World menjadi speri gambar di bahwa ini:

Masukan coding ini pada project kalian

Setelah kita mengetikan coding diatas ini, maka ada error pada tools:listitem="@layout/list_item", mengapa karena kita belum membuat Layout/List_item nya. Dan itu kita akan membuat nya dengan cara sebagai berikut

 

  1. 5.     Kita Klik Pada Project dan Pilih folder res->layout dan klik kanan -> Pilih Layout Resource File, maka akan muncul Pop Up dan isilah dengan contoh seperti gambar di bhwa ini :

Dan Klik Ok, maka akan muncul layout baru dengan nama list_item,mengapa kita membuat layout list_item ini karena ini akan mengatasi error yang terjadi dan ini kita gunakan untuk membuat list user nya.

             Dan inilah list_item yang baru kita buatkan.

 

  1. 6.     Sekarang kita masukan Coding pada list_item nya seperti gambar di bahwa ini :

 

7.  <?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">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp">

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

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/profile_pic"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_marginStart="20dp"
                android:src="@drawable/pro"/>
           
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/personName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Johan Nasendi"
                    android:textColor="@color/black"
                    android:textSize="26sp"
                    android:textStyle="bold"/>

                <TextView
                    android:id="@+id/lastMessage"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="Hi, How Are you"/>

            </LinearLayout>
        </LinearLayout>

        <TextView
            android:id="@+id/msgtime"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="15dp"
            android:layout_alignParentRight="true"
            android:text="8:35 pm"/>

    </RelativeLayout>

</LinearLayout>

 

Adapun Error yang akan kita dapatkan jiak copas “hehhhe wkwk” mengapa ada error ? k

Petama ada pada <de.hdodenhof.circleimageview.CircleImageView.

Kedua ada pada  android:src="@drawable/pro"/>

Bagaiman cara nya ?

Error pertama; dengan cara menambahkan     

implementation 'de.hdodenhof:circleimageview:3.1.0' di Gradle Script -> build.gradle -> lalu klik Sycn Now

mengapa menambahkan coding di atas karena kita akan membuat image profile kita menjadi circle untuk itu kita perlu mengimplementasikan dulu.

 

Error Kedua : dengan cara menambahkan foto kalian ke folder res->drawable

 

Selesai untuk 2 error ini, dan liat hasil nya !

 

 

 

 

 

 

 

 

 

 

 

 

  1. 8.     Berikut ini kita akan membuat Detail User XML, disini saya akan membuat dengan nama file activity_user.xml, teman” dapat membuat sesuai dengan kemauan teman-teman nama file nya, cara nya sama sperti tadi kita membuat list_item pada step ke 5 tadi. Setelah membuat nya kita masukan coding nya sebagai berikut :

 

<?xml version="1.0" encoding="utf-8"?>

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

    tools:context=".UserActivity">



    <de.hdodenhof.circleimageview.CircleImageView

        android:id="@+id/profile_image"

        android:layout_width="250dp"

        android:layout_height="250dp"

        android:layout_centerHorizontal="true"

        android:src="@drawable/facebook_avatar"

        android:layout_marginTop="20dp"/>



    <TextView

        android:id="@+id/scode_profile"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_below="@+id/profile_image"

        android:layout_marginTop="10dp"

        android:textColor="@color/black"

        android:text="" />



    <RelativeLayout

        android:id="@+id/relative_name"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:clickable="true"

        android:focusable="true"

        android:background="?attr/selectableItemBackground"

        android:layout_below="@+id/scode_profile"

        android:paddingVertical="10dp">



        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:orientation="vertical"

            android:layout_marginStart="70dp">



            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Name"

                android:textSize="12sp"/>



            <TextView

                android:id="@+id/name_profile"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Johan Nasendi"

                android:textSize="26sp"

                android:textColor="@color/black"/>



        </LinearLayout>



    </RelativeLayout>



    <RelativeLayout

        android:id="@+id/relative_phone"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@+id/relative_name"

        android:paddingVertical="10dp">





        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:orientation="vertical"

            android:layout_marginStart="70dp">



            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Phone"

                android:textSize="12sp"/>



            <TextView

                android:id="@+id/phone_profile"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="+91-999999999"

                android:textSize="26sp"

                android:textColor="@color/black"/>



        </LinearLayout>



    </RelativeLayout>



    <View

        android:layout_below="@+id/relative_phone"

        android:layout_width="match_parent"

        android:layout_height="1dp"

        android:background="@color/underline"/>



    <View

        android:layout_below="@+id/relative_name"

        android:layout_width="match_parent"

        android:layout_height="1dp"

        android:background="@color/underline"/>



    <RelativeLayout

        android:id="@+id/relative_house_no"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:clickable="true"

        android:focusable="true"

        android:background="?attr/selectableItemBackground"

        android:layout_below="@id/relative_phone"

        android:paddingVertical="10dp">





        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:orientation="vertical"

            android:layout_marginStart="70dp">



            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Country"

                android:textSize="12sp"/>



            <TextView

                android:id="@+id/country_profile"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="ID"

                android:textSize="26sp"

                android:textColor="@color/black"/>



        </LinearLayout>





    </RelativeLayout>



</RelativeLayout>

 

Dan disni ada terdapat 3 Error yang akan teman” temui

1)     tools:context=".UserActivity"> Mengapa error karena kita harus membuat dulu class java nya dengan  UserActivity , tetapi itu kita akan  buat pada tahap berikut jadi biarkan saja dulu.

2)     android:src="@drawable/facebook_avatar" disini karen kita belum mengimport foto file di drawable kita untuk kita perlu mengimport contoh seperti telah kita buat pada langke ke 7 tadi.

3)     android:background="@color/underline"/> pada error ini kita perlu mendeklarasikan dulu color yang akan kita gunakan cara nya : pergi ke Folder App->Res->Value->Color.xml klik dan masukan coding sebagai berikut : <color name="underline">#D8D6D6</color>

Success untuk Tahap ke 8 bagian error nya.

  1. 9.     Berikut nya kita akan buat  UserActivity untuk mengatasi error di atas,dengan cara sebagai berikut: Masuk ke Folder  App->Java->com.example.listview -> klik kanan pilih New JavaClass.

 


Dan masukan Coding pada UserActivity.java nya,sebagai berikut :
package com.example.listview;





import androidx.appcompat.app.AppCompatActivity;



import android.content.Intent;

import android.os.Bundle;

import android.util.Log;



import com.example.listview.databinding.ActivityMainBinding;

import com.example.listview.databinding.ActivityUserBinding;



public class UserActivity extends AppCompatActivity {



    ActivityUserBinding binding;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        binding = ActivityUserBinding.inflate(getLayoutInflater());

        setContentView(binding.getRoot());



        Intent intent = this.getIntent();



        if (intent != null){



            String name = intent.getStringExtra("name");

            String phone = intent.getStringExtra("phone");

            String country = intent.getStringExtra("country");

            int imageid = intent.getIntExtra("imageid",R.drawable.a);



            binding.nameProfile.setText(name);

            binding.phoneProfile.setText(phone);

            binding.countryProfile.setText(country);

            binding.profileImage.setImageResource(imageid);





        }



    }

}

  1.   Dan selanjud nya kita membuat User.java denga cara yang sama seperti kita membuat UserActivity.java, setelah terbuat maka kita masukan coding sebagai berikitut :

 

package com.example.listview;



public class User {



    String name, lastMessage, lastMsgTime, phoneNo, country;

    int imageId;



    public User(String name, String lastMessage, String lastMsgTime, String phoneNo, String country, int imageId) {

        this.name = name;

        this.lastMessage = lastMessage;

        this.lastMsgTime = lastMsgTime;

        this.phoneNo = phoneNo;

        this.country = country;

        this.imageId = imageId;

    }

}

 

 

  1. 11.  Dan kita akan membuat lagi adapter dengan nama ListAdapter.java. ap aitu adapter? Teman dapat menbaca disini https://developer.android.com/guide/topics/ui/binding

Dan masukan coding sebagai berikut :

 

package com.example.listview;



import android.content.Context;

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 androidx.annotation.NonNull;

import androidx.annotation.Nullable;



import org.w3c.dom.Text;



import java.util.ArrayList;



public class ListAdapter extends ArrayAdapter<User> {

    public ListAdapter(Context context, ArrayList<User> userArrayList){



        super(context,R.layout.list_item,userArrayList);



    }

    @NonNull

    @Override

    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {



        User user = getItem(position);



        if (convertView == null){



            convertView = LayoutInflater.from(getContext()).inflate(R.layout.list_item,parent,false);



        }



        ImageView imageView = convertView.findViewById(R.id.profile_pic);

        TextView userName = convertView.findViewById(R.id.personName);

        TextView lastMsg = convertView.findViewById(R.id.lastMessage);

        TextView time = convertView.findViewById(R.id.msgtime);



        imageView.setImageResource(user.imageId);

        userName.setText(user.name);

        lastMsg.setText(user.lastMessage);

        time.setText(user.lastMsgTime);





        return convertView;

    }

}

 

 

  1. 12.  Horee kita sudah Hampir selesai, sekarang tinggal masukan coding pada MainActivity.Java nya, dengan coding sebagai berikut :

 

package com.example.listview;



import androidx.appcompat.app.AppCompatActivity;



import android.content.Intent;

import android.os.Bundle;

import android.view.View;

import android.widget.AdapterView;





import com.example.listview.databinding.ActivityMainBinding;

import com.example.listview.databinding.ActivityUserBinding;



import java.util.ArrayList;



public class MainActivity extends AppCompatActivity {



    ActivityMainBinding binding;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        binding = ActivityMainBinding.inflate(getLayoutInflater());

        setContentView(binding.getRoot());



        int[] imageId = {R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e,

                R.drawable.f,R.drawable.g,R.drawable.h,R.drawable.i};

        String[] name = {"Nurinun","Johan Nasendi","Gusti","Jerry Bella","Haidir Ali","I Komang","Chrismawaty","M.Yusuf","Sujiono"};

        String[] lastMessage = {"1911148","1911182","1911130","1911147","1911132",

                "1911172","1911149","1911135","1911070"};

        String[] lastmsgTime = {"8:45 pm","9:00 am","7:34 pm","6:32 am","5:76 am",

                "5:00 am","7:34 pm","2:32 am","7:76 am"};

        String[] phoneNo = {"7656610000","9999043232","7834354323","9876543211","5434432343",

                "9439043232","7534354323","6545543211","7654432343"};

        String[] country = {"Indonesia","Indonesia","Indonesia","Indonesia","Indonesia","Indonesia","Indonesia","Indonesia","Indonesia"};



        ArrayList<User> userArrayList = new ArrayList<>();



        for(int i = 0;i< imageId.length;i++){



            User user = new User(name[i],lastMessage[i],lastmsgTime[i],phoneNo[i],country[i],imageId[i]);

            userArrayList.add(user);



        }





        ListAdapter listAdapter = new ListAdapter(MainActivity.this,userArrayList);



        binding.listview.setAdapter(listAdapter);

        binding.listview.setClickable(true);

        binding.listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override

            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {



                Intent i = new Intent(MainActivity.this,UserActivity.class);

                i.putExtra("name",name[position]);

                i.putExtra("phone",phoneNo[position]);

                i.putExtra("country",country[position]);

                i.putExtra("imageid",imageId[position]);

                startActivity(i);



            }

        });



    }

}

 

 

 

 

 

 

Selamat Mencoba,Semoga Berhasil

Jika ada yang kurang jelas,Silakan Bertanya di kolom Komentar 


            


instagram : johan.nasendi 

 


Comments

Post a Comment

Popular posts from this blog

Cara Clone Repository di Github

Image
  Terima Kasih Telah Berkunjung hari ini, semoga hari kalian menyenangkan ya </> Kali ini saya akan membagikan sedikit cara untuk proses clone sebuah repository di github. Clone disini dimaksudkan untuk menduplikat sebuah repository, dan kali ini akan saya contohkan dengan menggunakan Github. Proses clone ini biasanya digunakan oleh para developer untuk berkolaborasi di dalam sebuah project, jadi sebuah project dikerjakan oleh lebih dari 1 orang dan project tersebut disimpan di 1 repository saja. Langkah pertama an d a harus mengakses link repository yang ingin anda clone, anda bisa coba akses salah satu repository saya yang ada di Github pada link  ini . Seperti dibawah ini Arahkan kursor ke bagian tombol  Clone or download.  Pada gambar diatas anda akan diberikan pilihan clone, yaitu  Clone with SSH  atau  Clone use HTTPS.  Karena di git saya sudah setup SSH maka saya memilih link clone dengan menggunakan SSH, jika anda belum setting SSH anda dapat gunakan link clone deng
Read more

Schoology: Jejaring Sosial yang Sangat Berguna untuk Guru dan Siswa

Image
Kilik disin untuk Daftar Schoology : https://www.schoology.com/ Tahukah Anda sebuah situs yang menggabungkan fitur jejaring sosial dan LMS? Diantaranya adalah  Schoology . Ya Schoology ada situs yang menggabungkan antara jejaring sosial dan LMS. Jadi dengan  Schoology  kita bisa berinteraksi sosial sekaligus belajar. Adapun fitur-fitur yang dimiliki oleh Schoology adalah sebagai berikut: Courses (Kursus), yaitu fasilitas untuk membuat kelas mata pelajaran, misal mata pelajaran Matematika, Fisika, dan lain sebagainya. Fasilitas Courses ini juga ada di Moodle Groups (Kelompok), yaitu fasilitas untuk membuat kelompok. Fasilitas ini juga ada di Moodle maupun di facebook. Resources (Sumber Belajar) Di dalam menu Course kita juga bisa membuat kuis/soal (ini yang tidak dimiliki oleh facebook) yang jenisnya banyak yaitu pilihan ganda, benar salah, menjodohkan, isian singkat, dll. Bagusnya lagi kita bisa mengimport soal. Kelebihan soal online yang dimiliki oleh Schoolgy adala
Read more