How to load json file that refers to drawable images into a horizontal scroll view?

Question

I'm kinda new to android studio and most of my work was done referring to Stack Overflow answered questions and topics cutting short to the question.

my JSON is as such:

[ 
       { "name":"station1",
         "url":"http://example1.com",
         "image":"R.drawable.radio1"
        },
        { "name":"station2",
          "url":"example2.com",
          "image":"R.drawable.radio2"
        }
]

and so on, and my XML is

<HorizontalScrollView
    android:id="@+id/horizontalScrollView1"
    android:layout_width="fill_parent"
    android:layout_height="100dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    tools:layout_editor_absoluteY="0dp">

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

        <RelativeLayout
            android:id="@+id/relative1"
            android:layout_width="100dp"
            android:layout_height="100dp"></RelativeLayout>


    </LinearLayout>
</HorizontalScrollView>

I need to load the image and name in a scroll view horizontally created dynamically every time I add another "name and image" to the JSON file please can someone help me with a code (the text below every image that loads).

Answer 1

first to all do you need to change HorizontalScrollView in ListView https://developer.android.com/guide/topics/ui/layout/listview.html , as:

<LinearLayout
            android:id="@+id/fullscreen_content_controls"
            style="?metaButtonBarStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            tools:ignore="UselessParent">

            <ListView
                android:id="@+id/lstView"
                android:layout_margin="5dp"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:divider="@android:color/transparent"
                android:dividerHeight="10.0sp">
            </ListView>
        </LinearLayout>

When you add a in MainClass this code for work with ListView:

ListView listView = findViewById(R.id.lstView);
listView.setAdapter(new CustomAdapter(this, lst));

After, in CustomAdapter.java, need:

public class CustomAdapter extends BaseAdapter {

    public CustomAdapter(MainClass mainActivity, List<?> iLst) {
        lst = iLst;
        context=mainActivity;
        inflater = ( LayoutInflater )context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {

        View rowView;
        rowView = inflater.inflate(R.layout.listview_custom, null); <-- RAPPRESENTE A SINGLE ROW LAYOUT

        ImageView img = (ImageView) rowView.findViewById(R.id.customImg);
        TextView text =(TextView) rowView.findViewById(R.id.customText);

        return rowView;
    }
}

At end, you add the XML layout for a single row, it will duplicate automatically for each row:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/border_radius"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="1"
        android:orientation="horizontal">
        <LinearLayout
            android:layout_width="0sp"
            android:layout_weight=".2"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:gravity="center">
            <ImageView
                android:id="@+id/customImg"
                android:layout_width="50sp"
                android:layout_height="45sp"
                android:drawableTint="@color/White"
                android:background="@drawable/upload"
                android:tint="@color/White"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0sp"
            android:layout_weight=".6"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:id="@+id/customText"
                android:paddingTop="5dp"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="20dp"
                android:ellipsize="none"
                android:scrollHorizontally="false"
                android:maxLines="100"
                android:textColor="@color/White"
                android:text="Title" />

        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Answer 2

First i suggest to create a class BEAN like this:

public class MyBean{
String name;
String url;
String image;
}

Now, as GrIsHu describes in their answer here:

you need to read the Json File from your assests file using below code:

public String loadJSONFromAsset() {
    String json = null;
    try {
        InputStream is = getActivity().getAssets().open("yourfilename.json");
        int size = is.available();
        byte[] buffer = new byte[size];
        is.read(buffer);
        is.close();
        json = new String(buffer, "UTF-8");
    } catch (IOException ex) {
        ex.printStackTrace();
        return null;
    }
    return json;
}

After, transform the Json String into JsonArray like this:

JSONArray ja = new JSONArray(loadJSONFromAsset());

Now you can popolate a

List<MyBeen.class> lst 

like this:

for (int i = 0; i < ja.length(); i++) {
                lst.add(gSon.fromJson(ja.get(i).toString(), MyBeen.class));
        }