Methods setImageDrawable/setBackgroundDrawable image size issue - android

I'm having a problem with my images and buttons in Android. Basically, when i define their graphics, I use the "setImageDrawable" method. But this method makes the image enlarge and 'overfill' the view like this:
http://img36.imageshack.us/img36/7713/screenshot20120330at211.png
While what I should get is:
http://img850.imageshack.us/img850/883/screenshot20120330at214.png
The second picture is what I get when I use "setBackgroundDrawable" instead of "setImageDrawable". But it's not the right way to do it so... here is my code so you can see how I proceed:
// Button "myButton" initialization
this.btn_connexion_off_480x800 = new ImageButton(this.getContext()); // ImageButton instantiation
this.btn_connexion_off_480x800.setBackgroundColor(Color.TRANSPARENT); // Paramétrage du background
this.btn_connexion_off_480x800.setImageDrawable(getResources().getDrawable(R.drawable.btn_connexion_off_480x800)); // Graphic source definition
this.btn_connexion_off_480x800.setPadding(0, 0, 0, 0); // Paramétrage des marges intérieures
this.img_header_480x800.addView(this.btn_connexion_off_480x800, new AbsoluteLayout.LayoutParams(114, 50, 8, 12)); // Binding to the super view and setting coordinates
Does anyone knows why is this happening ?

Yes, you are setting src to some fixed layout without setting its scale type, do following:
Use ImageView instead of ImageButton, and set an extra property of imageview:
this.btn_connexion_off_480x800.setScaleType(ScaleType.FIT_XY);

I tried Using XML
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Image"
android:layout_width="fill_parent"
android:layout_height="225px"
android:scaleType="fitXY"/>
try android:scaleType="centerCrop"

Try defining a scaleType for your ImageButton with setScaleType.
I would not define my layout in code try to do as much layout as possible in xml files to cleanly separate behaviour from view.
Also don't use an Absolute Layout with absolute pixel values. If you define the layout in xml use dp units as explained in the support multiple screens guide. Your current layout will only work on one display size. If you are using pixel values in code you need to scale them to match the device density, this is also explained in the support multiple screens guide.
One other small improvement is the method you are using to set the drawable. An ImageButton also defines the method setImageRessource, this will allow you to directly call:
this.btn_connexion_off_480x800.setImageRessource(R.drawable.btn_connexion_off_480x800);

Related

Two circular images on top of one another

I am having two different circular images with different sizes.I have to place both in same place where the center point will be same.These two imageviews are in a relative layout.
please help..
When using a relative layout the only option to do that is to center both images in the layout, but if you start adding more elements, such as some text above/below any of the images, the result will not be as expected.
So my recommendation is to do it programatically. You can define a View and override the onDraw() method. Then you would load the bitmaps by means of two ImageView (or BitmapFactory). Then you paint it to the canvas at the desired location. To find out the center of each image you can use the Rect class that you obtain from the View method getDrawingRect after you apply the layout properties (so the size is calculated),, or by hand (create a Rect with de dimensions of the loaded Bitmap if you use BitmapFactory)
Other alterative is using LayerDrawable and define the image positions so they are centered (you need to know the image dimensions before hand).
Difficult to help without your layout XML code. Having said that, the moment you see "one on top of the other", you need to consider FrameLayout.
Use Framelayout, and set the background for the same with an image and then add images on top with setting layout gravity to left or right or middle.
In stead of creating a new sublayout, you can potentially have the ImageViews align on all sides and set the scaleType attribute to something like center:
<ImageView
android:id="#+id/circle_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/..."
android:scaleType="center"/>
<ImageView
android:id="#+id/circle_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/..."
android:layout_alignTop="#+id/circle_a"
android:layout_alignBottom="#+id/circle_a"
android:layout_alignLeft="#+id/circle_a"
android:layout_alignRight="#+id/circle_a"
android:scaleType="center" />
This will give the circle_b ImageView actually the same dimensions as circle_a, but setting the appropriate scaleType will prevent the image from being stretched or misaligned.
//Edit: ups, I meant to say center... corrected.

How it is possible to stretch the image manually to our required pixel position

How it is possible to stretch the image manually to our required pixel position.in my android application i want to stretch my image to the specified position by dragging the end points of it.can anybody suggest me how to do this............
You can use an imageview with the attribute
android:scaleType="fitXY"
This will make the image to fit the bounds of the imageview.
To modify the image on click or touch, you will need add a ontouchlistener to the view. And on the based on the view getTop and and getLeft, you will need to set the layout params of the view to increase or decrease the size.
Or you will need to extend a view and override the onDraw method, in that method you can use the canvas.drawBitmap method to specify the size of the bitmap.
Either way you will need to use the onTouchListener.

