I have a 9-patch image and what I want to do is to use it to "seperate" the adMob ad from the app. I want to draw a light blue line exactly where the ad is.
This is the 9-patch:
I added it to layout as ImageView and this is the XML code:
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/adView"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:src="#drawable/ab_transparent_example" />
And this is the result:
But what I want to get is the 9-patch to take the size of the screen, to make a full blue line from left to right of the screen. I've never worked with 9-patch before, what am I doing wrong?
The diagram below is a pretty good visual explanation of what a 9-patch is. As for your specific problem, you should set the 9-patch as the background to the image.
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/adView"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:background="#drawable/ab_transparent_example" />
First you need to know is that 9-patch is image as any other, regarding layout placing it. The difference is in way 9- patch image scale.
In this situation, try to set layout_width to "fill_parrent" or "match_ parent"
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/adView"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:src="#drawable/ab_transparent_example" />
Related
I want to achieve something of the format as shown in the image. The blue part is background, the image of the guy and girl is a ImageButton. The original images for these are 88x128 (trainer000, trainer001). I want to rescale the ImageButton such that the image covers the entire height and the width is adjusted accordingly. Now I found 2-3 ways to do so but they make use of a separate class to calculate width. I want to know if there is a way to do it purely in the xml file itself.
What I used:
`
<ImageButton
android:id="#+id/maleimage"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:layout_alignParentLeft="true"
android:src="#drawable/trainer000" />
<ImageButton
android:id="#+id/femaleimage"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:layout_alignParentLeft="true"
android:src="#drawable/trainer001" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textColor="#000000"
android:text="Are you a boy or a girl?"
android:textAppearance="?android:attr/textAppearanceMedium" />
`
What I want is this:
http://imgur.com/9D6XZUT
EDIT: Found the solution. I just used Studio's Layout editor.
Sorry for the my English, Actually the problem is that i get the images through json in android but when i show it in full size the image got stretched can you please tell me what to do??
this is my xml file
<ImageView
android:id="#+id/portFullImage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="115dp"
android:layout_marginLeft="18dp"
android:layout_marginRight="22dp"
android:layout_marginTop="70dp"
android:src="#drawable/logo" />
maybe you can try with scaleType in your ImageView
<ImageView
android:scaleType="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/logo" />
You have specified top and bottom margins by using android:layout_marginTop="70dp" and android:layout_marginBottom="115dp" which are very big amount of space if device is small in my opinion. it will make your ImageView already small.
If you don't bother about it, try android:scaleType="centerInside" and see if it helps. You may try other scaletypes mentioned in below reference document and check the results.
Reference:
Various ScaleType of ImageView , ScaleType
I'd like to have a simple player view with image, name and status. The image will be loaded via Google+.
The Problem I have is that with big images my ImageView get's far too wide and pushes my texts out of sight.
Here is an example to show how it looks like:
https://dl.dropboxusercontent.com/u/11037539/unwanted_padding.png
Layout:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/playerPane"
android:background="#color/player2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/playerName"
android:layout_alignBottom="#+id/playerStatus"
android:id="#+id/playerImage"
android:src="#drawable/ic_contact_picture"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/playerImage"
android:id="#+id/playerName"
android:text="Player"
android:textColor="#android:color/black"
android:singleLine="true"
android:textStyle="bold"
android:paddingTop="#dimen/player_padding"
android:paddingBottom="#dimen/player_padding"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/playerName"
android:layout_alignLeft="#+id/playerName"
android:id="#+id/playerStatus"
android:text="status"
android:singleLine="true"
android:paddingBottom="#dimen/player_padding" />
</RelativeLayout>
I've tried all ImageView.scaleTypes, but so far nothing works..
Thanks a lot for your help!
You just need to define your width. It should fix it. So change this line
to something like:
<ImageView
android:layout_width="75dp" //OR WHATEVER LOOKS BEST
ScaleType is only really useful when the imageview's size is smaller than the image. As previously mentioned, set the size and then you can use the scaleType to fix how the image should be scaled within the now smaller area.
I'm novice in android development and still can't understand fully how sizing works with different layouts. I want to place a preview of the book into this template:
I've tried to implement it using FrameLayout. The idea is that the center of preview image will be exactly where the center of the png background is. Here is the code:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/book_frame" />
<ImageView
android:id="#+id/previewImage"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/abs__ab_bottom_solid_dark_holo" />
</FrameLayout>
The result in layout builder look exactly like I want it to be:
On real phone it is different:
I think on other resolutions it will also differ from both variants. So my question is how to synchronize these images so after any resizing and distortions the preview will fit the cover correctly?
Possible solution would be to remove border from image and place it on previewImage instead. But there are several similar usecases in application where the border can't be removed, so I'd like to find out a universal solution for all of them.
You have your answer in your question.
What happening in your case image size matter for different screen resolution.
Hard-coded things always gives weird result in your case
android:layout_width="83dp"
android:layout_height="83dp" this piece of code.
Check this link this will guide you to manage drawables for different screens.
and here is another link
So the suitable solution for me was to separate border of inner image into its own ImageView, insert it into layout over the photo and add 1dp padding to the photo.
The layout become like this:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5" >
<ImageView
android:id="#+id/bookFrame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/book_frame" />
<ImageView
android:id="#+id/previewImage"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:padding="1dp"
android:scaleType="centerCrop"
android:src="#drawable/abs__ab_bottom_solid_dark_holo" />
<ImageView
android:id="#+id/previewBorder"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/preview_border" />
</FrameLayout>
My designer keeps adding a little padding around my image.
I want the image the stick on the top and to fill out the width of the screen.
Here's a screenshot from the designer:
This is my XML code:
<ImageView
android:id="#+id/markertap_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="#drawable/header_bootsverleih_xhdpi" />
It looks like the image is larger than the screen width, so it's getting scaled down after sizing. Try adding android:adjustViewBounds="true" to your ImageView.
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:id="#+id/imageView"
android:cropToPadding="false"
android:scaleType="fitXY" />
Experienced the same when I used an ImageView for Splashscreen, this^ worked for me.
you might want to add it your image view only this.
It fixed my problem.
android:paddingVertical="0dp"
android:paddingHorizontal="0dp"