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
Related
I'm trying to do a ListView of CardViews.
The CardView contains an ImageView at the top and several TextViews at the bottom.
I manage to do everything right, although for some reason the image don't fit the CardView (so it gets cropped at the top of it) and the TextViews overlaps the rest of the image.
I tried a lot of different solutions, although nothing worked for me and i cam't figure out why.
The main layout:
<ListView android:id="#+id/item_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"></ListView>
</LinearLayout>
The CardView layout:
<?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="wrap_content"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin">
<android.support.v7.widget.CardView android:id="#+id/item_card"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="#+id/item_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/item_image_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:id="#+id/item_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
And the getView() methid:
public View getView(int position, View convertView, ViewGroup parent) {
View cardView;
if (convertView == null) {
LayoutInflater inflater = ((Activity) this.getContext()).getLayoutInflater();
cardView = inflater.inflate(R.layout.item_card_list, parent, false);
}
else {
cardView = convertView;
}
ImageView itemImage = (ImageView)cardView.findViewById(R.id.item_image);
TextView itemTitle = (TextView)cardView.findViewById(R.id.item_title);
TextView imgDesc = (TextView)cardView.findViewById(R.id.item_image_desc);
TextView itemDesc = (TextView)cardView.findViewById(R.id.item_desc);
Item currItem = this.getItem(position);
itemImage.setImageDrawable(currItem.mImageDrawable);
itemTitle.setText(currItem.mTitle);
imgDesc.setText(currItem.mDescription.imageDesc);
itemDesc.setText(currItem.mDescription.descText);
itemImage.setScaleX((float)1000 / currItem.mImageDrawable.getMinimumWidth());
itemImage.setScaleY((float)1000 / currItem.mImageDrawable.getMinimumWidth());
return (cardView);
}
It seems like the CardViews have a max height or something..can't tell :(
Thanks in advance!
My approach was all wrong. I realized that the setScale() methods I used only scaled the bitmap, and not the ImageView itself. Although when I tried to resize the ImageView before it was even layed down on the canvas, I got no luck either. So I did this:
Instead of trying to resizing the ImageView after I assigned it with a small bitmap, I resized the bitmap itself before setting it to the ImageView. Fixed everything :)
I am displaying a bunch of images in the Gallery View.
The layout is ,
<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" >
<Gallery
android:id="#+id/gallery1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:spacing="10dip" >
</Gallery>
<ImageView
android:id="#+id/imgfromWebUrl"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</ImageView>
</LinearLayout>
and the custom adapter for loading images,
public View getView(int arg0, View paramView, ViewGroup arg2) {
Log.d("","custom Adapter5");
View localView;
if (paramView == null) {
localView = mInflater.inflate(R.layout.property_image_adapter, null);
} else {
localView = paramView;
}
ImageView imgfromWebUrl=(ImageView)localView.findViewById(R.id.imgfromWebUrl);
Log.d("", "pics[0]: "+pics);
imgfromWebUrl.setImageBitmap(pics[arg0]);
imgfromWebUrl.setScaleType(ImageView.ScaleType.FIT_XY);
imgfromWebUrl.setBackgroundResource(defaultItemBackground);
imgfromWebUrl.setLayoutParams(new Gallery.LayoutParams(200, 200));
return imgfromWebUrl;
}
currently my image is shown as,
My image is fit to the center part of the screen. but I want the image to fit full screen,like this image
Please help me out!!
Any help is Appreciated!!
Use this property android:scaleType="fitXY" Document for ImageView.ScaleType
Issue:
Image is fitting to the parent.but your gallery params are fixed of 200.
Solution:
kindly remove that line.
imgfromWebUrl.setLayoutParams(new Gallery.LayoutParams(200, 200));
and make this change in xml:
<Gallery
android:id="#+id/gallery1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:spacing="10dip" >
Configure the layout parameters like so:
i.setLayoutParams( new
Gallery.LayoutParams(WindowManager.LayoutParams.MATCH_PARENT,
WindowManager.LayoutParams.MATCH_PARENT));
I am new to android and I am developing an application related to online chat. In a chat screen, I am trying to set chat box size to text view size.
How can I increase and decrease chat box size as text view size increases and decreases?
Set Relative Layout height as wrap_content and as well as textview height.
WRAP_CONTENT, which means that the view wants to be just big enough to enclose its content .
see this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:weightSum="1.0"
android:layout_weight="1" android:layout_height="wrap_content">
<TextView android:id="#+id/lefttext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:layout_marginBottom="5dip"
android:layout_alignParentLeft="true"
android:maxWidth="250dip"/>
<TextView
android:id="#+id/righttext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:layout_marginBottom="5dip"
android:layout_alignParentRight="true"
android:maxWidth="250dip"/>
</RelativeLayout>
This is the code inside the getView method of my custom array adapter:
View view = convertView;
if(view == null){
view = mInflater.inflate(R.layout.list_item, null);
}
Resources res = getContext().getResources();
Drawable bubblesChat = res.getDrawable(R.drawable.bubbles_chat);
Drawable bubblesResponse = res.getDrawable(R.drawable.bubbles_response);
TextView left = (TextView) view.findViewById(R.id.lefttext);
TextView right = (TextView) view.findViewById(R.id.righttext);
String txt = super.getItem(position);
if(txt.startsWith("s:")) {
left.setText(getItem(position));
left.setBackgroundDrawable(bubblesChat);
right.setText("");
right.setBackgroundDrawable(null);
} else {
right.setText(getItem(position));
right.setBackgroundDrawable(bubblesResponse);
left.setText("");
left.setBackgroundDrawable(null);
}
return view;
Alternate chat bubble widths
and http://warting.se/2012/06/04/chat-bubbles-in-android/
You can take a layout preferably a RelativeLayout and whenever your TextView size increases or decreases refresh your chatview by setting new LayoutParams dynamically.
The grid view of my application has 3 rows and 3 columns. I want this to fill the screen ,irrespective of the screen size of the device.
I tried getting window size and setting the layoutparams accordingly. But this is not giving a perfect alignment as it works with weightsum in linearlayout.
So can we use weightsum for gridview or is there any other android property that can be used.
Thanks a lot for time and response.
<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:layout_below="#+id/text1view"
android:background="#drawable/home_bg"
android:gravity="center"
android:horizontalSpacing="10dip"
android:numColumns="3"
android:stretchMode="columnWidth" />
each grid item is
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:id="#+id/grid_item_image"
android:layout_width="wrap_content"
android:layout_height="75dip"
android:layout_margin="0dip"
android:padding="0dip" >
</ImageView>
<TextView
android:id="#+id/grid_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#+id/grid_item_image"
android:gravity="center_horizontal"
android:padding="0dip"
android:textColor="#000000"
android:textSize="10sp" >
</TextView>
code of the adapter :
#Override
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
LayoutInflater mInflater = (LayoutInflater) mContext
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = mInflater.inflate(R.layout.griditems, null);
holder = new ViewHolder();
holder.text1 = (TextView) convertView
.findViewById(R.id.grid_item_text);
holder.image = (ImageView) convertView
.findViewById(R.id.grid_item_image);
// if it's not recycled, initialize some attributes
holder.image.setImageResource(gridItemIds[position]);
holder.text1.setText(gridTitles[position]);
int h = mContext.getResources().getDisplayMetrics().densityDpi;
// holder.image.setLayoutParams(new LayoutParams(h-50,h-50));
convertView.setLayoutParams(new GridView.LayoutParams(h - 45,
h - 39));
// holder.image.setScaleType(ImageView.ScaleType.CENTER_CROP);
// holder.image.setScaleType(ImageView.ScaleType.FIT_XY);
// holder.image.setPadding(20, 20, 20, 20);
// convertView.setLayoutParams(new GridView.LayoutParams(Utils
// .getLayoutParameter(), Utils.getLayoutParameter()+50));
holder.image.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
new ModuleManager().startModuleACtivity(position, mContext);
}
});
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
return convertView;
}
static class ViewHolder {
TextView text1;
ImageView image;
}
pls see the line
convertView.setLayoutParams(new GridView.LayoutParams(h-45, h-39));
i arrived at this value with some trials on different size emulator.
But i dont think its a right way to define height and width.
As far as i understood your question, as you have not posted any code, what you are trying to do is, you want gridview to appear on full screen.
Firstly you must be using some layout to put your gridview in. Do the following:
Make height and width of the layout to fill parent:
android:layout_width="fill_parent"
android:layout_height="fill_parent"
then, set height and width of your gridview to fill_parent as well.
Well, this is just a supposed solution that you might have been working this way. putting some code would be much better. Hope this works for you.
Update:
Well the problem may lie here:
convertView.setLayoutParams(new GridView.LayoutParams(h-45, h-39));
change to:
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT);
convertView.setLayoutParams(new GridView.LayoutParams(params));
Hope this works for you.
#preetha: first of all look at this example i used this and my layout did not affect irrespective of devise height and width....
http://developer.android.com/resources/tutorials/views/hello-gridview.html
set the following in xml
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"
hope this helps...
Here I only changed width and height as match parent and wrap content.
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:layout_gravity="center_horizontal"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:id="#+id/textView5"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="5dp"
android:text="Category"
android:textSize="20dp" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="170dp"
android:layout_height="170dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:src="#drawable/iconclothcolor" />
<TextView
android:layout_width="wrap_content"
android:id="#+id/textView3"
android:layout_marginTop="2dp"
android:textSize="16dp"
android:textColor="#F37E98"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Shirt" />
<TextView
android:layout_width="wrap_content"
android:id="#+id/textView4"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Gender - Male" />
<TextView
android:layout_width="wrap_content"
android:id="#+id/textView8"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Quantity - 10" />
<TextView
android:layout_width="wrap_content"
android:id="#+id/textView6"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Size - S" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:id="#+id/textView10"
android:textSize="20dp"
android:text="Offer" />
<TextView
android:layout_width="wrap_content"
android:id="#+id/textView7"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="20dp"
android:textColor="#F37E98"
android:text="Price - 1500 Rs" />
</LinearLayout>
</androidx.cardview.widget.CardView>
And in the Mainclass add this -->
GridLayoutManager gridLayoutManager=new GridLayoutManager(this,2);
recyclerView.setLayoutManager(gridLayoutManager);
To adjusting Gridview to screen size
In onCreate take rowHeight :
root = binding.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
I have simple GridView (with one column and six rows), that displays ImageView with TextView in the cell (I create adapter). How to stretch rows to fill entire screen height?? Now I have some space below cells...
main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<LinearLayout android:layout_height="fill_parent"
android:layout_width="150dp"
android:orientation="vertical"
android:id="#+id/left">
<include layout="#layout/menu_grid"></include>
</LinearLayout>
<LinearLayout android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical"
android:id="#+id/right">
<ImageView android:src="#drawable/image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/imageMain"
android:layout_gravity="center">
</ImageView>
</LinearLayout>
menu_grid.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<GridView android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/gridView"
android:padding="10dp"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:numColumns="1"
android:columnWidth="100dp"
android:stretchMode="columnWidth"
android:gravity="center"></GridView>
item.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical" android:gravity="fill_horizontal">
<ImageView android:src="#drawable/icon"
android:layout_height="70dp" android:id="#+id/imageIcon"
android:layout_width="70dp" android:layout_gravity="center_horizontal"></ImageView>
<TextView android:id="#+id/textIcon" android:text="TextView"
android:layout_gravity="center" android:layout_height="wrap_content"
android:layout_width="wrap_content"></TextView>
ImageAdapter.java
public class ImageAdapter extends BaseAdapter {
//....some code
//....
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View view;
if (convertView == null) {
LayoutInflater inflater = (LayoutInflater)_context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflater.inflate(R.layout.item, null);
TextView text = (TextView) view.findViewById(R.id.textIcon);
text.setText(labels[position]);
ImageView image = (ImageView) view.findViewById(R.id.imageIcon);
image.setImageResource(icons[position]);
} else {
view = convertView;
}
return view;
}
}
As of what i understood, the question is- if i have 6 rows of data to be filled in the gridView, how can i make these 6 rows fill the whole screen, instead of showing 6 rows and some empty space under the last row.
To achieve this you must set minimum height of the gridView item layout (in your case its item.xml) to (height of the screen)/6, where 6 is the (no.of rows you have to fill). This minimum height can be set in the adapter you are using.
To find the height of the screen of the device:
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int width = metrics.widthPixels;
int height = metrics.heightPixels;
find these values in the Activity and make them public static and use them in the adapter, i had a problem in finding these values in the adapter class
then to set minimum height:
view = inflater.inflate(R.layout.item, null);
view.setMinimumHeight(GridViewActivity.height/6);
I tried this after seeing the post, and it worked perfectly.
If you just want to increase the space between the lines You can use padding it should work.
you can set padding through xml or programmatically based on your requirement.
// this you can set inside your view.
android:paddingLeft="5px"
android:paddingRight="5px"
android:paddingTop="10px"
android:paddingBottom="10px"
// this you can set to your any widgets like TextView/Layouts/Buttons etc..
setPadding(top, left, bottom, right);
Extend a layout say Framelayout then override the onMeasure method.
public class CameraView extends FrameLayout
public TextView titleView;
public CameraView(Context context,AttributeSet attrs) {
super(context, attrs)
titleView = rootView.findViewById(R.id.titleView);
}
#Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
}
}
You can then use this view in your BaseAdapter and set the layout_width and layout_height to match_parent
I hope I am understanding you correctly, if so it is as easy as changing your GridView to fill_parent instead of wrap_content.
Change
<GridView android:layout_height="wrap_content"
to
<GridView android:layout_height="fill_parent"
If this is not the case then it is probably the layout height on the LinearLayout of the item.xml that you want to modify.