Resize ImageView in run time using a button - Android

I am displaying an image using ImageView container. the image needs to be resized when a user enters a specific value and clicks update
resize is just for display, the original resource remains as it is. NO editing, save, etc
xml layout
<ImageView
android:background="#drawable/picture01"
android:id="#+id/picture01holder"
android:layout_below="#+id/TextView01"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
</ImageView>
main.java
final ImageView pic01 = (ImageView)findViewById(R.id.picture01);
now what do i do to dynamically assign this pic01 a size of my choice. just the function, i can implement it inside a button myself. i believe i have to use something like pic01.setLayoutParams but i dont know how to use it.
basically i want to overwrite layout_height="wrap_content" and layout_width="wrap_content" in .java
change the Imageview size by taking LayoutParams
final ImageView pic01 = (ImageView)findViewById(R.id.picture01);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(50, 50);
pic01.setLayoutParams(layoutParams);
First of all, you have to set the scale type of the image to CENTER_INSIDE or CENTER_CROP depending on your preferences. You should do this in your onCreate() method.
myImageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
Afterwords you just have to resize the image view in your layout. This will depend on the type of layout you're using. An example for LinearLayout would be:
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(100,200);
myImageView.setLayoutParams(params);
Or you can set the components minimal size:
myImageView.setMinimumWidth(200);
myImageView.setMinimumHeight(200);
In both cases make sure that the size can be achieved inside the layout. If you have multiple components with smaller weights, the image view may be unable to take up the space you need.
RelativeLayout.LayoutParams myParams = new RelativeLayout.LayoutParams(yourWidthHere, yourHeightHere);
pic01.setLayoutParams(myParams)

Android: ImageView.ScaleType but for Buttons and/or RadioButtons

I like to use a customized (Radio)Button and I know I can use whatever image for the background with the following code inside the xml:
<RadioButton
...
android:button="#drawable/myDrawable"
../>
However: I want to use three radiobuttons, that fill the whole row. But the drawable that I use for the button, doesnt get resized depending on the sreensize, so if the drawable is too big only parts of it will show, and if it is too small, not the whole screen will be filled. If I would use ImageViews I could change the ScaleType like so:
ImageView myImageView = (ImageView) findViewById(R.id.myimageview);
myImageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
But there is no such property for other Views, than the imageView. So how can I accomplish the same for (Radio)Buttons?
You will have to provide images with different sizes (see Supporting Multiple Screens)

Using repeating image to display the status bar / header for a screen

I have implement something like the following on J2me.
Is it possible to implement the same for Android?
i> I have a strip of image which I am keeping on the drawable folder. The image width & height is small.
ii> Now , using Android code & layout xml , I want to repeat displaying the small image strip so that an entire status bar / header is drawn for a screen with the use of repeating images.(mutiple image strips will ultimately draw the entire header)
The reason for implementing the header / status bar in this manner is to avoid keeping the entire header image on the drawable folder which increases the mobile application size.
Kindly provide me your inputs/sample code if anyone has done any implementation with the above logic.
Thanks in advance.
Yes, you can have tiled bitmaps in android.
If your tile is in drawable/background.png, then in drawable/background_tile.xml:
<bitmap android="http://schemas.android.com/apk/res/android"
android:src="#drawable/background"
android:tileMode="repeat"/>
And then you can set the background of a View to be your tiled bitmap in your layout:
<View xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="20dp"
android:background="#drawable/background_tile"/>
You could set the background of a LinearLayout or other View subclass as well.
Two things:
1) I would strongly recommend using a nine patch if at all possible (Especially recommend at least checking out the draw9Patch tool if you havent already) Android draw9Patch info
2.) I've had issues with the tileMode xml attribute being ignored, so had to use the following code to enable the tileMode (this may have been a bug in 1.5)
/**
* Set up any UI elements
*/
private void setUpUI() {
// Add tiling background
View backgroundLayout = findViewById(R.id.backgroundLayout);
BitmapDrawable bgImage = (BitmapDrawable) this.getResources().getDrawable(R.drawable.wood_bg);
bgImage.setTileModeXY(Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
backgroundLayout.setBackgroundDrawable(bgImage);
}
Code snippet taken from Gaunt Face - Where-To-Do Post

Categories

Resources