Updating gridview position with transparent image - android

I have a gridview set up with a list of images like this:
public int[] tb =
{ R.drawable.tb1, R.drawable.tb2, R.drawable.tb3, R.drawable.tb4,
R.drawable.tb5, R.drawable.tb6, R.drawable.tb7, R.drawable.tb8,
R.drawable.tb9, R.drawable.tb10, R.drawable.tb11, R.drawable.tb12,
R.drawable.tb13, R.drawable.tb14, R.drawable.tb15, R.drawable.tb16,
R.drawable.tb17, R.drawable.tb18 };
I know how to update a particular image by changing the position in the array e.g.
tb[2] = R.drawable.image;
then using
mAdapter.notifyDataSetChanged();
But my problem is, I want to update the image in the grid view and set the alpha so the image is transparent. Now with normal image view it is simple as doing
ImageView iv = (ImageView) findViewById(R.id.aTest);
iv.setAlpha(127);
But how do I apply to this to a specific image in the grid view. The images are stored as a set of ints and the images are applied using the ImageAdapter. So it means I can't just do
tb[0].setAlpha(127);
As it does not recognise it as an image view. I know I can set the imageView in the adapters Alpha, but that means all images will be transparent and I only want a select few to be transparent
So could anyone tell me how I can set it up so I can change one image in the list and make it transparent. I have the onClickItemListener set up so for time being trying to get it set up so when I click an item in the grid view, that image will become transparent.
Been trying lots of different solutions, but just can't seem to find anything that works. Would be very grateful if someone could point me in the right direction!!

There is no easy way to resolve this but here you go -
Modify your getView in your Adapter in this manner. (I am assuming you have a custom adapter, otherwise you will have to write one. See this example on how to do this)
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
//create new image view
} else {
// resuse
}
imageView.setImageResource(mThumbIds[position]);
// new code starts
if(clickedLocation == position){
imageView.setAlpha(alphaValue)
}
// new code ends
return imageView;
}
Store the position of the item from the onClickListener as clickedLocation
Now call invalidateViews() method on the GridView object.
Caveats: (Might not be the best way to go about it)
You will be redrawing the entire GridView everytime there is a click, you might see a flickering effect
If your resources are jpg or png then they need they need to be decoded each time

Related

Set empty cell in the middle of android GridView layout

I working on my project with gridview layout, and the whole code is pretty identical to Android Developers example (I can't post links because of my low reputation, sorry).
Its works fantastic, when I need to fill screen with 3*3 or 4*4 (and etc) grids, but now I have to design my gridview with only 8 imageviews and I want to set the empty cell in the middle of GridView, just like that (click for images):
That is my current position:
This is what I need to do:
I have googled that a lot, but I can't find some example that shows how to implement that.
Have you any idea how can I solve that issue?
Set it to invisible -
imageView.setVisibility(View.INVISIBLE);
not works for me, because then I "lost" one of my imageViews.
Thanks a lot!
Let's consider you will always have an (x*x) number of items in your GridView, where x is an odd number bigger than 1, like 3 or 5. The index of the item that you want to hide is items.size()/2. Note that in Android, 9/2 = 4 and 25/2 = 12. So, we already know the index of the item that should be hidden.
Following, in the code, you just have to make your item View stay invisible when that your adapter.getView() method is called for that index. Here is that getView() portion of the code:
#Override
public View getView(final int position, View convertView, ViewGroup parent)
{
ViewHolder viewHolder;
LayoutInflater inflater = yourContext.getLayoutInflater();
if(convertView==null)
{
viewHolder = new ViewHolder();
convertView = inflater.inflate(R.layout.your_grid_item_layout, null);
convertView.setTag(viewHolder);
}
else
{
viewHolder = (ViewHolder) convertView.getTag();
}
if(position == yourItemsList.size()/2){
convertView.setVisibility(View.INVISIBLE);
}
else{
convertView.setVisibility(View.VISIBLE);
}
return convertView;
}
This will make your middle View invisible. The effect that you wanted.
Also note that your GridView number of lines has to be equal to the number of rows for this method to work.
You can always change the number of rows dynamically, according to the number of items that you have. In your Activity code, before gridView.setAdapter(), like this:
gridView.setNumColumns((int) Math.sqrt(myItemsList.size()));
Again I warn you that this code only works for GridView configurations of 3*3, 5*5, 7*7, and so on.

Android Listview : Center items in layout when fewer items

I have a listview that can have items from 1 to 100, dynamically varying.
However, when I have fewer items, I want the items to appear vertically centered in
the listview layout. By default, Android draws the items form the top. I have attached a picture to illustrate what I need.
Is there any way I can achieve this, either by code or in XML layout ?
Thanks.
Edit: Based on the answers I have received now, I am adding more clarity to my question as the answers are off mark.
The positioning of the Listview in the main layout or positioning of individual item layouts is not an ISSUE here. The listview is positioned properly as shown in the shaded background. The question to which I need answer is:
Assume there are 10 items, the entire shared area of Listview will be used by items,
possibly Items 1 to 5 are shown.
Assume there are 3 items only. The listview is still shown but Items 1,2 and 3 are rendered at the top of the listview (shaded area). However, in this case, I want the items to be drawn at centre of the listview's layout (as shown in the picture).
Anyway this can be done ?
Use this property
mLoginUserNameValueView.setGravity(Gravity.CENTER_HORIZONTAL);
which one you want to center in the List view adapter and which position exactly where you need
e-x you need your 55th position you want center the item means
in getview you will use this line like below.
#Override
public View getView(int position, View convertView, ViewGroup parent) {
convertView = null;
if (convertView == null) {
convertView = mLayoutInflater.inflate(R.layout.navigationlayout,
null);
mHolder.mLayout = (LinearLayout) convertView
.findViewById(R.id.navigationLayout);
mHolder.mNavigationtext = (TextView) convertView
.findViewById(R.id.navigationText);
convertView.setTag(mHolder);
}
if (\\Your desired position checking )
\\ and set the above line here
}
return convertView;
}

