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.
Related
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:
I have a GridView that displays a bunch of thumbnail images. All looks good, but when I click on an item, only the upper right hand portion of the image will register the onitemclicklistener call. If I click the lower left hand corner, nothing happens. When I fill the gridview with many images, clicking on certain images will trigger the call at the wrong position.
Here is some relevant code from the adapter:
imageView = new ImageView(mContext);
final float scale = getBaseContext().getResources().getDisplayMetrics().density;
int pixels = (int) (155 * scale + 0.5f);
imageView.setLayoutParams(new GridView.LayoutParams(pixels, pixels));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
Here is the listener code:
GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));
gridview.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
Intent intent = new Intent(MobialGrid.this,MobialImageInd.class);
intent.putExtra("image", file[position].getAbsolutePath());
startActivity(intent);
}
});
Here is the grid xml:
<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:columnWidth="160dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:background="#drawable/dark_bg_repeat"
/>
Thanks for any comments.
Try to add the listener on the imageviews in your adapter, that might help...
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>
How can I create a GirdView in which the images are rectangular (120 x 58.5), which would result in a non square cell? Currently if I have this XML layout there is whitespace above and below the image because the cell is 120 x 120. The width of each cell should be 120 and the height 58.
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/AppsOverviewGrid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="120dp"
android:numColumns="auto_fit"
android:verticalSpacing="0dp"
android:horizontalSpacing="8dp"
android:stretchMode="columnWidth"
android:gravity="center">
</GridView>
Thanks for the help.
In my opinion, ideal solution is to create a layout file for the items in gridview layout in which you can specify the height of the images (using an ImageView). Then you can use a custom adapter with LayoutInflater to connect your grid view items with your main layout.
Here is a great tutorial for that (2. example): http://www.mkyong.com/android/android-gridview-example/
the easiest aproach for this is just to set the width and height of the imageview in the adapter.
public class ImageAdapter extends BaseAdapter {
// 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(120, 58));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(pictureArray[position]);
return imageView;
}
// references to our images
private Integer[] pictureArray= {
R.drawable.pic1, R.drawable.pic2,
}
}
Then set the Adapter to the gridview.
GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));
I made a layout with a gridview for small screens (2.7 inch). My icons are 48 x 48 px. Now i want the gridview on a tablet so i created a new layout and changed the settings to large and landscape. I want to use larger icons for the tablet: 72 x 72 px. The problem is that the larger icons not showing up but the small icons does. My small icons are in the folder drawable-mdpi and the large icons are in the folder drawable-hdpi. I tried allready to move the large icons to the drawable-xhdpi folder but without success. I also tried to change the scaletype and the layoutparams of the imageadapter but also without any success Can someone help me to get the larger icons on the tablet?
Here is my code of the large layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/back" >
<GridView
android:id="#+id/Menu"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/imageView1"
android:columnWidth="80dp"
android:gravity="center_horizontal|top"
android:horizontalSpacing="130dp"
android:numColumns="auto_fit"
android:paddingTop="10dp"
android:scrollbars="none"
android:stretchMode="columnWidth"
android:verticalSpacing="50dp" android:layout_marginTop="50dip">
</GridView>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/title" />
</RelativeLayout>
The java code of my imageadapter for the gridview is:
public class ImageAdapter extends BaseAdapter
{
private Context context;
public ImageAdapter(Context c)
{
context = c;
}
//---returns the number of images---
public int getCount() {
return menu_icon.length;
}
//---returns the ID of an item---
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
//---returns an ImageView view---
public View getView(int position, View convertView, ViewGroup parent)
{
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(context);
imageView.setLayoutParams(new GridView.LayoutParams(150, 150)); imageView.setScaleType(ImageView.ScaleType.CENTER);
imageView.setPadding(5, 5, 5, 5);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(menu_icon[position]);
return imageView;
}
}
Try this,
imageView.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT);
This may work.
This might solve your problem:
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
http://developer.android.com/reference/android/widget/ImageView.html#setScaleType(android.widget.ImageView.ScaleType)
http://developer.android.com/reference/android/widget/ImageView.ScaleType.html