Background in tab widget ignore scaling - android

I tried to use a background (480x320) for my tab content. Using a xml as drawable, I should be able to scale the image. This works fine outside the tabhost/tabactivity. If I try to use it inside the tabcontent, the scaleType doesn't work. He ignores every scaleType I tried.
tabcontent:
<?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:background="#drawable/background">
<include layout="#layout/main_list" />
</RelativeLayout>
background.xml in res/drawable
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/background_img"
android:scaleType="centerInside"/>
Of couse I checked if the xml is really used by changing the image, at the image changed so the xml is used.
The used scaling seems to be fitXY, because the whole background is visible but the aspect ration is ignored.
Some ideas?

Try just placing this inside the RelativeLayout and not using your background drawable:
<Drawable
android:src="#drawable/background_img"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:scaleType="fitCenter" />
Since elements inside the relativelayout can overlap, this oughta work, and using a Drawable in the layout independently instead of a Bitmap included as the element background_src might give you more flexibility.

set the background to ur tabhost tag not in tabcontent layout. that is
<TabHost android:background="#drawable/background">

Related

Android Resources doesn't display at runtime

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.

Repeat Image in with ImageView in RelativeLayout

I want to repeat the image with ImageView with in RelativeLayout. Can it be possible to use the Bitmap xml and use tilemode "repeat" with RelativeLayout, because what I have seen things on Internet they all dealing with LinearLayout.
Any help or tip will be warmly welcomed.
Create an XML file named background in Drawable folder
background.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/imagename"
android:tileMode="repeat" />
In your Relative Layout add the above XML as background
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:background="#drawable/background" />
Yes of Course, You can use it with relative layout. Use it as background of your RelativeLayout. I also used it in my project.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/top_header_bg_repeat"
android:gravity="center">
top_header_bg_repeat.xml (in drawable folder)
----------------------------------------------
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/top_header"
android:tileMode="repeat"
android:dither="true"/>
Set Bitmap in ImageView
----------------------
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/top_header_bg_repeat"
android:scaleType="fitXY"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/top_header_bg_repeat"/>
Yes, its possible. Define your repeating image as Drawable (bitmap) with android:tileMode="repeat" in XML and use it as background of your RelativeLayout.
In all requests exists one small problem if you image will be great and smaller what size your layout, image will not resize, only repeat by X.
For repeat by Y you can do it only programmly.
I solve my problem like this (set gravity fill)
drawable bg for image
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/table_cells_bg_img"
android:tileMode="repeat" android:gravity="fill" />
and on layout
<?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="#dimen/table_cell_height">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="#dimen/table_cell_height"
android:scaleType="fitXY"
android:src="#drawable/table_cells_bg"/>
<TextView
android:id="#+id/txtActivityTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/avatarImage"
android:text="TextView"
android:textColor="#color/white"
android:textSize="#dimen/font_size_middle" />
</RelativeLayout>
And table_cells_bg_img it's image with width=1px and height = 1px
and etc of layout, so now your image it's like background and it's will resized for any size of parent layout
Try, maybe help. To be cleared in my case i need tiled background image to full size of tablecell repeated by X coordinate (like i can do it on iOS). So i solve it like i describe.

How to make image fill RelativeLayout background without stretching

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"

Android layouts - offsetting a background image in xml

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.

How to draw 2 PNG Images to the screen at the same time

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.

Categories

Resources