Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to position radial gradient background

Tags:

How can I position a radial gradient shape as background in a LinearLayout ? Here is what I presently have :

The shape :

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:endColor="#e6e6e6"
        android:gradientRadius="800"
        android:startColor="#fafaf9"
        android:type="radial"/>
</shape>

The LinearLayout :

<?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" 
    android:background="@drawable/accueil_bg_gradient">
</LinearLayout>

I just want to have my gradient starting from the left upper corner of the screen, and ending at the right lower corner.

Thanks a lot !

like image 995
alxscms Avatar asked Oct 30 '11 09:10

alxscms


People also ask

How do you set a radial gradient?

The radial-gradient() function sets a radial gradient as the background image. A radial gradient is defined by its center. To create a radial gradient you must define at least two color stops.

How do you rotate a radial gradient?

You can use CSS transform: rotate property to rotate the div, instead of gradient. :) – Kacper G. – Kacper G. The only way would be playing with the position of those radial-gradients .

How do you position a gradient in CSS?

CSS Syntax Defines a starting point and a direction (or an angle) along with the gradient effect. Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis).


1 Answers

You can move the middle of the radial gradient at a different position of the drawable using "centerX" and "centerY" attributes of the gradient. They are a floating point values ranging from 0 to 1.0 where (values of centerX,centerY accordingly) 0,0 is upper left and 1,1 is bottom right corner.

Default is 0.5,0.5 which is the middle of the drawable / assigned space. Example for a 100px long (radius), black-white gradient whose middle starts at upper left corner would be:

    <shape android:shape="rectangle">         <gradient             android:type="radial"             android:startColor="#ffffff"             android:endColor="#000000"             android:gradientRadius="100"             android:angle="270"             android:centerX="0"             android:centerY="0"/>      </shape> 
like image 101
zilinx Avatar answered Sep 28 '22 04:09

zilinx