How to apply transparency gradually in a Linearlayout

Asked

Viewed 1,070 times

1

Good morning!

I’m having trouble finding some property of Linearlayout to control transparency.

My situation is as follows I have a Linearlayout with a background image, and I also have Homescrollviewobserver for all XML in the onScrollChanged method from Homescrollviewobserver need to apply a transparency effect or smooth the background image change.

Below is an excerpt of the code, this code is only changing the background image.

<LinearLayout
    android:id="@+id/ll_icons_path"
    android:layout_width="fill_parent"
    android:layout_height="900dp"
    android:background="@drawable/home_icons_path"
    android:orientation="vertical">

//Método que controla a rolagem da tela na vertical(y) e horizontal(x)
@Override
public void onScrollChanged(HomeScrollViewObserver scrollView, int x, int y, int oldx, int oldy) {
    //Coloca a imagem de fundo padrão (fundo branco) somente é alterado quando o valor y for menor ou igual a 5
    if (y <= 100) {
        ll_icons_path.setBackgroundResource(R.drawable.home_icons_path);
    } else {
        //Verifica se o valor de y é maior ou igual a 6 e muda imagem de fundo(fundo transparente)
        if (y >= 101){
            ll_icons_path.setBackgroundResource(R.drawable.home_icons_path_semfundo);

        }
    }
}
  • Maybe I don’t understand your question but you can control the transparency of a Imageview through setAlpha()(setImageAlpha() API16+).

  • When the y is equal to 100 want the images to have 50% transparency each?

1 answer

1


You can apply a background to linear layout with gradient:

gradient_background.xml

<shape>
    <gradient
        android:angle="270"
        android:startColor="#000"
        android:endColor="#00000000"
        android:type="linear" />
</shape>

This is a gradient that starts in black color and goes up to black 100% Transparent, getting what you want.

Then just apply this background to the linearlayout background

<LinearLayout
    android:id="@+id/ll_icons_path"
    android:layout_width="fill_parent"
    android:layout_height="900dp"
    android:background="@drawable/gradient_background"
    android:orientation="vertical">

Editing:

background_multiplo.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/background_image" />
    <item>
         <shape>
             <gradient
                 android:angle="270"
                 android:startColor="#000"
                 android:endColor="#00000000"
                 android:type="linear" />
         </shape>
   </item>
</layer-list>

With this background you can add a drawable as background and then the gradient. Your linear layout will be something like:

<LinearLayout
    android:id="@+id/ll_icons_path"
    android:layout_width="fill_parent"
    android:layout_height="900dp"
    android:background="@drawable/background_multiplo"
    android:orientation="vertical">

If what you want is for the image itself to disappear, then you have to change the image itself!

  • Good morning! Rui Santos, Thanks for the return, unfortunately it will not roll, because the way you are suggesting it is necessary to change the background image. In the model I sent I’m already using a background image in Linearlayout. Att.

  • Then you can use a multi-layered drawable, one for the bottom another for the gradient! I will update.

  • Hello Rui Santos, for transparency worked very well thank you, but for part change the background image in a smooth way as I would?

  • Try this library: https://github.com/daimajia/AndroidViewAnimations to use fadein/fadeOut animation when y is over 100 as in the example.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.