Add simple navigation to Items in ListView Android studio

Viewed 68

I was already looking for various navigation solutions but I couldn't fit any for my app.

I have Parcelable objecs which are displayed in ListView using Array Adapter. When i click on item, it goes to another activity with another layout, dedicated to display this single item with image gallery, title etc. Therefore, i would like to add simple navigation as in picture which moves to next item if exist, previous item if exist and back to List View.

Here's some code

Single Item activity

public class SingleItem extends AppCompatActivity {

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

        Intent intent = getIntent();

        Single singleItem = intent.getParcelableExtra("Single");

        String id = singleItem.getId();
        Integer position = singleItem.getPosition();
        String title = singleItem.getTitle();
        String subtitle = singleItem.getSubtitle();
        String text = singleItem.getText();
        int[] image = singleItem.getImage();

        TextView titleTV = findViewById(R.id.singleItemTitle);

        LinearLayout gallery = findViewById(R.id.gallery);
        LayoutInflater inflater = LayoutInflater.from(this);


        for (int i = 0; i < image.length; i++) {
            View view = inflater.inflate(R.layout.single_item_gallery, gallery, false);
            ImageView imageView = view.findViewById(R.id.singleItemGalleryImage);
            imageView.setImageResource(image[i]);
            gallery.addView(view);
        }

        TextView descTV = findViewById(R.id.singleItemDesc);

        titleTV.setText(title);
        descTV.setText(text);
    }
} 

Here's my adapter

val listViewAdapter = ItemListAdapter(this, R.layout.adapter_view_layout, itemList)
        listView.adapter = listViewAdapter


        listView.setOnItemClickListener { _: AdapterView<*>, _: View, position : Int, _: Long ->
            val intent = Intent(this, SingleItem::class.java)
            intent.putExtra("Single", itemList[position])
            startActivity(intent)
        }

Single Item layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <TextView
        android:id="@+id/singleItemTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/singleItemTitle">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <HorizontalScrollView
                android:layout_width="match_parent"
                android:layout_height="220dp"
                android:paddingStart="10dp"
                android:scrollbars="none"
                android:paddingEnd="10dp">

                <LinearLayout
                    android:id="@+id/gallery"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"/>

            </HorizontalScrollView>

            <TextView
                android:id="@+id/singleItemDesc"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
            
        </LinearLayout>
    </ScrollView>
</RelativeLayout>

And i would like put navigation in layout above.

List view:

enter image description here

Single item navigation example:

enter image description here

2 Answers

Hello and welcome to StackOverflow (SO)!

As a newcomer you may not be aware, but, on SO, you should clearly define your question. I don't see a direct question. I'm deducing that you need a set of guidance in implementing your image gallery view using Android and to be able to swipe through them using the buttons (if I'm not mistaken).

Your approach is theoretically okay. What's left to do it to get a reference to the Next/Previous buttons from your SingleItem Activity and to manually scroll the HorizontalScrollView object when you press Next/Previous buttons.

However, your code has a major flaw in the following code segment.

for (int i = 0; i < image.length; i++) {
        View view = inflater.inflate(R.layout.single_item_gallery, gallery, false);
        ImageView imageView = view.findViewById(R.id.singleItemGalleryImage);
        imageView.setImageResource(image[i]);
        gallery.addView(view);
    }

This is something which you should not be doing. Instead, use a RecyclerView which will only load your image when it's required to be displayed. You're essentially creating all the image views once you visit the detail view (SingleItem).

Your current approach might work okay for a few images, but is not recommended for a lot of images as it may

  • Slow down and freeze the app while the images load
  • You'll eventually run out of memory

Once you get this implemented with the RecyclerView, give it a shot and see whether it works. If you still have trouble, please don't hesitate to ask!

Cheers!

I see two options:

  1. Instead of putting a whole Parcelable in the intent just put some kind of ID of the object. It can be a primary key, if you store them in DB or just an array index, if it's an array in memory kept in some singleton object. Then in SingleItem activity's onCreate just find the item by ID and load it. Therefore you can open more SingleItem activities from a SingleItem activity just by passing next or previous item ID to it.
  2. Use fragments instead. You'll be having one activity, which holds a reference to the list of items, and two fragments one for the list view one and another for a single item display. Thus in single item fragment you can call a method on parent activity once "Next" button is clicked, which will then take the next item and create a replacement single item fragment with new data.
Related