# Banner

Los anuncios de banner son anuncios de imagen o de texto rectangulares que ocupan un lugar dentro del diseño de una aplicación. Permanecen en la pantalla mientras los usuarios interactúan con la aplicación y pueden actualizarse automáticamente después de un cierto período de tiempo. Si eres nuevo en la publicidad móvil, son una excelente opción para comenzar.

## **Integración**

Existen dos formas diferentes de realizar la integración de un banner: usando código o añadiendo la vista de banner en un layout. A continuación se muestran ejemplos de ambas opciones:

### **Layout XML**

```markup
<com.wortise.ads.banner.BannerAd
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:adSize="HEIGHT_50"
    app:adUnitId="Ad Unit ID de Wortise" />
```

El widget tiene soporte para los siguientes parámetros:

| Parámetro               | Tipo    | Requerido | Descripción                                                                                                                   |
| ----------------------- | ------- | --------- | ----------------------------------------------------------------------------------------------------------------------------- |
| **app:adUnitId**        | String  | **Si**    | El ID del ad unit a asignar al banner                                                                                         |
| **app:adSize**          | AdSize  | No        | Tamaño máximo (altura) para el banner. Los posibles valores para este parámetro se encuentran declarados en la clase `AdSize` |
| **app:autoRefreshTime** | Integer | No        | Valor en segundos que representa el tiempo que deberá transcurrir para que se realice la carga de un nuevo anuncio banner     |

### **Código**

{% tabs %}
{% tab title="Kotlin" %}

```kotlin
class MainActivity : Activity() {

    private var bannerAd: BannerAd? = null
    
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        bannerAd = BannerAd(this).also {
	        it.adSize = AdSize.HEIGHT_50
	        it.adUnitId = "<Ad Unit ID de Wortise>"
	        
	        // Por ejemplo, añadímos el BannerAd en un FrameLayout
	        val frameLayout = findViewById<FrameLayout>(R.id.frame)
	        frameLayout.addView(it)
	        
	        it.loadAd()
        }
    }
    
    override fun onDestroy() {
        ...
        bannerAd?.destroy()
    }
    
    override fun onPause() {
        ...
        bannerAd?.pause()
    }
    
    override fun onResume() {
        ...
        bannerAd?.resume()
    }
}
```

{% endtab %}

{% tab title="Java" %}

```java
public class MainActivity extends Activity {

    private BannerAd mBannerAd;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        ...
        mBannerAd = new BannerAd(this);
        mBannerAd.setAdSize(AdSize.HEIGHT_50);
        mBannerAd.setAdUnitId("Ad Unit ID de Wortise");
        
        // Por ejemplo, añadímos el BannerAd en un FrameLayout
        FrameLayout frameLayout = findViewById(R.id.frame);
        frameLayout.addView(mAdView);

        mBannerAd.loadAd();
    }
    
    @Override
    public void onDestroy() {
        ...
        mBannerAd.destroy();
    }
    
    @Override
    public void onPause() {
        ...
        mBannerAd.pause();
    }
    
    @Override
    public void onResume() {
        ...
        mBannerAd.resume();
    }
}
```

{% endtab %}
{% endtabs %}

La clase `BannerAd` ofrece los siguientes métodos para configurar la instancia:

| Método                               | Requerido | Descripción                                                                                                                   |
| ------------------------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `setAdUnitId(String)`                | **Si**    | Asigna un ad unit al banner                                                                                                   |
| `setAdSize(AdSize)`                  | No        | Tamaño máximo (altura) para el banner. Los posibles valores para este parámetro se encuentran declarados en la clase `AdSize` |
| `setAutoRefreshTime(long)`           | No        | Valor en milisegundos que representa el tiempo que deberá transcurrir para que se realice la carga de un nuevo anuncio banner |
| `setAutoRefreshTime(long, TimeUnit)` | No        | Igual que el método anterior, pero permitiendo especificar la unidad de tiempo del valor indicado                             |

## **Banners adaptativos**

Los banners adaptativos son un nuevo formato de banner que se caracteriza por adaptar el tamaño de los anuncios según el dispositivo y la interfaz de la aplicación, para lograr maximizar el rendimiento.

Actualmente existe soporte para dos tipos de banners adaptativos:

### Anclados

Este tipo de banner está diseñado para reemplazar a los banners tradicionales de 320x50 y ser posicionado en la parte superior o inferior de la pantalla.

Para hacer uso de este formato, se debe utilizar el siguiente código para configurar un tamaño adaptativo, indicando la anchura del banner:

{% tabs %}
{% tab title="Kotlin" %}

```kotlin
// Es necesario especificar la anchura del banner
val adSize = AdSize.getAnchoredAdaptiveBannerAdSize(context, width)
bannerAd.adSize = adSize
```

{% endtab %}

{% tab title="Java" %}

```java
// Es necesario especificar la anchura del banner
AdSize adSize = AdSize.getAnchoredAdaptiveBannerAdSize(context, width);
mBannerAd.setAdSize(adSize);
```

