Hello i'm learning Kotlin. I wanna try to practise my knowledge and i decided to build calculator like ios. I added linearlayout for my textview, added tablelayout and 4 rows.
Then i put linearlayout for 3 buttons in the bottom. MyTextview is not visible, it stands behind the table layout i couldn't fix it how can fix those design issues ?
My xml codes:
<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=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="#+id/button20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button19"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>
My LAYOUT PICTURE
I edited your XML
add this
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
to TableLayout ,
android:layout_gravity="center"
android:layout_width="wrap_content"
to TextView ,
android:layout_height="match_parent"
to LinearLayout
<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=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="TextView" />
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:orientation="vertical">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button19"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>
Try adding a constraint to the TableLayout, because it may be defaulting to aligning with the top of the screen. For example, you can add app:layout_constraintTop_toBottomOf="id of TextView" and android:layout_marginTop="30dp" to the TableLayout element in order to force the TableLayout to be 30dp below the TextView.
Related
I am using LinearLayout in HorizontalScrollView the scrolling part is working but i can't figure out how to make 3 rows.
for Example:
Bold shows what is currently displayed (in emulator/on screen)
Current
--Button1--Button2--Button3-- Button4--Button5--Button6--Button7--Button8--Button9--Button10
-Button11--Button12
What I want
--Button1--Button2--Button3-- Button4--Button5--Button6--
--Button7--Button8--Button9-- Button10--Button11--Button12--
I'm trying to do this with one LinearView, because later I will try to dynamically add buttons.
I might be doing this in whole wrong way (and I think I am).
Here is the code:
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp" >
<LinearLayout
android:layout_width="200dp"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button4" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button5" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button6" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button7" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button8" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button9" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button10" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button11" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button12" />
</LinearLayout>
</HorizontalScrollView>
I tried few things but I always return to the beginning.
Instead of LinearLayout Try GridLayout which is part of Android support library.
It has provision of setting number of columns and rows while implementation in XML layout.
Something like below
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp" >
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="6"
android:rowCount="3"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button4" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button5" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button6" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button7" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button8" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button9" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button10" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button11" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button12" />
</GridLayout>
</HorizontalScrollView>
Edit -
You can use TableLayout instead of GridLayout if you want to add child views of different width as below
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button4" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button5" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button6" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button7" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button8" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button9" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button10" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button11" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button12" />
</TableRow>
</TableLayout>
</HorizontalScrollView>
I used several RelativeLayouts within one LinearLayout. And the RelativeLayout used for buttons caused improper appearance as seen below:
This is my .xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/wood"
android:orientation="vertical"
android:padding="25dp" >
<RelativeLayout
android:id="#+id/relative"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Button" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/button1"
android:text="Button" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/button2"
android:text="Button" />
<Button
android:id="#+id/button4"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relative2"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/btn5"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Button" />
<Button
android:id="#+id/btn8"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
<Button
android:id="#+id/btn7"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/btn8"
android:text="Button" />
<Button
android:id="#+id/btn6"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/btn7"
android:text="Button" />
</RelativeLayout>
</LinearLayout>
How can I align my buttons properly and nicely without using Grid View since it requires additional library and API 14 and above? Thank you.
Instead of RelativeLayouts use LinearLayouts horizontally oriented:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/wood"
android:orientation="vertical"
android:padding="25dp" >
<LinearLayout
android:id="#+id/relative"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button4"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:id="#+id/relative2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/btn5"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/btn8"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/btn7"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/btn6"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>
Ok i successfully created a custom alert and when i ran it the format is the same as in xml but after re-running it for the nth time suddenly the buttons overlap and I dont know how to fix it so can you pls help me out on this?.
alert.xml(output should be):
wrong output:
xml code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#595959">
<EditText
android:id="#+id/orderQuantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/b3"
android:background="#FFFFFF"
android:ems="10"
android:inputType="number" />
<Button
android:id="#+id/b1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:layout_alignParentLeft="true"
android:text="1" />
<Button
android:id="#+id/b2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/orderQuantity"
android:layout_toRightOf="#+id/b4"
android:text="2" />
<Button
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:layout_centerHorizontal="true"
android:text="3" />
<Button
android:id="#+id/b4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/b2"
android:text="4" />
<Button
android:id="#+id/b5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/b2"
android:layout_toLeftOf="#+id/b3"
android:text="5" />
<Button
android:id="#+id/b6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/b5"
android:layout_alignBottom="#+id/b5"
android:layout_alignLeft="#+id/b3"
android:text="6" />
<Button
android:id="#+id/b7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/b4"
android:layout_toLeftOf="#+id/b5"
android:text="7" />
<Button
android:id="#+id/b8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/b4"
android:layout_toRightOf="#+id/b4"
android:text="8" />
<Button
android:id="#+id/b9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/b6"
android:layout_below="#+id/b6"
android:text="9" />
<Button
android:id="#+id/b0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/b8"
android:layout_toLeftOf="#+id/b9"
android:text="0" />
<Button
android:id="#+id/addCart"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/b0"
android:layout_alignParentLeft="true"
android:layout_below="#+id/b7"
android:layout_toLeftOf="#+id/b0"
android:text="ADD" />
<Button
android:id="#+id/cancel"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/b0"
android:layout_alignRight="#+id/b9"
android:layout_below="#+id/b9"
android:layout_toRightOf="#+id/b0"
android:text="BACK" />
</RelativeLayout>
Use LinearLayout instead of RelativeLayout. And remove these in Buttons:
android:layout_alignParentLeft="true"
after that it should be fine.
EDIT: Not just left alignment directives, but all alignment directives.
i would suggest you to use TableLayout ... very easy to understand and fits what you want perfectly and its easy to reuse or modify later ... your code ...
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<EditText
android:id="#+id/orderQuantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/b3"
android:background="#FFFFFF"
android:ems="10"
android:inputType="number" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="2" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="3" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="4" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="5" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="6" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="7"/>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="8"/>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="9" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Add"/>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="0"/>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="OK"/>
</TableRow>
</TableLayout>
Organize each row as below...
<Button
android:id="#+id/b1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:layout_alignParentLeft="true"
android:text="1" />
<Button
android:id="#+id/b2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/orderQuantity"
android:layout_toLeftOf="#+id/b3"
android:layout_toRightOf="#+id/b1"
android:text="2" />
<Button
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:layout_toRightOf="#+id/b2"
android:layout_centerHorizontal="true"
android:text="3" />
Ok after analyzing i was able to see whats wrong.
This
<Button
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:layout_centerHorizontal="true"
android:text="3" />
Should be :
<Button
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:text="3" />
I would do something like this:
<?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:orientation="vertical"
android:background="#595959">
<EditText
android:id="#+id/orderQuantity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/b3"
android:background="#FFFFFF"
android:ems="10"
android:inputType="number"/>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/b1"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="1"/>
<Button
android:id="#+id/b2"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="2"/>
<Button
android:id="#+id/b3"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="3"/>
</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/b4"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="4"/>
<Button
android:id="#+id/b5"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="5"/>
<Button
android:id="#+id/b6"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="6"/>
</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/b7"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="7"/>
<Button
android:id="#+id/b8"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="8"/>
<Button
android:id="#+id/b9"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="9"/>
</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/b0"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="0"/>
<Button
android:id="#+id/addCart"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="ADD"/>
<Button
android:id="#+id/cancel"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="BACK"/>
</LinearLayout>
</LinearLayout>
I have set up 4 linear layouts: 2 vertical ones, side by side and 2 horizontal ones, arranged vertically.
This will give me a total of 3 vertical ones.
Then end goal is to have one layout for multiple screen sizes.
I set the weight of all 4 layouts to "1" to fill evenly.
I have tried to use android:layout_height="wrap_content", but it does not fill the entire background.
If I use android:layout_height="fill_parent", the layouts get clipped.
Here is screenshot of "wrap_content"
Here is screenshot of "fill_parent"
<?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:background="#ff606060"
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=".SimpleRGB_Main" >
<LinearLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:layout_weight="1"
android:text="Scene 1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button1"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button2"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 3" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button3"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 4" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button4"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 5" />
</LinearLayout>
<LinearLayout
android:id="#+id/relativeLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/relativeLayout1"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:layout_toRightOf="#+id/button1"
android:layout_weight="1"
android:text="Scene 6" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button6"
android:layout_toRightOf="#+id/button2"
android:layout_weight="1"
android:text="Scene7" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button7"
android:layout_toRightOf="#+id/button3"
android:layout_weight="1"
android:text="Scene8" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button8"
android:layout_toRightOf="#+id/button4"
android:layout_weight="1"
android:text="Scene9" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button9"
android:layout_toRightOf="#+id/button5"
android:layout_weight="1"
android:text="Scene10" />
</LinearLayout>
<LinearLayout
android:id="#+id/relativeLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/relativeLayout1"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="RECORD" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="PLAY" />
</LinearLayout>
<LinearLayout
android:id="#+id/relativeLayout4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/relativeLayout3"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="RECORD1" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="PLAY1" />
</LinearLayout>
Here is what I am trying to attempt. Green is the layouts filled with buttons and or widgets.
Putting layout weights on children of RelativeLayout does not work. Weights only work on LinearLayout (that is, children of linear layout, not linear layout itself). Try starting by making your root layout linear, not RelativeLayout.
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ff606060"
android:weightSum="6"
android:layout_gravity="fill_horizontal|center_vertical"
tools:context=".SimpleRGB_Main" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:weightSum="2"
android:layout_weight="1">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:layout_weight="1"
android:text="Scene 1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button1"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 6" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:weightSum="2">
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button2"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 2" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button3"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 7" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:weightSum="2">
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button4"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 3" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:layout_toRightOf="#+id/button1"
android:layout_weight="1"
android:text="Scene 8" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:weightSum="2">
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button6"
android:layout_toRightOf="#+id/button2"
android:layout_weight="1"
android:text="Scene 4" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button7"
android:layout_toRightOf="#+id/button3"
android:layout_weight="1"
android:text="Scene 9" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="2"
android:layout_weight="1">
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button8"
android:layout_toRightOf="#+id/button4"
android:layout_weight="1"
android:text="Scene 5" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button9"
android:layout_toRightOf="#+id/button5"
android:layout_weight="1"
android:text="Scene 10" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:weightSum="2">
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="RECORD" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="RECORD 1" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:weightSum="2">
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="PLAY " />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="PLAY 1" />
</TableRow>
</TableLayout>
graphical view
Below is the layout I designed.
Here is my code:
<LinearLayout
android:id="#+id/digitRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/login_button_1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/login_button_2" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/login_button_3" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_4" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_5" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_6" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_7" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_8" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_9" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonClear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_clear" />
<Button
android:id="#+id/button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_0" />
<Button
android:id="#+id/buttonBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_back" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttonRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal"
android:padding="5dp" >
<Button
android:id="#+id/buttonChange"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_dhange" />
<Button
android:id="#+id/buttonDisable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_disable" />
</LinearLayout>
The problem is that I want to stretch the bottom two buttons, "Change" and "Back", to match the width of the buttons above.
You can use weight on both of them, like this:
<LinearLayout
android:id="#+id/buttonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal"
android:padding="5dp" >
<Button
android:id="#+id/buttonChange"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="#string/login_button_dhange" />
<Button
android:id="#+id/buttonDisable"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="#string/login_button_disable" />
You probably want something like the code below.
I used a hard coded button width, but you probably want to put this in dimen.xml and reference it. I centered everything with gravity.
I tried this with weights as well, but the re-sizing is funny. As your screen gets wider the buttons get two wide.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/digitRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="100dp"
android:layout_height="match_parent"
android:text="1" />
<Button
android:id="#+id/button2"
android:layout_width="100dp"
android:layout_height="match_parent"
android:text="2" />
<Button
android:id="#+id/button3"
android:layout_width="100dp"
android:layout_height="match_parent"
android:text="3" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button4"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:id="#+id/button5"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="5" />
<Button
android:id="#+id/button6"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="6" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button7"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="7" />
<Button
android:id="#+id/button8"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="8" />
<Button
android:id="#+id/button9"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="9" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonClear"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Clear" />
<Button
android:id="#+id/button0"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="0" />
<Button
android:id="#+id/buttonBack"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Back" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal"
android:padding="5dp"
android:gravity="center_horizontal"
>
<Button
android:id="#+id/buttonChange"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="Change" />
<Button
android:id="#+id/buttonDisable"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="Disable" />
</LinearLayout>
Try to use weight like below. Also use margins to tweak the positions of the buttons.
<LinearLayout
android:id="#+id/buttonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal"
android:padding="5dp" >
<Button
android:id="#+id/buttonChange"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="#string/login_button_dhange" />
<Button
android:id="#+id/buttonDisable"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="#string/login_button_disable" />