Tab radiobutton+drawableTop toggle change text color and picture

Implementation effect: radiobutton uses drawableTop to display pictures (use drawableTop selector and text color change selector in xml) code to set picture size)




Put these 6 pictures (unchecked, checked)

recommend_unselected      recommend_selected

                         

smile_unselected                    smile_selected

                         

video_unselected                    video_selected

                              

Layout of activity main.xml

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        >

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

            <RadioButton
                android:checked="true"
                android:textColor="@drawable/radio_textcolor_selector"
                android:drawableTop="@drawable/recommend_selector"
                android:textSize="21sp"
                android:id="@+id/radio_recommend"
                android:gravity="center"
                android:padding="8dp"
                android:button="@null"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Recommend" />

            <RadioButton
                android:textColor="@drawable/radio_textcolor_selector"
                android:drawableTop="@drawable/smile_selector"
                android:gravity="center"
                android:padding="8dp"
                android:button="@null"
                android:textSize="21sp"
                android:id="@+id/radio_smile"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Duan Zi" />

            <RadioButton
                android:drawableTop="@drawableideo_selector"
                android:textColor="@drawable/radio_textcolor_selector"
                android:gravity="center"
                android:padding="8dp"
                android:button="@null"
                android:textSize="21sp"
                android:id="@+id/radio_video"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="video" />

        </RadioGroup>
    </LinearLayout>
Two selectors in layout, one for changing text color, and the other for changing picture in drawableTop

The selector of text color change, radio ﹣ textcolor ﹣ seletor.xml, (under the directory of res drawable new drawable resource file)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="false" android:color="@color/radio_unselect"/>
    <item android:state_checked="true" android:color="@color/radio_select"/>
    <item android:color="@color/radio_unselect"/>

</selector>
There are three selectors for drawableTop picture change, because there are three pictures (under the res drawable new drawable resource file directory)
The first recommended selector, recommended menu selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:drawable="@drawable/recommend_selected"/>
    <item android:state_checked="false" android:drawable="@drawable/recommend_unselected"/>
    <item android:drawable="@drawable/recommend_unselected"/>

</selector>
Selector for the second segment smile_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:drawable="@drawable/smile_selected"/>
    <item android:state_checked="false" android:drawable="@drawable/smile_unselected"/>
    <item android:drawable="@drawable/smile_unselected"/>

</selector>
Selector for the third video video video [selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:drawable="@drawable/video_selected"/>
    <item android:state_checked="false" android:drawable="@drawable/video_unselected"/>
    <item android:drawable="@drawable/video_unselected"/>

</selector>
After the id is found through buttonknife in the code, set the initial value of drawableTop, which is recommended by default,

 //drawabletop of radiobutton at the bottom of the home page sets the picture size
        //The initial values give these pictures
        //Recommend
       /* Drawable drawable_recommend_unselected = getResources().getDrawable(R.drawable.recommend_unselected);
        drawable_recommend_unselected.setBounds(0, 0, 60, 60);//60,60 Width and height
        radioRecommend.setCompoundDrawables(null, drawable_recommend_unselected, null, null);*/
        Drawable drawable_recommend_selected = getResources().getDrawable(R.drawable.recommend_selected);
        drawable_recommend_selected.setBounds(0, 0, 60, 60);//60, 60 is width and height
        radioRecommend.setCompoundDrawables(null, drawable_recommend_selected, null, null);

        //Duan Zi
        Drawable drawable_smile_unselected = getResources().getDrawable(R.drawable.smile_unselected);
        drawable_smile_unselected.setBounds(0, 0, 60, 60);//60, 60 is width and height
        radioSmile.setCompoundDrawables(null, drawable_smile_unselected, null, null);
        //video
        Drawable drawable_video_unselected = getResources().getDrawable(R.drawable.video_unselected);
        drawable_video_unselected.setBounds(0, 0, 60, 60);//60, 60 is width and height
        radioVideo.setCompoundDrawables(null, drawable_video_unselected, null, null);
The selection status of radiobutton changes, so does the drawableTop picture (when one of the RadioButtons is selected, the other two pictures are replaced with gray ones)

//Change of selection switch in radio group
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                switch (i){
                    case R.id.radio_recommend://Recommend button, select recommend and gray other
                        Drawable drawable_recommend_selected = getResources().getDrawable(R.drawable.recommend_selected);
                        drawable_recommend_selected.setBounds(0, 0, 60, 60);//60, 60 is width and height
                        radioRecommend.setCompoundDrawables(null, drawable_recommend_selected, null, null);
                       //Gray the other two
                        Drawable drawable_smile_unselected = getResources().getDrawable(R.drawable.smile_unselected);
                        drawable_smile_unselected.setBounds(0, 0, 60, 60);//60, 60 is width and height
                        radioSmile.setCompoundDrawables(null, drawable_smile_unselected, null, null);

                        Drawable drawable_video_unselected = getResources().getDrawable(R.drawable.video_unselected);
                        drawable_video_unselected.setBounds(0, 0, 60, 60);//60, 60 is width and height
                        radioVideo.setCompoundDrawables(null, drawable_video_unselected, null, null);

                        break;
                    case R.id.radio_smile://Segment button, select the segment and gray the rest
                        Drawable drawable_smile_selected = getResources().getDrawable(R.drawable.smile_selected);
                        drawable_smile_selected.setBounds(0, 0, 60, 60);//60, 60 is width and height
                        radioSmile.setCompoundDrawables(null, drawable_smile_selected, null, null);
                         //Gray the other two
                        Drawable drawable_recommend_unselected = getResources().getDrawable(R.drawable.recommend_unselected);
                        drawable_recommend_unselected.setBounds(0, 0, 60, 60);//60, 60 is width and height
                        radioRecommend.setCompoundDrawables(null, drawable_recommend_unselected, null, null);

                        Drawable drawable_video_unselected1 = getResources().getDrawable(R.drawable.video_unselected);
                        drawable_video_unselected1.setBounds(0, 0, 60, 60);//60, 60 is width and height
                        radioVideo.setCompoundDrawables(null, drawable_video_unselected1, null, null);

                        break;
                    case R.id.radio_video://Video button, select the video and gray the others
                        Drawable drawable_video_selected= getResources().getDrawable(R.drawable.video_selected);
                        drawable_video_selected.setBounds(0, 0, 60, 60);//60, 60 is width and height
                        radioVideo.setCompoundDrawables(null, drawable_video_selected, null, null);
                        //Gray the other two
                        Drawable drawable_recommend_unselected1 = getResources().getDrawable(R.drawable.recommend_unselected);
                        drawable_recommend_unselected1.setBounds(0, 0, 60, 60);//60, 60 is width and height
                        radioRecommend.setCompoundDrawables(null, drawable_recommend_unselected1, null, null);
                        Drawable drawable_smile_unselected1 = getResources().getDrawable(R.drawable.smile_unselected);
                        drawable_smile_unselected1.setBounds(0, 0, 60, 60);//60, 60 is width and height
                        radioSmile.setCompoundDrawables(null, drawable_smile_unselected1, null, null);

                        break;
                }
            }
        });






Tags: Android xml encoding REST

Posted on Sat, 02 May 2020 03:36:19 -0700 by weknowtheworld