Home > Software design >  Why do the items in the recycler View are not showing well Android Kotlin
Why do the items in the recycler View are not showing well Android Kotlin

Time:04-25

So I made my list so it look like this :

enter image description here

but I don't know for what ever reason it show like that:

enter image description here

Here is the frament_drivers.xml that hold the RecycleView:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">

        <LinearLayout
            android:id="@ id/header"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/primary"
            android:orientation="vertical"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginBottom="10dp">

            <TextView
                android:id="@ id/calendar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="30dp"
                android:layout_marginTop="20dp"
                android:layout_marginEnd="30dp"
                android:layout_marginBottom="20dp"
                android:fontFamily="@font/marianneb"
                android:text="Pilotes"
                android:textAlignment="center"
                android:textColor="@color/white"
                android:textSize="25sp" />

        </LinearLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@ id/drivers_recycler_view"
            android:scrollbars="vertical"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            tools:listitem="@layout/driver_list"
            app:layout_constraintTop_toBottomOf="@ id/header"
            app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Here is the driver_list.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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="20dp"
    android:layout_marginTop="50px"
    android:layout_marginEnd="20dp"
    android:elevation="8dp"
    android:orientation="horizontal"
    android:padding="10dp"

    android:background="@drawable/rectangle">

    <TextView
        android:id="@ id/driver_position"
        android:layout_width="30dp"
        android:layout_height="match_parent"
        android:fontFamily="@font/marianneb"
        android:text="1"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textAlignment="center"/>

    <ImageView
        android:id="@ id/driver_bar"
        android:layout_width="20px"
        android:layout_height="match_parent"
        android:background="@drawable/ferrari_bar"/>



    <LinearLayout
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@ id/driver_name"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:fontFamily="@font/marianneb"
            android:text="Charles Leclerc"
            android:textColor="@color/black"
            android:textSize="15sp"
            android:layout_marginStart="10dp"/>

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

            <TextView
                android:id="@ id/driver_number"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="10dp"
                android:layout_marginTop="2.5dp"
                android:fontFamily="@font/mariannem"
                android:text="16"
                android:textColor="@color/black"
                android:textSize="10sp" />

            <TextView
                android:id="@ id/driver_team"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="10dp"
                android:layout_marginTop="2.5dp"
                android:fontFamily="@font/mariannem"
                android:text="Ferrari"
                android:textColor="@color/black"
                android:textSize="10sp" />

        </LinearLayout>

    </LinearLayout>

    <TextView
        android:id="@ id/driver_points"
        android:layout_width="50dp"
        android:layout_height="match_parent"
        android:fontFamily="@font/marianneb"
        android:text="578"
        android:textColor="@color/black"
        android:textSize="25sp"/>



</LinearLayout>

Then I have the DriversFragment.kt:

package net.robcorp.finalapp

import android.content.Context
import android.graphics.Insets.add
import android.os.Bundle
import android.util.Log
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.core.view.OneShotPreDrawListener.add
import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.Observer
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.android.volley.Request
import com.android.volley.Response
import com.android.volley.toolbox.StringRequest
import com.android.volley.toolbox.Volley
import net.robcorp.finalapp.R
import net.robcorp.finalapp.databinding.FragmentDriversBinding
import net.robcorp.finalapp.drivers.DriverFragmentAdapter
import net.robcorp.finalapp.drivers.Drivers
import org.json.JSONArray


class DriversFragment : Fragment(R.layout.fragment_drivers) {

    private lateinit var recyclerView: RecyclerView
    private lateinit var myAdapter: DriverFragmentAdapter;
    lateinit var binding: FragmentDriversBinding
    private val drivers = ArrayList<Drivers>()
    val url = "https://robcorp.net/f1api/getdrivers.php"

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = FragmentDriversBinding.inflate(layoutInflater, container, false)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        recyclerView = binding.driversRecyclerView
        recyclerView.layoutManager = LinearLayoutManager(activity, LinearLayoutManager.VERTICAL, false)
        myAdapter = DriverFragmentAdapter(drivers)
        recyclerView.adapter = myAdapter
        println("adapter loaded")
        downloadDrivers()
    }

    fun downloadDrivers() {
        val task = Volley.newRequestQueue(this.context)
        val request = StringRequest(Request.Method.GET, url, {
                response ->
            val data = response.toString()
            val jArray = JSONArray(data)
//            Log.e("Error",response.toString())
            for (i in 0..jArray.length()-1) {
                val json_data = jArray.getJSONObject(i)
//                Log.e("Jobject",json_data.toString())
                val pos = i 1
                val name = json_data.getString("Name")
                val nb = json_data.getString("NB")
                val points = json_data.getString("Points")
                val title = json_data.getString("Title")
                val driver = Drivers(pos, name, nb, points, title)
                drivers.add(driver)

            }
            println(drivers)
            myAdapter.notifyDataSetChanged()
        }, {
                error ->
            println(error)
        })
        task.add(request)
    }
}

