Android LinearLayout Gradient Background

Question

I am having trouble applying a gradient background to a LinearLayout   This should be relatively simple from what I have read but it just doesn t seem to work  For reference sakes I am developing on 2 1-update1   header bg xml    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android      android shape  rectangle  gt       lt gradient         android angle  90          android startColor   FFFF0000          android endColor   FF00FF00          android type  linear   gt   lt  shape gt    main header xml    lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android      android layout width  fill parent      android layout height  50dip      android orientation  horizontal      android background   drawable header bg  gt   lt  LinearLayout gt    If I change  drawable header bg to a color - e g   FF0000 it works perfectly fine  Am I missing something obvious here

User · Answer

It is also possible to have the third color (center). And different kinds of shapes.

For example in drawable/gradient.xml:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#000000"
        android:centerColor="#5b5b5b"
        android:endColor="#000000"
        android:angle="0" />
</shape>

This gives you black - gray - black (left to right) which is my favorite dark background atm.

Remember to add gradient.xml as background in your layout xml:

android:background="@drawable/gradient"

It is also possible to rotate, with:

angle="0"

gives you a vertical line

and with

angle="90"

gives you a horizontal line

Possible angles are:

0, 90, 180, 270.

Also there are few different kind of shapes:

android:shape="rectangle"

Rounded shape:

android:shape="oval"

and problably a few more.

Hope it helps, cheers!

User · Answer

lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt     lt gradient     android angle  quot 90 quot      android startColor  quot  color colorPrimary quot      android endColor  quot  color colorPrimary quot      android centerColor  quot  color white quot      android type  quot linear quot   gt    lt corners android bottomRightRadius  quot 10dp quot      android bottomLeftRadius  quot 10dp quot      android topRightRadius  quot 10dp quot      android topLeftRadius  quot 10dp quot   gt

User · Answer

I don t know if this will help anybody  but my problem was I was trying to set the gradient to the  src  property of an ImageView like so    lt ImageView      android id    id imgToast      android layout width  wrap content      android layout height  60dp      android src   drawable toast bg      android adjustViewBounds  true      android scaleType  fitXY   gt    Not 100  sure why that didn t work  but now I changed it and put the drawable in the  background  property of the ImageView s parent  which is a RelativeLayout in my case  like so   this worked successfully    lt RelativeLayout xmlns android  http   schemas android com apk res android      android layout width  match parent      android id    id custom toast layout id      android layout height  match parent      android background   drawable toast bg  gt

User · Answer

Try removing android gradientRadius  90   Here is one that works for me    lt shape      xmlns android  http   schemas android com apk res android      android shape  rectangle   gt       lt gradient         android startColor   color purple          android endColor   color pink          android angle  270    gt   lt  shape gt

User · Answer

Ok I have managed to solve this using a selector  See code below   main header xml    lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android      android layout width  fill parent      android layout height  50dip      android orientation  horizontal      android background   drawable main header selector  gt   lt  LinearLayout gt    main header selector xml    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt   lt item gt       lt shape gt           lt gradient             android angle  90              android startColor   FFFF0000              android endColor   FF00FF00              android type  linear    gt       lt  shape gt   lt  item gt   lt  selector gt    Hopefully this helps someone who has the same problem

User · Answer

You can used a custom view to do that  With this solution  it s finished the gradient shapes of all colors in your projects   class GradientView context  Context  attrs  AttributeSet    View context  attrs            Properties     private val paint  Paint   Paint       private val rect   Rect          region Attributes     var start  Int   Color WHITE     var end  Int   Color WHITE       endregion      override fun onSizeChanged w  Int  h  Int  oldw  Int  oldh  Int            super onSizeChanged w  h  oldw  oldh             Update Size         val usableWidth   width -  paddingLeft   paddingRight          val usableHeight   height -  paddingTop   paddingBottom          rect right   usableWidth         rect bottom   usableHeight            Update Color         paint shader   LinearGradient 0f  0f  width toFloat    0f                  start  end  Shader TileMode CLAMP             ReDraw         invalidate              override fun onDraw canvas  Canvas            super onDraw canvas          canvas drawRect rect  paint             I also create an open source project GradientView with this custom view   https   github com lopspower GradientView  implementation  com mikhaellopez gradientview 1 1 0

User · Answer

My problem was the  xml extension was not added to the filename of the newly created XML file   Adding the  xml extension fixed my problem

User · Answer

I would check your alpha channel on your gradient colors  For me  when I was testing my code out I had the alpha channel set wrong on the colors and it did not work for me  Once I got the alpha channel set it all worked

User · Answer

With Kotlin you can do that in just 2 lines  Change color values in the array                    val gradientDrawable   GradientDrawable                          GradientDrawable Orientation TOP BOTTOM                          intArrayOf Color parseColor   008000                                       Color parseColor   ADFF2F                                               gradientDrawable cornerRadius   0f                        Set Gradient                    linearLayout setBackground gradientDrawable     Result

User · Answer

In XML Drawable File    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item gt           lt shape gt               lt gradient android angle  90                  android endColor   9b0493                  android startColor   38068f                  android type  linear    gt           lt  shape gt       lt  item gt   lt  selector gt    In your layout file  android background   drawable gradient background      lt  xml version  1 0  encoding  utf-8   gt       lt LinearLayout xmlns android  http   schemas android com apk res android          android layout width  match parent          android layout height  match parent          android background   drawable gradient background          android orientation  vertical          android padding  20dp  gt                  lt  LinearLayout gt

[android] Android LinearLayout Gradient Background

Examples related to android

Examples related to android-layout

Examples related to android-linearlayout

Examples related to gradient