Circular Buttons in LinearLayout:Vertical

Question

I have created my own drawable object, which I am setting to be the background of an image button. (described here)

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <solid android:color="#A7BF1D"/> </shape>

I want these to be spaced equally vertically down the side of the screen, so I want to use android:layout_weight to achieve this. (Described here)

<LinearLayout 
        android:id="@+id/left_bar"
        android:orientation="vertical"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent"
        android:layout_weight="8">
        <Button
            android:id="@+id/btnCall"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="1"
            android:background="@drawable/btn_circle"            
            android:text="Call"
            android:textSize="12sp" />
       <Space
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="1"></Space>
        <Button
            android:id="@+id/btnSpeak"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="1"
            android:background="@drawable/btn_circle"
            android:text="Speak"
            android:textSize="12sp" />
       <Space
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="1"></Space>
        <Button
            android:id="@+id/btnRecordedMessage"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="1"
            android:background="@drawable/btn_circle"
            android:text="Recorded Message"
            android:textSize="12sp" />
        <Space
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="1"></Space>
        <Button
            android:id="@+id/btnSelectAll"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="1"
            android:background="@drawable/btn_circle"
            android:text="Select All Units"
            android:textSize="12sp" />
       <Space
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="1"></Space>
        <Button
            android:id="@+id/btnDeselectUnits"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="1"
            android:background="@drawable/btn_circle"
            android:text="Deselect Units"
            android:textSize="12sp" />
        <Space
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="1"></Space>
        <Button
            android:id="@+id/btnAnswer"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="1"
            android:background="@drawable/btn_circle"
            android:text="Answer"
            android:textSize="12sp" />
    </LinearLayout>

What ever I do I cannot seem to have them spaced out equally on any screen size let alone scaled for each of them. I think my issue is that I have to specify height & width to form the circle, but as soon as I do it messes with the layout_weight as its been (for want of a better term) 'hardcoded'.

I assume it is possible to have a vertical layout of 6 circular buttons, spaced equally down the screen but I cannot work out how? I have also tried without the <Space>, and added padding to the <Button> instead.

enter image description here

Do you want to have a circle for those buttons no matter the screen dimensions? — user, Jul 30 '13 at 13:44

score 0 · Answer 1 · answered Jul 24 '13 at 01:20

0

Well. For one, all your layout_widths in the LinearLayouts children are set to match_parent. After the first child renders, then there won't be room for anything else because it will take up all the space.

Secondly, I would highly suggest against using all the tags. Instead I would just set padding (or margins) for your buttons.

answered Jul 24 '13 at 01:20

Frank Sposaro

8,511
4
43
64

There doesn't need to be room either side of the 'View.Button' objects, I would like them to fill the width of the LinearLayout that contains them, and for the height to be equal that width so that the @drawable/btn_circle is circular, rather than the oval I get at the moment. Only way to make them a circle is by setting height and width, but then they bunch in the top of the view and are not spaced evenly down the length of it. – Stephen Murby Jul 24 '13 at 01:28
1

The orientation is vertical so the width is irrelevant – codeMagic Jul 24 '13 at 01:30
@codeMagic. Thanks. I missed that and that changes everything. – Frank Sposaro Jul 24 '13 at 15:48

score 0 · Answer 2 · answered Jul 24 '13 at 01:21

0

If I understand correctly, you want the Views inside the LinearLayout to be spaced with weight. If so, then android:layout_weight should be on each View and not the LinearLayout. The LinearLayout would have the android:weightSum and each View would have the weight of say 1. But you don't even need weightSum if you want them all spaced evenly.

<LinearLayout 
    android:id="@+id/left_bar"
    android:orientation="vertical"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:layout_weight="8">  // Try removing this and add weights to your views

I don't know if this will fix your problem but I would start with that

answered Jul 24 '13 at 01:21

codeMagic

44,549
13
77
93

android:layout_weight="8" That line is there to define the width of the LinearLayout I have a left_bar, middle ImageMap, and right_bar. Basically the final view is a Map object in the middle, with controls on either side. Its for a management app, and the controls are not for android components (zooming scrolling etc..) but for the devices the app controls. – Stephen Murby Jul 24 '13 at 01:24
So this `LinearLayout` is inside another? If so then its height or width should be 0dp depending on the orientation of the parent `LinearLayout – codeMagic Jul 24 '13 at 01:27
It is indeed, it is in another LinearLayout android:orientation="horizontal". This has 3 child views, the left/right bar and a map. – Stephen Murby Jul 24 '13 at 01:30
Then its `width` should be 0dp. Also, do the widths of all the buttons have a height of 0dp? – codeMagic Jul 24 '13 at 01:32
Currently all 3 children in the horizontal layout are set to fill_parent on height and width. The weight is making them the correct width. – Stephen Murby Jul 24 '13 at 01:32
The height in the `LinearLayout` you show here is fine but the width should be 0dp if using weight. I don't understand how giving them a 0 width makes them the right size but I must be missing something – codeMagic Jul 24 '13 at 01:34
Yes all buttons are the same, bar the android:text property. I have changed so many things since I added the components on, seeing posts on 'S.O' trying to resolve what I thought would be an easy layout to mock up. – Stephen Murby Jul 24 '13 at 01:35
I have added an Image to try and better show what I have. Currently the left seemingly empty bar is where the buttons have been defined. – Stephen Murby Jul 24 '13 at 01:38
What happens if you do give them a width of say `wrap_content`? One of us is misunderstanding. What I was saying is your `LinearLayout` you show should have a width of 0dp since it is weighted inside of a layout with horizontal orientation – codeMagic Jul 24 '13 at 01:44
I set each View in the horizontal layout to have a width of 0dp, and nothing is visible on screen at all now. – Stephen Murby Jul 24 '13 at 01:48
Correct, everything in the horizontal layout now has a width 0. – Stephen Murby Jul 24 '13 at 08:23

score 0 · Answer 3 · answered Sep 13 '13 at 18:27

I had the same problem. I had to have 4 circular buttons in a horizontal LinearLayout equally spaced.

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginBottom="10dp" >

        <Button
            android:id="@+id/btn1"
            style="@style/BotonCircular"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"
            android:background="@drawable/boton_circulo_negro" />
        <View 
            android:layout_weight="0.033"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            />

        <Button
            android:id="@+id/btn2"
            style="@style/BotonCircular"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"
            android:background="@drawable/boton_circulo_negro" />
        <View 
            android:layout_weight="0.033"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            />
        <Button
            android:id="@+id/btn3"
            style="@style/BotonCircular"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"
            android:background="@drawable/boton_circulo_negro" />
        <View 
            android:layout_weight="0.033"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            />
        <Button
            android:id="@+id/btn4"
            style="@style/BotonCircular"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"
            android:background="@drawable/boton_circulo_negro" />

    </LinearLayout>

And to make them all of the same height I placed this code inside onCreate on my Activity

final Button btn1 = (Button) findViewById(R.id.btn1);
final Button btn2 = (Button) findViewById(R.id.btn2);
final Button btn3 = (Button) findViewById(R.id.btn3);
final Button btn4 = (Button) findViewById(R.id.btn4);
ViewTreeObserver vto = btn1.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {

    @Override
    public void onGlobalLayout() {
        btn1.setHeight(btn1.getWidth()); 
        btn2.setHeight(btn1.getWidth());    
        btn3.setHeight(btn1.getWidth());
        btn4.setHeight(btn1.getWidth());
    }
});

Hope this helps someone with the same problem.

Circular Buttons in LinearLayout:Vertical

3 Answers3

Linked