Skip to main content

Getting Started

This guide provides a quick start to integrating Televo View into your iOS or Android application. Televo View is a powerful tool that allows you to build dynamic user interfaces from data fetched from a server or local cache. Follow the steps below to get started.

1. Android Studio Integration​

Add the Televo.aar and License File​

  1. Create a libs folder inside the /app directory.

  2. Add the televo.aar file into the libs folder.

  3. Open the application-level build.gradle file and add the following dependency:

    implementation files('libs/televo.aar')
  4. Place the provided license file inside /app/src/main/assets.

2. Initialize the Televo Dependency Globally​

Initialize Televo globally by passing the applicationContext:

package com.example.televoExample

import android.app.Application
import com.televo.Televo

class TelevoApplication: Application() {
override fun onCreate() {
super.onCreate()
Televo.init(applicationContext, "YOUR_LICENSE_FILE.lic")
}
}

3. UI Integration with Televo​

For XML-Based Projects​

After initializing Televo globally in the application, incorporate TelevoView into your XML layouts to leverage Televo's dynamic UI features. Add TelevoView to your XML layout as follows:

<com.televo.view.TelevoView
android:layout_margin="10dp"
android:id="@+id/televoView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/txt_view" />

XML Attributes Description​

  • android:layout_margin: Sets the margin around TelevoView.
  • android:id: Assigns a unique identifier to TelevoView.
  • android:layout_width and android:layout_height: Define the dimensions of TelevoView.
  • app:layout_constraintTop_toBottomOf: Positions TelevoView relative to another component in your layout.

Initialization in Java/Kotlin​

Initialize TelevoView in your activity or fragment as follows:

TelevoView televoView = findViewById(R.id.televoView);
JSONObject jObject = new JSONObject(data); // 'data' should be your JSON string

televoView.initialize(customErrorView, jObject, (route, componentString) -> {
Intent intent = new Intent(getActivity(), SecondActivity.class);
intent.putExtra("data", componentString);
startActivity(intent);
return null;
});

For Jetpack Compose Projects​

If your project utilizes Jetpack Compose, you can integrate TelevoView using the following approach:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.*
import com.televo.view.TelevoLayout
import org.json.JSONObject

class YourComposeActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)

val data = "YOUR_SERVER_RESPONSE_STRING" // Replace with your actual data
val jObject = JSONObject(data)

setContent {
TelevoLayoutComposable().setUpTelevoContent(
jsonData = jObject,
onNavigate = null, // Navigation handler
modifier = Modifier.fillMaxSize()
)
}
}
}

Important Configuration Notes​

Ensure your project's Kotlin version and Compose settings are aligned with Televo's requirements for a smooth integration:

composeOptions {
kotlinCompilerExtensionVersion = "1.5.3"
}

plugins {
id("org.jetbrains.kotlin.android") version "1.9.10" apply false
}

4. Troubleshooting​

1. Exclude Transitive Dependencies​

image

In case you encounter errors due to duplicate dependencies, you can exclude transitive dependencies from your app to avoid conflicts. Add the following configuration in your build.gradle file:

dependencies {
implementation("some-library") {
exclude(group = "com.example.imgtools", module = "native")
}
}

2. Include Dependencies​

Below mentioned are the dependencies that are included within the Televo package:

  • Network Image Loading

    io.coil-kt:coil-compose:2.4.0
  • JSON Parsing

    com.google.code.gson:gson:2.10.1
  • Lottie Animations

    com.airbnb.android:lottie-compose:6.0.1
  • ExoPlayer

    com.google.android.exoplayer:exoplayer:2.19.1
  • Image Carousel

    com.google.accompanist:accompanist-pager:0.22.0-rc
  • Security Provider

    org.bouncycastle:bcprov-jdk18on:1.71

In case you encounter errors related to missing dependencies of Jetpack Compose, add the following dependencies to the application build.gradle:

  • Jetpack Compose

    platform("androidx.compose:compose-bom:2024.05.00")
    androidx.compose.ui:ui
    androidx.compose.runtime:runtime
    androidx.compose.ui:ui-tooling
    androidx.compose.material:material
    androidx.compose.foundation:foundation
    androidx.compose.foundation:foundation-layout
    androidx.navigation:navigation-compose:2.7.7
    androidx.navigation:navigation-runtime-ktx:2.7.7
  • Constraint Layout

    androidx.constraintlayout:constraintlayout-compose:1.0.1
  • Material Design

    androidx.compose.material3:material3:1.2.1
    androidx.compose.material:material-icons-extended