{% endtab %}
{% endtabs %}

Alternativamente, se puede implementar esta otra opción para que el SDK calcule automáticamente la anchura del banner, donde se deberá pasar la propia instancia del `BannerAd` o el `View` que va a contener a dicho banner:

{% hint style="warning" %}
En esta opción, es **muy recomendable** que el `View` que se pase al método ya se encuentre agregado al layout de la app, para que el SDK pueda calcular correctamente todas las dimensiones.
{% endhint %}

{% tabs %}
{% tab title="Kotlin" %}

```kotlin
val adSize = AdSize.getAnchoredAdaptiveBannerAdSize(view)
bannerAd.adSize = adSize
```

{% endtab %}

{% tab title="Java" %}

```java
AdSize adSize = AdSize.getAnchoredAdaptiveBannerAdSize(view);
mBannerAd.setAdSize(adSize);
```

{% endtab %}
{% endtabs %}

### Inline

Este otro tipo de banner, en comparación con los anclados, está diseñado para tener una altura variable y ser posicionado dentro de un contenido desplazable.

En este caso, se debe utilizar un código como el siguiente para configurar un tamaño adaptativo apropiado:

{% tabs %}
{% tab title="Kotlin" %}

```kotlin
val maxHeight = 200

// Es necesario especificar la anchura del banner. La altura máxima es un
// parámetro opcional
val adSize = AdSize.getInlineAdaptiveBannerAdSize(context, width, maxHeight)
bannerAd.adSize = adSize
```

{% endtab %}

{% tab title="Java" %}

```java
int maxHeight = 200;

// Es necesario especificar la anchura del banner. La altura máxima es un
// parámetro opcional
AdSize adSize = AdSize.getInlineAdaptiveBannerAdSize(
    context, width, maxHeight
);
mBannerAd.setAdSize(adSize);
```

{% endtab %}
{% endtabs %}

Alternativamente, se puede implementar esta otra opción para que el SDK calcule automáticamente la anchura del banner, donde se deberá pasar la propia instancia del `BannerAd` o el `View` que va a contener a dicho banner:

{% hint style="warning" %}
En esta opción, es **muy recomendable** que el `View` que se pase al método ya se encuentre agregado al layout de la app, para que el SDK pueda calcular correctamente todas las dimensiones.
{% endhint %}

{% tabs %}
{% tab title="Kotlin" %}

```kotlin
val maxHeight = 200

val adSize = AdSize.getInlineAdaptiveBannerAdSize(view, maxHeight)
bannerAd.adSize = adSize
```

{% endtab %}

{% tab title="Java" %}

```java
int maxHeight = 200;

AdSize adSize = AdSize.getInlineAdaptiveBannerAdSize(view, maxHeight);
mBannerAd.setAdSize(adSize);
```

{% endtab %}
{% endtabs %}

## **Configuración del listener**

Se puede añadir un listener a cualquier instancia de `BannerAd` para recibir los diferentes eventos que sucedan durante su ciclo de vida. Para ello, es necesario implementar la interfaz `BannerAd.Listener`, como se muestra en el siguiente ejemplo:

{% tabs %}
{% tab title="Kotlin" %}

```kotlin
bannerAd.listener = object : BannerAd.Listener() {

    override fun onBannerClicked(ad: BannerAd) {
        // Invocado cuando el anuncio ha sido clickeado
    }
    
    override fun onBannerFailedToLoad(ad: BannerAd, error: AdError) {
        // Invocado cuando el anuncio no se ha podido cargar
        // (por error o falta de inventario)
    }
    
    override fun onBannerImpression(ad: BannerAd) {
        // Invocado cuando el anuncio ha generado una impresión
    }
    
    override fun onBannerLoaded(ad: BannerAd) {
        // Invocado cuando el anuncio ha sido cargado
    }
    
    override fun onBannerRevenuePaid(ad: BannerAd, data: Revenuedata) {
        // Invocado cuando el anuncio ha generado un ingreso
    }
}
```

{% endtab %}

{% tab title="Java" %}

```java
mBannerAd.setListener(new BannerAd.Listener() {
    @Override
    public void onBannerClicked(@NonNull BannerAd ad) {
        // Invocado cuando el anuncio ha sido clickeado
    }
    
    @Override
    public void onBannerFailedToLoad(@NonNull BannerAd ad,
                                     @NonNull AdError error) {
        // Invocado cuando el anuncio no se ha podido cargar
        // (por error o falta de inventario)
    }
    
    @Override
    public void onBannerImpression(@NonNull BannerAd ad) {
        // Invocado cuando el anuncio ha generado una impresión
    }
    
    @Override
    public void onBannerLoaded(@NonNull BannerAd ad) {
        // Invocado cuando el anuncio ha sido cargado
    }
    
    @Override
    public void onBannerRevenuePaid(@NonNull BannerAd ad,
                                    @NonNull Revenuedata data) {
        // Invocado cuando el anuncio ha generado un ingreso
    }
});
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wortise.com/android-sdk/integracion-del-sdk/banner.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.