How to change constraint layout background image using java in android

Question

I'm trying to change the constraint layout background image. On click of either one of the two radio buttons the background image should get changed. I've attached the code below. I've set a OnCheckedChangeListener on the radioGroup.

Java file

package com.mitwpu.practicallab_6_2_2020;

import android.support.constraint.ConstraintLayout;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;

public class Change_Background_Image_Activity extends AppCompatActivity {

    RadioGroup radioGroup;
    RadioButton radioButtonTom;
    RadioButton radioButtonJerry;


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

        radioGroup=(RadioGroup)findViewById(R.id.radioGroupId);

        radioButtonTom=(RadioButton)findViewById(R.id.radioButtonTom);

        radioButtonJerry=(RadioButton)findViewById(R.id.radioButtonJerry);

        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId){
                    case R.id.radioButtonTom : {
                        //R.drawable.tom ->image1 
                        break;
                    }
                    case R.id.radioButtonJerry : {
                        //R.drawable.jerry->image2

                        break;
                    }
                }
            }
        });

    }
}

xml file

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/backgroudId"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Change_Background_Image_Activity">

    <RadioGroup
        android:id="@+id/radioGroupId"
        android:layout_width="274dp"
        android:layout_height="448dp"
        android:layout_marginStart="79dp"
        android:layout_marginTop="116dp"
        android:layout_marginEnd="58dp"
        android:layout_marginBottom="167dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <RadioButton
            android:id="@+id/radioButtonTom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Tom" />

        <RadioButton
            android:id="@+id/radioButtonJerry"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Jerry" />
    </RadioGroup>
</android.support.constraint.ConstraintLayout>

how to change the background image once the radio button is clicked

Vlad · Accepted Answer · 2020-02-20 13:51:51Z

4

constraintId.setBackground(ContextCompat.getDrawable(this, R.drawable.some_drawable))

answered Feb 20, 2020 at 13:51

Vlad

1063 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kjanderson2 · Accepted Answer · 2020-02-21 00:22:58Z

Yes, the above answer will definitely work. You can set the background image on your constraintLayout by calling findViewById(R.id.backgroudId).setBackground(ContextCompat.getDrawable(this, R.drawable.your_drawable_here)) within your switch case. However I can also recommend that you create a separate ImageView for your background image as ImageViews have a little more flexibility with scaleType, etc. I also included in the code below your code with less margins,etc. ConstraintLayout will take care of a lot of the margin stuff for you if you don't state it explicitly so by setting the radioGroup to be constrained on top/bottom/start/end to parent, it will automatically center in the middle of the screen. So think about trying something like this:

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/backgroundId"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <RadioGroup
        android:id="@+id/radioGroupId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <RadioButton
            android:id="@+id/radioButtonTom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Tom" />

        <RadioButton
            android:id="@+id/radioButtonJerry"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Jerry" />

    </RadioGroup>
</androidx.constraintlayout.widget.ConstraintLayout>

This will give you more flexibility in your image. I will also include the code that I have for the image switching, though it is in Kotlin:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val listener = RadioGroup.OnCheckedChangeListener { _, checkedId ->
            when (checkedId) {
                radioButtonTom.id -> {
                    backgroundId.background = ContextCompat.getDrawable(applicationContext, R.drawable.ic_android_black_24dp)
                }
                radioButtonJerry.id -> {
                    backgroundId.background = ContextCompat.getDrawable(applicationContext, R.drawable.ic_launcher_background)
                }
            }
        }
        radioGroupId.setOnCheckedChangeListener(listener)
    }
}

Collectives™ on Stack Overflow

How to change constraint layout background image using java in android

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related