CODEWITHSUNDEEP
androidxmllistviewnumberpicker
Francisco Durdin Garcia
Francisco Durdin Garcia

Reputation: 13317

Modify selected item in Numberpicker Android

I'm trying to figure some way to achieve the next kind of view. At the moment I have tried to create a Listview and just make bigger the selected item. But I cannot make the selected item always be in the middle of my view. So now I'm trying to get this with a numberpicker.

But I didn't find any way to hide the divider bar, and make different the selected item and the rest of the view. The idea is get something like in the bottom image.

enter image description here

Upvotes: 4

Views: 1431

Answers (4)

NSimon
NSimon

Reputation: 5287

I wanted to achieve a pretty similar effect on one of my project, where I wanted the middle item of my recycler view to be more prominent. In my case, that said item is only z-translated to give an impression of focus, but the result is pretty similar to what you're describing. I'll post my code here, in case it could help you go in the right direction : 

//We're on the onCreateView in a fragment here
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);

            //First I find the first visible element
            int firstVisiblePosition = mLayoutManager.findFirstVisibleItemPosition();

            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                if (firstVisiblePosition != -1) {
                    int lastVisiblePosition = mLayoutManager.findLastVisibleItemPosition();

                    int itemHeight = mLayoutManager.getChildAt(0).getMeasuredHeight();
                    int itemTop = mLayoutManager.getChildAt(0).getTop();

                    //We use a '+' as itemTop will be negative
                    int delta = itemHeight + itemTop;

                    int currentItemToBeFocused = (delta < (itemHeight / 2)) ? 1 : 0;

                    //Reset the z-translation of other items to 0
                    for (int i = 0, last = (lastVisiblePosition - firstVisiblePosition); i <= last; ++i) {
                        if (mLayoutManager.getChildAt(i) != null) {
                            mLayoutManager.getChildAt(i).setTranslationZ(0);
                        }
                    }
                    //And set the z-translation of the current "centered" item
                    if (mLayoutManager.getChildAt(currentItemToBeFocused) != null) {
                        mLayoutManager.getChildAt(currentItemToBeFocused).setTranslationZ(10);
                    }
                }
            }
        }

        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            super.onScrollStateChanged(recyclerView, newState);
        }
    });

Upvotes: 2

Chebyr
Chebyr

Reputation: 2181

You can implement this using RecyclerView with one Holder for Normal Item and one Holder for Selected Item.

Inside your RecyclerView Adapter

private static int SELECTED_ITEM_POSITION = 2;
private static int NORMAL_ITEM = 1;
private static int SELECTED_ITEM = 2;

@Override
public int getItemViewType(int position)
{
    if(position == SELECTED_ITEM_POSITION)
        return SELECTED_ITEM;
    else
        return NORMAL_ITEM;
}

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
{
    LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());
    if(viewType == SELECTED_ITEM)
    {
        YourSelectedViewHolder selectedViewHolder = (YourSelectedViewHolder)layoutInflater.inflate(R.layout.selected_item_layout, parent, false);
        return selectedViewHolder;
    }
    else //viewType == NORMAL_ITEM
    {
        YourNormalViewHolder normalViewHolder = (YourNormalViewHolder)layoutInflater.inflate(R.layout.normal_item_layout, parent, false);
        return normalViewHolder;
    }
}

Upvotes: 3

Noitacol
Noitacol

Reputation: 311

Following is a number picker with custom display values:

 final NumberPicker aNumberPicker = new NumberPicker(context);
    List<Integer> ids = getIds();
    aNumberPicker.setMaxValue(ids.size()-1);
    aNumberPicker.setMinValue(0);
    mDisplayedIds = new String[ids.size()];
    for (int i = 0; i < ids.size(); i++) {
        mDisplayedIds[i] = "Nombre"+String.valueOf(ids.get(i)) ;
    }
    aNumberPicker.setDisplayedValues(mDisplayedIds);
    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(50, 50);
    RelativeLayout.LayoutParams numPickerParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    numPickerParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
    relativeLayout.setLayoutParams(params);
    relativeLayout.addView(aNumberPicker, numPickerParams);

Also, you can check out some open source library like this one AndroidPicker

Upvotes: 3

Javier Delgado
Javier Delgado

Reputation: 2383

I think that the ListView may be more configurable than the NumberPicker.

What you can do is use different row layouts dependind if it is the middle one or the others, so your getView(...) method would look like this:

public View getView(int position, View convertView, ViewGroup parent) {
    if (position == 1) {
        convertView = LayoutInflater.from(getContext()).inflate(R.layout.focused_layout, parent, false);
        // Do whatever with this view

    } else {
        convertView = LayoutInflater.from(getContext()).inflate(R.layout.not_focused_layout, parent, false);
        // Do whatever with this view

    }

    return convertView;
}

This way you can customize both layouts both in XML and code. Yo can change the condition if you want the "special" item any other way.

Upvotes: 3

Related Questions