Customize the background

Live Audio Room Kit (ZegoUIKitPrebuiltLiveAudioRoom) allows you to customize the background view of the live audio room.

The steps and reference code below implement the following custom settings, with the following effect:

Show the title and roomID of the live audio room in the top left corner.
Show a custom background image.

Create a class AudioRoomBackgroundView:

Java

Kotlin

import android.content.Context;
import android.graphics.Color;
import android.text.TextUtils.TruncateAt;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import com.zegocloud.uikit.utils.Utils;

public class AudioRoomBackgroundView extends FrameLayout {

    private TextView roomName;
    private TextView roomID;

    public AudioRoomBackgroundView(@NonNull Context context) {
        super(context);
        initView();
    }

    public AudioRoomBackgroundView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    public AudioRoomBackgroundView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    private void initView() {
        LinearLayout linearLayout = new LinearLayout(getContext());
        linearLayout.setOrientation(LinearLayout.VERTICAL);

        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(-2, -2);
        int marginEnd = Utils.dp2px(12, getResources().getDisplayMetrics());
        params.setMargins(0, 0, marginEnd, 0);

        roomName = new TextView(getContext());
        roomName.setMaxLines(1);
        roomName.setEllipsize(TruncateAt.END);
        roomName.setSingleLine(true);
        roomName.getPaint().setFakeBoldText(true);
        roomName.setTextColor(Color.parseColor("#ff1b1b1b"));
        roomName.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
        roomName.setMaxWidth(Utils.dp2px(200, getResources().getDisplayMetrics()));
        linearLayout.addView(roomName, params);

        roomID = new TextView(getContext());
        roomID.setMaxLines(1);
        roomID.setEllipsize(TruncateAt.END);
        roomID.setSingleLine(true);
        roomID.setTextColor(Color.parseColor("#ff606060"));
        roomID.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
        roomID.setMaxWidth(Utils.dp2px(120, getResources().getDisplayMetrics()));
        linearLayout.addView(roomID, params);

        FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(-2, -2);
        int marginStart = Utils.dp2px(16, getResources().getDisplayMetrics());
        int marginTop = Utils.dp2px(10, getResources().getDisplayMetrics());
        layoutParams.setMargins(marginStart, marginTop, 0, 0);
        addView(linearLayout, layoutParams);
    }

    public void setRoomName(String roomName) {
        this.roomName.setText(roomName);
    }

    public void setRoomID(String roomID) {
        this.roomID.setText("ID: " + roomID);
    }
}

Copied!

import android.content.Context
import android.graphics.Color
import android.text.TextUtils.TruncateAt
import android.util.AttributeSet
import android.util.TypedValue
import android.widget.FrameLayout
import android.widget.LinearLayout
import android.widget.TextView
import com.zegocloud.uikit.utils.Utils


class AudioRoomBackgroundView : FrameLayout {
    private lateinit var roomName: TextView
    private lateinit var roomID: TextView

    constructor(context: Context) : super(context) {
        initView()
    }

    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
        initView()
    }

    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context, attrs, defStyleAttr
    ) {
        initView()
    }

    private fun initView() {
        val linearLayout = LinearLayout(context)
        linearLayout.orientation = LinearLayout.VERTICAL
        val params = LinearLayout.LayoutParams(-2, -2)
        val marginEnd: Int = Utils.dp2px(12, resources.displayMetrics)
        params.setMargins(0, 0, marginEnd, 0)
        roomName = TextView(context)
        roomName.maxLines = 1
        roomName.ellipsize = TruncateAt.END
        roomName.isSingleLine = true
        roomName.paint.isFakeBoldText = true
        roomName.setTextColor(Color.parseColor("#ff1b1b1b"))
        roomName.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16f)
        roomName.maxWidth = Utils.dp2px(200, resources.displayMetrics)
        linearLayout.addView(roomName, params)
        roomID = TextView(context)
        roomID.maxLines = 1
        roomID.ellipsize = TruncateAt.END
        roomID.isSingleLine = true
        roomID.setTextColor(Color.parseColor("#ff606060"))
        roomID.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16f)
        roomID.maxWidth = Utils.dp2px(120, resources.displayMetrics)
        linearLayout.addView(roomID, params)
        val layoutParams = LayoutParams(-2, -2)
        val marginStart: Int = Utils.dp2px(16, resources.displayMetrics)
        val marginTop: Int = Utils.dp2px(10, resources.displayMetrics)
        layoutParams.setMargins(marginStart, marginTop, 0, 0)
        addView(linearLayout, layoutParams)
    }

    fun setRoomName(roomName: String?) {
        this.roomName.text = roomName
    }

    fun setRoomID(roomID: String) {
        this.roomID.text = "ID: $roomID"
    }
}

Copied!

Set the AudioRoomBackgroundView to ZegoUIKitPrebuiltLiveAudioRoomFragment:

Java

Kotlin

public class LiveAudioRoomActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_call);

        addFragment();
    }

    public void addFragment() {
        long appID = yourAppID;
        String appSign = yourAppSign;
        String userID = yourUserID;
        String userName = yourUserName;

        boolean isHost = getIntent().getBooleanExtra("host", false);
        String roomID = getIntent().getStringExtra("roomID");

        ZegoUIKitPrebuiltLiveAudioRoomConfig config;
        if (isHost) {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.host();
        } else {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.audience();
        }

        ZegoUIKitPrebuiltLiveAudioRoomFragment fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(
            appID, appSign, userID, userName,roomID,config);
        getSupportFragmentManager().beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow();
        AudioRoomBackgroundView roomBackgroundView = new AudioRoomBackgroundView(this);
        roomBackgroundView.setRoomID(roomID);
        roomBackgroundView.setRoomName("Live Audio Room");
        roomBackgroundView.setBackgroundResource(R.drawable.background);
        fragment.setBackgroundView(roomBackgroundView);
    }
}

Copied!

class LiveAudioRoomActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_live)
        addFragment()
    }

    private fun addFragment() {
        val appID: Long = yourAppID
        val appSign = yourAppSign
        val userID = YourUserID
        val userName = YourUserName
        
        val isHost = intent.getBooleanExtra("host", false)
        val roomID = intent.getStringExtra("roomID")

        val config: ZegoUIKitPrebuiltLiveAudioRoomConfig
        if (isHost) {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
        } else {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
        }
        val fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(
            appID, appSign, userID, userName, roomID, config
        )
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow()
        val roomBackgroundView = AudioRoomBackgroundView(this)
        roomBackgroundView.setRoomID(roomID)
        roomBackgroundView.setRoomName("Live Audio Room")
        roomBackgroundView.setBackgroundResource(R.drawable.background)
        fragment.setBackgroundView(roomBackgroundView)
    }
}

Copied!