Recyclerview selected item's background image too large on smaller screen devices

Question

I have a RecyclerView that has CardView to display items. The items contain image views and TextView that would be populated once the user selects an item. Once they select an item I retrieve the selected item's background and fire an intent to open a new activity, in which I create a layout dynamically and set the selected item's background as the layout's background. This is my adapter class that will populate my RecyclerView where I retrieve the background of the selected item.

public class PersonsAdapter extends RecyclerView.Adapter<PersonsAdapter.MyViewHolder> {

        private List<Person> mpersonsList;


        public class MyViewHolder extends RecyclerView.ViewHolder {
            public TextView name .....;
            View v;
            Person p;

            public MyViewHolder(View view) {
                super(view);
                name = (TextView) view.findViewById(R.id.tvName);
                //and all other textviews....

                v = view;
                v.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        //if (view.getId() == getAdapterPosition()) {
                            //int itemposition = mRecyclerView.indexOfChild(v);
                            Intent i = new Intent(context, SelectedTemplate.class);
                            startActivity(i);
                            theBackground = view.getBackground();//retrieve the background of the selected item
                        //}
                    }
                });
                List<Drawable> templatesList = new ArrayList<>();
            }
        }


        public PersonsAdapter(List<Person> personsList) {
            this.mpersonsList = personsList;
        }

        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.person, parent, false);

            return new MyViewHolder(itemView);
        }

        @Override
        public void onBindViewHolder(MyViewHolder holder, int position) {
            Person person = mpersonsList.get(position);
            holder.name.setText(person.getName());
            //and other details of the item......

            holder.p = mpersonsList.get(position);

            if(position == 0){
                holder.v.setBackgroundResource(R.drawable.wavy_curves_onblack);
            } 
        //and other background images.....
        }

        @Override
        public int getItemCount() {
            return mpersonsList.size();
        }
    }

In the next activity I retrieve the selected item as follows.

private void getSelectedTemplate() {
        LayoutInflater vi = (LayoutInflater) getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View v = vi.inflate(R.layout.selected_template, null);

        // fill in any details dynamically here


        //insert into main view
        ViewGroup insertPoint = (ViewGroup) findViewById(R.id.selectedtemplatelayout);
        insertPoint.setBackground(TheTemplates.theBackground);
        insertPoint.addView(v, 0, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));

        rl = (LinearLayout) findViewById(R.id.selectedtemplatelayout);
        image.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
        image.getLayoutParams().height = (int) getResources().getDimension(R.dimen.image_height);
        image.getLayoutParams().width = (int) getResources().getDimension(R.dimen.image_width);



        name.setText("NAME");
        name.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
        //add all other textviews dynamically.....

        rl.removeAllViews();
        rl.addView(image);
        rl.addView(name);
        //add all remaining textviews
    }

When I test it in an emulator or a device that is less than 5.5inches I see very huge background(I can scroll forever) and I can only see the two images but not the textviews. In larger devices(both real and emulator) I get the right size background. But I don't see the textviews just like the smaller devices. I see the two images though.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:focusable="true"
    android:focusableInTouchMode="true"><!--this two lines will hide the keyboard and make the NAME textview visible -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/my_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/selectedtemplatelayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="4dp"
        android:orientation="vertical" >
//this is the layout I would like to stuff all my textviews and images and //set the background of the selected item.
    </LinearLayout>

    </ScrollView>


//another layout
    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

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

This is the RecyclerView

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">-->

    <android.support.v7.widget.RecyclerView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/templateList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        />
<!--</LinearLayout>-->

I can't seem to figure out why this is happening and how I could fix it. Any help is appreciated.

keep Practice of Developing Screens for Multiple Resolutions — Raut Darpan, Oct 18 '16 at 18:23

score 1 · Answer 1 · answered Oct 18 '16 at 18:26

1

Create Folder like

Mobile : Create different values folder which is mention below:

values                     (For mdpi devices)
values-hdpi                (For hdpi devices)
values-xhdpi               (For xhdpi devices)
values-xxhdpi              (For xxhdpi devices)

Tablets: Create different layout folder which is mention below:

layout-sw600dp             (For 7? to 9? Screen)
layout-sw720dp             (For 10? to above screen)

For image resources: Create 4 drawable folders:

drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi

And if you are handling it through api. use different images size imagesmall_link imagelarge_link imagexlarge_link

answered Oct 18 '16 at 18:26

Raut Darpan

1,520
9
14

I appreciate your help. I will consider that as I continue to develop the app. – The_Martian Oct 18 '16 at 18:51
How would I apply these if I have a shape that made in xml that I am using as a background? – The_Martian Oct 18 '16 at 19:02
i am not able to understand your question please can you be specific? – Raut Darpan Oct 18 '16 at 19:04
Similar to this SO question and answer. http://stackoverflow.com/questions/24993309/how-can-i-add-an-image-in-my-custom-shape-xml – The_Martian Oct 18 '16 at 21:53

score 0 · Accepted Answer · answered Oct 18 '16 at 18:50

0

I solved the size issue by simply changing the layout height from wrap_content to limited size like 300dp or something and that seems to work across all screen sizes. But the textviews are not visible in all screens which is odd. I will update this answer when I fix that so it might help someone sometime.

answered Oct 18 '16 at 18:50

The_Martian

3,684
5
33
61

1

use 320dp for normal screens – Raut Darpan Oct 18 '16 at 18:58

Recyclerview selected item's background image too large on smaller screen devices

2 Answers2