[안드로이드] 이미지 리스트로 보여주는 방법 Picasso Recyclerview

2021.06.30 - [안드로이드] - [안드로이드] 내가 선택한 색으로 배경색 변경하는 방법

[안드로이드] 내가 선택한 색으로 배경색 변경하는 방법

2021.06.28 - [안드로이드] - [안드로이드]정해진 시간에 알람 울리는 방법 Notification TimePicker

[안드로이드]정해진 시간에 알람 울리는 방법 Notification TimePicker

 

이번 시간에는 api를 호출해서 이미지를 리스트로 보여주는 방법을 알아보겠습니다.

api를 호출할 곳은 무료이미지를 제공해주는 pixabay입니다. 

1. 계정을 생성한 뒤에 https://pixabay.com/api/docs/ 로 들어갑니다.

2. search images 를 클릭하면 바로 아래 화면이 보입니다.

key값에 본인의 api key 값이 보일 것입니다.

3. 아래로 스크롤을 내리면 example 이 보이며 그 파란색으로 쓰인 url를 호출하면

json형태의 데이터를 받을 수 있습니다.

 

이제 직접 데이터를 호출하고, 앱에서 리스트 형태로 보여지는 방법을 알아보겠습니다.

1. 라이브러리 추가

build.gradle(Module: 앱이름.app)

   implementation 'com.android.volley:volley:1.2.0'
    implementation 'com.squareup.picasso:picasso:2.5.2'
    implementation 'androidx.recyclerview:recyclerview:1.2.1'
    implementation 'androidx.cardview:cardview:1.0.0'

 

 

2. 데이터 클래스 추가(ExamItem.java)

public class ExamItem {

    private String imageUrl;


    public ExamItem(String imageUrl) {
        this.imageUrl = imageUrl;

    }

    public String getImageUrl() {
        return imageUrl;
    }


}

 

 

3. 리스트로 보여줄 화면 생성(item.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardCornerRadius="8dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <ImageView
            android:id="@+id/image_view"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:src="@mipmap/ic_launcher" />

    </LinearLayout>
</androidx.cardview.widget.CardView>

 

4. 어뎁터 클래스 추가(데이터를 리스트로 보여주기 위한 기능)

ExamAdapter.java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import androidx.recyclerview.widget.RecyclerView;
import com.squareup.picasso.Picasso;

import java.util.ArrayList;

public class ExamAdapter extends RecyclerView.Adapter<ExamAdapter.ExampleViewHoler>{

    private Context context;
    private ArrayList<ExamItem> examItemList = new ArrayList<>();

    public ExamAdapter() {
    }

    public ExamAdapter(Context context, ArrayList<ExamItem> examItemList) {

        this.context = context;
        this.examItemList = examItemList;
    }

    @Override
    public ExampleViewHoler onCreateViewHolder(ViewGroup parent, int viewType) {

        View v = LayoutInflater.from(context).inflate(R.layout.item, parent, false);
        return new ExampleViewHoler(v);
    }

    @Override
    public void onBindViewHolder(ExampleViewHoler holder, int position) {

        ExamItem currentItem = examItemList.get(position);

        String imageurl = currentItem.getImageUrl();

        Picasso.with(context).load(imageurl).fit().centerInside().into(holder.imageView);
    }

    @Override
    public int getItemCount() {
        return examItemList.size();
    }


    public void removeAllItem(){
        examItemList.clear();
    }

    public class ExampleViewHoler extends RecyclerView.ViewHolder{

        public ImageView imageView;


        public ExampleViewHoler(View itemView) {
            super(itemView);

            imageView = itemView.findViewById(R.id.image_view);
        }
    }
}

 

 

5. 메인화면 구현(activity_main.xml)

<?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:orientation="vertical"
    tools:context=".MainActivity">

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

        <EditText
            android:id="@+id/search_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="검색어를 입력하세요"
            />

        <Button
            android:id="@+id/search_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="검색"
            />
    </LinearLayout>


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@android:color/darker_gray"/>

</LinearLayout>

 

 

6. 메인코드 구현(MainActivity.java)

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.JsonObjectRequest;
import com.android.volley.toolbox.Volley;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity{

    private RecyclerView recyclerView;
    private ExamAdapter adapter;
    private ArrayList<ExamItem> examList;
    private RequestQueue requestQueue;

    private EditText search_text; //검색어

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

        search_text = findViewById(R.id.search_text);

        Button search_btn = findViewById(R.id.search_btn);
        search_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                adapter.removeAllItem();

                String search_word = "";

                search_word = search_text.getText().toString();

                parseJSON(search_word);
            }
        });

        recyclerView = findViewById(R.id.recycler_view);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));

        examList = new ArrayList<>();

        adapter = new ExamAdapter();
        recyclerView.setAdapter(adapter);

        requestQueue = Volley.newRequestQueue(this);

    }

    private void parseJSON(String search_word){

        String apiKey = "Your API key";

        String url = "https://pixabay.com/api/?key=" + apiKey +  "&q=" +  search_word + "&image_type=photo";

        JsonObjectRequest request = new JsonObjectRequest(Request.Method.GET, url, null,
                new Response.Listener<JSONObject>() {
                    @Override
                    public void onResponse(JSONObject response) {
                        try {
                            JSONArray jsonArray = response.getJSONArray("hits");

                            for(int i = 0; i < jsonArray.length(); i++){
                                JSONObject hit = jsonArray.getJSONObject(i);

                                String imageUrl = hit.getString("webformatURL");

                                examList.add(new ExamItem(imageUrl));
                            }

                            adapter = new ExamAdapter(MainActivity.this, examList);

                            recyclerView.setAdapter(adapter);


                        } catch (JSONException e) {
                            e.printStackTrace();
                        }

                    }
                }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                error.printStackTrace();
            }
        });

        requestQueue.add(request);
    }

}

 

7. 실행화면

맘에 드셨다면 공감부탁드려요 문의 댓글 환영합니다.