1

I have created one XML with 4 CardView contains 4 RadioButton and other layouts as follow:

fragment_list_of_transport.xml

<?xml version="1.0" encoding="utf-8"?>
<layout>

    <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.v7.widget.CardView
                android:clickable="true"
                android:focusable="true"
                android:id="@+id/parent_card_1"
                android:layout_width="0dp"
                android:background="?attr/selectableItemBackground"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/_5sdp"
                android:layout_marginTop="@dimen/_10sdp"
                android:layout_marginEnd="@dimen/_5sdp"
                app:cardCornerRadius="@dimen/_5sdp"
                app:cardElevation="@dimen/_5sdp"
                app:cardPreventCornerOverlap="true"
                app:cardUseCompatPadding="true"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:id="@+id/image_view_1"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/dimen_transport_list_height"
                        android:adjustViewBounds="true"
                        android:contentDescription="@string/app_name"
                        android:scaleType="fitXY"
                        android:src="@drawable/now_courier"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <RadioButton
                        android:id="@+id/radio_button_1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="16dp"
                        app:layout_constraintBottom_toBottomOf="@+id/image_truck_1"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="@+id/image_truck_1" />

                    <ImageView
                        android:id="@+id/image_truck_1"
                        android:layout_width="36dp"
                        android:layout_height="36dp"
                        android:layout_marginStart="16dp"
                        android:contentDescription="@string/app_name"
                        app:layout_constraintBottom_toBottomOf="@+id/title_text_view_1"
                        app:layout_constraintStart_toEndOf="@+id/radio_button_1"
                        app:layout_constraintTop_toTopOf="@+id/title_text_view_1"
                        app:srcCompat="@drawable/ic_truck" />

                    <TextView
                        android:id="@+id/title_text_view_1"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="16dp"
                        android:layout_marginTop="24dp"
                        android:layout_marginEnd="16dp"
                        android:gravity="center_vertical"
                        android:text="Small express under 10 items"
                        android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toEndOf="@+id/image_truck_1"
                        app:layout_constraintTop_toBottomOf="@+id/image_view_1" />

                    <Button
                        android:layout_width="@dimen/_90sdp"
                        android:layout_height="@dimen/_30sdp"
                        android:layout_marginStart="16dp"
                        android:layout_marginTop="16dp"
                        android:layout_marginEnd="16dp"
                        android:layout_marginBottom="16dp"
                        android:background="@drawable/background_round_colors"
                        android:paddingLeft="@dimen/_10sdp"
                        android:paddingRight="@dimen/_10sdp"
                        android:text="@string/button_next"
                        android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                        android:textColor="@color/white"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintHorizontal_bias="1.0"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toBottomOf="@+id/title_text_view_1"
                        app:layout_constraintVertical_bias="0.0" />

                </android.support.constraint.ConstraintLayout>

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:id="@+id/parent_card_2"
                android:clickable="true"
                android:focusable="true"
                android:background="?attr/selectableItemBackground"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/_5sdp"
                android:layout_marginTop="@dimen/_10sdp"
                android:layout_marginEnd="@dimen/_5sdp"
                app:cardCornerRadius="@dimen/_5sdp"
                app:cardElevation="@dimen/_5sdp"
                app:cardPreventCornerOverlap="true"
                app:cardUseCompatPadding="true"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/parent_card_1">

                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:id="@+id/image_view_2"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/dimen_transport_list_height"
                        android:adjustViewBounds="true"
                        android:contentDescription="@string/app_name"
                        android:scaleType="fitXY"
                        android:src="@drawable/now_courier"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <RadioButton
                        android:id="@+id/radio_button_2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="16dp"
                        app:layout_constraintBottom_toBottomOf="@+id/image_truck_2"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="@+id/image_truck_2" />

                    <ImageView
                        android:id="@+id/image_truck_2"
                        android:layout_width="36dp"
                        android:layout_height="36dp"
                        android:layout_marginStart="16dp"
                        android:contentDescription="@string/app_name"
                        app:layout_constraintBottom_toBottomOf="@+id/title_text_view_2"
                        app:layout_constraintStart_toEndOf="@+id/radio_button_2"
                        app:layout_constraintTop_toTopOf="@+id/title_text_view_2"
                        app:srcCompat="@drawable/ic_truck" />

                    <TextView
                        android:id="@+id/title_text_view_2"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="16dp"
                        android:layout_marginTop="24dp"
                        android:layout_marginEnd="16dp"
                        android:gravity="center_vertical"
                        android:text="Small express under 10 items"
                        android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toEndOf="@+id/image_truck_2"
                        app:layout_constraintTop_toBottomOf="@+id/image_view_2" />

                    <Button
                        android:layout_width="@dimen/_90sdp"
                        android:layout_height="@dimen/_30sdp"
                        android:layout_marginStart="16dp"
                        android:layout_marginTop="16dp"
                        android:layout_marginEnd="16dp"
                        android:layout_marginBottom="16dp"
                        android:background="@drawable/background_round_colors"
                        android:paddingLeft="@dimen/_10sdp"
                        android:paddingRight="@dimen/_10sdp"
                        android:text="@string/button_next"
                        android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                        android:textColor="@color/white"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintHorizontal_bias="1.0"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toBottomOf="@+id/title_text_view_2"
                        app:layout_constraintVertical_bias="0.0" />

                </android.support.constraint.ConstraintLayout>


            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:clickable="true"
                android:focusable="true"
                android:id="@+id/parent_card_3"
                android:layout_width="0dp"
                android:background="?attr/selectableItemBackground"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/_5sdp"
                android:layout_marginTop="@dimen/_10sdp"
                android:layout_marginEnd="@dimen/_5sdp"
                app:cardCornerRadius="@dimen/_5sdp"
                app:cardElevation="@dimen/_5sdp"
                app:cardPreventCornerOverlap="true"
                app:cardUseCompatPadding="true"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/parent_card_2">

                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:id="@+id/image_view_3"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/dimen_transport_list_height"
                        android:adjustViewBounds="true"
                        android:contentDescription="@string/app_name"
                        android:scaleType="fitXY"
                        android:src="@drawable/now_courier"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <RadioButton
                        android:id="@+id/radio_button_3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="16dp"
                        app:layout_constraintBottom_toBottomOf="@+id/image_truck_3"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="@+id/image_truck_3" />

                    <ImageView
                        android:id="@+id/image_truck_3"
                        android:layout_width="36dp"
                        android:layout_height="36dp"
                        android:layout_marginStart="16dp"
                        android:contentDescription="@string/app_name"
                        app:layout_constraintBottom_toBottomOf="@+id/title_text_view_3"
                        app:layout_constraintStart_toEndOf="@+id/radio_button_3"
                        app:layout_constraintTop_toTopOf="@+id/title_text_view_3"
                        app:srcCompat="@drawable/ic_truck" />

                    <TextView
                        android:id="@+id/title_text_view_3"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="16dp"
                        android:layout_marginTop="24dp"
                        android:layout_marginEnd="16dp"
                        android:gravity="center_vertical"
                        android:text="Small express under 10 items"
                        android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toEndOf="@+id/image_truck_3"
                        app:layout_constraintTop_toBottomOf="@+id/image_view_3" />

                    <Button
                        android:layout_width="@dimen/_90sdp"
                        android:layout_height="@dimen/_30sdp"
                        android:layout_marginStart="16dp"
                        android:layout_marginTop="16dp"
                        android:layout_marginEnd="16dp"
                        android:layout_marginBottom="16dp"
                        android:background="@drawable/background_round_colors"
                        android:paddingLeft="@dimen/_10sdp"
                        android:paddingRight="@dimen/_10sdp"
                        android:text="@string/button_next"
                        android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                        android:textColor="@color/white"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintHorizontal_bias="1.0"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toBottomOf="@+id/title_text_view_3"
                        app:layout_constraintVertical_bias="0.0" />

                </android.support.constraint.ConstraintLayout>


            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:clickable="true"
                android:focusable="true"
                android:id="@+id/parent_card_4"
                android:background="?attr/selectableItemBackground"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/_5sdp"
                android:layout_marginTop="@dimen/_10sdp"
                android:layout_marginEnd="@dimen/_5sdp"
                android:layout_marginBottom="@dimen/_10sdp"
                app:cardCornerRadius="@dimen/_5sdp"
                app:cardElevation="@dimen/_5sdp"
                app:cardPreventCornerOverlap="true"
                app:cardUseCompatPadding="true"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/parent_card_3">

                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:id="@+id/image_view_4"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/dimen_transport_list_height"
                        android:adjustViewBounds="true"
                        android:contentDescription="@string/app_name"
                        android:scaleType="fitXY"
                        android:src="@drawable/now_courier"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <RadioButton
                        android:id="@+id/radio_button_4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="16dp"
                        app:layout_constraintBottom_toBottomOf="@+id/image_truck_4"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="@+id/image_truck_4" />

                    <ImageView
                        android:id="@+id/image_truck_4"
                        android:layout_width="36dp"
                        android:layout_height="36dp"
                        android:layout_marginStart="16dp"
                        android:contentDescription="@string/app_name"
                        app:layout_constraintBottom_toBottomOf="@+id/title_text_view_4"
                        app:layout_constraintStart_toEndOf="@+id/radio_button_4"
                        app:layout_constraintTop_toTopOf="@+id/title_text_view_4"
                        app:srcCompat="@drawable/ic_truck" />

                    <TextView
                        android:id="@+id/title_text_view_4"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="16dp"
                        android:layout_marginTop="24dp"
                        android:layout_marginEnd="16dp"
                        android:gravity="center_vertical"
                        android:text="Small express under 10 items"
                        android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toEndOf="@+id/image_truck_4"
                        app:layout_constraintTop_toBottomOf="@+id/image_view_4" />

                    <Button
                        android:layout_width="@dimen/_90sdp"
                        android:layout_height="@dimen/_30sdp"
                        android:layout_marginStart="16dp"
                        android:layout_marginTop="16dp"
                        android:layout_marginEnd="16dp"
                        android:layout_marginBottom="16dp"
                        android:background="@drawable/background_round_colors"
                        android:paddingLeft="@dimen/_10sdp"
                        android:paddingRight="@dimen/_10sdp"
                        android:text="@string/button_next"
                        android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                        android:textColor="@color/white"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintHorizontal_bias="1.0"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toBottomOf="@+id/title_text_view_4"
                        app:layout_constraintVertical_bias="0.0" />

                </android.support.constraint.ConstraintLayout>


            </android.support.v7.widget.CardView>

        </android.support.constraint.ConstraintLayout>
    </android.support.v4.widget.NestedScrollView>
