how to manage the spaces between buttons in android

Question

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>

score 0 · Answer 1 · answered Feb 24 '15 at 12:54

Use a GridLayoutManager ( https://developer.android.com/reference/android/support/v7/widget/GridLayoutManager.html ) and set it to span into 3 columns

You will need to use a RecyclerView for this.

You can also use a GridView ( http://developer.android.com/reference/android/widget/GridView.html ) and adjust the stretch mode.

Also, the reason the button changes size is because using the layout_weight, to expand you layout sizes and since the shape is oval, it will call an oval shape to be created. For this, you can create a custom View and override the onMeasure to set both height and width of the view to be equal.

give me some other solution without changing layout – user3835770 Feb 25 '15 at 06:07 — user3835770, Feb 25 '15 at 06:07

score 0 · Accepted Answer · answered Feb 24 '15 at 12:59

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.

how to manage the spaces between buttons in android

2 Answers2