title: How to display data from API as gridview - Kotlin - Retrofit
body: <p>i am trying to display data from API as gridview i tried different ways to do it but it either display it incorrectly or above each other</p>
  <p>so what is the correct way to do this?</p>
  <p>Here is my code:</p>
  <p>Interface:</p>
  <pre><code>interface facebookInterface {
  
  @GET(&quot; &quot;)
  
  fun getServices(): Call&lt;List&lt;facebookData&gt;&gt;
  
  companion object Factory {
      fun create(): facebookInterface {
          val retrofit = Retrofit.Builder()
              .addConverterFactory(GsonConverterFactory.create())
              .baseUrl(&quot;URL&quot;)
              .build()
  
          return retrofit.create(facebookInterface::class.java)
      }
  }
  }
  </code></pre>
  <p>Adapter:</p>
  <pre><code>class facebookAdapter(var countryList: List&lt;facebookData&gt;,
                    private val facebookAdapterCallback: FacebookAdapterCallback)
  : RecyclerView.Adapter&lt;facebookAdapter.ViewHolder&gt;(){
  lateinit var context: Context
  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): facebookAdapter.ViewHolder {
      context = parent.context!!
      val view = LayoutInflater.from(context).inflate(R.layout.facebook_list_item, parent, false)
      return ViewHolder(view)
  }
  
  override fun getItemCount(): Int {
      return if(countryList.size &gt; 4) {
          4
      } else {
          countryList.size
      }
  }
  
  override fun onBindViewHolder(holder: facebookAdapter.ViewHolder, position: Int) {
  
  
      holder.thumbnailUrl.setOnClickListener {
          facebookAdapterCallback.onFacebookAdapterItemClick(countryList[position])
      }
  
      Picasso.get()
          .load(countryList[position].imageUrl)
          .memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE)
          .networkPolicy(NetworkPolicy.NO_CACHE, NetworkPolicy.NO_STORE)
          .into(holder.thumbnailUrl)
  }
  
  class ViewHolder(itemView: View): RecyclerView.ViewHolder(itemView){
  
      val thumbnailUrl: ImageView = itemView.findViewById(R.id.facebook_img)
  }
  
  interface FacebookAdapterCallback{
      fun onFacebookAdapterItemClick(data: facebookData)
  }
  }
  </code></pre>
  <p>facebook_list_item.xml</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
  &lt;FrameLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
  xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
  xmlns:tools=&quot;http://schemas.android.com/tools&quot;
  android:id=&quot;@+id/frame_layout&quot;
  android:layout_width=&quot;match_parent&quot;
  android:layout_height=&quot;wrap_content&quot;&gt;
  
  &lt;androidx.cardview.widget.CardView
      android:id=&quot;@+id/list_card&quot;
      android:layout_width=&quot;match_parent&quot;
      android:layout_height=&quot;wrap_content&quot;
      app:cardCornerRadius=&quot;4dp&quot;
      app:contentPadding=&quot;8dp&quot;&gt;
  
      &lt;androidx.constraintlayout.widget.ConstraintLayout
          android:id=&quot;@+id/list_constraint&quot;
          android:layout_width=&quot;match_parent&quot;
          android:layout_height=&quot;wrap_content&quot;&gt;
  
          &lt;ImageView
              android:id=&quot;@+id/facebook_img&quot;
              android:layout_width=&quot;100dp&quot;
              android:layout_height=&quot;100dp&quot;
              android:layout_marginTop=&quot;8dp&quot;
              android:layout_marginEnd=&quot;8dp&quot;
              app:layout_constraintEnd_toEndOf=&quot;parent&quot;
              app:layout_constraintTop_toTopOf=&quot;parent&quot; /&gt;
  
  
      &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
  &lt;/androidx.cardview.widget.CardView&gt;
  </code></pre>
  
  <p>activity:</p>
  <pre><code>val recyclerView: RecyclerView = findViewById(R.id.list_recycler4)
  recyclerView.layoutManager = LinearLayoutManager(this)
  val facebookInterface = facebookInterface.Factory.create()
  val facebok: Call&lt;List&lt;facebookData&gt;&gt; = facebookInterface.getServices()
  facebok.enqueue(object : Callback&lt;List&lt;facebookData&gt;&gt; {
      override fun onFailure(call: Call&lt;List&lt;facebookData&gt;&gt;, t: Throwable) {
          Log.d(&quot;xxxx&quot;, t.toString())
          Toast.makeText(this@MainActivity, t.message, Toast.LENGTH_SHORT).show()
      }
      override fun onResponse(
          call: Call&lt;List&lt;facebookData&gt;&gt;,
          response: Response&lt;List&lt;facebookData&gt;&gt;
      ) {
          Log.d(&quot;xxxx&quot;, response.body().toString())
          val list = response.body()!!
          recyclerView.adapter = facebookAdapter(list, this@MainActivity)
      }
  })
  </code></pre>
  <p>data class:</p>
  <pre><code>data class facebookData (
  val  imageUrl : String,
  val imageLink: String,
  val source: String
  )
  </code></pre>
  <p>i tried making the XML gridview but it would take the first image only and repeat it in vertical view</p>
  <p>do i need to change something in the adapter or XML?</p>
  <p>i tried to change &quot;val recyclerView: RecyclerView = findViewById(R.id.list_recycler4)&quot; to gridview but i faced some issues</p>