Develop Reference

Android GridView not working properly on smaller and bigger screen devices

I have a GridView in my Android app, which is having images. I have 10 rows and 2 columns in the GridView. With that, I have same size images in every grid i.e. 20 images.
The grid code is,
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:columnWidth="140dp"
android:drawSelectorOnTop="true"
android:gravity="center"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="5dp"
android:focusable="true"
android:clickable="true"
/>
Meanwhile in the java code, I have used an Adapter. Here's the code, which sets the individual grid size and images, with the scaleType,
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(340, 400));
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setPadding(10, 10, 10, 10);
It's working fine on device screen size 5'0, but on other devices such as 5'7, 4'5, it's not working in the same way. The grids (and their individual images) are somewhat hiding/ cropping. Even under 5'0, it is showing some extra space, which looks poor.
How GridView works correctly on different screen sizes.
Here's a sample, how is it looking like in 5'7,
Here's a sample, how is it looking like in 5'0.
This is how I want it to be visible on every screen size.
Here's a sample, how is it looking like in 4'0. Here the images are getting overlapped.

You can use item view for your GridView same as ListView in your adapter as below:
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = LayoutInflater.from(mContext).inflate(R.layout.item_grid, null);
holder = new ViewHolder();
holder.mImage = (ImageView) convertView.findViewById(R.id.img);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.mImage.setImageResource(imageIDs[position]);
return convertView;
}
public class ViewHolder {
private ImageView mImage;
}
I have created item_grid as below:
<?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="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/grid_image"
android:layout_width="match_parent"
android:layout_height="130dp" />
</LinearLayout>
Suggestion: You can use RecyclerView with GridLayoutManager with 2 columns

This code works like a charm for me in the Adapter:
// 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) {
//Calculation of ImageView Size - density independent.
//maybe you should do this calculation not exactly in this method but put is somewhere else.
Resources r = Resources.getSystem();
float px = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 60, r.getDisplayMetrics());
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams((int)px, (int)px));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
//imageView.setPadding(8, 8, 8, 8);
imageView.setBackgroundColor(Color.BLUE);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
Source:
https://stackoverflow.com/a/11485625/7639113
After adding the code above, I also create a different layout for bigger screen, something like this:
normal_layout.xml
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:numColumns="2"
android:verticalSpacing="5dp"
/>
bigscreen_layout.xml
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:numColumns="4"
android:verticalSpacing="5dp"
/>
Note that I set numColumns differently for those layouts above.
Here is how I created layout for different screen sizes:
Create new Android resource directory in res
Change resource type to layout, select smallest screen width for the available qualifiers, then click ">>"
Fill in 600 in the smallest screen width, Android Studio will automatically generate layout-sw600dp directory. Click OK.
Now all you have to do is place normal_layout.xml in the layout directory, and place bigscreen_layout.xml in the layout-sw600dp directory.
You can look at the different screen size detail in the official Android guide Supporting Multiple Screens:

How to put a particular image inside all images listed in a grid view?

I am doing an android program using google api.I listed all images that are needed to be uploaded to the google drive inside a grid view.What i needed is that i needed to put a particular image on the top of all images that are uploaded.For that first of all i need to put that particular image(a flower) on the top of all images that are listed.Can anyone suggest any method,it will be helpfull.
Advance thanks.....
This is my code to list all images inside a gridview.....
public class MainActivity extends ActionBarActivity {
protected Cursor mCursor;
protected int columnIndex;
protected GridView mGridView;
protected ImageAdapter mAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_photo_gallery);
// Get all the images on phone
String[] projection = {
MediaStore.Images.Thumbnails._ID,
MediaStore.Images.Thumbnails.IMAGE_ID
};
mCursor = getContentResolver().query(
MediaStore.Images.Thumbnails.EXTERNAL_CONTENT_URI,
projection,
null,
null,
MediaStore.Images.Thumbnails.IMAGE_ID + " DESC"
);
columnIndex = mCursor.getColumnIndexOrThrow(projection[0]);
// Get the GridView layout
mGridView = (GridView) findViewById(R.id.gridView);
mAdapter = new ImageAdapter(this);
mGridView.setAdapter(mAdapter);
}
class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context context) {
mContext = context;
}
#Override
public int getCount() {
return mCursor.getCount();
}
#Override
public Object getItem(int position) {
return null;
}
#Override
public long getItemId(int position) {
return 0;
}
// Convert DP to PX
public int dpToPx(int dps) {
final float scale = getResources().getDisplayMetrics().density;
int pixels = (int) (dps * scale + 0.5f);
return pixels;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
int imageID = 0;
// Want the width/height of the items
// to be 120dp
int wPixel = dpToPx(120);
int hPixel = dpToPx(120);
// Move cursor to current position
mCursor.moveToPosition(position);
// Get the current value for the requested column
imageID = mCursor.getInt(columnIndex);
if (convertView == null) {
// If convertView is null then inflate the appropriate layout file
convertView = LayoutInflater.from(mContext).inflate(R.layout.conversation_item, null);
}
else {
}
imageView = (ImageView) convertView.findViewById(R.id.imageView);
// Set height and width constraints for the image view
imageView.setLayoutParams(new LinearLayout.LayoutParams(wPixel, hPixel));
// Set the content of the image based on the provided URI
imageView.setImageURI(
Uri.withAppendedPath(MediaStore.Images.Thumbnails.EXTERNAL_CONTENT_URI, "" + imageID)
);
// Image should be cropped towards the center
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
// Set Padding for images
imageView.setPadding(8, 8, 8, 8);
// Crop the image to fit within its padding
imageView.setCropToPadding(true);
return convertView;
}
}
}
These are my xml files
activity_photo_gallery.xml
<?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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<GridView
android:id="#+id/gridView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="100dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:gravity="center" />
</LinearLayout>
conversation_item.xml
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView" />
</LinearLayout>
Note:To put a particular image(for eg:a flower) on the top of all images that are listed inside the view is the thing that i needed.....any help will be appreciated.

