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 :)
Related
I have problems with setting margin to a custom made linear layout class that I use multiple times in a GridLayout. The Gridlayout is placed in a fragment.
This is the code of fragment_grid.xml:
<FrameLayout 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"
tools:context="app_a_tize.expressme.Fragment.GridFragment"
android:layout_gravity="center">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/orange"
android:layout_margin="5dp"
android:id="#+id/gridlayout_grid"></GridLayout>
</FrameLayout>
This is the code of the GridFragment.java:
public class GridFragment extends Fragment {
public GridFragment() {
// Required empty public constructor
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_grid, container, false);
}
#Override
public void onStart() {
super.onStart();
GridLayout grid = (GridLayout) getView().findViewById(R.id.gridlayout_grid);
grid.setRowCount(3);
int tileHeight = (CategoryTileActivity.gridContentHeight -3 * 10) / 3;
int amountofColumns = (int) CategoryTileActivity.gridContentWidth / tileHeight;
grid.setColumnCount(amountofColumns);
grid.setMinimumWidth((amountofColumns * tileHeight) + (5 * 20 ));
for (int i = 0; i < 3 * amountofColumns; i++) {
//fill the grid with the custom LinearLayout:
grid.addView(new TileClass(getActivity(), tileHeight, tileHeight, "ToBeImplemented", "Button"));
}
}
}
This is the code of the custom LinearLayout:
public class TileClass extends LinearLayout {
public TileClass(Context context, int height, int width, String image, String text) {
super(context);
this.setBackgroundResource(R.drawable.tile_button); //creates rounded layouts
this.setMinimumHeight(height);
this.setMinimumWidth(width);
this.setOrientation(LinearLayout.VERTICAL);
ImageView tileImage = new ImageView(context);
Bitmap bMap = BitmapFactory.decodeResource(getResources(), R.drawable.tilephoto);
Bitmap bMapScaled = Bitmap.createScaledBitmap(bMap, 100, 100, true);
tileImage.setImageBitmap(bMapScaled);
tileImage.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
TextView tileText = new TextView(context);
tileText.setText(text);
tileText.setTextColor(Color.WHITE);
tileText.setGravity(Gravity.CENTER);
addView(tileImage);
addView(tileText);
}
}
When I run the Activity, I get this as result:
The code I showed above is responsible for the orange area in the middle. What I need: the blue "buttons"/LinearLayouts, in the orange area in the middle, to have a margin of 5dp. So the rest of the orange space is be taken by the custom LinearLayouts.
I don't know how to fix that, I tried a lot of options but they don't seem to work out for me.. Everything from MarginLayoutParams to params.setMargins(5,5,5,5); On almost every layout in my code.
I use Android Studio 2.1.2, supporting minimum of API 15.
Every help is appreciated!
For your imagination, this must be the end result, I need the margin like this:
You have to make custom view of gridview item as below:-
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="#dimen/categoryHeight"
android:layout_marginLeft="#dimen/margin_5dp"
android:layout_marginRight="#dimen/margin_5dp"
android:layout_marginTop="#dimen/margin_7dp"
android:background="#drawable/rounded_bg"
>
<ImageView
android:id="#+id/llRowItem"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:scaleType="fitXY"
android:gravity="bottom"/>
<TextView
android:id="#+id/item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black_light"
android:padding="#dimen/margin_5dp"
android:layout_gravity="bottom"
android:singleLine="true"
android:textColor="#color/white"
android:textSize="#dimen/font_size_16sp" />
</FrameLayout>
and inside adapter set color of text view, background, text or image of imageview whatever you want to set.
I am programming a android app with ImageView and when I try to change the width and height dynamically, the app stops (abort). I am using the following commands:
RelativeLayout.LayoutParams icon_horizontal = new RelativeLayout.LayoutParams(50, 50);
mec21h_icon2.setLayoutParams(icon_horizontal);
The layout is Relative, so what is wrong?
It would be nice to have a Stack trace in order to understand what the error is.
Without this, I can just guess:
you're trying to use the wrong parent layout params
the ImageView ref is null
...
I guess you are trying to change the image dimensions after it is visible (already displayed), if so you should first call for method requestLayout();
i.e.
mImageView.requestLayout();
Re-size image on Click of a button.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rel"
tools:context="com.testingpp.scannerbarcode.MainActivity">
<ImageView
android:id="#+id/imageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:onClick="button_one"
android:src="#drawable/btn_back"
/>
</FrameLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
FrameLayout layout;
ImageView imageView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = (ImageView) findViewById(R.id.imageview);
layout = (FrameLayout) findViewById(R.id.rel);
}
public void button_one(View view)
{
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(50,50);
layout.setLayoutParams(params);
}
}
if you are using Framents, then don't use onClick of xml. use onClickListener in java.
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.
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>
android ImageView is not bringing to front in RelativeLayout
Tried to call bringtofront() didn't work
tried setting visibility to true didn't work
XML CODE
<?xml version="1.0" encoding="utf-8"?>
<!-- This file is /res/layout/main.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/spellingLevel1Layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/canvas_container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/magnetboard" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="480dp"
android:layout_marginTop="600dp"
android:adjustViewBounds="true" />
</RelativeLayout>
</LinearLayout>
Java Code
public class spellingLevel1 extends Activity {
rel1 = (RelativeLayout) findViewById(R.id.canvas_container);
mImageView1 = (ImageView) findViewById(R.id.imageView1);
image1();
}
public void randomNumber() {
Random rando = new Random();
currentLetter = myImageList[rando.nextInt(myImageList.length)];
}
public void image1(){
//randomNumber();
mImageView1 = (ImageView) findViewById(R.id.imageView1);
mImageView1.setBackgroundResource(R.drawable.spelling_);
mImageView1.bringToFront();
mImageView1.requestLayout();
}
UPDATED CODE
rel1 = (RelativeLayout) findViewById(R.id.canvas_container);
mImageView1 = (ImageView) findViewById(R.id.imageView1);
image1();
}
public void randomNumber() {
Random rando = new Random();
currentLetter = myImageList[rando.nextInt(myImageList.length)];
}
public void image1(){
//randomNumber();
mImageView1 = (ImageView) findViewById(R.id.imageView1);
mImageView1.setImageResource(R.drawable.spelling_); //updated here to setImageResource
mImageView1.bringToFront();
Still does not show
its not the full code but it should be everything to help you see what is included in here
You should define the image source of the ImageView.
because it's size is set to wrap_content and it has no content, the size stays 0.