How to draw image at center of Radio button

Question

I was looking through the example posted in http://bakhtiyor.com/2009/10/iphonish-tabs/, actually here they have placed Radio button as replacement for Tabview.

But the problem is, i am unable to set the image to the centre. Its always getting aligned to left.

Here is the screenshot. I want my view should look like this but instead i want image to be in center. enter image description here

This is how my layout 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"/>

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


      <RadioButton android:id="@+id/allcontacts" 
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:orientation="vertical"
      android:background="@drawable/button_radio"/>


      <RadioButton
          android:id="@+id/categories"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:background="@drawable/button_radio"
          android:orientation="vertical"
          android:layout_gravity="center|right"/>

      <RadioButton android:id="@+id/favourites" 
   android:layout_width="fill_parent"
          android:layout_height="wrap_content"

    android:gravity="center"
    android:orientation="vertical"
      android:layout_weight="1" 
      android:background="@drawable/button_radio"/>

    </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>

Please advice me

UPDATED image after using Default tab widget enter image description here

Is it possible to customize like above radio button in default tabview.?

Do you want to know how to have a custom image in the center of a radio button or are you asking how to center TabView? The question is unclear to me. — TryTryAgain, May 06 '12 at 05:09

score 3 · Accepted Answer · edited May 23 '17 at 11:48

3

Not actiually making the image centered, but you could make it appear that way... You could modify the image to have blank space on the left and cut off immediately to the right of the image.

EDIT

I don't know if you've seen any of these, but you made me curious so I went looking and found several links that might be helpful towards your ultimate goal of tabs on the bottom:

Niko's Blog

SO Question Answer

Another SO Question Answer

Good Luck!

Edit 2

Ok, found it. You will have to extend a new class from RadioButton and override onDraw(), then create an attrs.xml file you need to put in res/values so the code can get at platform-defined attributes.

Specific code here

edited May 23 '17 at 11:48

Community

1
1

answered May 06 '12 at 06:00

Barak

16,318
9
52
84

Barak, thanks for your reply. Yes i can do that but is there any other option apart from tat? – Naruto May 06 '12 at 06:05
That I know of? Easily? No. You could probably dive into the android source and create your own ImageButton as suggested by Longerian, but every time I've tried things like that it has ended in tears. Actually, thinking about it, why radio buttons? Why not regular buttons? – Barak May 06 '12 at 06:12
Actually i want to give tabbed interface for user at the bottom as i showed in the above image, but Default tabed interface is difficult to customize. I read some where that radio buttons makes it simple. So i m trying with them. pls hv a look at this once http://blog.mokriya.com/post/15342694933/custom-tabs-in-android. do you know any alternatives? – Naruto May 06 '12 at 06:37
I can envision a way to do that with regular (Image) buttons. That might get rid of the RadioButton alignment issue. I went looking around and found some links to other implementations of bottom tabs that you may or may not have seen. I added them to my answer. – Barak May 06 '12 at 07:03
Barak, thaks for your help. I'm really happy for your answers. I have posted how the tabs look by created using default tab environment.But last doubt, is it possible to customize the default tab look to the above posted RADIO button images. (i.e first image). – Naruto May 07 '12 at 08:27
Thanks Barak, thanks lot. I guess its last option.. i will see and will ask you if i need any help... Thank you so much for helping – Naruto May 07 '12 at 13:27

score 0 · Answer 2 · answered May 06 '12 at 05:02

0

you can define your own ImageButton which extends CompoundButton. See the RadioButton and CompoundButton's source to learn how to do it.

answered May 06 '12 at 05:02

Longerian

723
5
13

How to draw image at center of Radio button

2 Answers2