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>
Related
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.
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));
I created an app, it's finely working as what i want on minsdkversion="3". But other activities look even bigger than usual. If i change the minsdkversion="8" or something, the other activities looks as normal, but i didn't get the output i want.
Following is the code for gridview and imageview layout files:
activity_main.xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<GridView
android:id="#+id/grid_View"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:horizontalSpacing="0dp"
android:numColumns="4"
android:stretchMode="columnWidth"
android:verticalSpacing="0dp"
android:gravity="center_horizontal"
android:clipChildren="true" >
</GridView>
</LinearLayout>
grid.xml:
<?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="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/image_View"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.05"/>
</LinearLayout>
MainActivity.java:
public View getView(int position, View convertView, ViewGroup parent)
{
ImageView imageView;
if (convertView == null)
{
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
i = i+1;
imageView.setId(i);
Log.d("===== i value =====", String.valueOf(i));
imageView.setAdjustViewBounds(true);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
}
else
{
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
What is the wrong with my code, what i have to change?
I have to show some toast when particular body part is pressed
Step #1: Display the body in an ImageView
Step #2: Override onTouchEvent() in your activity or fragment that is managing the ImageView
Step #3: Determine the body part based on the location of the touch event and the size of the ImageView, and display your Toast
I am having a gridView with each item having an image to be loaded. I have used adapter to render the image. I am assigning images as gridView items using resource ID array created using images in drawable folder.
The problem is gridView is being displayed with only 12 images(which fits the view without scrolling). I have around 40 images resource ID in that array. the getView is called only 12-13 times.
Could you pleae help me how to display all 40 images on grid view? Do i need to explicitly add scrollpane in grid.xml?
Below is the grid.xml layout
<?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:orientation="vertical"
android:background="#drawable/wooden_background"
android:id="#+id/RootView">
<GridView
android:id="#+id/gridView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="3"
android:stretchMode="columnWidth"
android:padding="5dp"
android:verticalSpacing="5dp"
android:horizontalSpacing="5dp"
android:gravity="center"
android:maxWidth="150dip"
android:maxHeight="150dip" >
</GridView>
</LinearLayout>
Below is the getView function inside adapter
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
View vi;
if (convertView == null){ // if it's not recycled, initialize some attributes
vi = inflater.inflate(R.layout.each_image,parent, false);
}
else{
vi=convertView;
}
/*imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(170,170));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);*/
System.out.println("Inside getView");
ImageView image = (ImageView)vi.findViewById(R.id.imageView);
image.setMaxHeight(150);
image.setMinimumHeight(150);
image.setScaleType(ImageView.ScaleType.FIT_XY );
image.setImageResource(imageIngredientsID[position]);
return vi;
}
How many items the gridview gets depends entirely on your getCount() method in your adapter, what does it return? 12?
Try adding ScrollView to the layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/wooden_background"
android:id="#+id/RootView">
<GridView
android:id="#+id/gridView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="3"
android:stretchMode="columnWidth"
android:padding="5dp"
android:verticalSpacing="5dp"
android:horizontalSpacing="5dp"
android:gravity="center"
android:maxWidth="150dip"
android:maxHeight="150dip" >
</GridView>
</LinearLayout>
</ScrollView>
Im trying to implement a GridView as part of a image gallery. I followed the following example from the Android developer portal.
The tutorial seems to work for all screen sizes. As you can see below the proportions for a small and a large screen size are displayed correctly (on the left - small screen size, on the right - large screen size.
But now to my problem. When I want to implement exactly the same GridView within a LinearLayout from my Android Project - the correct proportions are gone - as shown by the images below. The pictures begin to overlap so forth and so on.
I am quite sure that this has something to with my LinearLayout which looks like the following.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widget64"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/widget34"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="#drawable/foto_detail_bg_cell_0"
>
<ImageView
android:id="#+id/flyer"
android:layout_width="100dp"
android:layout_height="80dp"
android:src="#drawable/icon"
android:scaleType="centerCrop"
/>
<LinearLayout
android:id="#+id/widget36"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5px"
android:orientation="vertical">
<TextView
android:id="#+id/toptext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Beat.It"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#color/white"/>
<TextView
android:id="#+id/widget39"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="http://www.google.at"
android:textColor="#color/white"/>
<LinearLayout
android:id="#+id/widget40"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/widget41"
android:layout_width="58dp"
android:layout_height="40dp"
android:src="#drawable/facebook_share"/>
<ImageView
android:id="#+id/widget42"
android:layout_width="58dp"
android:layout_height="40dp"
android:layout_marginLeft="1dp"
android:src="#drawable/photocount"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<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="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
</LinearLayout>
The MAIN QUESTION:
The Layout XML used by the tutorial on the Android developer portal only uses the GridView alone, without a LinearLayout and and it is shown with correct proportions on each screen size. Why is that? And why does it not work properly when I nest the GridView in a Linear Layout like in my project?
SOLVED:
I solved this issue by editing the ImageAdapter of the GridView. I calculated the size of the generated image views - density independent.
// 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;
}
To adjusting Gridview to screen size
In onCreate take rowHeight :
//Get root view
root = binding.root
// Or you can use findviewbyid(R.id.root)
view.onGlobalLayout {
rowHeight =
root.measuredHeight / currentPageNumberOfRow
fillView(appsList)
}
In adapter:
override fun getView(position: Int, ConvertView: View?, parent: ViewGroup?): View? {
var mConvertView = ConvertView
if (layoutInflater == null) {
layoutInflater =
context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as
layoutInflater!!.inflate(R.layout.item_app_shortcut, null)
}
if (mConvertView == null) {
mConvertView =
layoutInflater!!.inflate(R.layout.item_child_launcher_app, null)
//Add this:
mConvertView.layoutParams = AbsListView.LayoutParams(GridView.AUTO_FIT, rowHeight)
}
Dont forget set row image:
android:layout_width="0dp"
android:layout_height="0dp"
To fit on screen