I'm pretty new to Android, and I'm looking for a little help.
I have a GridView with the following XML in a linear layout.
<GridView android:id="#+id/gridview"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:numColumns="2"
android:columnWidth="90dp"
android:stretchMode="columnWidth"/>
I'm adding a series of CheckBoxes to the view with...
public View getView(int position, View convertView, ViewGroup parent)
{
CheckBox checkView;
if (convertView == null) {
checkView = new CheckBox(context);
checkView.setPadding(5, 5, 5, 5);
} else {
checkView = (CheckBox) convertView;
}
checkView.setText(checkNames[position]);
checkView.setWidth(400);
return checkView;
}
No matter how many different widths I try, including fill_parent and
wrap_content, the text winds up behind the box instead of next to it.
Any hints or tricks?
Thanks,
Andrew
Try using only wrap content for both layout width and layout height. Because the fill_parent will fill the full layout, where as wrap_content will fill only to the size of your text entered.
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 created grid view for my wallpaper application but I am facing a problem with my layout. My grid view layout changes with different devices. I want the same view for all devices. Help me out.
This is my xml file.
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="30dp"
android:gravity="center"
android:horizontalSpacing="2dp"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="2dp"
android:orientation="vertical"
android:id="#+id/gridview"
And this is Imageadapter file in which I have set my grid view.
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imgGrid;
if (convertView == null)
{
imgGrid = new ImageView(current);
imgGrid.setLayoutParams(new AbsListView.LayoutParams(300,200));
imgGrid.setPadding(2, 2, 2, 2);
imgGrid.getScaleType();
imgGrid.setScaleType(ScaleType.FIT_XY);
}
else
{
imgGrid = (ImageView)convertView;
}
imgGrid.setImageResource(images[position]);
return imgGrid;
}}
replace this line
imgGrid.setLayoutParams(new AbsListView.LayoutParams(300,200));
with
imgGrid.setLayoutParams(new GridView.LayoutParams(70, 70));
feel change to pass layout params parameter. But don't give large values it won't look good on other devices.
i have simple gridview. it's elements have different height. for example in row there are one small element and one bigger, next row will align to smaller element and a part of bigger element is under the second row. how can i set the height of each row of gridview to be the height of the biggest element in row??
my gridview
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/new_small_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numColumns="2"
android:verticalSpacing="3dp"
android:horizontalSpacing="3dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:cacheColorHint="#android:color/transparent"
/>
For setting cell height, in GridViewAdapter when you write, for example:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if(convertView == null){
LayoutInflater cellLayout = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = cellLayout.inflate(R.layout.gridcell_layout, null);
}
TextView cell_title = (TextView) convertView.findViewById(R.id.gridview_cell_text);
ImageView cell_icon = (ImageView) convertView.findViewById(R.id.griview_cell_image);
....
Just substitute this line:
convertView = cellLayout.inflate(R.layout.gridcell_layout, null);
With this:
convertView = cellLayout.inflate(R.layout.gridcell_layout, gridView, false);
By this way, setting parent reference in "inflate", Width and Height about cell will set!
Here you can find why:
Layout problem with button margin
<?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" >
<ImageView
android:id="#+id/venueImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
I have an ordinary listview and a custom adapter using the xml above for the row.
I will only have 3 rows, but I want those 3 rows to have equal heights to fit the height of the screen's resolution. At the moment I don't even know how to set the height of the rows because setting the LinearLayout's height doesnt do anything.
You can set the height of your ImageView to get what you want. To set it programmatically, you can do this on the getView() of your custom adapter:
public View getView(int position, View convertView, ViewGroup parent) {
View cv = convertView;
if (convertView == null) {
cv = inflater.inflate(R.layout.listview_item, null);
}
ImageView venueImage = (ImageView) cv.findViewById(R.id.venueImage);
LinearLayout.LayoutParams vi_params = new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, (int)(screenHeight*0.33);
venueImage.setLayoutParams(vi_params);
return cv;
}
You can get the screen height by adding this code on your main activity:
int screenHeight = ((WindowManager)context.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay().getHeight();
Does anyone know how to wrap a GridView?
Despite setting layout_width to wrap_content both on the GridView and parent LinearLayout the GridView is still bigger than its 3 column content (approx. double the content width). Tried also to apply fixed layout_width = ... dp. That did not work either.
Any ideas how to wrap the GridView? See below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_root"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp" >
<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:columnWidth="90dp"
android:numColumns="3"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="none"
android:gravity="center" />
</LinearLayout>
Setting the LinearLayout and the GridView to "wrap_contents" won't work, as the GridView pretty much defaults to "fill_parent" if you don't give it a specific size.
I did some testing, and you have several solutions depending on how you create your view :
Setting the LinearLayout to android:layout_width="100dip"
View view = getLayoutInflater().inflate(R.layout.grid_dialog, null);
dialog.setContentView(view);
=> doesn't work as expected : the inflater doesn't have a parent view when inflating, so it just doesn't take all the android:layout_XXX attributes into account.
dialog.setContentView(R.layout.grid_dialog);
=> works as expected, because this time the dialog will do the inflate and know the parent view. You can use dialog.findViewById to retrieve the gridview if needed....
Setting the GridView to android:layout_width="100dip"
Apparently works all the time, as it has a parent when it's inflated, so the layout_XXX attributes actually work.
All this isn't perfect as it doesn't do a real wrap_content on the GridView and you have to manually set the layout_width, but it should work.
Thanks Gregory. I'm not sure how to do the dialog.setContentView(R.layout.grid_dialog) in an AlertDialog builder. The AlertView dialog has only SetView, not setContentView available. Any hints on how to inflate the AlertDialog so it knows its parent view? See the AlertDialog code I'm using below, that does not wrap the GridView:
protected Dialog onCreateDialog(int id) {
switch(id) {
case CATEGORY_ID:
AlertDialog.Builder builder;
Context mContext = this;
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(LAYOUT_INFLATER_SERVICE);
View layout = inflater.inflate(R.layout.categorydialog_3_cols, (ViewGroup) findViewById(R.id.layout_root));
GridView gridview = (GridView) layout.findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));
gridview.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
Toast.makeText(FS_90x90.this, "" + position, Toast.LENGTH_SHORT).show();
}
});
builder = new AlertDialog.Builder(mContext);
builder.setView(layout);
dialog = builder.create();
break;
default:
dialog = null;
}
return dialog;
}
In addition the
View layout = inflater.inflate(R.layout.categorydialog_3_cols, (ViewGroup) findViewById(R.id.layout_root));
has the parent View (for the Grid view) defined as
(ViewGroup) findViewById(R.id.layout_root)
You can try setting the width at runtime, like this:
dialog.show();
LayoutParams params = dialog.getWindow().getAttributes();
params.width = 100;
dialog.getWindow().setAttributes(params);
Reference: How can I set the AlertDialog width, etc.