I need to create a gradient that is 230dp high (i.e., not the whole screen), with the rest of the screen a solid color. I can't figure out how to do this -- everything I try ends up with the gradient expanding to fill the whole screen. My current XML looks like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="230dp">
<shape android:shape="rectangle" >
<color android:color="#333333" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#333333"
android:startColor="#D9D9D9"
android:type="linear" />
<size android:height="230dp" />
</shape>
</item>
</layer-list>
I then apply that drawable as the background to my LinearLayout in XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#333333" >
<LinearLayout
android:id="#+id/container"
android:orientation="vertical"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#drawable/grey_gradient_bg" >
<!-- a bunch of content, buttons, etc. -->
</LinearLayout>
</LinearLayout>
But the gradient expands to fill the whole screen.
I have tried using a PNG for the background, but I get the banding problems described here, and the fixes haven't helped me yet.
Use a RelativeLayout instead of a LinearLayout
Instead of using your gradient as a background of the main container of the layout, add a child View, set the height explicitly to the size you want (230dp), and set the background of that view to your gradient.
If your project doesn't require API < 21 you may set the size of your gradient directly in your drawable, like that:
<item android:height="230dp">
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#333333"
android:startColor="#D9D9D9"
android:type="linear" />
</shape>
</item>
Anyway, to support API < 21 without this behavior, you may add this drawable and then, another drawable with the same name in the drawable-v21, but it without android:height="230dp".
Setting height in gradient tag or size really doesn't work.
Something like this might help you :)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="320dip"
android:orientation="vertical"
android:background="#drawable/grey_gradient_bg">
</LinearLayout>
The problem you encountered was because your layout had fill_parent on height.
Hope this will help you.
Good luck,
Arkde
Here's my solution using the other answers:
<?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="#333333" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="230dp"
android:background="#drawable/grey_gradient_bg"
android:layout_alignParentTop="true" />
<LinearLayout
android:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_alignParentTop="true" >
<!-- all the content -->
</RelativeLayout>
</RelativeLayout>
grey_gradient_bg is now simple:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#333333"
android:startColor="#D9D9D9"
android:type="linear" />
</shape>
Related
I am trying not to use image view. This is because, later, I will generate many objects with the same shape but different colors, so I wouldn't need to keep adding image views but simply adding colors on my code.
How can I create those images on Android Studio? I looked over Paint, onDraw, Canvas, etc, but this looks difficult to me.
If you want to use from XML , Try this way it will work
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<size
android:width="100dp"
android:height="40dp" />
<solid android:color="#5EB888" />
<corners android:radius="0dp"/>
</shape>
</item>
<item
android:top="-26dp"
android:bottom="31dp"
android:left="-90dp"
android:right="75dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
OUTPUT
You can create vector image using any vector program like Adobe Illustrator or convert it using a conversion tool like vectormagic or find already existing one then import it to android studio.
it will be imported as xml file where you can change the colors as you want
Create a drawable file as named left_arrow.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<rotate
android:fromDegrees="45"
android:toDegrees="90"
android:pivotX="0%"
android:pivotY="1%" >
<shape android:shape="rectangle" >
<stroke
android:width="10dp"
android:color="#00000000" />
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
Now, create a view layout to create this type of stripes or image like this, here is the below code:-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/llMain"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:background="#color/black"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:background="#drawable/left_arrow"
android:contentDescription="#string/app_name" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.9"
android:contentDescription="#string/app_name" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9" />
This above layout creates the required arrow stripe as a layout.
Now add this layout to your required layout where you wan't to show this stripes. For example,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/llMain"
layout="#layout/xtra"/>
</LinearLayout>
Now, you are able to also use OnClickListener by using "llMain".
Hope it will help.
You could use the white png image you already have and use the setColorFilter method on the image view class to tint it with any color you desire
Does it possible to create multi-color stroke with the help of XML? I want to create exact view attached here.
Thanks
You could use a trick by creating a drawable shape with gradient and make it a parent's background... something like this:
gradient_stroke.xml (in res/drawable):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:startColor="#fff96200"
android:centerColor="#fffff60f"
android:endColor="#fff96200"
android:centerX="50%"
>
</gradient>
<corners android:radius="5dp"></corners>
</shape>
</item>
your_view.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:padding="2dp"
android:background="#drawable/gradient_stroke"
android:layout_height="wrap_content">
<Button android:text="Submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/green"
android:id="#+id/button"/>
</LinearLayout>
Just an idea - play around with it to get desired values...
I have a TextView like so:
<TextView
android:id="#+id/friends"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp" />
And I'm setting the background like:
textView.setBackgroundResource(R.drawable.background_color);
where background_color.xml is:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#217dd2" />
</shape>
</item>
<item
android:left="5dip">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#deebf6" />
</shape>
</item>
This removes my default padding of 8dp and replaces it with the left padding of 5dp that I have declared on the 2nd item of the layered-list. Any way to avoid this? Or another way to create a 2 color background for a View?
That's known issue, setBackgroundResource method resets paddings.
Try to set your background from XML:
<TextView
android:id="#+id/friends"
android:background="#drawable/background_color"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp" />
It will work properly in this case.
Given a shape that is defined in drawable/red_ring.xml as
<?xml version="1.0" encoding="utf-8" ?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="0dp"
android:thickness="25dp"
android:useLevel="false">
<solid
android:color="#ff0000"/>
<stroke
android:width="1dp"
android:color="#000000"/>
</shape>
and a simple layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/MyButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/Hello"
android:drawableLeft="#drawable/red_ring" />
</LinearLayout>
The problem with above: the shape will not show up on the button.
red_ring as android:background works,
any framework drawable bitmap as android:drawableLeft also works.
But custom shape as android:drawableLeft appears to be ignored
API level is 15
I feel that I am missing something really obvious, but what?
red_ring has no bounds set, thats why its invisible
How can I create a pointy button like iPhone back button in Android XML ?
I want to create using like this
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#f8bb49"
android:endColor="#f7941d"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#8c8382" />
<corners.....
Path and PathShape can build whatever you want. By layering a couple together and using a gradient fill you can create the 3D effect (recessed) effect.
However, you will need a class that you can use to create a drawable reference if you want to be able to use an XML definition. Sorry I have not worked out the exact code, but it's something I'm planning to do (which is how I found your question).
Looks like you have an image you can work with. Read the docs on 9-patches to set margins and resizable areas.
http://developer.android.com/guide/developing/tools/draw9patch.html
Create image like that and use ImageButton instead of Button
and , use this property for ImageButton
android:background="#drawable/createdimage"
I did this for the following back button
https://drive.google.com/file/d/0B1cySRpqElgyTkptOFpQa3NsdDQ
using the XML files:
left_arrow.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<rotate
android:fromDegrees="-45"
android:toDegrees="-45"
android:pivotX="89%"
android:pivotY="-22%" >
<shape
android:shape="rectangle" >
<stroke android:color="#color/calendarOrange" android:width="3dp"/>
<solid
android:color="#color/drakBlue" />
</shape>
</rotate>
</item>
</layer-list>
button_body.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:left="-4dp">
<shape android:shape="rectangle" >
<stroke android:color="#color/calendarOrange" android:width="3dp"/>
<solid
android:color="#color/drakBlue" />
</shape>
</item>
</layer-list>
Getting them together:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="1.0"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/left_arrow"
android:layout_weight="0.7"
>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/button_body"
android:layout_weight="0.3"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#color/white"
android:text="Back"
android:gravity="center"
android:textStyle="bold"
android:textSize="22dp"
/>
</RelativeLayout>
</LinearLayout>
PS: You might need to change the android:pivotX and android:pivotY parameters depending on your conteiner layout