Aug 15, 2013

Implement horizontal and scrollable Radio Button Group

This example implement RadioButton Group horizontally and scrollable.

horizontal and scrollable Radio Button Group
horizontal and scrollable Radio Button Group


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android-coding.blogspot.com" />

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

        <RadioButton
            android:id="@+id/normalradiobutton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="normal option 1" />

        <RadioButton
            android:id="@+id/normalradiobutton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="normal option 2" />
    </RadioGroup>
    
    <RadioGroup
        android:id="@+id/radiogroup2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/radiobutton1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="option 1" />

        <RadioButton
            android:id="@+id/radiobutton2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="option 2" />
    </RadioGroup>

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

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

            <RadioButton
                android:id="@+id/radiobuttona"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="option A" />

            <RadioButton
                android:id="@+id/radiobuttonb"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="option B" />

            <RadioButton
                android:id="@+id/radiobuttonc"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="option C" />
            <RadioButton
                android:id="@+id/radiobuttond"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="option D" />

            <RadioButton
                android:id="@+id/radiobuttone"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="option E" />
        </RadioGroup>
    </HorizontalScrollView>

</LinearLayout>


In the example, <RadioGroup> with id=radiogroup_vertical is default vertical RadioGroup. <RadioGroup> with id=radiogroup2 is horizontal RadioGroup with android:orientation="horizontal". <RadioGroup> with id=radiogroup3 is another horizontal RadioGroup, but with 5 option expect more space than device's screen width. So place it in a <HorizontalScrollView> to make it svrollable.

No comments:

Post a Comment

Infolinks In Text Ads