I have to show 7 icons on the home screen of my application .To do this i have arranged the icons on the grid view using image view to show images .On emulator it looks absolutely fine but images shrink and look blur ,when i deploy the application on LG Optimus p350 please help me how to show the images clearly of actual size :
The code i tried are :
<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="61dp"
android:numColumns="3" android:verticalSpacing="10dp"
android:horizontalSpacing="10dp" android:stretchMode="spacingWidthUniform"
android:gravity="center" android:layout_gravity="center" />
icon size is 61*80
EDIT :
<supports-screens android:smallScreens="true"
android:normalScreens="true" android:largeScreens="true"
android:anyDensity="true"/>
Please see the image and the code On emulator the output is shown like this.I want to show output on device also with this clarity.Please guide
see second screen shot (blur on qvga emulator) and please guide me how to correct it ..
The images don't appear blurred to me. They are just smaller due to higher screen resolution. But the text does look blurred.
So I would suggest to use a combination of ImageView and TextView. To separate the text and image. The text will be scaled appropriately.
You can also provide multiple image sets for different resolutions.
EDIT:
You can create a grid item layout similar to this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="bottom"
android:layout_width="wrap_content"
android:layout_gravity="bottom">
<ImageView android:id="#+id/thumbnailImage"
android:layout_height="70dp"
android:layout_width="fill_parent"
android:gravity="center_horizontal" />
<TextView android:id="#+id/thumnailTitle" android:text="TextView"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="fill_parent"
android:gravity="center_horizontal|bottom" />
</LinearLayout>
Create a custom grid adapter extending BaseAdapter class:
public class MyGridAdapter extends BaseAdapter
{...}
associate the adapter with your grid:
adapter = new MyGridAdapter();
GridView gridView = (GridView) findViewById(R.id.gridView);
gridView.setAdapter(adapter);
Then it is just a matter of filling the items to the grid with the getView adapter method:
public View getView(int position, View convertView, ViewGroup parent)
{
// assuming the grid item layout is named "grid_item"
View view = inflater.inflate(R.layout.grid_item, null);
TextView text = (TextView) view.findViewById(R.id.thumnailTitle);
text.setText("Test");
ImageView thumbnail = (ImageView) view.findViewById(R.id.thumbnailImage);
...
Are you providing multiple resolution resources? Read carefully this article about Supporting Multiple Screens.
I don't think the images shrink, they only look smaller because your phone has a higher density or resolution than the emulator you were testing on.
Related
Am trying to use Android GridView to show 2 columns of images.
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="2"
android:verticalSpacing="5dp"
android:horizontalSpacing="5dp"
android:stretchMode="columnWidth"
android:gravity="center"/>
Am running the app on a Samsung J2 physical device. The screenshot looks like this
Help!
I can't get the images to be any bigger - they are all 200x150 - the screenshot does not look anywhere near displaying 200x150. I have tried every option - but the correct one.
I want to display a text under each image - GridView does not seem to have an option. Will I have to use the TableView?
Many thanks
Iyer
yes my friend you can use custom layout and an adapter that extends BaseAdapter to achieve your need. follow the below steps.
==> cust_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/cga_iv"
android:layout_width="#dimen/Al_grid_image_width"
android:layout_height="#dimen/Al_grid_image_height" />
<TextView
android:id="#+id/cga_txt_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
==> cust_adpt.java
Custom class that extends BaseAdapter and implement its all overriden methods
public class cust_adpt extends BaseAdapter {
Make changes in getview method like following.here AlCover and AlBuckName are my arrayLists that containing my data and sets in gridview for ImageView and TextView respectively.
#Override
public View getView(int i, View v, ViewGroup viewGroup) {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.cust_grid_album, null, true);
ImageView iv = (ImageView) view.findViewById(R.id.cga_iv);
TextView txtname = (TextView) view.findViewById(R.id.cga_txt_name);
//setting image
Glide.with(context).load(AlCover.get(i)).placeholder(android.R.color.white).centerCrop().into(iv);
//setting text
txtname.setText(AlBuckName.get(i));
return view;
}
And finally you can simply set adapter in your activity.here imagedata and textdata are arraylists that contains images and texts respectively.
gridView.setAdapter(new cust_adpt((Activity) context, imagedata, textdata));
Do let me know if you still face any problem.
Try this like out! I think this very nice starting example for you to do what you want.
Hope this will help you.
I have a problem with spacing in my Android app: Unwanted space between columns.
I noticed similar questions have been asked on stackoverflow before, but none seemed to match exactly my case.
Here's what it looks like (using the code below)... http://i.imgur.com/OXIms9n.png
From my PlayAdapter.java
#Override
public View getView(int index, View view, ViewGroup viewGroup) {
ImageView imageView = new ImageView(context1);
imageView.setImageBitmap(images[index]);
return imageView;
}
From my Spacing.java
GridView gridView = (GridView) findViewById(R.id.gridview2);
final PlayAdapter PlayAdapter1 = new PlayAdapter(this, images);
gridView.setAdapter(PlayAdapter1);
gridView.setNumColumns(numCols);
gridView.setColumnWidth(width);
(numCols and width are determined programmatically elsewhere )
The GridView:
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/gridview2"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:horizontalSpacing="2dp"
android:verticalSpacing="2dp"
android:layout_gravity="center"
android:stretchMode="spacingWidthUniform">
</GridView>
So, if stretchMode is set to "columnWidth", "spacingWidth" or
"spacingWidthUniform" there is too much space between
the columns of the grid. See the imgur link above for the result.
Here's a solution I already tried instead:
If stretchMode is changed to "none", the grid is centered
vertically in portrait mode, but not horizontally in
landscape mode. Looks like this: http://i.imgur.com/Di6TgS2.png
Changing the settings for gravity and
layout_gravity did not help, nor did making a LinearLayout
around the gridview.
Any other ideas what to do?
I am using a TextView and a 9 patch image as its background for a messaging application in android.
Here's what it looks like:
See how for the blue, it is showing too much on the left? How can I reduce it when it decides that it has to wrap the text?
I tried to access the Width and Height fields on the view in public View getView(int position, View convertView, ViewGroup parent), however they are always zero (ps the TextView is located inside of a ListView and the getView method is inside the adapter for the ListView).
Thank you!
TextView 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:orientation="vertical" >
<TextView
android:id="#+id/message_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5sp"
android:background="#drawable/bubble_b"
android:shadowColor="#color/textShadow"
android:shadowDx="1"
android:shadowDy="1"
android:text="Medium Text"
android:textColor="#000000"
android:textSize="16sp"
android:lineSpacingMultiplier="1.1" />
</LinearLayout>
Also, here's a screen of what the nine-patch does for it, so you can see how that works for it:
In the iPad picture you attached, iMessage is setting maxWidth to the half of the screen I guess.
So you can get Screen Width and set maxWidth to half of it for your TextView
This is how you can get screen width and pass it to your TextView,
Display display = ((WindowManager)mContext.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
yourTextView.setMaxWidth(display.getWidth()/2);
P.S. getWidth method for Display class says deprecated, you can find alternative solution to this. You can get width of your LinearLayout also.
Check the 9-patch image in draw9patch. Check how for to the left you draw the black lines in there. I think the bottom line defines what part to stretch, the top line defines the area for the content.
In my gridview, all the cell initially render as rectangles, but the second time it is viewed they are square.
I have to logic to make them square, but I want them square the first time they are loaded
my problem is that I don't understand why the views are initially rectangles, or any particular proportion at all!
my XML files are all set to fill parent, and I even put in a square placeholder image in an attempt to force the views to be rendered square
is there something about gridview I should know about?
create a custom array adapter.(java)
see ( Showing graphical instead of strings in an imagelist with title )
in custom array adpater xml file (cell) write something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="50dp"
android:layout_height="50dp" >
<ImageView
android:id="#+id/iv_caarow"
android:src="#drawable/icon"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
android:layout_width="50dp", you can set cell size like this.
The answer was to extend my ImageView within the gridview cell, and #Override the onMeasure method and dynamically generate square proportions there
I actually have a ListActivity fed by a custom ArrayAdapter. It builds rows made by single ImageViews. In portrait mode it looks nice. But in landscape mode it stretches the image to the borders (I set scaleType to fitXY).
I would like to have 2 ImageViews per row in landscape mode. Is GridView the right layout?
How would you do this?
Since I have a 480x800 screen, in portrait, the ImageView would be 480px wide, while in landscape each of the two would be 400px wide. This is not a problem, but it is important to me to respect the width/height ratio.
Why don't you use Gridview to do your task. If you want to use listview you have to check for the orientation, based on the orientations
1) In landscape mode the layout from the layout-land/ will be loaded which contains the 2 imageviews.
2) In portrait mode the layout from the layout-port/ will be loaded which contains the 1 imageview.
Yes, GridView is the best and easiest approach. You can use the same custom ArrayAdapter and OnClickListener you have now for the ListView, and only need to change
ListView myList = (ListView) findViewById(R.id.list);
to
GridView myGrid = (GridView) findViewById(R.id.gridview);
and the xml to something like:
<GridView
android:id="#+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="390px"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="columnWidth" />
Now, you should avoid using "px" as units and use "dp" instead, and that only if you are really sure your app is designed only for a 480x800 resolution.
gridView is not much of a layout . it's an adapterView , so its purpose is to be able to "show" tons of views and also be able to scroll between them .
maybe you would like to use gridLayout instead ? it also has a comparability library ...
anyway , if you wish to stick with gridView , simply set the android:numColumns to be of a variable that you set via the values folder for portrait mode , and and values-land for the value you need for landscape
EDIT: here's the solution of using a gridView :
the layout xml file should contain something like:
<GridView android:layout_width="match_parent"
android:numColumns="#integer/cols" android:layout_height="match_parent"
/>
create an xml file (for example "consts.xml") in the res/values folder that has something like:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<item type="integer" name="cols">2</item>
</resources>
also , create the same file in res/values-land folder , and set the 2 to be 3 .
You can supply different resources for different orientations. So, when the device is in landscape, you populate the ListView with a layout that has two ImageViews in every item and in portrait, the layout has 1 ImageView per item.
Take a look at Providing Resources to know about how you can provide different layout XMLs for different orientations.
Sample code:
// Create an anonymous implementation of OnClickListener
private OnClickListener mImageListener = new OnClickListener() {
public void onClick(View v) {
// do something when the ImageView is clicked
}
};
//Check the orientation and handle accordingly in the getView
public View getView (int position, View convertView, ViewGroup parent){
if(convertView == null){
convertView = (LinearLayout)inflater.inflate(R.layout.list_item, parent);
}
ImageView leftImage = (ImageView)convertView.findViewById(R.id.leftImage);
ImageView rightImage = (ImageView)convertView.findViewById(R.id.rightImage);
boolean isTwoColumn = (rightImage != null);
//If it is two column layout, set both ImageViews
if(isTwoColumn){
leftImage.setImageResource(...);
leftImage.setOnClickListener(mImageListener);
rightImage.setImageResource(...);
rightImage.setOnClickListener(mImageListener);
}else{
leftImage.setImageResource(...);
leftImage.setOnClickListener(mImageListener);
}
}
/res/layout-land/list-item.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="+#id/leftImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="+#id/rightImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>
/res/layout-port/list-item.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="+#id/leftImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>
I tried Gridview and personally found it was incredibly fiddly to get the display I was after (which was ratio correct display for smaller cells inside)... after weeks of restling with it on different resolutions and screen formats I opted for creating my own gridview from scratch and haven't looked back.
I'm not saying Gridview isn't without it's merit but what I can say is to implement your own system takes a matter of hours if you have a very clear idea in your mind how it should operate you'll probably find it easier to code your own.
In essence it was just a class derived from ViewGroup, override the onMeasure and onLayout items to measure the child views it contains and next lay them out into the locations on screen that you want them.
If you're looking for long lists however I'd still look at the listview or perhaps gridview might be worth a shot but this is certainly good peace of mind to know you can take control of it all if you need to.