Design looks bigger when using minsdkversion 3 - android

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

Related

Scalable Gridview Layout

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>

Gallery Image not fitting the screen in android

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));

How to show Text on Image

I have written a code, in which i am showing images in GridView, but now i want to show text in bottom of every image.
And i want to show my Grid like this:
but getting like this [also want to show Text for Image]:
main.xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<GridView
android:id="#+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:verticalSpacing="0dp"
android:horizontalSpacing="0dp"
android:stretchMode="columnWidth"
android:numColumns="2"
/>
</FrameLayout>
You need to define a custom grid item layout which contains a textview to assign the text.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/thumbnail"
android:padding="8dp"
android:scaleType="cropCenter"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_gravity="bottom"
android:textColor="#android:color/white"
android:background="#55000000" />
</FrameLayout>
Here we have created a FrameLayout which has the imageview set to match the parent's dimensions, this will be the imageview that displays the photo. Next, there is a TextView which will be used to display the item title and that is aligned to the bottom of the FrameLayout.
Next, we need to edit your adapter to use this grid item layout and render the correct information.
public View getView(int position, View convertView, ViewGroup parent) {
// Inflate the single grid item layout
if (convertView == null) {
convertView = mLayoutInflater.inflate(R.layout.grid_item, parent, false);
}
// Set Image
ImageView thumbnail = convertView.findViewById(R.id.thumbnail);
if (thumbnail != null) {
thumbnail.setImageResource(mThumbIds[position]);
}
// Set Text
TextView title = convertView.findViewById(R.id.title);
if (title != null) {
title.setText("Image Number: " + position);
}
return convertView;
}
mLayoutInflater should be globally defined in your constructor using
mLayoutInflater = LayoutInflater.from(context);

Gridview displaying only 12 images in android

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>

Android - GridView height to max height

I've got a GridView inside a scrollview and the GridView has 4 images loaded into it (via an ImageAdapter). My issue is I can get 3 of the images to show but the 4th doesn't. After further investigation, I've found that the height of the gridview is only the height of the row, so if I set the gridview height in xml to 700dp, then it shows up.
Here's a screenshot:
As you can see, I've set the background of the GridView to HotPink to illustrate where the GridView is.
Here's the XML for the main_menu:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/llLayoutContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<!-- <LinearLayout android:id="#+id/llMiddle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"> -->
<LinearLayout
android:id="#+id/llLeft"
android:layout_width="400dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/layout_left"
android:paddingLeft="5dp"
android:paddingRight="5dp">
<ScrollView
android:id="#+id/svMenu"
android:layout_width="400dp"
android:layout_height="match_parent"
>
</ScrollView>
</LinearLayout>
<LinearLayout
android:id="#+id/llRight"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#drawable/layout_right"
android:padding="0dp">
</LinearLayout>
<!-- </LinearLayout> -->
</LinearLayout>
The LinearLayout "llLeft" is the layout where the menu items get loaded (inside the ScrollView). layout_left is only a shape which draws the dark outline around the greenish background.
Here's the main_menu_header.xml which contains the GridView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="5dp">
<TextView
android:id="#+id/tvDashboardHeader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Dashboard Main Menu"
android:textSize="20dp"
style="#style/TextShadow"
android:paddingTop="5dp"
android:gravity="left"
android:background="#drawable/menu_item_bg"
/>
<GridView
android:id="#+id/gvMenuItems"
android:layout_width="400dp"
android:layout_height="match_parent"
android:columnWidth="110dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:background="#color/HotPink"
android:gravity="center" >
</GridView>
</LinearLayout>
And here's how I populate the GridView:
ScrollView sv = (ScrollView)findViewById(R.id.svMenu);
LayoutInflater liInflater = getLayoutInflater();
ViewGroup vg = (ViewGroup)liInflater.inflate(R.layout.main_menu_header, sv, false);
sv.addView(vg);
//Setup the Main Menu items on the left side.
GridView gvMenuItems = (GridView) findViewById(R.id.gvMenuItems);
gvMenuItems.setAdapter(new ImageAdapter(this));
ImageAdapter class:
ImageAdapter class:
public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return mThumbIds.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// 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(parent.getLayoutParams().width, 125)); //new GridView.LayoutParams(400, 125));
//imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
imageView.setMaxHeight(50);
imageView.setMaxWidth(50);
//imageView.setPadding(30, 0, 0, 0);
//imageView.setPadding(40, 30, 20, 30);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
// references to our images
private Integer[] mThumbIds = {
R.drawable.home,
R.drawable.open_folder,
R.drawable.paper_pen,
R.drawable.person
};
}
I thought the gridview property of android:layout_height="match_parent" would work but it's not. Any ideas as to how I can get the GridView to take up the whole left side, inside the scrollview?
My best guess is that scrollview is giving you problem.
Why do u need scrollview for?
Grid View will handle the scrolling. It is kind of redundant.So please remove it and add inflated view directly to llLeft directly. That shall solve the problem.
In fact, it would be more elegant just to use xml to solve your UI problem. Use <include> tag in your main_menu.xml. Here is how
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/llLayoutContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<!-- <LinearLayout android:id="#+id/llMiddle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"> -->
<LinearLayout
android:id="#+id/llLeft"
android:layout_width="400dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/layout_left"
android:paddingLeft="5dp"
android:paddingRight="5dp">
<include
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/main_menu_header" />
</LinearLayout>
<LinearLayout
android:id="#+id/llRight"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#drawable/layout_right"
android:padding="0dp">
</LinearLayout>
<!-- </LinearLayout> -->

Categories

Resources