I want to put two images together (a nine-patch image with icon), So that icon size does not change.
I designed nine-patch image but i don't match these images together.
Is there anyone who can help me?
You can use the android layer list drawable. This allows to stack layers on top of each other. The first layer can hold the nine patch image and the second layer can hold the icon which wont be stretched.
This is how it would look like
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/wp_tabbuttonstrip"/>
<item>
<bitmap android:src="#drawable/wp_dashboard_icon"
android:gravity="center"/>
</item>
</layer-list>
You will need to specify the size of the view, wrap content might not give the desired results.
Related
I want to apply a background image to a linear layout and I have problems because the image loose from quality when stretched.
The image is composed by the fill color and some dots pattern applied over the background.
The image was made with Adobe Illustrator (png). Also I tried using nine-patch but does not work, the dots are stretched.
Should I make this background from code(override onDraw from the linear layout)?
I'm guessing you want to repeat that pattern, not stretch it. Create a drawable resource in xml form, representing your tiled background:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:tileMode="repeat"
android:src="#drawable/background_image"
/>
I want to create some kind of row image that looks like that
but I want it to scale with the screen size and density. So reading this http://developer.android.com/guide/developing/tools/draw9patch.html and this http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch I startet creating a Nine-patch image.
But when I import it and use it in my android project it looks like that
As you can see the little black line that was drawn with the draw 9 patch tool is still visible. Why?
Here is the 9.png image
Are you using the draw9patch tool that comes with the sdk? it is quite handy.
Anyway:
It is vital that every pixel except the black ones are completely
transparent.
The black pixels should be at the absolute top/bottom/left/right of
the image.
The image should be named filename.9.png.
I have found the best and the simplest answer to make 9-patch image.
This is best link to create 9-patch image for all the resolutions - XHDPI, HDPI, MDPI, LDPI in just one click.
Let me know if you have any queries, and do upvote it, if it was helpful to you.
If you need an image which consists of a border with rounded corners, I don't have to create a 9-patch.
All you need is an XML like this stored in the res/drawable directory
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners android:radius="3.0dp" />
<stroke
android:width="2dp"
android:color="#color/green" />
</shape>
Read more about drawable resources
I'm trying to bring out a glossy xml drawable gradient as a background to a layout. I am already using the start color and end color boring linear gradient.
<item>
<shape>
<gradient
android:angle="90"
android:startColor="#242424"
android:endColor="#4e4e4e"
android:type="linear" />
</shape>
</item>
Is there any way to control its range of flow? Please some one help.
Edited:
Ok, I have done a little hack around method to get a nice glossy looking title bar,
Linear Layout (with a gradation - drawable background, specifying all
the start and end color values separately) Over this are the icons, (I
used Image buttons with transparent BG), and over this another Relative Layout (with may
be a drawable gradient or a fixed, grey color - for glossiness -
android:background="#20f0f0f0" ) Here 20 is defining the Alpha value.
P.S, This might not be a correct work around, but I'm quiet satisfied with this because switching themes according to clients needs is much faster when compared to 9 patch PNG files (hey, BTW this is just my opinion on it)
And this link is so informative on this,
you cant control its range of flow but instead you can use another property centerColor.
you should try the center color Property in gradient for glossy background.
i used this in my application .
<gradient
android:startColor="#FFF7F7F7"
android:centerColor="#FFCECFCE"
android:endColor="#FFBEBEBE"
android:angle="270"/>
hope this will work for you
I am still kinda confused on how to re size images to fit on a small,normal and large screen on an android phone.
Say I have a image that is 500px by 500px and is a JPG.
I want to make 4 image buttons making it a 2 by 2 in the center of the screen. For simplicity sake assume I am using this same image for all 4 buttons.
Now how do I figure out how much I need to re size the image down for each of the screens?
So that it would look like this in the center of the view.
x x
x x
Have you looked at Supporting Multiple Screens in the Android Dev Guide?
I think you want a 9-patch drawable (*.9.png). They allow you to make stretchable graphics and declare a content fill region. Android's stock buttons use them.
http://developer.android.com/guide/developing/tools/draw9patch.html
http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
For buttons you'll probably want to make them change based on what state they are in. You use StateList drawables for that.
http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList
Here's an example of a button StateList from one of my apps to render an Action Bar button.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/slight_white" /> <!-- pressed -->
<item android:state_focused="true" android:drawable="#android:color/transparent" /> <!-- focused -->
<item android:drawable="#android:color/transparent" /> <!--menu_normal default -->
</selector>
In this case I'm using colors but you can of course replace that with any drawable as well. Including the 9-patches drawables you make.
For a full fledged example look at the source code that comes with the SDK.
%ANDROID_SDK_ROOT%\platforms\android-12\data\res\drawable\btn_default.xml
I am trying to achieve from code the following: (can't post images unfortunatelly)
A rectangle with rounded corners, with an emboss effect (the light comes from top left corner).
In the middle there is a circle engraved in the rectangle. Imagine a water surface, and a drop of water hits the surface. It creates a dent in the surface. That circle is also painted with some linear gradient.
The problem is I could only use the EmbossMaskFilter from Android to raise the surface, to make it closer to the user eye, but I don't know how to implement the opposite.
Anyone can help me with that?
Thank you very much.
Use a composite drawable, or drawables in layers.
To create a drawable with rounded corners and a gradient within, use something like this:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="10dp"/>
<gradient android:startColor="#color/gradientstart" android:endColor="#color/gradientend" android:angle="315"/>
</shape>
Create two such drawables and put them on top of each other to create the required effect.
Unless you use a pretty good number of layer-list items as a drawable you probably won't get the effect you are looking for easily with XML drawables. A better solution would be to create a 9-patch image. See how it works at draw9patch.com, which is a tool to create 9 patch images from a standard images.
NinePatch documentation: here.
In case, you still really want to use xml drawables you can still achieve the effect (although performance might take a hit) using a layer-list with multiple gradients stacked ontop of each other.