And finally I have the DriverFragmentAdapter.kt

package net.robcorp.finalapp.drivers

import android.view.LayoutInflater
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.core.content.ContextCompat
import androidx.recyclerview.widget.RecyclerView
import net.robcorp.finalapp.R
import net.robcorp.finalapp.databinding.DriverListBinding

class DriverFragmentAdapter(private var driversList: List<Drivers>): RecyclerView.Adapter<DriverFragmentAdapter.MyViewHolder>() {

    class MyViewHolder(val binding: DriverListBinding) : RecyclerView.ViewHolder(binding.root) {
        fun bind(driver: Drivers) {
            val context = itemView.context
            val pos = itemView.findViewById<TextView>(R.id.driver_position)
            val bar = itemView.findViewById<ImageView>(R.id.driver_bar)
            val name = itemView.findViewById<TextView>(R.id.driver_name)
            val nb = itemView.findViewById<TextView>(R.id.driver_number)
            val team = itemView.findViewById<TextView>(R.id.driver_team)
            val points = itemView.findViewById<TextView>(R.id.driver_points)

            pos.text = driver.pos.toString()
            name.text = driver.name
            nb.text = driver.nb
            team.text = driver.title
            points.text = driver.points

            if (driver.title == "Ferrari") {
                bar.background = ContextCompat.getDrawable(context, R.drawable.ferrari_bar)
            } else if (driver.title == "Alpine") {
                bar.background = ContextCompat.getDrawable(context, R.drawable.alpine_bar)
            } else if (driver.title == "Red Bull") {
                bar.background = ContextCompat.getDrawable(context, R.drawable.redbull_bar)
            } else if (driver.title == "Mercedes") {
                bar.background = ContextCompat.getDrawable(context, R.drawable.mercedes_bar)
            } else if (driver.title == "McLaren") {
                bar.background = ContextCompat.getDrawable(context, R.drawable.mclaren_bar)
            } else if (driver.title == "Alfa Romeo") {
                bar.background = ContextCompat.getDrawable(context, R.drawable.alfaromeo_bar)
            } else if (driver.title == "AlphaTauri") {
                bar.background = ContextCompat.getDrawable(context, R.drawable.alphatauri_bar)
            } else if (driver.title == "Williams") {
                bar.background = ContextCompat.getDrawable(context, R.drawable.williams_bar)
            } else if (driver.title == "Aston Martin") {
                bar.background = ContextCompat.getDrawable(context, R.drawable.astonmartin_bar)
            } else if (driver.title == "Haas") {
                bar.background = ContextCompat.getDrawable(context, R.drawable.haas_bar)
            }
        }
    }
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        return MyViewHolder(DriverListBinding.inflate(LayoutInflater.from(parent.context)))

    }

    override fun getItemCount(): Int {
        return driversList.size
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        val driver = driversList[position]
        holder.binding.apply {
            holder.bind(driver)
        }
    }

    fun setDriversList(driversList: List<Drivers>) {
        this.driversList = driversList
        notifyDataSetChanged()
    }

}

I can't manage to find why it's showing like that

CodePudding user response:

Try adding start/end constraints to the recyclerView item like this

    <androidx.recyclerview.widget.RecyclerView
                android:id="@ id/drivers_recycler_view"
                android:scrollbars="vertical"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                tools:listitem="@layout/driver_list"
                app:layout_constraintTop_toBottomOf="@ id/header"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"/>

Also you must remove the ' ' sign when constraining to another object

app:layout_constraintTop_toBottomOf="@ id/header"

It should be

app:layout_constraintTop_toBottomOf="@id/header"

CodePudding user response:

Give paddingStart and paddingEnd 20dp to RecyclerView.

<androidx.recyclerview.widget.RecyclerView
        android:id="@ id/drivers_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:paddingStart="@dimen/_20sdp"
        android:paddingEnd="@dimen/_20sdp"
        android:scrollbars="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/header"
        tools:listitem="@layout/driver_list" />

and change this to item main layout.

<LinearLayout 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_marginTop="20dp"
    android:elevation="8dp"
    android:orientation="horizontal"
    android:padding="10dp"

    android:background="@drawable/rectangle"> 

Hope this will work.

CodePudding user response:

Add all constraints to your recyclerView

app:layout_constraintTop_toBottomOf="@id/header"

remove plus sign from your constraint

CodePudding user response:

I've manage a sotlution that is to add a cardview and put my layout inside

CodePudding user response:

<androidx.recyclerview.widget.RecyclerView
        android:id="@ id/drivers_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="16dp"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@ id/header" />

By changing the numbers in this code you swap spaces from above and below

android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"

These codes let you leave how much space left and right

android:paddingStart="16dp"
android:paddingEnd="16dp"

driverlist.xml

add to outermost linear layout

android:layout_marginBottom="8dp"
  • Related