Android ActionBar(TopBar) – How to create Switch and Radio Buttons

Android ActionBar(TopBar) – How to create Switch and Radio Buttons

I this article I’ll show you how to customize Android top menu by adding widgets like Switch and RadioButton group. I’ll also show you how to handle actions associated with them.

Andorid Top menu : Radio Group and SwitchCompat

1. Creating Menu with SwitchCompat

The solution for the title problem requires to prepare a custom layout file main/res/layout/switch_layout.xml with the following content:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <android.support.v7.widget.SwitchCompat
        android:id="@+id/switchOnOff"
        android:checked="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />

</RelativeLayout>

Then you have to create menu layout file and add menu item into the menu. Create main/res/layout/top_menu.xml file with the following content:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/switchOnOffItem"
        android:title=""
        android:actionLayout="@layout/switch_layout"
        app:showAsAction="ifRoom"/>
</menu>

The last step is to inflate menu into the layout. Add the following method into the MainActivity.java file.

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.top_menu, menu);
        MenuItem switchOnOffItem = menu.findItem(R.id.switchOnOffItem);
        switchOnOffItem.setActionView(R.layout.switch_layout);
        return true;
    }

1.2 Actions handling

Add the following code into the onCreateOptionsMenu method

@Override
public boolean onCreateOptionsMenu(Menu menu) {
...
SwitchCompat switchOnOff = switchOnOffItem.getActionView().findViewById(R.id.switchOnOff);
        switchOnOff.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(final CompoundButton buttonView, boolean isChecked) {
               // DO ACTION HERE
            }
        });
...
}

2. Creating Menu with RadioGroup and RadioButtons

Prepare multi_switch_layout.xml file with the following content:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <RadioGroup
        android:id="@+id/brushSize"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/sizeS"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/size_s" />

        <RadioButton
            android:id="@+id/sizeM"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:checked="true"
            android:text="@string/size_m" />

        <RadioButton
            android:id="@+id/sizeB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/size_b" />
    </RadioGroup>
</RelativeLayout>

Then prepare tom_menu file with menu item like below:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/brushSizeItem"
        android:title=""
        android:actionLayout="@layout/multi_switch_layout"
        app:showAsAction="always"/>
</menu>

The last step to do is to inflate menu into the layout. Add the following method into the MainActivity.java file.

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.top_menu, menu);

        MenuItem brushSizeItem = menu.findItem(R.id.brushSizeItem);
        brushSizeItem.setActionView(R.layout.multi_switch_layout);
        return true;
    }

2.1 Actions handling

Add the following code into the onCreateOptionsMenu method

@Override
public boolean onCreateOptionsMenu(Menu menu) {
...
RadioGroup brushSizeGroup = brushSizeItem.getActionView().findViewById(R.id.brushSize);
        brushSizeGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.sizeS:
                        //ACTION 1
                        break;
                    case R.id.sizeM:
                        //ACTION 2
                        break;
                    case R.id.sizeB:
                        //ACTION 3
                        break;
                }
            }
        });
...
}

If you think this post is valuable, please leave me +1 or just share it.
Your action helps me to reach a wider audience.
Thank You in advance.

Leave a Reply

avatar
  Subscribe  
Notify of
Close Menu