androidandroid-layoutandroid-xmlandroid-gui

how to manage the spaces between buttons in android


i'm trying to make a dial pad in android with circle buttons.Just like in IOS 7.This is the link where you can see the dial pad in IOS 7.

http://www.google.com.pk/search?q=ios7+dial+pad&biw=1277&bih=524&source=lnms&tbm=isch&sa=X&ei=623sVOfCC4zraOfhgYAK&ved=0CAYQ_AUoAQ#imgdii=_&imgrc=dYMGMoj954EdzM%253A%3B4hEenGnCMC6kYM%3Bhttp%253A%252F%252Fwww.tekshanghai.com%252Fwp-content%252Fuploads%252F2013%252F06%252Fdial-pad.png%3Bhttp%253A%252F%252Fwww.tekshanghai.com%252Fpromotion-free-update-to-ios-7%252F%3B640%3B1136   

The layout is complete but the problem i'm facing is different mobile screen size.when i run my app in other mobile the space between the buttons is extend or you can say that space is increases. I also used the android:layout_weight to adjust the button automatically with screen size but it changes the shape of the button.The circle button change his shape into oval. help me to solve this problem. Here is the layout

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dialpad"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#fcfbdf"
    android:gravity="left" >

    <TableLayout
      android:id="@+id/tableLayout1"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_below="@+id/textView11"  
      android:background="#fcfbdf" >

        <TableRow
           android:id="@+id/dial_input_Row"
           android:layout_width="fill_parent"
           android:layout_height="0dp"
           android:layout_marginTop="1dp"
           android:layout_weight="1" >
 <EditText
           android:id="@+id/dial_input_edit_text" 
           android:layout_width="1dp"
           android:layout_height="55dp"
           android:layout_gravity="left"
           android:layout_weight="1"
           android:ems="11"
           android:paddingLeft="5dp" 
           android:paddingRight="5dp"   
           android:textStyle="normal" 
           android:textSize="25dp"                    
           android:inputType="text" 
           android:background="@drawable/subtitle1" 
           android:textColor="#556854">
</TableRow>
 </TableLayout>

<LinearLayout
                android:layout_width="fill_parent" 
                android:layout_height="fill_parent"
                android:layout_below="@+id/tableLayout1"
                android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="0dp" 
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="vertical" >


    <LinearLayout
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_marginLeft="12dp"
        android:orientation="vertical" >


        <Button
            android:id="@+id/button1" 
            android:layout_width="71dp"
            android:layout_height="70dp"
            android:background="@drawable/selectorcircle"
            android:paddingBottom="15dp"
            android:text="1"
            android:textColor="@drawable/text_selector"
            android:textSize="13dp"
            android:textStyle="bold"
             />

        <Button
            android:id="@+id/button4"
            android:layout_width="71dp"
            android:layout_height="70dp"

            android:background="@drawable/selectorcircle"
            android:textColor="@drawable/text_selector"
            android:textStyle="bold"
            android:text="4\nGHI" 
            android:textSize="13dp" />

        <Button
                android:id="@+id/button7"
                android:layout_width="71dp"
                android:layout_height="70dp"

                android:background="@drawable/selectorcircle"
                android:textColor="@drawable/text_selector"
                android:textStyle="bold"
                android:text="7\nPQRS" 
                android:textSize="13dp" />

        <Button
            android:id="@+id/button10"
            android:layout_width="71dp"
            android:layout_height="70dp"
            android:textColor="@drawable/text_selector"
            android:textStyle="bold"
            android:background="@drawable/selectorcircle"
            android:text="*" 
            android:textSize="18dp" />
        </LinearLayout>
    </LinearLayout>

  <LinearLayout
        android:layout_width="0dp"  android:layout_marginLeft="20dp"
        android:layout_height="fill_parent"  android:layout_gravity="center"
        android:layout_weight="1"
        android:orientation="vertical" >

        <Button
            android:id="@+id/button2" 
            android:layout_width="71dp"
            android:layout_height="70dp"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/selectorcircle"
            android:textColor="@drawable/text_selector"
            android:textStyle="bold"
            android:text="2\nABC" 
            android:textSize="13dp" 

          />

        <Button
            android:id="@+id/button5"
            android:layout_width="71dp"
            android:layout_height="70dp"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/selectorcircle"
            android:textColor="@drawable/text_selector"
            android:textStyle="bold"
            android:text="5\nJKL" 
            android:textSize="13dp" />

        <Button
            android:id="@+id/button8"
            android:layout_width="71dp"
            android:layout_height="70dp"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/selectorcircle"
            android:textColor="@drawable/text_selector"
            android:textStyle="bold"
            android:text="8\nTUV" 
            android:textSize="13dp" />

        <Button
            android:id="@+id/button11"
            android:layout_width="71dp"
            android:layout_height="70dp"
            android:textStyle="bold"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/selectorcircle"
            android:textColor="@drawable/text_selector"
            android:text="0" 
            android:textSize="15dp" />
    </LinearLayout> 
    </LinearLayout>   
   </RelativeLayout>

selectorCircle XML

<?xml version="1.0" encoding="utf-8"?>


<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="oval">

  <stroke android:width="2dp" android:color="#eee460" />

  <gradient

        android:startColor="#bcbcbc"
        android:endColor="#afafaf"
        android:angle="360"
     />

</shape>

Solution

  • Try this

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">
        <LinearLayout 
            android:orientation="horizontal" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"/>
        </LinearLayout>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"/>
        </LinearLayout>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"/>
        </LinearLayout>
    
    </LinearLayout>
    

    You can use button instead of imageview.