What I'm trying to do is define a common background for use in a LinearLayout which frequents my application on many of its Activitys. This particular layout is a header that shows on the top of each activity.
What I'm trying to do is create a drawable that fills the linearlayout with a gradient and has a horizontal line below the gradient.
Does anyone know if this is possible or do I have to do this sort of thing only with nested layouts.
My attemptat the drawable xml is
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#AA000000" android:endColor="#AA333333"
android:angle="270" />
</shape>
</item>
<item>
<shape android:shape="line">
<stroke android:width="3dp" android:color="#FFFFFFFF"
android:dashWidth="1dp" android:dashGap="2dp" />
<size android:height="5dp" />
</shape>
</item>
</selector>
Drawable accepts multiple shapes, (defined always in others files) if i understand your question maybe you can do a Layer drawable (this draws multiple underlying drawables on top of each other)
i write this here, so, i dont tested, but try this and read this fantastic documentation.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/shape_7"/>
<item android:drawable="#drawable/shape_1"/>
</layer-list>
the android complete xml resources
cheers
Use gravity to set your items in layer-list.
for vertical orientation use:
android:gravity="top"
android:gravity="center"
android:gravity="bottom"
for horizontal orientation use:
android:gravity="left"
android:gravity="center"
android:gravity="right"
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:src="#drawable/top_img"
android:gravity="top"/>
</item>
<item>
<bitmap
android:src="#drawable/center_img"
android:gravity="center"/>
</item>
<item>
<bitmap
android:src="#drawable/bottom_img"
android:gravity="bottom"/>
</item>
</layer-list>
Be sure that the parent element has enough space to hold all the items!
Otherwise they will overlap each other
Related
I want to add three colors or more vertically on a line separator in android. It is blue as showing in the following picture but what if I want to divide it into three sections and add different colors in it. I do not want to make three separate views for this. Can I do it in android?
<View
android:background="#00bfff"
android:layout_width = "match_parent"
android:layout_height="5dp"
/>
Yes You can do it by Making one drawable file like this. And give Backgroung this drawable to view.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="0"
android:centerColor="#5F3D5E"
android:endColor="#8F76B0"
android:startColor="#35293D"
android:type="linear" />
<corners android:radius="0dp" />
</shape>
You could use a layer-list drawable and use that as your View background.
Example:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#ff0000"/>
</shape>
</item>
<item
android:bottom="5dp">
<shape>
<solid android:color="#00ff00" />
</shape>
</item>
<item
android:bottom="10dp">
<shape>
<solid android:color="#0000ff" />
</shape>
</item>
</layer-list>
Example output:
Edit:
For vertical lines, you do what #convexHull said, just replace bottom with right.
Example:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#ff0000"/>
</shape>
</item>
<item
android:right="50dp">
<shape>
<solid android:color="#00ff00" />
</shape>
</item>
<item
android:right="100dp">
<shape>
<solid android:color="#0000ff" />
</shape>
</item>
</layer-list>
Example output:
Solution 1
Create 3 view and add one below another
Solution 2
Create one .png background with 3 different color and set background for your view
You need to add a gradient colour to achieve that effect. Just go into drawable directory and add a new .xml resource into it. Then nest the following:
Selector
Item
Shape
Gradient.
Within the gradient tag add startcolor, centercolor, end color, and angle tags. Then set it as your background of the view.. I don't know of any better way to do this but will update when I do
Heres another way if you want more than 3 colors:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="5dp"
android:weightSum="3">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/red"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/blue/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/green"/>
</LinearLayout>
So if you want more colors, just change the weightsum of the linearlayout and add another view.
I made a tile with some "shadow" and rounded corners using the following layer-list:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/background" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/activity_background" />
<corners android:radius="5dp" />
</shape>
</item>
<item android:bottom="3px" android:right="3px">
<shape android:shape="rectangle">
<solid android:color="#color/header" />
</shape>
</item>
</layer-list>
It's used as a background for dynamically loaded views that are not activity layouts, and thus do not cover the whole screen (notifications, for example).
Here's a layout that uses this tile:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="70dp"
android:padding="6dp"
android:background="#drawable/tile">
...
</RelativeLayout>
Now I want to use a drawable PNG as the background of the layout. I tried to put it directly as the background of the layout android:background="#drawable/blob_gradient" but then the first view (aka first notification) covers the whole screen. I also tried to use the tile with android:drawable="#drawable/blob_gradient" in its last item, but same results.
I'm sure that the solution is simple, and I probably approach the subject with the wrong attitude. Any help will be appreciated.
I have an ImageView, and a <layer-list> in /res/drawable/. This is the layer-list:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<!-- This is a 24dp x 24dp PNG -->
<bitmap android:src="#drawable/ic_secondary_arrow"
android:gravity="center"/>
</item>
<item>
<shape android:shape="oval">
<stroke android:color="#color/icon_primary_background"
android:width="2dp"/>
<solid android:color="#android:color/transparent" />
</shape>
</item>
</layer-list>
ImageView has nothing special:
<ImageView
android:id="#+id/arrow"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="16dp"/>
When using src or setImageDrawable(int) pointing to the layer-list, center seems to be ignored (or at least this is not my desired behavior):
I want to display it as below. This is possible using background (or setBackground(Drawable)) instead of src:
The reason I insist is because setBackground(Drawable) is limited to API16+, and I'd rather not limit my audience because of this.
So, what is it that I'm missing?
Edit: as #pskink pointed below, I was missing setBackgroudDrawable(Drawable). But still, that was an incidental question. I really want to know what's the reason behind the different behavior of src and background (and the respective methods) in this case.
It seems that the ImageView draws both items at the same size. You can add “padding” to your drawable like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top=“16dp” android:left=“16dp” android:right="16dp" android:bottom="16dp">
<!-- This is a 24dp x 24dp PNG -->
<bitmap android:src="#drawable/ic_secondary_arrow"
android:gravity="center"/>
</item>
<item>
<shape android:shape="oval">
<stroke android:color="#color/icon_primary_background"
android:width="2dp"/>
<solid android:color="#android:color/transparent" />
</shape>
</item>
</layer-list>
How to create this type of button in android. I tried . May I know what is the correct way to achieve my objective?Maybe this question too basic, but i did't find any suitable solution.Please Help me out.
I want to create This
<Button
android:id="#+id/Btn1"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/green_circle"
android:textSize="20sp"
android:textColor="#android:color/white"
android:clickable="true"
/>
Here is green_circle.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:width="1sp" android:color="#54d66a" />
</shape>
When i use this ,Button looks
How can i get my desire button. Any Help Appreciated
You defined 1sp (you should use "dp" btw.) circle and you got it.
I think that the easiest way to achieve what you want is using layer list xml element - just put your current drawing as the first layer and put second layer for the centered dot (just solid oval with some margins)
Here you have documentation: http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList
Simple usage (it's not your's case but I think that it show you what you should to do):
<layer-list >
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<solid android:color="#color/grey"/>
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<solid android:color="#color/green_light"/>
</shape>
</item>
</layer-list>
Key is android:bottom="2dp" that causes that the foreground layer is smaller than the background one.
One way to achieve your desired effect is using a Layer List Drawable. To get a Drawable similar to the image you've posted, try the following
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:width="1sp" android:color="#54d66a" />
</shape>
</item>
<item android:top="5dp" android:left="5dp" android:right="5dp" android:bottom="5dp">
<shape android:shape="oval">
<solid android:color="#54d66a" />
</shape>
</item>
</layer-list>
1.use two different images of radio on and off actually what you want and make a xml in drawable :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="false" android:drawable="#drawable/check_off" />
<item android:state_checked="true" android:drawable="#drawable/checkbox_on" />
<item android:drawable="#drawable/checkbox_off" />
</selector>
2.and set this drawable as a background on your radio button.
Use an ImageButton:
<ImageButton android:src="#drawable/green_circle" />
The documentation also states how you can have different images depending on the state of the button.
put an image of green circle in drawable folder. then in xml just set background image for your button
<Button
android:id="#+id/Btn1"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/yourimage"
/>
this will work :)
Currently I'm developing a Android application. I want to make a text (a header) with a background that looks like this:
_______
/______/
I have the following code:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#color/jaarkleur"
android:centerColor="#color/jaarkleur"
android:endColor="#E66C2C00"
android:angle="0" />
<stroke android:width="1dp"
android:color="#ff000000"
/>
</shape>
</item>
<item>
<bitmap android:src="#drawable/overlay_left" android:gravity="left" />
</item>
<item>
<bitmap android:src="#drawable/overlay_right" android:gravity="right" />
</item>
</layer-list>
So I made to images so with a transparant triangle which are placed at both ends.
This works fine for headers with only one line, but when a header takes up two lines it looks like this:
So my question is: Is it possible to resize both images so looks correctly?
Thank you!
I solved it using two (half-transparant) images which represent the corners.
The XML looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#color/jaarkleur"
android:centerColor="#color/jaarkleur"
android:endColor="#E66C2C00"
android:angle="0" />
<stroke android:width="1dp"
android:color="#ff000000"
/>
</shape>
</item>
<item>
<bitmap android:src="#drawable/overlay_left" android:gravity="left|top" />
</item>
<item>
<bitmap android:src="#drawable/overlay_right" android:gravity="right|bottom" />
</item>
</layer-list>
Instead of using a layer-list with gradient / border stroke and a custom image, consider using a NinePatchDrawable.
There is also a handy 9-patch creater that comes with the android SDK.