</layout>

Output:

enter image description here

I want to manage RadioButton on click of both CardView and RadioButton , I have used following code:

/**
 * A simple {@link Fragment} subclass.
 */
public class FragmentListTransport extends Fragment implements View.OnClickListener {

    FragmentListOfTransportBinding mBinding;

    public FragmentListTransport() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        mBinding = DataBindingUtil.inflate(inflater, R.layout.fragment_list_of_transport, container, false);

        mBinding.parentCard1.setOnClickListener(this);
        mBinding.parentCard2.setOnClickListener(this);
        mBinding.parentCard3.setOnClickListener(this);
        mBinding.parentCard4.setOnClickListener(this);

        return mBinding.getRoot();
    }


    @Override
    public void onClick(View v) {

        switch (v.getId()) {
            case R.id.parent_card_1:
                mBinding.radioButton1.setChecked(true);
                mBinding.radioButton2.setChecked(false);
                mBinding.radioButton3.setChecked(false);
                mBinding.radioButton4.setChecked(false);
                break;
            case R.id.parent_card_2:
                mBinding.radioButton1.setChecked(false);
                mBinding.radioButton2.setChecked(true);
                mBinding.radioButton3.setChecked(false);
                mBinding.radioButton4.setChecked(false);
                break;
            case R.id.parent_card_3:
                mBinding.radioButton1.setChecked(false);
                mBinding.radioButton2.setChecked(false);
                mBinding.radioButton3.setChecked(true);
                mBinding.radioButton4.setChecked(false);
                break;
            case R.id.parent_card_4:
                mBinding.radioButton1.setChecked(false);
                mBinding.radioButton2.setChecked(false);
                mBinding.radioButton3.setChecked(false);
                mBinding.radioButton4.setChecked(true);
                break;
        }
    }
}