You could probably use a frame layout to achieve this ...
conversation_item.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/FrameLayout1"
android:layout_width="150dip"
android:layout_height="150dip"
android:layout_gravity="center" >
<ImageView
android:id="#+id/thumbImage"
android:layout_width="150dip"
android:layout_height="150dip"
android:scaleType="centerCrop" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="150dip"
android:layout_height="150dip"
android:layout_gravity="center"
android:src="#drawable/select"
/>
</FrameLayout>

Jack I think u need to redit ur activity_photo_gallery.xml file as :
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:kuttichatan="error_pokatte"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView" />
</LinearLayout>

How to set ImageView over ImageView in GridView

Suppose I have multiple images that I want to set on top of the other, how can I do this in GridView?
Like:
Background
ImageView1
ImageView2 at bottom-right of the ImageView2
Here is an example for what I want:
http://i.stack.imgur.com/JS36H.png
Here is my codes
Activity:
public class ImgAdapter extends BaseAdapter {
private Context mContext;
private ColorMatrixColorFilter cf;
String Questions = Question.Questions;
int level = Levels.level;
public ImgAdapter(Context c) {
mContext = c;
ColorMatrix matrix = new ColorMatrix();
//matrix.setSaturation(0); //0 means grayscale
matrix.setSaturation(0);
cf = new ColorMatrixColorFilter(matrix);
}
public int getCount() {
return ThumbIds.length;
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
SharedPreferences pref = mContext.getSharedPreferences(Questions, Context.MODE_PRIVATE);
//imageView = (ImageView) convertView;
imageView = new ImageView(mContext);
int size = mContext.getResources().getDimensionPixelSize(R.dimen.width);
imageView.setLayoutParams(new GridView.LayoutParams(size, size));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setAdjustViewBounds(true);
imageView.setImageResource(ThumbIds[position]);
if(pref.getBoolean(level+"answered"+position, false)){
//Thats the ImageView I want to set over the another ImageView
/*ImageView answ;
answ = new ImageView(mContext);
answ.setScaleType(ImageView.ScaleType.CENTER_CROP);
answ.setAdjustViewBounds(true);
answ.setImageResource(R.drawable.answered);*/
imageView.setImageResource(ThumbIds[position]+1);
}
return imageView;
}
public static Integer[] ThumbIds =
{
R.drawable.1,
R.drawable.2,
R.drawable.3,
R.drawable.4,
R.drawable.5,
R.drawable.6,
R.drawable.7
};
}
Layout:
<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"
android:id="#+id/layout" >
<TextView
android:id="#+id/Correct"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
/>
<GridView
android:id="#+id/Question"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center"
android:horizontalSpacing="20dp"
android:verticalSpacing="20dp"
android:numColumns="3"
android:stretchMode="columnWidth"
tools:context=".Question" />
</LinearLayout>
In the Question activity I get the GridView

