Android view is not the same distance to both sides of the layout on some phones

Question

I have a problem. I use the code to achieve a layout like the image showing, but on some phones, the part A is not long as part B.

below is code and screen capture image.

How to solve this problem?

 <FrameLayout 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:layout_gravity="top|left"
    android:orientation="vertical" >

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="@dimen/tab_padding_bottom"
        android:background="@color/frame_bg"
        android:layout_gravity="top|left" >
    </FrameLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/tab_padding_bottom"
        android:background="@drawable/tabbar_bg"
        android:layout_gravity="bottom"
         >

        <RadioGroup
            android:id="@+id/main_tab_group"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="5dp"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/tab_message"
                style="@style/tab_button_bottom"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:drawableTop="@drawable/message_tab_selector"
                android:text="@string/tab_message" 
                android:shadowDy="1"
                android:shadowColor="#ffffff"
            />

            <RadioButton
                android:id="@+id/tab_contact"
                style="@style/tab_button_bottom"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:drawableTop="@drawable/friend_tab_selector"
                android:text="@string/tab_contact" 
                android:shadowDy="1"
                android:shadowColor="#ffffff"
                />

            <RadioButton
                android:id="@+id/tab_find"
                style="@style/tab_button_bottom"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:drawableTop="@drawable/find_tab_selector"
                android:text="@string/tab_find"
                android:shadowDy="1"
                android:shadowColor="#ffffff"
                 />
        </RadioGroup>

        <TextView
            android:id="@+id/unread_num_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="62dp"
            android:layout_marginTop="7dp"
            android:background="@drawable/unread_count"
            android:gravity="center"
            android:textColor="#ffffffff"
            android:textSize="12sp"
            android:visibility="visible" 
            android:paddingLeft="6dp"
            android:paddingRight="6dp"/>
    </RelativeLayout>

</FrameLayout>

Hi, I have a problem. I use the code to achieve a layout like the image showing, but on some phones, the part A is not long as part B.

below is code and screen capture image.

How to solve this problem?

Answer 1

Check this below XML, just for the reference. You need to change somethings like ImageButton to Button etc, but it will solve your problem.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:background="#ffff" >

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

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center" >

                <ImageButton
                    android:id="@+id/image_agenda"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:src="@drawable/ic_launcher" />
            </LinearLayout>



            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center" >

                <ImageButton
                    android:id="@+id/image_month"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:src="@drawable/ic_launcher" />
            </LinearLayout>


            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center" >

                <ImageButton
                    android:id="@+id/image_day"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:src="@drawable/ic_launcher" />
            </LinearLayout>
        </LinearLayout>

</LinearLayout>

Answer 2

http://developer.android.com/guide/topics/ui/layout/linear.html

Try to use layout_weight. layout_weight defines how much space the control must obtain respectively to other controls.