How to overlay rows of Android Listview

I am trying to implement the below Android ListView. The each yellow box represents one row of ListView. If you see the rows, each row is over lapped by previous and next row. I have searched Google, but I could not find any proper solutions. If anyone has clues, please let me know.
Thanks in advance.
Think outside the box. Imagine this list not having the rows overlap, but just having diagonal lines on it. In your code, set the Listview's divider height to 0:
ListView listView = (ListView)findViewById(R.id.your_listview);
listView.setDivider(null);
listView.setDividerHeight(0);
Then create two drawables for the rows- one for odd rows, another for even rows:
and
(don't use these two images, as they are not properly/evenly sized, but create the ones for your specific list).
Then create an adapter for your list view - and in its getView method, set the corresponding background to your element:
#override
public void getView(int position, View convertView, ViewGroup parent) {
MyView row;
if(convertView == null) {
row = (MyView)convertView;
}
else {
row = ... //create your view - inflate or create in code
}
row.setBackgroundResource(position%2==1 ? R.drawable.row_odd : R.drawable.row_even);
... //populate the rest of the row with whatever you need
return row;
}
And voila! You get what the effect you need (note, on this schematic the black lines represent the boundaries between rows - these are for schematic purposes only - in your final result you will not have them):
Finally, please note that if you want highlight on your "rows" when an item is selected, you'll have to implement custom state change listeners, which would change the background of the cell that's being selected and also the ones above and below it as to create the proper visual effect.
I got the same issue but I managed to find a solution
In the ListView in the xml you can set a negative dividerHeight, it works for me.
<ListView
...
android:dividerHeight="-5dp" />
I hope it can help someone :)

Android GridView issue with position 0

I'm working with the GridView example at Android Developers. I'm adapting the example code to display a Sudoku board using the GridView, 9x9 images. (It could be 9x9 text digits, but I've chosen images).
The example code contains this for setting the ImageViews (mThumbIds is an array of image resource ids):
// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) { // if it's not recycled, initialize some attributes
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
All good so far and it initialises fine.
I keep track of the imageViews for each cell so I can use them when I want to display a different image (by clicking on the image itself).
Again this works fine, except for position 0 (the first item in the GridView). This resolutely stays with the image set above from mThumbIds.
i.e.
I use
imageView.setImageResource(imgId)
to change images in different locations around the grid and they all change except for position 0.
The code runs with no exceptions, but the image never changes.
Is there something special about position 0? This is becoming a hair-loss scenario - any advice gratefully received.
Your getView code seems fine, but it's probably not being called. You need to trigger a redraw.
If your adapter is a BaseAdapter (or a subclass of BaseAdapter), call notifyDataSetChanged() on the grid's adapter to force the redraw.
Something like:
((BaseAdapter)mGridView.getAdapter()).notifyDataSetChanged();

Gallery items overlapping (bleed in)

My probel is that images in my Gallery are bleeding in into each other once I begin scrolling towards the next image.
I am using a android.widget.Gallery connected to a custom adapter I extended from BaseAdapter.
The adapter's GetView() method is like this
public View getView(int position, View convertView, ViewGroup parent) {
ImageView i = new ImageView(mContext);
if (mImageBitmap != null && position < mImageBitmap.length)
i.setImageBitmap(mImageBitmap[position]);
return i;
}
Did you try using android:spacing ( in xml) or setSpacing(int spacing) (in code) on the Gallery?
I actually found the solution to my problem. In getView(), the ImageView I was returning had no background and thus the ImageViews would overlap. I set the background of the ImageView to black before returning it and it looks great
It seems the fading is added automatically and disabling through XML doesn't work.
However disabling programatically seems to work:
Gallery carousel = (Gallery)findViewById(R.id.image_carousel);
carousel.setHorizontalFadingEdgeEnabled(false);
If you have access to the Gallery instance, you can also call the following method to remove the bleed in area:
gallery.setUnselectedAlpha(1.0f);
This also removes the white-ish haziness of the Gallery view.

Categories

Resources