I'm in trouble with gradient background. Result is not what I want. I cannot change anything on gradient.
shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#color/holo_orange_dark"
android:startColor="#color/holo_green_dark" />
</shape>
color.xml
<color name="holo_green_dark">#ff669900</color>
<color name="holo_orange_dark">#ffff8800</color>
item.xml
<View
android:layout_width="fill_parent"
android:layout_height="10dp"
android:layout_alignBottom="#+id/term"
android:layout_alignLeft="#+id/term"
android:background="#drawable/shadow"
/>
It is always black and white for every color. What is the problem ?
Change your view background from android:background="#drawable/shadow" to android:background="#drawable/gradient" as you mentioned as gradient.xml
Use following code to apply gradient for a view or layout.
activity_main.xml :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#drawable/gradient_transparent"/>
gradient_transparent.xml(res/drawable) :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#000000"
android:centerColor="#7f000000"
android:endColor="#0f000000"
android:angle="90"
android:dither="true"
/>
</shape>
Related
I have a gradient background with code:
<Button android:id="#+id/btn_signup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Login"
android:background="#drawable/sel_btn_background"
android:gravity="center"
android:textSize="16sp"
android:layout_marginTop="40dp"
android:textColor="#android:color/white"/>
sel_btn_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#color/bluegreen"
android:endColor="#color/aqua_marine"
android:angle="-270" />
</shape>
I get result:
How to achieve the below result(left side is the light colour fading to dark on right colour) What value should be added for angle:
Use 180 angle instead of -270 angle
android:angle="360"
It should be 360,Try the following:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#36d1d1"
android:centerColor="#811010"
android:endColor="#233308"
android:angle="360" />
</shape>
Replace your color values accordingly.I have used completely different color distinguishing between all 3 colors.
try this...
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#278b79"
android:centerColor="#32b39b"
android:endColor="#38c7ad"
android:angle="180" />
</shape>
I'm a new to Android Development. While working on Android Studio 2.2, I tried to create a circular Button. As read from here, I tried to create a new Drawable Resource File. But I was unable to change Root Element to Shape. There was no such options. Could anyone help?
There are two solutions.
Floating Action Button: https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html
else:
You create a oval shape in xml.
and put that shape as background on button and make sure button have equal layout_height and layout_width.
Example:
oval_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="oval">
<solid android:color="#color/colorAccent"/>
</shape>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<Button
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#drawable/oval_shape"/>
</FrameLayout>
No option is needed here. Just use <shape>.
Check this example:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/colorPrimary" />
<corners android:radius="#dimen/btn_radius" />
</shape>
Use xml drawable like this:
Save the following contents as round_button.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="oval">
<solid android:color="#fa09ad"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#c20586"/>
</shape>
</item>
And set it as background of Button in xml like this:
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />
You are probably looking for the FloatingActionButton
It is available in the support-library.
The documation of the class.
I have layout with google map fragment in FrameLayout. Also, i placed the new view over the map with gradient background.
Layout:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<View
android:id="#+id/fadeTop"
android:layout_width="match_parent"
android:layout_height="#dimen/fade_height"
android:layout_gravity="top"
android:background="#drawable/list_fade_top"/>
<include layout="#layout/top_line_mid_gray"/>
</FrameLayout>
list_fade_top:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:angle="90"
android:startColor="#color/fade_start_color"
android:centerColor="#color/fade_center_color"
android:endColor="#color/fade_end_color"
android:type="linear"/>
</shape>
start/end and center colors. This gradient draws with 2 light lines:
<color name="fade_start_color">#00000000</color>
<color name="fade_center_color">#4f000000</color>
<color name="fade_end_color">#ff000000</color>
start/end and center colors. This gradient draws with a 1 light line:
<color name="fade_start_color">#00000000</color>
<color name="fade_center_color">#6f000000</color>
<color name="fade_end_color">#ff000000</color>
The same behavior for gradient without center color:
<gradient
android:angle="90"
android:startColor="#color/fade_start_color"
android:endColor="#color/fade_end_color"
android:type="linear"/>
How can i draw a smooth linear gradient from black (or semi transparent black) to a full transparent?
I tried hardware acceleration on/off, 'getWindow().setFormat(PixelFormat.RGBA_8888);' Nothing helps me.
Update 1
I created a simple app at github.
https://github.com/ralexey/TestApp
Just an activity with color background and gradient over it.
add this line in your gradient android:centerY="y%p"
it may help you
<?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:centerY="25%p"
android:centerColor="#color/fade_center_color"
android:endColor="#color/fade_end_color"
android:startColor="#color/fade_start_color"
android:type="linear"
android:dither="true"
android:useLevel="true" />
</shape>
try this below code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" android:padding="10dp">
<gradient
android:startColor="#00000000"
android:centerColor="#6f000000"
android:endColor="#ff000000"
android:angle="90" />
</shape>
</item>
</layer-list>
I have an android button, where I want to give it a background color and both ripple effect
my ripple xml is as below.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#BDA0CB"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#BDA0CB" />
</shape>
</item>
</ripple>
and my button is
<Button android:id="#+id/Button_activity_login_ViewProfile" style="?android:textAppearanceSmall"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_marginTop="16dp" android:text="Save"
android:textStyle="bold"
android:layout_marginLeft="#dimen/margin_left"
android:layout_marginRight="#dimen/margin_right"
android:textColor="#ffffffff"
android:fontFamily="sans-serif"
android:background="#ff7e51c2" />
To give the ripple effect I have to remove background color...Is there a way I can keep both.
This can be achieve by adding the android:drawable in your ripple.xml.
First add this to your color.xml. Assuming that #ff7e51c2 is the background color you want for your button.
...
<color name="btn_bg_color">#ff7e51c2</color>
....
Then create a drawable for the button background(/drawable/btn_bg.xml):
<?xml version="1.0" encoding="utf-8"?><shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="2dp" />
<solid
android:color="#color/btn_bg_color" />
</shape>
Then use the drawable in your ripple.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:drawable="#drawable/btn_bg"/>
</ripple>
You can do something like this in the xml:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ripple"/>
Change your ripple.xml in the the drawable/ folder as follows:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="?android:colorAccent" />
</shape>
</item>
create ripple_effect.xml in your drawable folder
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#1182bc"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#1182bc" />
</shape>
</item>
</ripple>
use this xml as your view's background like below
android:background="#drawable/ripple_effect"
hope this will help ..
Create two different versions of xml file so that it will work on Pre Lollipop devices.
drawable/button_effect.xml :-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#3ab5d6"/>
<corners android:radius="3dp"/>
</shape>
drawable-v21/button_effect.xml:-
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:tools="http://schemas.android.com/tools"
android:color="#635a5a"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:targetApi="lollipop">
<item android:drawable="#drawable/round_button" />
</ripple>
Create shaped drawable in drawable folder
drawable/round_button.xml :-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#3ab5d6"/>
<corners android:radius="3dp"/>
</shape>
You can do something like this in the layout.xml:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_effect"/>
I have a listview and I want to have a background gradient that covers the entire listview. I don't want a gradient for each row. All I get is a white background.
Code for gradient in mybg.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#e6e6e6"
android:endColor="#ffffff"
android:angle="45" />
</shape>
</item>
</selector>
My ListView:
<ListView
android:id="#+id/lvEvents"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/mybg"
android:cacheColorHint="#00000000"
android:divider="#ffc0c0c0"
android:dividerHeight="1dp"
android:scrollingCache="true" />
Try set the row view background to be transparent by using #null.
You missed the shape , try this
<?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:centerColor="#000000"
android:endColor="#404040"
android:startColor="#404040" />
</shape>