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