Árvore de páginas

Índice


Objetivo

O objetivo deste guia é mostrar ao usuário como utilizar o componente FluigSdkMediaView e quais os seus atributos.

FluigSdkMediaView é o principal componente de background personalizado do fluig SDK Android. Este componente deve ser utilizado quando se deseja personalizar o fundo de uma Activity ou Fragment do seu aplicativo.

Este componente é uma subclasse de SurfaceView e, portanto, possui todas as funcionalidades já presentes nesta classe.

Importante

Antes de utilizar o componente, não esqueça de importar o módulo de componentes do SDK. Para saber como, clique aqui.


Uso

No seu projeto, este componente pode ser utilizado no XML de um layout ou dentro de uma classe Java.

O visual e comportamento do FluigSdkMediaView segue o estilo definido pelo fluig Style Guide.

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<merge
    xmlns:android="http://schemas.android.com/apk/res/android">
 
    <sdk.fluig.com.ui.components.background.FluigSdkMediaView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/my_text" />
 
    </LinearLayout>

</merge>
MainActivity.java
import ...
import sdk.fluig.com.ui.components.background.FluigSdkMediaView;

public class MainActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_layout);
 
        FluigSdkMediaView mediaView = (...);
        mediaView.setOnLongClickListener(new OnLongClickListener {...});
    }
}


Atributos

Esta seção explica o funcionamento de todos os atributos específicos do FluigSdkMediaView.


Caso o atributo não seja padrão do SurfaceView, nos XMLs será necessário importar o namespace abaixo.

xmlns:app="http://schemas.android.com/apk/res-auto"

Background Color

int backgroundColor

Atributo padrão do SurfaceView.

Define a cor de fundo do componente. Caso seja usado junto ao backgroundColorEnd, define a cor do lado esquerdo de um gradiente.

Caso não seja definida, a cor padrão utilizada é #ed165a ().

example.xml
<sdk.fluig.com.ui.components.background.FluigSdkMediaView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/my_left_color" />
Example.java
FluigSdkMediaView mediaView = (FluigSdkMediaView) findViewById(R.id.my_media_view_id);
int myLeftColor = ...;
mediaView.setBackgroundColor(myLeftColor);

Background Color End

int backgroundColorEnd

Define a cor de fundo do lado direito de um gradiente.

Caso não seja definida, a cor padrão utilizada é #f15823 ().

example.xml
<sdk.fluig.com.ui.components.background.FluigSdkMediaView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:backgroundColor_end="@color/my_right_color" />
Example.java
FluigSdkMediaView mediaView = (FluigSdkMediaView) findViewById(R.id.my_media_view_id);
int myRightColor = ...;
mediaView.setBackgroundColorEnd(myRightColor);

Image

Drawable imageDrawable

Define a imagem utilizada como fundo. O componente faz as seguintes modificações na imagem fornecida:

  1. Aplica um clareamento
  2. Desfoca a imagem
  3. Altera o tamanho da imagem para preencher todo o componente, mantendo suas proporções


example.xml
<sdk.fluig.com.ui.components.background.FluigSdkMediaView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:image="@drawable/my_image" />
Example.java
FluigSdkMediaView mediaView = (FluigSdkMediaView) findViewById(R.id.my_media_view_id);
mediaView.setImage(R.drawable.my_image);

//caso tenha uma instância de Drawable
Drawable myImage = ...;
mediaView.setImage(myImage);

Video

int videoId

Define o vídeo que irá tocar no fundo. O vídeo é ajustado para preencher todo o componente, mantendo sua proporção, e repete indefinidamente.

Não é aplicado qualquer filtro no vídeo. Portanto, para melhor conforto é recomendado que o vídeo seja em escala de cinza.

Importante

Escolha um vídeo apropriado para a tela que usará o componente. Caso a tela permita somente orientação retrato, utilize um vídeo que vertical. Não utilize resoluções muito altas, caso contrário poderá ocorrer problemas na reprodução do vídeo.

example.xml
<sdk.fluig.com.ui.components.background.FluigSdkMediaView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:video="@raw/my_video" />
Example.java
FluigSdkMediaView mediaView = (FluigSdkMediaView) findViewById(R.id.my_media_view_id);
int myVideoId = ...;
mediaView.setVideo(myVideoId);
  • Sem rótulos