Suppose I have multiple images that I want to set on top of the other, how can I do this in GridView?
Like:
Background
ImageView1
ImageView2 at bottom-right of the ImageView2
Here is an example for what I want:
http://i.stack.imgur.com/JS36H.png
Here is my codes
Activity:
public class ImgAdapter extends BaseAdapter {
private Context mContext;
private ColorMatrixColorFilter cf;
String Questions = Question.Questions;
int level = Levels.level;
public ImgAdapter(Context c) {
mContext = c;
ColorMatrix matrix = new ColorMatrix();
//matrix.setSaturation(0); //0 means grayscale
matrix.setSaturation(0);
cf = new ColorMatrixColorFilter(matrix);
}
public int getCount() {
return ThumbIds.length;
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
SharedPreferences pref = mContext.getSharedPreferences(Questions, Context.MODE_PRIVATE);
//imageView = (ImageView) convertView;
imageView = new ImageView(mContext);
int size = mContext.getResources().getDimensionPixelSize(R.dimen.width);
imageView.setLayoutParams(new GridView.LayoutParams(size, size));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setAdjustViewBounds(true);
imageView.setImageResource(ThumbIds[position]);
if(pref.getBoolean(level+"answered"+position, false)){
//Thats the ImageView I want to set over the another ImageView
/*ImageView answ;
answ = new ImageView(mContext);
answ.setScaleType(ImageView.ScaleType.CENTER_CROP);
answ.setAdjustViewBounds(true);
answ.setImageResource(R.drawable.answered);*/
imageView.setImageResource(ThumbIds[position]+1);
}
return imageView;
}
public static Integer[] ThumbIds =
{
R.drawable.1,
R.drawable.2,
R.drawable.3,
R.drawable.4,
R.drawable.5,
R.drawable.6,
R.drawable.7
};
}
Layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="#+id/layout" >
<TextView
android:id="#+id/Correct"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
/>
<GridView
android:id="#+id/Question"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center"
android:horizontalSpacing="20dp"
android:verticalSpacing="20dp"
android:numColumns="3"
android:stretchMode="columnWidth"
tools:context=".Question" />
</LinearLayout>
In the Question activity I get the GridView
Unfortunately GridViews don't like it when cells try to overlap each other. So lets say you have a cell within a gridview that's 48x48dp. Attempting to render anything that's bigger then 48 will cause it to get clipped. So that means you'll need to do a trick of the eye sorta thing.
Lets say you want to show the main image at 48x48dp. Lets call the second guy an emblem whose 16x16dp and you want it centered at the bottom right corner of the main image. Then you'll need a cell that's about 56dp. If you bring padding or margin into the mix, you may need to adjust. Doing something akin to the following for each item's layout within the GridView should do the trick.
<FrameLayout
android:layout_width="56dp"
android:layout_height="56dp"
....any other attributes>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="left|top"
android:src="Your main image"
...any other attributes/>
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_gravity="right|bottom"
android:src="Your main image"
...any other attributes/>
</FrameLayout>
Related
I am stuck trying to resize ImageView objects.
The issue is that when I set the width/height programmatically, I see the width/height change with the debugger tool in eclipse.
However, the image will not scale to the new size, and maintains its current ratios. In some cases it even puts the original image at its current size, and moving to a different activity will resize it (somewhat) correctly.
Screenshots:
After opening the app
http://imgur.com/ha9s9rL
After opening and closing a different activity
http://imgur.com/DrBIJaI
I would like for the images to sit next to each other, with the same width/height for each image.
onCreate() Method:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_display_behavior);
listView = (ListView) findViewById(R.id.display_behavior_listview);
List<Behavior> behaviorList = parseCatagories();
List<View> views = getCatagoryViewsFromBehaviorList(behaviorList);
// Setup array adapter
BehaviorRow behaviorRows[] = getBehaviorRows(views);
int viewCount = 0;
View view;
for (BehaviorRow row : behaviorRows) {
if (viewCount < views.size()) {
view = views.get(viewCount);
row.setBehaviorOne(view);
viewCount++;
view = views.get(viewCount);
row.setBehaviorTwo(view);
viewCount++;
}
Log.i("BehaviorRowDat", row.toString());
}
BehaviorRowAdapter adapter = new BehaviorRowAdapter(getApplicationContext(), R.layout.catagory_row,
behaviorRows);
listView.setAdapter(adapter);
}
onWindowFocusChanged() Method:
#Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
ImageView catagoryOne;
ImageView catagoryTwo;
for (int i = 0; i < listView.getChildCount(); i++) {
catagoryOne = (ImageView) listView.getChildAt(i).findViewById(R.id.catagory_space_one);
catagoryTwo = (ImageView) listView.getChildAt(i).findViewById(R.id.catagory_space_two);
resizeImageView(catagoryOne);
resizeImageView(catagoryTwo);
}
}
Resize Image Code:
private ImageView resizeImageView(ImageView image) {
// Set length/width
int length = calculateLengthOfImages();
image.getLayoutParams().height = length;
image.getLayoutParams().width = length;
// Set Padding
int padding = calculatePaddingOfImages();
image.setPadding(padding, padding, padding, padding);
return image;
}
XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/catagory_row_created"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="horizontal"
android:padding="10dp"
android:weightSum="1" >
<ImageView
android:id="#+id/catagory_space_one"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:contentDescription="#string/catagory_placeholder"
android:scaleType="centerCrop" />
<ImageView
android:id="#+id/catagory_space_two"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:contentDescription="#string/catagory_placeholder"
android:scaleType="centerCrop" />
</LinearLayout>
Try changing the scaleType attribute in your ImageViews to:
android:scaleType="fitXY"
Alternatively, you can add this line in your resizeImageView() method:
image.setScaleType(ScaleType.FIT_XY);
Hope that helps!
Replace your xml with this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/catagory_row_created"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="horizontal"
android:padding="10dp">
<ImageView
android:id="#+id/catagory_space_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
android:scaleType="centerCrop" />
<ImageView
android:id="#+id/catagory_space_two"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:scaleType="centerCrop" />
</LinearLayout>
In onCreate() of your activity, add this:
final ImageView imageView1 = (ImageView) findViewById(R.id.catagory_space_one);
final ImageView imageView2 = (ImageView) findViewById(R.id.catagory_space_two);
imageView1.post(new Runnable() {
#Override
public void run() {
imageView1.getLayoutParams().height = imageView1.getWidth();
imageView1.requestLayout();
}
});
imageView2.post(new Runnable() {
#Override
public void run() {
imageView2.getLayoutParams().height = imageView2.getWidth();
imageView2.requestLayout();
}
});
So what basically I did is I have stretched the two images' width equally to take the whole space in xml using layout_weight, then I have set the images' height to be like their respective widths in code. So now they are square-shaped.
Hope that helps.
I am doing an android program using google api.I listed all images that are needed to be uploaded to the google drive inside a grid view.What i needed is that i needed to put a particular image on the top of all images that are uploaded.For that first of all i need to put that particular image(a flower) on the top of all images that are listed.Can anyone suggest any method,it will be helpfull.
Advance thanks.....
This is my code to list all images inside a gridview.....
public class MainActivity extends ActionBarActivity {
protected Cursor mCursor;
protected int columnIndex;
protected GridView mGridView;
protected ImageAdapter mAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_photo_gallery);
// Get all the images on phone
String[] projection = {
MediaStore.Images.Thumbnails._ID,
MediaStore.Images.Thumbnails.IMAGE_ID
};
mCursor = getContentResolver().query(
MediaStore.Images.Thumbnails.EXTERNAL_CONTENT_URI,
projection,
null,
null,
MediaStore.Images.Thumbnails.IMAGE_ID + " DESC"
);
columnIndex = mCursor.getColumnIndexOrThrow(projection[0]);
// Get the GridView layout
mGridView = (GridView) findViewById(R.id.gridView);
mAdapter = new ImageAdapter(this);
mGridView.setAdapter(mAdapter);
}
class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context context) {
mContext = context;
}
#Override
public int getCount() {
return mCursor.getCount();
}
#Override
public Object getItem(int position) {
return null;
}
#Override
public long getItemId(int position) {
return 0;
}
// Convert DP to PX
public int dpToPx(int dps) {
final float scale = getResources().getDisplayMetrics().density;
int pixels = (int) (dps * scale + 0.5f);
return pixels;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
int imageID = 0;
// Want the width/height of the items
// to be 120dp
int wPixel = dpToPx(120);
int hPixel = dpToPx(120);
// Move cursor to current position
mCursor.moveToPosition(position);
// Get the current value for the requested column
imageID = mCursor.getInt(columnIndex);
if (convertView == null) {
// If convertView is null then inflate the appropriate layout file
convertView = LayoutInflater.from(mContext).inflate(R.layout.conversation_item, null);
}
else {
}
imageView = (ImageView) convertView.findViewById(R.id.imageView);
// Set height and width constraints for the image view
imageView.setLayoutParams(new LinearLayout.LayoutParams(wPixel, hPixel));
// Set the content of the image based on the provided URI
imageView.setImageURI(
Uri.withAppendedPath(MediaStore.Images.Thumbnails.EXTERNAL_CONTENT_URI, "" + imageID)
);
// Image should be cropped towards the center
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
// Set Padding for images
imageView.setPadding(8, 8, 8, 8);
// Crop the image to fit within its padding
imageView.setCropToPadding(true);
return convertView;
}
}
}
These are my xml files
activity_photo_gallery.xml
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<GridView
android:id="#+id/gridView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="100dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:gravity="center" />
</LinearLayout>
conversation_item.xml
<?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="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView" />
</LinearLayout>
Note:To put a particular image(for eg:a flower) on the top of all images that are listed inside the view is the thing that i needed.....any help will be appreciated.
You could probably use a frame layout to achieve this ...
conversation_item.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/FrameLayout1"
android:layout_width="150dip"
android:layout_height="150dip"
android:layout_gravity="center" >
<ImageView
android:id="#+id/thumbImage"
android:layout_width="150dip"
android:layout_height="150dip"
android:scaleType="centerCrop" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="150dip"
android:layout_height="150dip"
android:layout_gravity="center"
android:src="#drawable/select"
/>
</FrameLayout>
Jack I think u need to redit ur activity_photo_gallery.xml file as :
<?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="match_parent">
<ImageView
android:kuttichatan="error_pokatte"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView" />
</LinearLayout>
I have a viewpager in my main_layout. The view pager contains only an ImageView wrapped by RelativeLayout
What i would like to do is when a user click on a button, it will add an image to that particular viewpager.
I found this answer here on stackoverflow (which i think it is relevant to my question), however i am completely lost with that code.
Dynamically Adding View to viewpager
So far this is my code:
MainActivity.Java
private PagerAdapter pAdapter;
private ViewPager photoPager;
...
pAdapter = new GalleryPagerAdapter(getApplicationContext());
photoPager.setAdapter(pAdapter);
GalleryPagerAdapter.java
public class GalleryPagerAdapter extends PagerAdapter{
private final Context context;
LayoutInflater inflater;
private final int[] GalImages = new int[] {
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher
};
public GalleryPagerAdapter(Context context){
this.context=context;
}
#Override
public int getCount() {
return GalImages.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(context);
int padding = 10;
imageView.setPadding(padding, padding, padding, padding);
imageView.setScaleType(ImageView.ScaleType.MATRIX);
imageView.setImageResource(GalImages[position]);
container.addView(imageView, 0);
return imageView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((ImageView) object);
}
}
This is the view that i would like to add dynamically
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:padding="10dp" >
<ImageView
android:id="#+id/photo_thumb"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#000000"
android:scaleType="fitXY"
android:padding="0dp" />
</RelativeLayout>
And this is my MainActivity where my ViewPager exists
MainActivity.xml
<LinearLayout
android:id="#+id/bannerLayout"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:layout_margin="0dip"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/photoPager"
android:layout_width="fill_parent"
android:layout_height="125dp"
android:background="#4F4E4F"/>
</LinearLayout>
So my question is how do i improve the code i am using so that i can dynamically add new image to my ViewPager
ps: On the reference link (which i strongly believe relevant to my question), i am completely lost on this part:
// Create an initial view to display; must be a subclass of FrameLayout.
FrameLayout v0 = (FrameLayout) inflater.inflate (R.layout.one_of_my_page_layouts, null);
pagerAdapter.addView (v0, 0);
What is inflater ?? What should i initialize it to?
I hope someone could direct me. And i am sorry if i sound like asking multiple question here.
Inflater is used to create View object out of your xml layout.
So if your lauout R.layout.one_of_my_page_layouts:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:padding="10dp" >
<ImageView
android:id="#+id/photo_thumb"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#000000"
android:scaleType="fitXY"
android:padding="0dp" />
</RelativeLayout>
Inflater will do something like this(Just an example)
ImageView iv=new ImageView(context);
RelativeLayout rl=new RelativeLayout(context);
rl.add(iv)
return rl;
Just the minimal code but inflater will set all the layout params as well.
So instead of create a view dynamically like you are doing in instantiateItem if you have an xml you can simply inflate it and get an object of Type view.
So you can change instantiateItem to:
public Object instantiateItem(ViewGroup container, int position) {
RelativeLayout v0 = (RelativeLayout ) inflater.inflate (R.layout.one_of_my_page_layouts, null);
ImageView imageView = vo.findViewById(R.id.photo_thumb);
int padding = 10;
imageView.setPadding(padding, padding, padding, padding);
imageView.setScaleType(ImageView.ScaleType.MATRIX);
imageView.setImageResource(GalImages[position]);
container.addView(v0, 0);
return v0;
}
I made a layout with a gridview for small screens (2.7 inch). My icons are 48 x 48 px. Now i want the gridview on a tablet so i created a new layout and changed the settings to large and landscape. I want to use larger icons for the tablet: 72 x 72 px. The problem is that the larger icons not showing up but the small icons does. My small icons are in the folder drawable-mdpi and the large icons are in the folder drawable-hdpi. I tried allready to move the large icons to the drawable-xhdpi folder but without success. I also tried to change the scaletype and the layoutparams of the imageadapter but also without any success Can someone help me to get the larger icons on the tablet?
Here is my code of the large layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/back" >
<GridView
android:id="#+id/Menu"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/imageView1"
android:columnWidth="80dp"
android:gravity="center_horizontal|top"
android:horizontalSpacing="130dp"
android:numColumns="auto_fit"
android:paddingTop="10dp"
android:scrollbars="none"
android:stretchMode="columnWidth"
android:verticalSpacing="50dp" android:layout_marginTop="50dip">
</GridView>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/title" />
</RelativeLayout>
The java code of my imageadapter for the gridview is:
public class ImageAdapter extends BaseAdapter
{
private Context context;
public ImageAdapter(Context c)
{
context = c;
}
//---returns the number of images---
public int getCount() {
return menu_icon.length;
}
//---returns the ID of an item---
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
//---returns an ImageView view---
public View getView(int position, View convertView, ViewGroup parent)
{
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(context);
imageView.setLayoutParams(new GridView.LayoutParams(150, 150)); imageView.setScaleType(ImageView.ScaleType.CENTER);
imageView.setPadding(5, 5, 5, 5);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(menu_icon[position]);
return imageView;
}
}
Try this,
imageView.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT);
This may work.
This might solve your problem:
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
http://developer.android.com/reference/android/widget/ImageView.html#setScaleType(android.widget.ImageView.ScaleType)
http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
I create an ImageSwitcher by code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#FFFFFF"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Gallery
android:id="#+id/Gallery01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"></Gallery>
<ImageSwitcher
android:id="#+id/ImageSwitcher01"
android:background="#android:color/transparent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</ImageSwitcher>
</LinearLayout>
But when I run this, this ImageSwitcher background still BLACK, not transprent as I expected. How do I fix it?
When you go to set the factory on the ImageSwitcher, be sure that the ViewFactory returns a transparent background:
myImageSwitcher.setFactory(new ViewFactory() {
#Override
public View makeView() {
ImageView imageView = new ImageView(getActivity());
imageView.setBackgroundColor(0x00000000); // <--- return transparent bg
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
imageView.setLayoutParams(new ImageSwitcher.LayoutParams( ImageSwitcher.LayoutParams.FILL_PARENT, ImageSwitcher.LayoutParams.FILL_PARENT));
return imageView;
}
});
That fixed it for me.
As a workaround to this problem, I used the ViewFlipper instead of the ImageSwitcher.
I just want to animate between predefined images, so ViewFlipper is ok for me.
I haven't tried but I think you can use 2 imageviews, set the correct image on the next view and call viewflipper.showNext().
Edit: In the end I had to do what I wrote above in the project I was working on, and it works.
In the layout.xml you have:
<ViewFlipper
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:id="#+id/viewFlipper">
<ImageView
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:src="#drawable/market_product01"
android:id="#+id/imgFirst">
</ImageView>
<ImageView
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:id="#+id/imgSecond">
</ImageView>
</ViewFlipper>
Then you create a class that handles the image switch:
public class MyImageViewSwitcher {
private ViewFlipper flipper;
private ImageView[] views;
private int currentView = 0;
public MyImageViewSwitcher(ViewFlipper flipper, ImageView first, ImageView second) {
currentView = 0;
this.flipper = flipper;
views = new ImageView[2];
views[0] = first;
views[1] = second;
}
public void setImage(Drawable image) {
currentView = (currentView + 1) % 2;
views[currentView].setImageDrawable(image);
flipper.showNext();
}
}
From your activity, you build an ImageViewSwitcher:
ViewFlipper viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);
viewFlipper.setInAnimation(android.R.anim.fadeIn);
viewFlipper.setOutAnimation(android.R.anim.fadeOut);
ImageView imgFirst = (ImageView) findViewById(R.id.imgFirst);
ImageView imgSecond = (ImageView) findViewById(R.id.imgSecond);
this.imageSwitcher = new MyImageViewSwitcher(viewFlipper, imgFirst, imgSecond);
Every time you want to change the content you call the method:
imageSwitcher.setImage(Drawable d)
Setting the background color of the ImageSwitcher control does not work. To remove the black background, you just need to set the background color each views inside the Imageswitcher to transparent:
_imageSwitcher.getCurrentView().setBackgroundColor(getResources().getColor(R.color.transparent));
Do this for each call to _imageSwitcher.setImageResource() and your are done :)