Android List view layout Similar to Google play

Question

I want to implement a List layout similar to Google Play which have menu for every individual Row. Please help me to create this.

Do I need to create a Popup Menu or there is any option available to achieve this.

Thanks

Lampoon

see #16427860 – Grimbal

you can use viewpager with tabs – Chadchadabe

Answer 1

Looks like you are trying to do exactly the way in the image shown. I am just giving an example of how I am trying to achieve this.

Here's how I am doing this. Not very difficult. Just straight implementation of Popup Menu.

Step 1 : My Adapter

 public class ListAdapter extends BaseAdapter{

        private ArrayList<String> mainList;


        public ListAdapter(Context applicationContext,
                ArrayList<String> questionForSliderMenu) {

            super();

            this.mainList = questionForSliderMenu;

        }

        public ListAdapter() {

            super();
            this.mainList = QuestionForSliderMenu;

        }

        @Override
        public int getCount() {

            return mainList.size();
        }

        @Override
        public Object getItem(int position) {

            return mainList.get(position);
        }

        @Override
        public long getItemId(int position) {

            return position;
        }

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

            if (convertView == null) {

                LayoutInflater inflater = (LayoutInflater) getApplicationContext()
                        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                convertView = inflater.inflate(R.layout.custom_row_stack, null);
            }


            TextView tv1 = (TextView) convertView
                    .findViewById(R.id.row_textView1);
            TextView tv2 = (TextView) convertView
                    .findViewById(R.id.row_install_textView1);
            ImageView imageIcon = (ImageView) convertView
                    .findViewById(R.id.row_imageView1);
            ImageView imageClick = (ImageView) convertView
                    .findViewById(R.id.row_click_imageView1);

            try {

                tv1.setText(" List Item "+ " : " + position);
                imageClick.setOnClickListener(new OnClickListener() {

                    @Override
                    public void onClick(View v) {



                        switch (v.getId()) {
                        case R.id.row_click_imageView1:

                            PopupMenu popup = new PopupMenu(getApplicationContext(), v);
                            popup.getMenuInflater().inflate(R.menu.clipboard_popup,
                                    popup.getMenu());
                            popup.show();
                            popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
                                @Override
                                public boolean onMenuItemClick(MenuItem item) {

                                    switch (item.getItemId()) {
                                    case R.id.install:

                                        //Or Some other code you want to put here.. This is just an example.
                                        Toast.makeText(getApplicationContext(), " Install Clicked at position " + " : " + position, Toast.LENGTH_LONG).show();

                                        break;
                                    case R.id.addtowishlist:

                                        Toast.makeText(getApplicationContext(), "Add to Wish List Clicked at position " + " : " + position, Toast.LENGTH_LONG).show();

                                        break;

                                    default:
                                        break;
                                    }

                                    return true;
                                }
                            });

                            break;

                        default:
                            break;
                        }



                    }
                });

            } catch (Exception e) {

                e.printStackTrace();
            }

            return convertView;
        }

    }

Step 2 : In Activity, just setting the adapter:

public class CustomListActivity extends Activity {

    String[] numbers = { "Ace", "2", "3", "4", "5", "6", "7", "8", "9", "10",
            "Jack", "Queen", "King" };
    ArrayList<String> QuestionForSliderMenu = new ArrayList<String>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.listview_layout);

        ListView listView = (ListView) findViewById(R.id.customlistView1);




        for (String s : numbers) {

            QuestionForSliderMenu.add(s);

        }

        ListAdapter mAdapter = new ListAdapter(this, QuestionForSliderMenu);

        listView.setAdapter(mAdapter);

    }

Step 3: Custom row items/layout:

custom_row_stack.xml

<?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:orientation="vertical" >

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

        <ImageView
            android:id="@+id/row_imageView1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginTop="10dp"
            android:src="@drawable/page1" />

        <TextView
            android:id="@+id/row_textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="20dp"
            android:text="Some Item"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#333333" />

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

            <ImageView
                android:id="@+id/row_click_imageView1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="right"
                android:clickable="true"
                android:src="@drawable/dots" />

            <TextView
                android:id="@+id/row_install_textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:padding="10dp"
                android:text="Install"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:textColor="#333333" />
        </LinearLayout>
    </LinearLayout>

Step 4 : My Popup menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+id/install"
        android:title="Install" />
    <item
        android:id="@+id/addtowishlist"
        android:title="Add to wishlist" />
</menu>

Finally: the screenshot of how it looks like.

ListView http://imageshack.com/a/img822/4144/umdy.png ListView http://imageshack.com/a/img32/9839/ne90.png ListView http://imageshack.com/a/img198/7404/prqc.png

If there's any better solution, it will be very helpful for me too. Hope this helps..:)

Luxuriant

@Droidy Awesome.. I am glad it helped. Honestly.. now that we have Recycler View, we can have a much better implementation. Maybe I'll update this answer for future viewers..:) – Luxuriant

@Luxuriant yes mate. You should I guess! ;-) – Epa

E/ACRA: ACRA caught a InflateException exception will occur, i will follow your code. Please need your help,thanks in advance – Consanguinity

@MohanRajS Is the issue happening when inflating the views ? This is an old code but inflation shouldn't be that issue.. lemme know where ur stuck. – Luxuriant

@Mike Thank you for the reply, I found the solution for bug, The Problem is not in this Inflate code, I was used support library in my Project that made this Bug. i'm really sorry for the comment what i was posted. Please make my comment into flag. None of me don't have to suffer by my comment. Your code is perfectly working for me. Thanks again Mike. – Consanguinity

@MohanRajS No problem at all.. i am glad it all worked fine now. However, the code above is a very simple solution and this can totally be more generic and encapsulated especially now that we have recycler views and other new API's to make things simpler. Good Luck :) – Luxuriant

Brother you are missing one LinearLayout tag there – Coan

@AlexeyFShevelyov Its probably the last tag. Its just a sample code for the asked question. I probably missed it. – Luxuriant

Answer 2

You can use the Cards-UI Library

Seline