Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to align Radio button at the center of the screen

Tags:

android

tabs

I am using Radio buttons as tab in my application.

I have loaded images for it, but they are aligning towards left side. how to make them align at center.

enter image description here

This is how my XML file looks

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@android:id/tabhost" 
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">

  <LinearLayout android:orientation="vertical"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent">

    <FrameLayout android:id="@android:id/tabcontent"
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content"
      android:layout_weight="1" 
      android:padding="20dip" 
      android:background="#fff"/>

    <RadioGroup android:layout_width="fill_parent"
      android:layout_height="wrap_content" 
      android:orientation="horizontal"
      android:checkedButton="@+id/allcontacts"
      android:id="@+id/contactgroup">


      <RadioButton android:id="@+id/allcontacts" 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center" 
      android:layout_weight="1"/>

      <RadioButton
          android:id="@+id/categories"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          android:layout_weight="1"/>

      <RadioButton android:id="@+id/favourites" 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center" 
      android:layout_weight="1" />

    </RadioGroup>

    <TabWidget android:id="@android:id/tabs"
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content"
      android:layout_weight="0" android:visibility="gone" />
  </LinearLayout>
</TabHost>
like image 825
Naruto Avatar asked May 05 '12 17:05

Naruto


People also ask

How do I align a radio button horizontally?

To make a horizontal radio button set, add the data-type="horizontal" to the fieldset . The framework will float the labels so they sit side-by-side on a line, hide the radio button icons and only round the left and right edges of the group.

How do I align radio buttons in Adobe?

Using the Select Object tool, select a row of radio buttons, right-click one of them and then select Align - Top (or Bottom). Do this to each row. Then select a column and select Align - Left (or Right).


1 Answers

I had similar issue before, I figure it out, so I try to explain it for you.

runtime screenshot

above is my app screenshot, as you can see, I also did the same, I had a menu align screen bottom, they're a RadioGroup and three RadionButton inside it, I want each menu icon align center for RadionButton, the shadow image(9-patch) shown together when Button check event trigger.
At first, I used android:button attribute refers to a drawable selector, the selector has two drawable state between check and uncheck, but I cannot align the menu icon center and make the shadow image fill up by RadionButton, they looks like it :

enter image description here

I tried included android:layout_gravity=center and android:gravity=center with the RadionButton, but it also didn't got effect. after that, my workmate told me the android:button attribute is refers to foreground rather than background, then I use android:background instead of android:button and it worked, below is my code :

<RadioGroup android:layout_width="match_parent" android:layout_height="60dp"
        android:orientation="horizontal" android:background="@drawable/menu_bg">

    <RadioButton android:layout_width="0dp" android:layout_height="match_parent"
                 android:layout_weight="1" android:button="@null" android:checked="true"
                 android:background="@drawable/menu_item_selector" />

    <RadioButton android:layout_width="0dp" android:layout_height="match_parent"
                 android:layout_weight="1" android:button="@null"
                 android:background="@drawable/menu_item_selector" />

    <RadioButton android:layout_width="0dp" android:layout_height="match_parent"
                 android:layout_weight="1" android:button="@null"
                 android:background="@drawable/menu_item_selector" />

</RadioGroup>

the menu_item_selector is important thing because it had gravity setting :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/menu_item_layer_list" android:state_checked="true" />
    <item android:drawable="@drawable/menu_item_layer_list" android:state_pressed="true" />
    <item>
        <bitmap android:src="@drawable/menu_item_off" android:gravity="center" />
    </item>
</selector>

cause I had two images to draw when user turn Button state is checked, the shadow background image and icon active state image, so I used layer-list to implement it, the active icon also had gravity setting, below is menu_item_layer_list code :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/menu_bg_pressed" />
    <item>
        <bitmap android:src="@drawable/menu_item_on" android:gravity="center" />
    </item>
</layer-list>

I don't know that solution was perfect or not, because I always implement it as a view and draw myself. But I think Android SDK supplied more convenient component let's finish work with xml configuration, we should be learn and use it.

like image 125
VinceStyling Avatar answered Sep 23 '22 18:09

VinceStyling