I have an ImageView that when I look at in the XML preview layout on Eclipse looks fine, but when I launch the app on my hardware device a big whitespace comes to surround it. This is what the actual image is, without the whitespace that is being added. Here is my XML file too. How do I get rid of this whitespace?
Since your image shouldn't be too large, try this:
<?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/linkMe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="cat"
android:src="#drawable/ashsc" />
</LinearLayout>
This way, the image won't attempt to scale and won't create bounds outside the ImageView's image.
Related
I have few images that i want to use for the help. Where each image will be used in one activity. i have the images in drawable directory and referencing them using aliases for the different configurations. the images are extension is png.
in the UI designer the image is displayed, but not in run-time. it show white view
my Layout
<?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="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<View
android:id="#+id/help_img_screen"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:background="#drawable/todays_reminders_help"
android:contentDescription="#string/content_description" />
<CheckBox
android:id="#+id/help_chx_dont_show"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/dont_show_help" />
</LinearLayout>
my drawable todays_reminders_help.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill"
android:src="#drawable/todays_reminders_activity_help" >
</bitmap>
i am getting white view at run-time not the image i am referencing? this happen on my test device.
However, when i test on the emulator it worked with no issue
You can try couple of things:
1. In your todays_reminders_help.xml, try to set the android:layout_width and android:layout_height to match_parent
2. Just to make sure if things are working as expected, you can test by setting a non-zero height for View with id help_img_screen. i.e replace
<View
android:id="#+id/help_img_screen"
android:layout_height="0dip"
android:layout_weight="1"
..../>
with
<View
android:id="#+id/help_img_screen"
android:layout_height="100dp"
..../>
and see if that helps. If it works, then you need to figure out why layout_weight is not working - you might have to use hierarchy viewer tool to see why it's not working.
Lastly, i would recommend that you approach this problem in a different way -
Make the View an ImageView and in real time i.e in the Java code, you can set the image src or background dynamically based on the activity/context. You can completely avoid using another layout file todays_reminders_help.xml
Hope this helps.
In my Android project, I am not quite sure how to make my background image fill the entirety of the RelativeLayout root element in XML, which is the size of the screen. I want to be sure that this works for all aspect ratios, so the image will clip vertically or horizontally as necessary. Does someone know how to do this easily? I've only seen questions regarding ImageViews and Buttons, but not really generic Views.
My XML file currently:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/enclosing_rl"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
android:fitsSystemWindows="false">
<!-- Other elements -->
</RelativeLayout>
Other than turning your image into a nine patch I don't think this is possible. What you could do instead is-
Add an ImageView as the first view in your RelativeLayout.
Set layout_centerInParent to true.
Have the layout_width and layout_height set to match_parent.
Then set scaleType to centerCrop.
That will make sure the image fills the screen without any distortion, but depending on screen size/orientation either some of the top/bottom or left/right of the image may be cut off.
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:src="#drawable/background" />
Any other views in the RelativeLayout will appear on top of the ImageView, as long as it is the first view in the RelativeLayout (when you are in the xml).
Create a bitmap drawable XML resource in your res/drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/background"
android:tileMode="repeat" />
Use that drawable as background instead of #drawable/background
according to this answer If you want your ImageView fill your RelativeLayout,use align parameters for ImageView.
you can put all of your views to a LinearLayout and set align parameter to your background ImageView:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/my_background"
android:scaleType="centerCrop"
android:layout_alignTop="#+id/my_views"
android:layout_alignBottom="#+id/my_views"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/my_views"
android:orientation="vertical" >
<!-- stuff -->
</LinearLayout>
</RelativeLayout>
Its smart and 100% working answer is to set the property scaleType of image view !
android:scaleType="fitCenter"
I tried to put background image to linearlayout in my android project. All is working nicely except those fading edges in the left and right on the screen. My background image dimensions are 52x602 and don't have such fading edge originally. I want the background image to cover all the area. Also it has done by designer and using 9-patch I think (black border around image). How can I set the background correctly without those edges?
In emulator it looks like this:
XML:
<?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:background="#drawable/login_background"
android:orientation="vertical"
>
</LinearLayout>
Ok, got answer myself. The .png files must have .9.png ending if they are 9-patch files...So if someone will have same problem, then you'll know.
Try setting fadingEdge to none
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/login_background"
android:orientation="vertical"
android:fadingEdge="none"
>
</LinearLayout>
I have a large png that I would like to use as a background on different layouts, but offset it so that I can have different parts showing (much like you can in CSS), preferable in the xml.
My main layout for the activity contains the following xml:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#layout/bg1">
Layout bg1 consists of the following xml:
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/big_image"
android:layout_marginTop="50sp"
android:paddingTop="50sp"
android:gravity="top|left" />
The gravity property works as expected but margins and paddings are ignored, presumably because I'm working on a bitmap object rather than a layout. What I want to do is set these to a minus amount so that only part of the picture is shown. I've tried using a shape but that only wraps the content whereas I need to fill the entire background.
Any suggestions would be gratefully received. Thanks.
I have used an ImageView with a negative top margin value. The ImageView is declared first within the layout so that it is lowest in the stack of controls and will be rendered behind the others.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/bigLogo"
android:src="#drawable/big_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="-100px" />
</RelativeLayout>
You can use an InsetDrawable (it works from XML) to add extra padding to another drawable.
I'd like to know how to draw two PNG pictures onto the screen.
My XML layout: (named paperxml.xml)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layoutid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/paperid"
android:src="#drawable/paperrepresentation"
/>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rockid"
android:src="#drawable/rockrepresentation"
android:layout_alignTop="#id/paperid"
/>
</RelativeLayout>
What would be the java code to instantiate the XML layout and display both ImageViews on the screen at the same time?
Simply calling setContentView(R.drawable.paperxml); crashes my application on startup.
Replace the xml with:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layoutid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView android:id="#+id/paperid"
android:src="#drawable/paperrepresentation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView android:id="#+id/rockid"
android:src="#drawable/rockrepresentation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Explanation:
RelativeLayout doesn't use android:orientation="vertical".
Every view should have android:layout_width and android:layout_height.
Add the xmlns:android thing just in the first element.
Calling setContentView(R.drawable.paperxml); is not crashing your code - it's your XML file. Macarse has the correct answer to your problem, and keep your code the same!
You may also want to look at the View Tutorials for some examples of setting up your XML and using different View objects.
I put the XML in but it only displays one ImageView Here's a screenshot of the emulator I took. i852.photobucket.com/albums/ab87/thomasjakway1/Capture.png Its worth mentioning that the file shown is paperrepresentation
If you look hard enough you will see that at the bottom there is a second very tiny image. You just need to increase the scale.