How can I reduce the gap between items of GridView? - android

Example Captcha:
Here are the codes of Adapter:
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView=new ImageView(context);
imageView.setImageBitmap(list.get(position).getBitmap());
imageView.setLayoutParams(new AbsListView.LayoutParams(
(int) (parent.getWidth() / DataUtils.num),//DataUtils.num=3
(int) (parent.getHeight() / DataUtils.num)));
return imageView;
}
And the XML of GridView:
<GridView
android:id="#+id/gv_paly"
android:layout_below="#id/ll_top"
android:layout_above="#id/ll_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
></GridView>
Please, how do I reduce the gaps between CAPTCHA images so this looks more professional?

Use android:stretchMode and android:horizontalSpacing.
This will make a fix gap between view.You can set it to 0.
<GridView
android:stretchMode="columnWidth"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:id="#+id/gv_paly"
android:layout_below="#id/ll_top"
android:layout_above="#id/ll_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</GridView>
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView=new ImageView(context);
imageView.setImageBitmap(list.get(position).getBitmap());
imageView.setLayoutParams(new AbsListView.LayoutParams(
(int) (parent.getWidth() / DataUtils.num),//DataUtils.num=3
(int) (parent.getWidth() / DataUtils.num)));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
return imageView;
}

Related

Dimensions of the GridView cell is not changing

I dont know what is the problem in my code. I want to display some images in a GridView but the images being displayed are very small, and same is happening with the high resolutions images too. Please help. Thanks in Advance.
I dont know what to do. I am posting my code too.
activity_main.xml file
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent">
<GridView
android:id="#+id/gridview_stickers"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center">
</GridView>
gridview_items.xml file
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:orientation="vertical"
android:background="#000000">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/sticker"
android:scaleType="centerCrop"
/>
getView method of the AdapterClass
public View getView(int position, View convertView, ViewGroup parent) {
View imageView = convertView;
ImageView picture;
if(imageView == null) {
imageView = inflater.inflate(R.layout.gridview_items, parent, false);
imageView.setTag(R.id.sticker, imageView.findViewById(R.id.sticker));
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
imageView.setPadding(8, 8, 8, 8);
}
picture = (ImageView)imageView.getTag(R.id.sticker);
picture.setImageBitmap(img.get(position).imageBitmap);
return imageView;
}
Finally I figured out myself. I changed the
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
to
imageView.setLayoutParams(new GridView.LayoutParams(300, 300));
and I got the desired results.

Scalable Gridview Layout

I've created a scaling, evenly-spaced gridview layout for a simple card-matching game I made for my nephew. It's behaving pretty much as I want, but it seems that there should be a less convoluted way to achieve this, so I was wondering if anyone could suggest a better/simpler way. I'm brand new to Android, so it's likely I over-engineered this.
I have a setting to control the # of cards (12-32), and it scales to any size screen (tablet or phone of various sizes and resolutions).
Here's my gridview XML:
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:background="#drawable/wood"
android:layout_below="#id/score_board"
android:layout_above="#+id/messageparent"
/>
I have an ImageAdapter subclass of BaseAdapter, with a getView that looks like this. The getCellWidth and getCellHeight functions return a value I set in the main activity on layout change (see below).
public View getView(int position, View convertView, ViewGroup parent) {
CardView imageView;
if (convertView == null) { // if it's not recycled, initialize some attributes
imageView = new CardView(mContext,position,mCardFaces[position]); //mThumbIds[position]
imageView.setLayoutParams(new GridView.LayoutParams(((MainActivity)mContext).getCellWidth(), ((MainActivity)mContext).getCellHeight()));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
//imageView.setPadding(R.dimen.card_padding, R.dimen.card_padding, R.dimen.card_padding, R.dimen.card_padding);
imageView.setPadding(8, 8, 8, 8);
imageView.setImageResource(CardView.CARDBACK);
} else {
imageView = (CardView) convertView;
//If we recycle an old view, make sure it resizes appropriately
if (imageView.getWidth() != ((MainActivity)mContext).getCellWidth()) {
imageView.setLayoutParams(new GridView.LayoutParams(((MainActivity)mContext).getCellWidth(), ((MainActivity)mContext).getCellHeight()));
}
if(!mCardFaces[position].equals(imageView.getResID()))
imageView.updateCard(mCardFaces[position]);
}
return imageView;
}
Here's the relevant code in my sizeCardsToFit method:
//... algorithm to calc cols, width and height to fit screen
gridview.setNumColumns(nCols);
gridview.setColumnWidth(width);
for (int i = 0; i < gridview.getChildCount(); i++) {
((CardView)gridview.getChildAt(i)).setLayoutParams(new GridView.LayoutParams(width,height));
}
mCellHeight=height;
mCellWidth=width;
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/MyGrid" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:padding="0dp"
android:verticalSpacing="2dp" android:horizontalSpacing="2dp"
android:scrollingCache="true" android:smoothScrollbar="true"
android:clipChildren="true" android:alwaysDrawnWithCache="true"
android:numColumns="auto_fit" android:columnWidth="100dp"
android:stretchMode="columnWidth" android:gravity="center_horizontal"
android:background="#000000">
</GridView>

