Preparing customized radio group type of layout

Question

I am trying to prepare custom radiogroup like layout in the below image. I have nearly 8-10 rows to do that. So, I prepared one linear layout w

Answer 1

Answer by @Junior Buckeridge worked for me. I just want to add my 2 cents to that. In case if you have any clickable views in your linear layout make sure you add android:descendantFocusability="blocksDescendants" to your linear layout and android:focusable="false" to your view(Can be a button,Radio Button etc)

Answer 2

In my experience is a little of a troublemaker to work with these kind of customized RadioGroups. I've prepared you some code that would be my approach to solve what you're trying to accomplish. Hope it works for you!

First you must call this function in your onCreate() (or wherever you're creating the views)

 private void addRadioButtons() {
    LinearLayout llGroup = (LinearLayout) findViewById(R.id.linearLayoutGroup);
    for(int i=0; i<10; i++){
        MyRadioButton mrb = new MyRadioButton(this);
        mrb.setText(String.valueOf(i));
        llGroup.addView(mrb.getView());
    }
}

The class should be

private static class MyRadioButton implements View.OnClickListener{

    private ImageView iv;
    private TextView tv;
    private RadioButton rb;
    private View view;

    public MyRadioButton(Context context) {

        view = View.inflate(context, R.layout.my_radio_button, null);
        rb = (RadioButton) view.findViewById(R.id.radioButton1);
        tv = (TextView) view.findViewById(R.id.textView1);
        iv = (ImageView) view.findViewById(R.id.imageView1);

        view.setOnClickListener(this);
        rb.setOnCheckedChangeListener(null);

    }


    public View getView() {
        return view;
    }

    @Override
    public void onClick(View v) {

        boolean nextState = !rb.isChecked();

        LinearLayout lGroup = (LinearLayout)view.getParent();
        if(lGroup != null){
            int child = lGroup.getChildCount();
            for(int i=0; i<child; i++){
                //uncheck all
                ((RadioButton)lGroup.getChildAt(i).findViewById(R.id.radioButton1)).setChecked(false);
            }
        }

        rb.setChecked(nextState);
    }

    public void setImage(Bitmap b){
        iv.setImageBitmap(b);
    }

    public void setText(String text){
        tv.setText(text);
    }

    public void setChecked(boolean isChecked){
        rb.setChecked(isChecked);
    }


}

And the xml to inflate, something like:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal" >
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />
    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />
    <RadioButton
        android:id="@+id/radioButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

Answer 3

I edited the layout removing the second part, which was useless for your purpose.
If you look at the layout, you will see what is the trick to put the button on the right.
This can be made in code, too, if you don't want to use the layout (why?)
Using my layout (without the need for a cusom class), the result you'd get is...

Quite similar to your goal, isn't it?

The tricky lines you'll want to replicate in your code (again, why?) are:

android:button="@null"
android:drawableRight="@android:drawable/btn_radio" // or your selector, with custom on/off pngs
android:drawableLeft="@drawable/ic_launcher" // or whatever

Answer 4

The tricky part is that you want the button to be on the right side.
To do that, in each button I deleted the original button and set the Right drawable as the button.
Nothing to say for the Left drawable.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffff"
    android:padding="8dp"
    >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:padding="4dp"
        >
        <RadioGroup
            android:layout_gravity="center_horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/rgOne"
            >
            <RadioButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/rdo1"
                android:text="RadioButton 1"
                android:button="@null"
                android:drawableRight="@android:drawable/btn_radio"
                android:drawableLeft="@drawable/ic_launcher"
                android:checked="true"
                android:onClick="onRadioButtonClicked"
            />
            <RadioButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/rdo2"
                android:text="RadioButton 2"
                android:button="@null"
                android:drawableRight="@android:drawable/btn_radio"
                android:drawableLeft="@drawable/ic_launcher"
                android:onClick="onRadioButtonClicked"
            />
            <RadioButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/rdo3"
                android:text="RadioButton 3"
                android:button="@null"
                android:drawableRight="@android:drawable/btn_radio"
                android:drawableLeft="@drawable/ic_launcher"
                android:onClick="onRadioButtonClicked"
            />
        </RadioGroup>
    </RelativeLayout>
</RelativeLayout>

And this is the code:

package com.example.aaa;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.Toast;

public class MainActivity
extends Activity
{

    @Override
    protected void onCreate(final Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // If you need to fire RadioButtonClick event:
        onRadioButtonClicked(findViewById(R.id.rdo1));
        // Otherwise, remove previous line
    }

    public final void onRadioButtonClicked(final View v)
    {
        String str = "1";
        switch(v.getId())
        {
            case R.id.rdo1:
            {
                // do something
                str = "1";
                break;
            }
            case R.id.rdo2:
            {
                // do something
                str = "2";
                break;
            }
            case R.id.rdo3:
            {
                // do something
                str = "3";
                break;
            }
            default:
            {
                // do something
                str = "that doesn' exist";
                break;
            }
        }
        Toast.makeText
        (
            getApplicationContext(), "RadioButton " + str, Toast.LENGTH_LONG
            ).show();
    }
}

Answer 5

It's not difficult to implement your custom RadioGroup class to fit your requirements. Also you can implement a custom RadioButton. Having custom components defined makes it easier to extend and bypass restrictions of default components.

I have described the process of creating a custom RadioGroup and a custom RadioButton in this tutorial. Also I have uploaded my code to Github.

Answer 6

A bit late to answer, but I meet with the same problem and out of frustration I wrote a new class called RadioGroupPlus to solve this problem, and I wanted to share.

The repo can be found here: https://github.com/worker8/RadioGroupPlus/

How to install

Add the library in your top level build.gradle:

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

In your app/build.gradle, add this as dependency:

compile 'com.github.worker8:RadioGroupPlus:v1.0.1'

How to use

In your xml, wrap your custom layout with <worker8.com.github.radiogroupplus.RadioGroupPlus, such as:

<worker8.com.github.radiogroupplus.RadioGroupPlus
    android:id="@+id/radio_group_plus"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
        <LinearLayout...>
           <ImageView...>
           <TextView...>
           <RadioButton...>
        </LinearLayout>
        <LinearLayout...>
           <ImageView...>
           <TextView...>
           <RadioButton...>
        </LinearLayout>
        <LinearLayout...>
           <ImageView...>
           <TextView...>
           <RadioButton...>
        </LinearLayout>
</worker8.com.github.radiogroupplus.RadioGroupPlus>

I leave out the details on purpose so that it's easier to read. I wrote more information about how to use RadioGroupPlus in the README page. Besides I also write a simple example of how to use it. So if you need to know more, you can learn more in the RadioGroupPlus repo.

Hope it helps!