Unfortunately GridViews don't like it when cells try to overlap each other. So lets say you have a cell within a gridview that's 48x48dp. Attempting to render anything that's bigger then 48 will cause it to get clipped. So that means you'll need to do a trick of the eye sorta thing.
Lets say you want to show the main image at 48x48dp. Lets call the second guy an emblem whose 16x16dp and you want it centered at the bottom right corner of the main image. Then you'll need a cell that's about 56dp. If you bring padding or margin into the mix, you may need to adjust. Doing something akin to the following for each item's layout within the GridView should do the trick.
<FrameLayout
android:layout_width="56dp"
android:layout_height="56dp"
....any other attributes>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="left|top"
android:src="Your main image"
...any other attributes/>
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_gravity="right|bottom"
android:src="Your main image"
...any other attributes/>
</FrameLayout>

GridView isn't being displayed correctly

I took a screenshot of it. Its displaying some weird way:
This is the code.
The GridAdapter:
public class GridViewAdapter extends BaseAdapter {
private Context mContext;
private ArrayList<Uri> mUrls;
// references to our images
public GridViewAdapter(Context c, ArrayList<Uri> images) {
mContext = c;
this.mUrls = images;
}
public int getCount() {
return mUrls.size();
}
public Object getItem(int position) {
return position;
}
public long getItemId(int position) {
return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater mInflater = (LayoutInflater) mContext.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
ImageView inflatedImageView = (ImageView) mInflater.inflate(R.layout.imageview_amb_background, null);
//ImageView imageView = new ImageView(mContext);
inflatedImageView.setImageURI(mUrls.get(position));
inflatedImageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
return inflatedImageView;
}
And the inflatedImageView is a layout inflate, like this:
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#drawable/bgimages"
android:maxWidth="120dp"
android:padding="5dp">
</ImageView>
On the other hand, I've a gridView in a xml file:
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="250dp"
android:horizontalSpacing="5dp"
android:numColumns="3"
android:verticalSpacing="5dp" >
</GridView>
So, I inflate this gridView, I add several URI's (3 exactly) in a loop. Once added, I set the adapter to the gridview:
ArrayList<Uri> uriFotos = new ArrayList<Uri>();
HashMap<Integer, ListItem> items = xmlList.getItems();
for (int i = 0; i<items.size();i++){
ListItem itemActual = items.get(i);
itemActual.getLogoSrc();
uriFotos.add(Uri.parse(Environment.getExternalStorageDirectory().toString()+rutaFinsCarpetaClient+itemActual.getLogoSrc()));
}
gridViewInflated.setAdapter(new GridViewAdapter(this,uriFotos));
variableContent.addView(gridViewInflated);
The images are "linked" correctly.
variableContent is a LinearLayout inside a ScrollView, so the grid should be scrollable.
But as you can see few things are happening:
Height is soo big. Shouldn't it be like the inflatedImageView says?
Scroll isnt working. Well, its working but i've to move the finger around and tap several times until it works. If i stop scrolling I've to repeat the same proces until it reacts again. (SOLVED)
Hope you guys can help me. I've changed lots of layouts, changed widths, heights, and the same thing is happening.
Note that the image you see that is in the gridView, is something like 1200x800px.
Edit
The same code with smaller images:

I would try to set the Image view size to wrap_content :
android:layout_height="wrap_content"
and if you really need the 120dp height, try to reset this size after having set the image src:
inflatedImageView.setImageURI(mUrls.get(position));
inflatedImageView.setLayoutParams(new GridView.LayoutParams(120, 120));
also set the scaleType before adding the picture (preferably in the xml) :
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="120dp"
android:layout_height="120dp"
android:scaleType="centerInside"
android:background="#drawable/bgimages"
android:maxWidth="120dp"
android:padding="5dp">
</ImageView>

Button resize issue Android

I have 4 buttons that I want to show in a gridview. I want them to fill the screen as much as possible, but I never made it. I've tried all kind of ScaleTypes and it won't work. Right now I have the scale type in FIT_CENTER but i get an unexpected result. Here's the code I have so far:
Main.java
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Display screenSize = getWindowManager().getDefaultDisplay();
int screenWidth = screenSize.getWidth();
int screenHeight = screenSize.getHeight();
int iconWidth = screenWidth/4;
int iconHeight= screenHeight/2;
GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this, iconWidth, iconHeight));
}
ImageAdapter.java
public View getView(final int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(m_Context);
imageView.setLayoutParams(new GridView.LayoutParams(m_width, m_height));
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
GridViewLayout.xml
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:columnWidth="90dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:numColumns="2"
android:background="#FFFFFF"/>
The result of the code looks like this:
This is what i would like it to look like:
Note that the last screen shot is hard coded which is obviously not my wish. I want this to work in every screen size without hard coding.

You can achieve it using recycler view with GridLayoutManager.
there you can define size of a single item to match half of device height and width. Then it'll be you expected result.