I'm trying to create a background drawable made of a gradient that fills the entire view and a pattern with left gravity that resizes to fit vertically while keeping its aspect ratio.
This is what I currently have:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/myGradient"/>
<item>
<bitmap android:src="#drawable/myPattern"
android:gravity="left" />
</item>
</layer-list>
Both drawables are VectorDrawables.
This is meant to be the background of a wrap_content height view.
This does not resize the pattern, but rather centers it vertically. If I set the gravity to fill_vertical, it only resizes in that axis and the aspect ratio breaks.
Is there any way to achieve this in XML without using ImageViews or other layouts? Can it be done programatically? Or do I require a different layout?
Related
I'm trying to center a drawable image with some padding on either side to use as a splash screen logo. The problem is it's either stretched across the entire screen or ignores any padding if I use gravity.
<?xml version="1.0" encoding="utf-8"?>
<item
android:drawable="#color/grey_3"/>
<item android:gravity="top|center_horizontal|center_vertical" android:drawable="#drawable/zc_logo_r"
android:top="100dp"
android:left="200dp"
android:right="200dp"
android:layout_margin="100dp"
>
</item>
I've tried using a bitmap, android:gravity="fill_horizontal" and various other suggestions on SO with the same result.
How can I scale and center the image in my xml?
As a reference, if you come across the same issue, I solved it with a square image in drawable folders (i.e. hdpi, mdpi, xhpi, xxhpi and xxxhdpi) instead of resizing a rectangular image which was too big in size and gets distorted.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/grey_3"/>
<item android:gravity="center">
<bitmap android:src="#drawable/splash_logo"/>
</item>
</layer-list>
It's probably easiest to turn your drawable image into a nine-patch.
The problem you're running into is that a layer-list doesn't have an intrinsic idea of it's size. The bounds are set when it is placed inside of a container. The xml attributes are set at compile-time so it's difficult to get dynamic values inside of the xml drawable.
If you can use an ImageView, then you can set your drawable in the src attribute and use padding, margins and scaleType to control the position an scaling of the drawable.
I am trying to create this as a background (blue bg with gray grid lines). Except I don't want to use this image since on larger or smaller screens it will stretch the grid lines and it won't look good. So I think the best way is to specify a background color and then draw another image (1x1 transparent tile) and have it tile/repeat. Does anyone know how to specify multiple backgrounds on 1 view in the styles.xml file?
So far I have this:
<style name="RegularView" parent="#style/BaseView">
<item name="android:background">#00112d</item>
<item name="android:background">#drawable/grid</item>
</style>
Also what is a good width size for a single square, I want it so that the squares fit evenly in the width and height of the screen. There shouldn't be like half a square on the last row or column, if that's possible..
Thanks
You can cut small portion of the image, like one square with border and then declare a xml bitmap resource in your res/drawable folder.
bitmap_resource.xml:
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/small_part_of_image"
android:tileMode="repeat"/>
after that just set this file as background in your view.
It will repeat itself until it fits the whole view.
I am trying to create a custom drawable which includes a 9-patch background image (named custom_bg below) and a regular png image (accordion_up). The latter should not be scaled.
I tried several variations of something along the lines of:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/custom_bg"/>
<item
android:layout_width="10dp"
android:layout_height="10dp"
android:drawable="#drawable/accordion_up"
android:gravity="right" />
</layer-list>
Tried different values for layout_width/layout_height and also width/height but all I get is the accordion image is stretched to fill the entire view. I would like it to float at the top right of the view instead, scaled only to match the dpi of the device, but not expanded to fit the view. How can I do that?
I'm trying to set a background image in my Android application.
I have a JPEG image and I want to fill the screen with the height of the image, maintaining the same aspect ratio.
I tried by creating an XML bitmap file in drawable and setting it as:
android:background="#drawable/background_image"
This is the XML
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/wallpaper1_1920x1200"
android:tileMode="disabled"
android:gravity="center" >
</bitmap>
With the 'center' tag it doesn't stretch the image and it doesn't resize it.
Is there any way to show the full height of the image (and cropping sides) maintaining the original aspect ratio?
You can wrap your bitmap with Scale Drawable (http://developer.android.com/guide/topics/resources/drawable-resource.html#Scale)
And then use that drawable as a background for your layout.
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/wallpaper1_1920x1200"
android:scaleGravity="clip_horizontal"
android:scaleHeight="100%"
android:scaleWidth="100%" />
One solution might be to turn it into a 9 patch png file, allowing you to define where it can and can't stretch. See http://developer.android.com/guide/topics/graphics/2d-graphics.html, the section near the end on 9 patch images.
I'm still new to android and i'm having trouble creating a layout with two backgrounds that tile in the x direction but not y.
I've mocked up what I'm trying to create here...
http://img153.imageshack.us/img153/6008/cnbackground.png
So the top section repeats horizontally, then there's a flat creen section in the middle in which I will center my content, then there's some horizontally repeating grass along the bottom.
Has anyone tried to do anything like this before?
Jon
Here's a good simple tutorial on the repeated background image part:
http://androidblogger.blogspot.com/2009/01/how-to-have-tiled-background-cont.html
As far as the layout, I'd go with a RelativeLayout as my main parent layout, and then you'll have three sub-layouts to represent the top, middle, and bottom sections. Use android:layout_alignParentTop on the top layout, android:layout_alignParentBottom on the bottom, and the middle content layout should have the attributes android:layout_above and android:layout_below set to the #+id's of the bottom and top (respectively).
You can mimic repeat-x by using a layer-list as the drawable. You tile bitmap image both x and y and then use an offset solid shape to fill over the repeated y images. Isn't perfect, but will do the job.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<bitmap
android:src="#drawable/icon"
android:tileMode="repeat" />
</item>
<item android:top="60dp">
<shape >
<solid android:color="#FF000000" />
</shape>
</item>
</layer-list>