-3

By following this link android-radiobutton-image-and-text I'm able to show radio button with image and text both.

if I use drawableLeft, the drawable image comes in between the radio icon(circular icon to show if selected or not) and the text.

But what I want is to show first the drawable image to extreme left, then radio icon having some space(margin/padding) from drawable and then the text to right side.

I'm able to show below, but i want that tractor image to the left of that circular icon enter image description here

my code below:`

        <RadioGroup
            android:id="@+id/radio_group_machine_type"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RadioButton
                android:id="@+id/radio_btn_tractor"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:paddingLeft="10dp"
                android:drawableLeft="@drawable/tractor_icon"

                android:text="@string/tractor_label" />

            <View
                style="@style/Divider"
                android:layout_height="1dp"
                android:background="@color/black_tint_40" />

            <RadioButton
                android:id="@+id/radio_btn_combine"
                android:layout_width="match_parent"
                android:drawableRight="@drawable/car_icon"
                android:layout_height="50dp"
                android:text="@string/combine_label" />
        </RadioGroup>

    </LinearLayout>`

I tried using taking a ImageView to left of RadioButton, then the issue comes that click on ImageView don't select the radio button.

So is it possible?

Community
  • 1
  • 1
Shirish Herwade
  • 11,461
  • 20
  • 72
  • 111

2 Answers2

1

You can try this solution::

<RadioGroup
            android:id="@+id/radio_group_machine_type"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:src="@drawable/tractor_icon"/>
                <RadioButton
                    android:id="@+id/radio_btn_tractor"
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:paddingLeft="10dp"
                    android:text="@string/tractor_label" />
            </LinearLayout>

            <View
                style="@style/Divider"
                android:layout_height="1dp"
                android:background="@color/black_tint_40" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:src="@drawable/car_icon"/>
                <RadioButton
                    android:id="@+id/radio_btn_combine"
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:text="@string/combine_label" />
            </LinearLayout>
        </RadioGroup>
Nitin Patel
  • 1,605
  • 13
  • 31
  • I have tried this, but the click on ImageView don't select the radio button, so that part of row looks unresponsive. Is it possible to pass the click event of imageview to selected event event of radiobutton? – Shirish Herwade May 17 '17 at 06:44
  • then write code for on clicklistener and set selection to that radio. – Nitin Patel May 17 '17 at 06:47
  • 1
    @ShirishHerwade add click listener to lineralayout that is given for each radiobutton, take the state of radio button and toggle it. – Rahul Ahuja May 17 '17 at 06:48
  • @RahulAhuja yes I also think that I have to go to that work-around, if I don't want to create custom(extended) radionButton :)...... thanks both(Nitin Patel also) of you – Shirish Herwade May 17 '17 at 06:51
  • 1
    For this you have use If..Else statement.Suppose If user click on that ImageView then particular radiobutton ID is checked.And use sharedPreference to get the state of radiobutton – Vishal Senjaliya May 17 '17 at 06:51
1
    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.example.so.gradledemo.MainActivity">

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@android:drawable/ic_menu_camera" />

            <RadioButton
                android:id="@+id/radio0"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="camera" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@android:drawable/alert_dark_frame" />

            <RadioButton
                android:id="@+id/radio01"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true" 
                android:text="frame" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@android:drawable/arrow_down_float" />

            <RadioButton
                android:id="@+id/radio02"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="arrow"/>

        </LinearLayout>

    </RadioGroup>

</LinearLayout>

adjust height and width according to your requirement

Rahul Ahuja
  • 812
  • 10
  • 24