How to create a custom Listview inside a Fragment?

Question

Goodnight

I did a lot of research on it, but I couldn’t quite understand the concept.

I have an Android application that uses Fragments. I need to insert a custom Listview with an image and several texts, but I’m not able to make it work.

In a normal Activity, just create a custom Adapter, but in a Fragment I’m not getting the expected result.

The question is: how do I insert a custom Listview into a Fragment?

From now on, thank you.

Answer 1

First of all I would advise you to use Recyclerview which is much more performative and powerful. You can read more about it here: https://medium.com/android-dev-br/listas-com-recyclerview-d3f41e0d653c. But as in your question you specify Listview and I do not want to escape from that scope, come on.

Follow these steps.

1 - Create the Listview layout (cars_fragment.xml);

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ListView
        android:id="@+id/cars_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

2 - Create the list item layout now (item_cars_list.xml)

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:background="@android:color/transparent"
    android:padding="15dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

   <ImageView
      android:id="@+id/car_image"
      android:layout_width="48dp"
      android:layout_height="48dp">

    <TextView
     android:id="@+id/car_name"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content">
</android.support.constraint.ConstraintLayout>

3 - Create a custom Adapter;

public class CarsAdapter extends ArrayAdapter<Car> {

    private Context context;
    private List<Car> cars = null;

    public CarsAdapter(Context context,  List<Car> cars) {
        super(context, 0, cars);
        this.cars = cars;
        this.context = context;
    }

    @Override
    public View getView(int position, View view, ViewGroup parent) {
        Car car = cars.get(position);

        if(view == null)
            view = LayoutInflater.from(context).inflate(R.layout.item_cars_list, null);

        ImageView carImage = (ImageView) view.findViewById(R.id.car_image);
        carImage.setImageResource(car.getImagem());

        TextView carName = (TextView) view.findViewById(R.id.car_name);
        carName.setText(car.getNome());

        return view;
    }
}

• The big balcony is here: at Activity you would need to instantiate your view in the onCreate. Already in a Fragment you inflate your Listview in the method onCreateView.

4 - Inflating the Listview in the Fragment;

 @Nullable
    @Override
    public View onCreateView(
            @NonNull LayoutInflater inflater,
            @Nullable ViewGroup container,
            @Nullable Bundle savedInstanceState) {
        // Observe que o primeiro argumento do inflate é o layout com a ListView que criamos no primeiro passo
        View view = inflater.inflate(R.layout.cars_fragment, container, false);

        // Aqui você instancia sua ListView
        ListView carsList = (ListView) view.findViewById(R.id.cars_list);
        List<Car> cars = null; // Obtenha sua lista de objetos aqui

        CarsAdapter carsAdapter = new carsAdapter(getActivity(), cars);
        carsList.setAdapter(carsAdapter);
        return view;
    }

I hope this can help you.