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>
Related
I am trying to get a gradient inside a rectangle to look like this
The closest I get using following xml is
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
android:type="radial"
android:startColor="#color/lightPurple"
android:endColor="#color/lightGreen"
android:gradientRadius="600"
android:angle="270"
android:centerX="1"
android:centerY="0"/>
</shape>
Is there anything I can do to make my gradient go from the top right corner to bottom left corner?
Try android:type='linear' and android:angle='45'.
This would get you more closer to edge-to-edge. Android doesn't provide arbitrary angles for this. The only valid angles are the ones which are a multiple of 45. However as far as I can see, the gradient you require is not actually edge-to-edge and I suspect it to be the one with angle 45.
I am trying to provide a simple solid-color underline to a TextView header. I want this to be reusable and to work with any view in the future, regardless of height. I am trying to favor a background drawable so I can simply apply it to view. I can draw a line without any problem:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:shape="line"
>
<stroke
android:color="#8a9299"
android:width="1dp"
/>
</shape>
This line is, however, centered in the background of the view. I see a bunch of online tutorials that use layers to draw a background-colored rectangle and then "peek" another rectangle from behind, however I don't know what background color this header element type will be used on, and transparent rectangle backgrounds show the color rectangle below. Is there any way to stick to a line but give it a bottom gravity inside the view it is applied to?
This can be achieved using gradientDrawable. Here you go:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:startColor="#000000"
android:centerColor="#android:color/transparent"
android:centerX="0.1" />
</shape>
Increase/Decrease centerX to increase/decrease width of your underline. Change startColor to change the color of the underline.
Explanation:
angle is the angle of the gradient. 0 is left to right. 90 is bottom to top.
startColor is the start color of the gradient. Our angle is 90 so the gradient starts from bottom (and so it appears like an underline)
centerColor is the centerColor which is transparent.
centerX is the X position of the gradient as a fraction of the width. Keep it small (<0.1) for a good looking underline. Anything above 0.1 looks bad (nobody is stopping you though!).
I'm trying to get android layout with one half of screen in one solid color, and another half - with another solid color and over it in the center of screen will be an image.
Is it possible to do so?
I've tried to use one layout and set gradient to it:
<gradient
android:type="linear"
android:centerX="51%"
android:startColor="#FF59901d"
android:centerColor="#FF59901d"
android:endColor="#FF2b241f"
android:angle="270"/>
but it didn't work as I expected - it gave smooth color mix, not 2 colors separated each from another. I think here is needed another gradient control point.
Another option was use 2 linear layouts and fill them with different colors, it gave normal background as I want, but in this case how to position image over both layouts at the center of screen?
To elaborate on #323go comment, Inside a framelayout use two linearlayout. Give weight = 1 to both. and height = 0dp (asssuming you wish to split in upper and bottom halves).
Then use a Relativelayout which fills whole screen, but has transparent background. Inside it place an imageview with center Parent Vertical as true
Create a RelativeLayout with your ImageView aligned centerInParent and set the RelativeLayout with the following background-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:type="linear">
<gradient
android:angle="270"
android:startColor="#FF59901d"
android:centerColor="#android:color/white"
android:endColor="#FF2b241f"
/>
</shape>
Hope this helps !!
Im trying to achieve a component to make custom shadows to buttons or other components, i know that it will be easier with a 9patch or a png with the shadow, but i want to change it color and size programmatically also in its states (pressed,etc), so i decided to try with 9 images, all in XML so the shadow shades start its gradient from the side of the component.
<!-- Left Shadow layer -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="0"
android:endColor="#FFFF0000"
android:startColor="#00FF0000" />
</shape>
</item>
It looks good, the problem is on the corners and with the android:gradientRadius parameter now its set to a fixed size, but in the contextual help is said that can be set in a percentage of the base size 10% or parent size 10%p, what i want its to set a 100%p radius so the gradient will always go from the main color and disappear in the edge of the square.
-- EDIT --
The android doc about gradientRadius gradientRadius
<shape android:shape="rectangle" >
<gradient
android:endColor="#00FF0000"
android:startColor="#FFFF0000"
android:gradientRadius="18"
android:centerX="100%"
android:centerY="100%"
android:type="radial" />
</shape>
And thats where im now :( i do not know how can i set this size to fit its parent view.
Any help will be appreciated, when im finished with the component i will put the code in an answer :) so typical buttons can have customizable shadows in xml.
An image of the deserved component.
--Edit--
Im still interested in this :) no one has a clue?
I think you should give up with xml and implement drawable in code.
When you extend Drawable class you can get size as rectangle with getBounds(). Also you can dynamicaly recalculate in onBoundsChange method.
You can also easily construct gradients and use them in Paint object (setShader method)
In the image below is the effect I want(notice the subtle green at the bottom of the screen). I also want to use it as multiple screens so I want it to be the background. Is there any way to achieve this?
Set the png as background, or create a shape in xml:
Create an xml file - let's call it "gradient_background.xml"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:startColor="#ff0000ff"
android:endColor="#00ffffff"/>
<corners android:radius="10dp" />
</shape>
Change the hex color values to the ones you want.
and add it as background to your ViewGroup e.g. LinearLayout:
android:background="#drawable/gradient_background"
EDIT:
To achieve what you mentioned in your comment, that the gradient height should stay fixed while positioned at the bottom, but the white area can stretch vertically, I suggest you use a nine-patch which you can create with the Draw Nine Patch Tool. Launch the tool from your SDK's tools folder - click the nine-patch bat file (and wait a while for it to launch, then import your png). You then draw black lines along the sides of your image to define which parts can be stretched, name the file something.9.png and reference it as background in your ViewGroup. Please see the linked-to documentation for details.