Grid View Auto fit is not showing full images

Why is my Grid View showing images like this?
My code:
<GridView
android:id="#+id/grid_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/sbsz"
android:numColumns="auto_fit"
android:columnWidth="90dp"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:gravity="center"
android:stretchMode="columnWidth" >
</GridView>
Image Adapter:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
LinearLayout linearlayout=new LinearLayout(mContext);
ImageView imageView = new ImageView(mContext);
text=new TextView(mContext);
linearlayout.setOrientation(LinearLayout.VERTICAL);
imageView.setImageResource(mThumbIds[position]);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setLayoutParams(new GridView.LayoutParams(270, 270));
text.setText(mThumbTxt[position]);
linearlayout.addView(imageView);
linearlayout.addView(text);
return linearlayout;
}
}
What's wrong with this code?
How can I make it to show full images? Shouldn't autofit do it?
Autofit means that it will calculate how many 90dp wide columns it can fit. You should change the scale type to center crop, which looks better. And probably use another LayoutParams for the Image, like:
imageView.setLayoutParams(new GridView.LayoutParams(LayoutParams.MATCH_PARENT, 120));

Android ImageView duplicated content LazyLoad

I have problem with lazy loading images to ImageViews. When i scroll down, i see images from top (dupliacated), when new image is downloaded its replaced with new one. How can i show on new images ProgressBar, and replace it with images when its downloaded?
Here is my getView() from LazyAdapter:
public View getView(int position, View convertView, ViewGroup parent) {
View vi=convertView;
if(convertView==null)
vi = inflater.inflate(R.layout.item, null);
ImageView image=(ImageView)vi.findViewById(R.id.image);
imageLoader.DisplayImage(data[position], image);
return vi;
}
and item.xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ProgressBar android:layout_width="75dp"
android:layout_height="75dp"
android:layout_gravity="center"/>
<ImageView
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:minHeight="300px"
/>
</FrameLayout>
imageLoader.DisplayImage its asyncTask.
You need to set the image path to tags for ImageView.
public View getView(int position, View convertView, ViewGroup parent) {
View vi=convertView;
if(convertView==null)
vi = inflater.inflate(R.layout.item, null);
ImageView image=(ImageView)vi.findViewById(R.id.image);
image.setTag(data[position]);
imageLoader.DisplayImage(data[position], image);
return vi;
}

Android GridView with ImageView and TextView donĀ“t show well

Hi I have a problem displaying my Gridview. I searched many sites and here on StackOverflow but took several days without finding the solution.
I leave here my xml (listado.xml) code where is gridview:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<GridView
android:id="#+id/grid_release"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clipChildren="true"
android:stretchMode="columnWidth"
android:numColumns="2"
>
<!-- android:stretchMode="columnWidth"
android:stretchMode="spacingWidthUniform"
android:verticalSpacing="1dip"-->
</GridView>
The xml file with textview and imageview (grid_release.xml):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#DC0000"
android:orientation="vertical"
android:gravity="center_horizontal" >
<ImageView
android:id="#+id/rls_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/rls_txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Titulo" />
Also leave the code of ImageAdapter:
public View getView(int position, View convertView, ViewGroup parent) {
View grid;
if(convertView==null)
{
grid = new View(context);
grid = layoutInflater.inflate(R.layout.grid_release, null);
}else{
grid = (View)convertView; //imageView=(ImageView)convertView;
}
ImageView rlsimg = (ImageView)grid.findViewById(R.id.rls_img);
rlsimg.setImageDrawable(LoadImageFromURL(GridViewConfig.getResim_list().get(position)));
TextView rsltxt = (TextView)grid.findViewById(R.id.rls_txtTitle);
rsltxt.setText("Adpt00"+position);
return grid;
Thanks for help!!!
This solve my problem:
Metodo GetView of ImageAdapter
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View myView;
if(convertView==null)
{
LayoutInflater li = ((Activity)context).getLayoutInflater();
myView = li.inflate(R.layout.grid_prueba1, null);
myView.setLayoutParams(new GridView.LayoutParams(100,100));
myView.setPadding(5,5,5,5);
}else{
myView = (View)convertView;
}
ImageView img = (ImageView)myView.findViewById(R.id.img2);
img.setImageDrawable(LoadImageFromURL(GridViewConfig.getResim_list().get(position)));
TextView txt = (TextView)myView.findViewById(R.id.txt2);
txt.setText("Adept0000"+position);
return myView;
}
But now I have another problem, textview displayed within the image. I want this text below the image. I'll have to open another query.

Categories

Resources