sorry for this newbie question. I have googled a while and cannot find an answer.
I have 10 buttons in a row. This looks ok on my tablet. But when I start the app on my phone only the first 5 buttons are shown, the rest is cut off.
If there is not enough space the remaining buttons should be displayed in a second row. How can I do that?
Thanks.
<LinearLayout 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:orientation="horizontal"
tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10"
/>
Interesting! take scrollview parents of LinearLayout#
<ScrollView...
<LinearLayout...//android:orientation="horizontal"
<Button... // your all buttons
</Button>
</LinearLayout>
</ScrollView>
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10"
/>
</LinearLayout>
</ScrollView>
You have a few options:
Place all your buttons into a GridView - this will work across any screen size and is relatively straightforward and neat.
Put them into a ScrollView. This is quite popular but a bit annoying for the user as it can lead to mis-clicks and they may not realise you can scroll the buttons.
If you only ever want exactly 1 or 2 rows depending on screen size, put each row of buttons into a separate layout file. Then create 2 additoinal screen-dependent layouts containing LinearLayout which include both rows, but give the portrait version a vertical orientation. So when that layout is loaded, you get two rows.
Work out if you can present the buttons in a different way - maybe using just icons, or combine them into dropdowns.
// try this way
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="horizontal"
tools:context=".MainActivity">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="4"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="5"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="7"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="8"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="9"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.2"
android:text="10"/>
</LinearLayout>
Related
A picture will help understand what I'm talking about:
I have three horizontal LinearLayouts, each of which contains six Buttons:
On the first row, each button has its layout_width set to "0dp" and it's layout_weight set to "1", except for button 4 where it's "2". The result is pretty much exactly what I'd expect.
The second row is identical to the first, except that all of the layout_width values are set to "wrap_content". My expectation was that each button would be assigned a width according to how much space it needs, and then the leftover space would be distributed equally among them, giving extra space to button 4. However, button 4 is actually smaller than its peers. Why is that happening?
In the third row, I deleted all of the weights and left the widths set to "wrap_content". I would have expected that each button would only be as wide as it needs to be, with some blank space at the end of the row. Instead, all of the buttons are actually too wide, and don't even fit on the screen!
Can anybody explain what I'm missing here?
By comparison, the next three rows are identical to the first three, except that Button has been changed to TextView. These rows all look exactly as I would expect.
For reference, the layout.xml file is as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".SecondFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/button13"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2" />
<Button
android:id="#+id/button14"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3" />
<Button
android:id="#+id/button15"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="4" />
<Button
android:id="#+id/button16"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="5" />
<Button
android:id="#+id/button17"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="4" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="5" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/button12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="1" />
<TextView
android:id="#+id/button13"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="2" />
<TextView
android:id="#+id/button14"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="3" />
<TextView
android:id="#+id/button15"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center"
android:text="4" />
<TextView
android:id="#+id/button16"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="5" />
<TextView
android:id="#+id/button17"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="6" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center"
android:text="4" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="5" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="6" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="4" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="5" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="6" />
</LinearLayout>
</LinearLayout>
OK, figured it out. Leaving this up in case it helps someone in the future.
Buttons have a minWidth attribute which is 88dp by default. Changing this to zero made everything come out the way it should.
I am new to Android. I want to put 4 buttons horizontally with equal margins with both left and right side as shown in the wire-frame diagram below:
I searched a lot on Google and Stackoverflow also. I tried to set android:layout_weight="1" . But it only sets equal margin from left-side. I want to set it on both sides and on multiple screen layouts. I want to know which layout and properties should be applied for this. I am using in Android studio and mostly used Drag-Drop method for design.
Currently I've XML layout as follows:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/frameLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="10dp"
android:id="#+id/relativeLayout">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:id="#+id/b3"
android:layout_gravity="left|center_vertical"
android:onClick="buttonThree"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="true"
android:layout_alignParentRight="false"
android:layout_weight="1"
android:width="0dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
android:id="#+id/b5"
android:layout_gravity="left|center_vertical"
android:onClick="buttonFive"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/b3"
android:layout_toEndOf="#+id/b3"
android:layout_alignParentRight="false"
android:layout_alignParentLeft="false"
android:layout_weight="1"
android:width="0dp"
android:layout_alignParentBottom="false" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
android:id="#+id/b7"
android:layout_gravity="left|center_vertical"
android:onClick="buttonSeven"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/b5"
android:layout_toEndOf="#+id/b5"
android:layout_alignParentRight="false"
android:layout_weight="1"
android:width="0dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
android:id="#+id/b9"
android:layout_gravity="left|center_vertical"
android:onClick="buttonNine"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/b7"
android:layout_toEndOf="#+id/b7"
android:layout_alignParentRight="false"
android:layout_weight="1"
android:width="0dp" />
</RelativeLayout>
Layout weight works with LinearLayout, each view in linearlayout will take designeatedweight/weightsum times total width or height.
Move your buttons into linear layout with weight sum to 4. Assigning weight of buttons to 1 will make them take 1/4 th of screen space automatically.
For equal spacing allocating margin to linear layout will make them look equally spaced.
<Button
android:id="#+id/b3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="buttonThree"
android:text="3" />
<Button
android:id="#+id/b5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="buttonFive"
android:text="5" />
<Button
android:id="#+id/b7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="buttonSeven"
android:text="7" />
<Button
android:id="#+id/b9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="buttonNine"
android:text="9" />
</LinearLayout>
Result
that's right to set android:layout_weight="1" ,but only Linearlylayout effective,so you can
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_height="wrap_content" />
</LinearLayout>
Try to use LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:orientation="horizontal">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="3dp"
android:layout_marginLeft="3dp"
android:text="B1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="3dp"
android:text="B2"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="3dp"
android:text="B3"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="3dp"
android:text="B4"/>
</LinearLayout>
try out this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp"
android:weightSum="4" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="B1"
android:textColor="#fff" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="B1"
android:textColor="#fff" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="B1"
android:textColor="#fff" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="B1"
android:textColor="#fff" />
</LinearLayout>
it will look something like this.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3"
>
<Button android:id="#+id/button1"
...
android:layout_weight="1"/>
<Button android:id="#+id/button2"
...
android:layout_weight="1"/>
<Button
android:id="#+id/button3"
...
android:layout_weight="1"/>
So i'm relatively new to Android Development and XML so I was wondering if it'd be possible to do as the title says. How do I make all of these columns of buttons such that each row of buttons is split up evenly between the three buttons that are being created. I assume i'm just missing something because I'm almost positive this is possible I must just not quite understand how to do it.
I'd very much appreciate any help! Also do ignore some of the button names vulgarity they're correspond to sounds that each button will play (This is going to be a soundboard app).
Thank you!
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.android.soundboard.MainActivity">
<!-- a lot of buttons -->
<!-- row 1 -->
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:id="#+id/button_ethanBradberry"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:id="#+id/button_stfu"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:id="#+id/button_haha"
/>
<!-- row 2 -->
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button_ethanBradberry"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="5dp"
android:id="#+id/button_ohNowIGetIt"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button_ohNowIGetIt"
android:layout_alignRight="#+id/button_stfu"
android:layout_alignEnd="#+id/button_stfu"
android:id="#+id/button_whatTheFuck"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button_whatTheFuck"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:id="#+id/button_whyTheFuckULyin"
/>
<!-- row 3 -->
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_below="#+id/button_ohNowIGetIt"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:id="#+id/button_whyYouHeffBeMad"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button_whyYouHeffBeMad"
android:layout_alignRight="#+id/button_whatTheFuck"
android:layout_alignEnd="#+id/button_whatTheFuck"
android:id="#+id/button_niggaYouGay"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button_niggaYouGay"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:id="#+id/button_hitMarker"
/>
<!-- row 4 -->
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button_whyYouHeffBeMad"
android:layout_alignRight="#+id/button_whyYouHeffBeMad"
android:layout_alignEnd="#+id/button_whyYouHeffBeMad"
android:layout_marginTop="5dp"
android:id="#+id/button_itsATrap"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button_itsATrap"
android:layout_alignLeft="#+id/button_niggaYouGay"
android:layout_alignStart="#+id/button_niggaYouGay"
android:id="#+id/button_shutUpAndTakeMyMoney"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button_shutUpAndTakeMyMoney"
android:layout_alignRight="#+id/button_hitMarker"
android:layout_alignEnd="#+id/button_hitMarker"
android:id="#+id/button_smokeWeedEveryDay"
/>
<!-- row 5 -->
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button_itsATrap"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="5dp"
android:id="#+id/button_stop"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/button_stop"
android:layout_alignLeft="#+id/button_shutUpAndTakeMyMoney"
android:layout_alignStart="#+id/button_shutUpAndTakeMyMoney"
android:id="#+id/button_wow"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button_wow"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:id="#+id/button_twentyOne"
/>
<!-- row 6 -->
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button_stop"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="5dp"
android:id="#+id/button_surpriseMotherFucker"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button_surpriseMotherFucker"
android:layout_alignLeft="#+id/button_wow"
android:layout_alignStart="#+id/button_wow"
android:id="#+id/button17"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button17"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:id="#+id/button18"
/>
<!-- row 7 -->
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button_surpriseMotherFucker"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="5dp"
android:id="#+id/button19"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button19"
android:layout_alignLeft="#+id/button17"
android:layout_alignStart="#+id/button17"
android:id="#+id/button20"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button20"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:id="#+id/button21"
/>
<!-- row 8 -->
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button19"
android:layout_alignRight="#+id/button19"
android:layout_alignEnd="#+id/button19"
android:layout_marginTop="5dp"
android:id="#+id/button22"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button22"
android:layout_alignLeft="#+id/button20"
android:layout_alignStart="#+id/button20"
android:id="#+id/button23"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button23"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:id="#+id/button24"
/>
<!-- row 9 -->
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button22"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="5dp"
android:id="#+id/button25"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button25"
android:layout_alignLeft="#+id/button23"
android:layout_alignStart="#+id/button23"
android:id="#+id/button26"
/>
<Button
android:text="New Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button26"
android:layout_alignRight="#+id/button24"
android:layout_alignEnd="#+id/button24"
android:id="#+id/button27"
/>
<!-- Ad -->
<!--
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ads:adSize="BANNER"
ads:adUnitId="ca-app-pub-3940256099942544/6300978111"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true">
</com.google.android.gms.ads.AdView>
-->
how can i set the weight of a lot of buttons such that each column takes up 1/3rd of the width of the screen?
So you want 3 buttons in each rows with exatly the same width of 1/3rd or available space? You should wrap each row in horizontal <LinearLayout> with layout_width="match_parent". Then you should put 3 buttons in it and set each button's layout_width="match_parent" and layout_weight="1".
Alternatively, you instead of using LinearLayout for each row, you can use PercentRelativeLayout from support library and then instead of using layout_width to set button width you use app:layout_widthPercent="33%". In such case you do not need to set layout_weight but you need to include supportlibrary with your app so not always necessary.
I would also replace your <RelativeLayout> with <LinearLayout> with orientation="vertical"
Thank you Marcin Orlowski, i figured out how to get it in the way I desire because of your response. My XML is now like this below. Thank you again!
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.android.soundboard.MainActivity"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:paddingTop="2dp"
>
<!-- a lot of buttons -->
<!-- row 1 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="#string/ethan_bradberry"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:id="#+id/button_ethanBradberry"
/>
<Button
android:text="#string/shut_the_fuck_up"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:id="#+id/button_stfu"
/>
<Button
android:text="#string/HaHa"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:id="#+id/button_haha"
/>
</LinearLayout>
<!-- row 2 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="#string/oh_now_i_get_it"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_ohNowIGetIt"
/>
<Button
android:text="#string/what_the_fuck"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_whatTheFuck"
/>
<Button
android:text="#string/lying"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_whyTheFuckULyin"
/>
</LinearLayout>
<!-- row 3 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="#string/why_you_haff_be_mad"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_whyYouHeffBeMad"
/>
<Button
android:text="#string/nigga_you_gay"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_niggaYouGay"
/>
<Button
android:text="#string/hit_marker"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_hitMarker"
/>
</LinearLayout>
<!-- row 4 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="#string/its_a_trap"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_itsATrap"
/>
<Button
android:text="#string/shut_up_and_take_my_money"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_shutUpAndTakeMyMoney"
/>
<Button
android:text="#string/_smoke_weed"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_smokeWeedEveryDay"
/>
</LinearLayout>
<!-- row 5 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="#string/stop"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_stop"
/>
<Button
android:text="#string/wow"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_wow"
/>
<Button
android:text="#string/twenty_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_twentyOne"
/>
</LinearLayout>
<!-- row 6 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="#string/Surprise_Mother_fucker"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_surpriseMotherFucker"
/>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button17"
/>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button18"
/>
</LinearLayout>
<!-- row 7 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button19"
/>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button20"
/>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button21"
/>
</LinearLayout>
<!-- row 8 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button22"
/>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button23"
/>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button24"
/>
</LinearLayout>
<!-- row 9 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button25"
/>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button26"
/>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button27"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button28"
/>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button29"
/>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button30"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button31"
/>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button32"
/>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button33"
/>
</LinearLayout>
What you want to do is split your buttons into different layouts. for a grid like structure like I assume you want, you'd be best to use some LinearLayout's like below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="button 1"/>
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="button 2"/>
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="button 3"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="button 1"/>
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="button 2"/>
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="button 3"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="button 1"/>
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="button 2"/>
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="button 3"/>
</LinearLayout>
This will give you 3 rows of 3 buttons. The buttons all have an equal weight due to a layout_width of 0 and a weight that is equal to the other buttons. This way they split the space evenly between them.
Each row is in it's own linear layout so it stacks in the parent container which has a vertical orientation.
If you are planning on a static screen this is the way to go. If you have a variable number of elements you will want to look into a GridView or RecyclerView
I want to customize an EditText which should have "constants" like in the picture below, so that I get the minutes and the seconds. (the number interface is irrelevant).
Try by this code this code are here i have try by this code .This code is working .
<LinearLayout 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:orientation="vertical">
<EditText
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_marginTop="50dp"
android:textColor="#000000"
android:background="#CCCCCC"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal"
>
<Button
android:id="#+id/btn0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0" />
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
<Button
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
>
<Button
android:id="#+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3" />
<Button
android:id="#+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:id="#+id/btn5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
>
<Button
android:id="#+id/btn6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6" />
<Button
android:id="#+id/btn7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7" />
<Button
android:id="#+id/btn8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8" />
</LinearLayout>
show here is image below
First of all, I see no EditText on the screen you posted, that's plain TextViews that are updating on clicking the numbers.
Anyway, you could use multiple TextViews/EditTexts, which would allow you to easily change their formatting as well, or you could programatically change the formatting yourself. If you want to have a string resource that accepts parameters see here on how to do that.
I want these buttons to be aligned on top of each other. As you can see, since the text in the second row is shorter, the buttons take up a little more space to fill everything up. I'd rather have button 5 directly below and aligned with button 1.
Here's my xml for the layout:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="10dp">
<TextView android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:text="Start Corner:"
/>
<Button
android:id="#+id/start_corner_btn_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:layout_weight="15"/>
<Button
android:id="#+id/start_corner_btn_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:layout_weight="15"/>
<Button
android:id="#+id/start_corner_btn_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:layout_weight="15"/>
<Button
android:id="#+id/start_corner_btn_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
android:layout_weight="15"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="10dp">
<TextView android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:text="2nd Corner:"
/>
<Button
android:id="#+id/second_corner_btn_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
android:layout_weight="15"/>
<Button
android:id="#+id/second_corner_btn_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
android:layout_weight="15"/>
<Button
android:id="#+id/second_corner_btn_7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
android:layout_weight="15"/>
<Button
android:id="#+id/second_corner_btn_8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
android:layout_weight="15"/>
</LinearLayout>
As always, I'll bet I am close, but probably missing one thing!
Try TableLayout:
<TableLayout
android:id="#+id/tableBtns"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dip" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="15"
android:text="Start Corner:"/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="15"
android:text="1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="15"
android:text="2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="15"
android:text="3" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="15"
android:text="4" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="15"
android:text="2nd Corner:" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="15"
android:text="5" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="15"
android:text="6" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="15"
android:text="7" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="15"
android:text="8" />
</TableRow>
</TableLayout>
you can separate the space with two vertical linearlayouts,
in the left one put your textViews and in the right one put your Buttons
Instead of using "wrap_content" for width, use some fixed value for the textviews. Or, better yet, replace the entire thing with RelativeLayout and align Button 5 to be aligned to the left of Button 1 using android:layout_alignLeft directive.