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:
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);
}
}- Set the
AudioRoomBackgroundViewtoZegoUIKitPrebuiltLiveAudioRoomFragment:
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);
}
}