Is there any best way to manage it?

AskNilesh
  • 67,701
  • 16
  • 123
  • 163
Pratik Butani
  • 60,504
  • 58
  • 273
  • 437
  • check this **[Creating Custom Radio Groups & Radio Buttons in Android](https://crosp.net/blog/software-development/mobile/android/creating-custom-radio-groups-radio-buttons-android/)** – AskNilesh Feb 18 '19 at 12:28
  • And another way is use a `recyclerview` and **[make single selection in `recyclerview`](https://stackoverflow.com/a/35060634/7666442)** it will also easy – AskNilesh Feb 18 '19 at 12:31
  • @NileshRathod In `RecyclerView` I think it will be hard to manage as we have to notify adapter everytime when I change radio button. I have fix 4 rows only. – Pratik Butani Feb 18 '19 at 12:33
  • i don't think that check i have added link in above comment about single selection in `recyclerview` – AskNilesh Feb 18 '19 at 12:34
  • and also if you have fixed item than create a custom radio button as per your requirement using link that i have added in my first comment i have used that and it works for me i hope it help u too – AskNilesh Feb 18 '19 at 12:37
  • Thank you @NileshRathod But I got easiest answer which I have posted. – Pratik Butani Feb 18 '19 at 12:58
  • Yup, Even i suggest to use recyclerview. I had same requirement and i use recyclerview instead of creating separate layout for every card. And in future if you get another category you can just add in the array list all the login will remain same. – KhanStan99 Feb 18 '19 at 13:21

1 Answers1

0

I don't easiest way then following (If you have easy way then I will accept it.):

/**
 * A simple {@link Fragment} subclass.
 */
public class FragmentListTransport extends Fragment implements View.OnClickListener {

    FragmentListOfTransportBinding mBinding;

    public FragmentListTransport() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        mBinding = DataBindingUtil.inflate(inflater, R.layout.fragment_list_of_transport, container, false);

        mBinding.parentCard1.setOnClickListener(this);
        mBinding.parentCard2.setOnClickListener(this);
        mBinding.parentCard3.setOnClickListener(this);
        mBinding.parentCard4.setOnClickListener(this);
        mBinding.radioButton1.setOnClickListener(this);
        mBinding.radioButton2.setOnClickListener(this);
        mBinding.radioButton3.setOnClickListener(this);
        mBinding.radioButton4.setOnClickListener(this);

        return mBinding.getRoot();
    }


    @Override
    public void onClick(View v) {

        switch (v.getId()) {
            case R.id.parent_card_1:
            case R.id.radio_button_1:
                clickedRadioButton(mBinding.radioButton1);
                break;
            case R.id.parent_card_2:
            case R.id.radio_button_2:
                clickedRadioButton(mBinding.radioButton2);
                break;
            case R.id.parent_card_3:
            case R.id.radio_button_3:
                clickedRadioButton(mBinding.radioButton3);
                break;
            case R.id.parent_card_4:
            case R.id.radio_button_4:
                clickedRadioButton(mBinding.radioButton4);
                break;
        }
    }

    private void clickedRadioButton(RadioButton radioButton) {
        mBinding.radioButton1.setChecked(false);
        mBinding.radioButton2.setChecked(false);
        mBinding.radioButton3.setChecked(false);
        mBinding.radioButton4.setChecked(false);

        radioButton.setChecked(true);
    }
}

If anyone has easiest way then this, please post answer. I will accept.

Pratik Butani
  • 60,504
  • 58
  • 273
  • 437