Bullionist
Reputation: 2210
Layout alignment issues android
I have a custom keypad like view in my Activity which looks like this
Now I want to make the * and = button as a single button like this
The XML layout for the keypad is
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/keypad_PAYMENT_LL"
android:visibility="visible"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_above="@+id/button17"
android:layout_below="@+id/amount_PAYMENT_RL">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_centerHorizontal="true"
android:id="@+id/linearLayout"
android:layout_above="@+id/linearLayout2"
android:layout_weight="1">
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="1"
android:id="@+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="@drawable/yellow_general_button"
android:textSize="40sp"
android:textColor="@drawable/text_general"
android:layout_weight="1"
android:layout_margin="2dp" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="2"
android:id="@+id/button2"
android:background="@drawable/yellow_general_button"
android:textSize="40sp"
android:textColor="@drawable/text_general"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/button"
android:layout_toEndOf="@+id/button"
android:layout_weight="1"
android:layout_margin="2dp" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="3"
android:id="@+id/button3"
android:background="@drawable/yellow_general_button"
android:textSize="40sp"
android:textColor="@drawable/text_general"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/button2"
android:layout_toEndOf="@+id/button2"
android:layout_weight="1"
android:layout_margin="2dp" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="+"
android:id="@+id/button4"
android:background="@drawable/blue_payment_button"
android:textSize="40sp"
android:textColor="@drawable/text_general"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/button3"
android:layout_toEndOf="@+id/button3"
android:layout_weight="1"
android:layout_margin="2dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="false"
android:id="@+id/linearLayout2"
android:layout_above="@+id/linearLayout3"
android:layout_weight="1">
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="4"
android:id="@+id/button5"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="@drawable/yellow_general_button"
android:textSize="40sp"
android:textColor="@drawable/text_general"
android:layout_weight="1"
android:layout_margin="2dp" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="5"
android:id="@+id/button6"
android:background="@drawable/yellow_general_button"
android:textSize="40sp"
android:textColor="@drawable/text_general"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/button5"
android:layout_toEndOf="@+id/button5"
android:layout_weight="1"
android:layout_margin="2dp" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="6"
android:id="@+id/button7"
android:background="@drawable/yellow_general_button"
android:textSize="40sp"
android:textColor="@drawable/text_general"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/button6"
android:layout_toEndOf="@+id/button6"
android:layout_weight="1"
android:layout_margin="2dp" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="-"
android:id="@+id/button8"
android:background="@drawable/blue_payment_button"
android:textSize="40sp"
android:textColor="@drawable/text_general"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/button7"
android:layout_toEndOf="@+id/button7"
android:layout_weight="1"
android:layout_margin="2dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="false"
android:id="@+id/linearLayout3"
android:layout_above="@+id/linearLayout3"
android:layout_weight="1" >
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="7"
android:id="@+id/button9"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="@drawable/yellow_general_button"
android:textSize="40sp"
android:textColor="@drawable/text_general"
android:layout_weight="1"
android:layout_margin="2dp" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="8"
android:id="@+id/button10"
android:background="@drawable/yellow_general_button"
android:textSize="40sp"
android:textColor="@drawable/text_general"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/button9"
android:layout_toEndOf="@+id/button9"
android:layout_weight="1"
android:layout_margin="2dp" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="9"
android:id="@+id/button11"
android:background="@drawable/yellow_general_button"
android:textSize="40sp"
android:textColor="@drawable/text_general"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/button10"
android:layout_toEndOf="@+id/button10"
android:layout_weight="1"
android:layout_margin="2dp" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/button12"
android:background="@drawable/blue_payment_button"
android:textSize="40sp"
android:textColor="@drawable/text_general"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/button11"
android:layout_toEndOf="@+id/button11"
android:layout_weight="1"
android:layout_marginLeft="2dp"
android:layout_marginTop="2dp"
android:layout_marginRight="2dp"
android:text="*"
android:layout_marginBottom="2dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="false"
android:id="@+id/linearLayout5"
android:layout_above="@+id/linearLayout3"
android:layout_weight="1" >
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="C"
android:id="@+id/button13"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="@drawable/blue_payment_button"
android:textSize="40sp"
android:textColor="@drawable/text_general"
android:layout_weight="1"
android:layout_margin="2dp" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="0"
android:id="@+id/button14"
android:background="@drawable/yellow_general_button"
android:textSize="40sp"
android:textColor="@drawable/text_general"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/button13"
android:layout_toEndOf="@+id/button13"
android:layout_weight="1"
android:layout_margin="2dp" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="<"
android:id="@+id/button15"
android:background="@drawable/blue_payment_button"
android:textSize="40sp"
android:textColor="@drawable/text_general"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/button14"
android:layout_toEndOf="@+id/button14"
android:layout_weight="1"
android:layout_margin="2dp" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/button29"
android:background="@drawable/blue_payment_button"
android:textSize="40sp"
android:textColor="@drawable/text_general"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/button15"
android:layout_toEndOf="@+id/button15"
android:layout_weight="1"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginBottom="2dp"
android:text="="
android:layout_marginTop="2dp" />
</LinearLayout>
</LinearLayout>
I have tried many times, but not able to achieve. Please help. Thanks in advance.
Upvotes: 0
Views: 78
Answers (3)
Bullionist
Reputation: 2210
As Frank N.Stein said, using Grid layout was much effective. Thanks. This solved my problem.
<GridLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="@+id/relativeLayout12"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_above="@+id/button22"
android:useDefaultMargins="false">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:id="@+id/button23"
android:layout_row="0"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="@drawable/yellow_general_button"
android:layout_gravity="fill"
android:textColor="@drawable/text_general"
android:textSize="40sp"
android:layout_margin="2dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:id="@+id/button24"
android:layout_row="0"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:textColor="@drawable/text_general"
android:textSize="40sp"
android:layout_margin="2dp"
android:background="@drawable/yellow_general_button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:id="@+id/button25"
android:layout_row="0"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:textColor="@drawable/text_general"
android:textSize="40sp"
android:layout_margin="2dp"
android:background="@drawable/yellow_general_button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+"
android:id="@+id/button26"
android:layout_row="0"
android:layout_column="3"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:textColor="@drawable/text_general"
android:textSize="40sp"
android:layout_margin="2dp"
android:background="@color/blue_dark" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
android:id="@+id/button27"
android:layout_row="1"
android:layout_column="0"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:textColor="@drawable/text_general"
android:textSize="40sp"
android:layout_margin="2dp"
android:background="@drawable/yellow_general_button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
android:id="@+id/button28"
android:layout_row="1"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:textColor="@drawable/text_general"
android:textSize="40sp"
android:layout_margin="2dp"
android:background="@drawable/yellow_general_button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
android:id="@+id/button30"
android:layout_row="1"
android:layout_column="2"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:textColor="@drawable/text_general"
android:textSize="40sp"
android:layout_margin="2dp"
android:background="@drawable/yellow_general_button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"
android:id="@+id/button31"
android:layout_row="1"
android:layout_column="3"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:textColor="@drawable/text_general"
android:textSize="40sp"
android:layout_margin="2dp"
android:background="@color/blue_dark" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
android:id="@+id/button32"
android:layout_row="2"
android:layout_column="0"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:textColor="@drawable/text_general"
android:textSize="40sp"
android:layout_margin="2dp"
android:background="@drawable/yellow_general_button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
android:id="@+id/button33"
android:layout_row="2"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:textColor="@drawable/text_general"
android:textSize="40sp"
android:layout_margin="2dp"
android:background="@drawable/yellow_general_button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
android:id="@+id/button34"
android:layout_row="2"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:textColor="@drawable/text_general"
android:textSize="40sp"
android:layout_margin="2dp"
android:background="@drawable/yellow_general_button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="="
android:id="@+id/button35"
android:layout_row="2"
android:layout_column="3"
android:layout_rowSpan="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:textColor="@drawable/text_general"
android:textSize="40sp"
android:layout_margin="2dp"
android:background="@color/blue_dark" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:id="@+id/button36"
android:layout_row="3"
android:layout_column="0"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:textColor="@drawable/text_general"
android:textSize="40sp"
android:layout_margin="2dp"
android:background="@color/blue_dark" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:id="@+id/button37"
android:layout_row="3"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:textColor="@drawable/text_general"
android:textSize="40sp"
android:layout_margin="2dp"
android:background="@drawable/yellow_general_button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<"
android:id="@+id/button38"
android:layout_row="3"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:textColor="@drawable/text_general"
android:textSize="40sp"
android:layout_margin="2dp"
android:background="@color/blue_dark" />
</GridLayout>
Upvotes: 1
user3809705
Reputation:
<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=".MainActivity">
<LinearLayout
android:id="@+id/keypad_PAYMENT_LL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="vertical"
android:visibility="visible">
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_above="@+id/linearLayout2"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_centerHorizontal="true"
android:layout_weight="1">
<Button
android:id="@+id/button"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_margin="2dp"
android:layout_weight="1"
android:text="1"
android:textSize="40sp" />
<Button
android:id="@+id/button2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_margin="2dp"
android:layout_toEndOf="@+id/button"
android:layout_toRightOf="@+id/button"
android:layout_weight="1"
android:text="2"
android:textSize="40sp" />
<Button
android:id="@+id/button3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_margin="2dp"
android:layout_toEndOf="@+id/button2"
android:layout_toRightOf="@+id/button2"
android:layout_weight="1"
android:text="3"
android:textSize="40sp" />
<Button
android:id="@+id/button4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_margin="2dp"
android:layout_toEndOf="@+id/button3"
android:layout_toRightOf="@+id/button3"
android:layout_weight="1"
android:text="+"
android:textSize="40sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_above="@+id/linearLayout3"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="false"
android:layout_weight="1">
<Button
android:id="@+id/button5"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_margin="2dp"
android:layout_weight="1"
android:text="4"
android:textSize="40sp" />
<Button
android:id="@+id/button6"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_margin="2dp"
android:layout_toEndOf="@+id/button5"
android:layout_toRightOf="@+id/button5"
android:layout_weight="1"
android:text="5"
android:textSize="40sp" />
<Button
android:id="@+id/button7"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_margin="2dp"
android:layout_toEndOf="@+id/button6"
android:layout_toRightOf="@+id/button6"
android:layout_weight="1"
android:text="6"
android:textSize="40sp" />
<Button
android:id="@+id/button8"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_margin="2dp"
android:layout_toEndOf="@+id/button7"
android:layout_toRightOf="@+id/button7"
android:layout_weight="1"
android:text="-"
android:textSize="40sp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="4"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/linearLayout3"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/button9"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_margin="2dp"
android:layout_weight="1"
android:text="7"
android:textSize="40sp" />
<Button
android:id="@+id/button10"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_margin="2dp"
android:layout_toEndOf="@+id/button9"
android:layout_toRightOf="@+id/button9"
android:layout_weight="1"
android:text="8"
android:textSize="40sp" />
<Button
android:id="@+id/button11"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_margin="2dp"
android:layout_toEndOf="@+id/button10"
android:layout_toRightOf="@+id/button10"
android:layout_weight="1"
android:text="9"
android:textSize="40sp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/button13"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_margin="2dp"
android:layout_weight="1"
android:text="C"
android:textSize="40sp" />
<Button
android:id="@+id/button14"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_margin="2dp"
android:layout_toEndOf="@+id/button13"
android:layout_toRightOf="@+id/button13"
android:layout_weight="1"
android:text="0"
android:textSize="40sp" />
<Button
android:id="@+id/button15"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_margin="2dp"
android:layout_toEndOf="@+id/button14"
android:layout_toRightOf="@+id/button14"
android:layout_weight="1"
android:text="<"
android:textSize="40sp" />
</LinearLayout>
</LinearLayout>
<Button
android:id="@+id/button12"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_marginBottom="2dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:text="="
android:textSize="40sp" />
</LinearLayout>
<!-- <LinearLayout
android:id="@+id/linearLayout5"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_above="@+id/linearLayout3"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="false"
android:layout_weight="1">
<Button
android:id="@+id/button29"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_marginBottom="2dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:layout_toEndOf="@+id/button15"
android:layout_toRightOf="@+id/button15"
android:layout_weight="1"
android:text="="
android:textSize="40sp" />
</LinearLayout>-->
</LinearLayout>
</RelativeLayout>
Here is your solution check it if it helps you please add repo.
Upvotes: 0
Bartek Lipinski
Reputation: 31438
If you wanna stick with the nested LinearLayouts (which, as Frank N. Stein mentioned, is not really the best thing to do) you should change your layout a bit.
Currently your root LinearLayout is vertical, and you're building rows of your keyboard (with inner, horizontal LinearLayouts).
The root layout should be horizontal and you should build your keyboard with inner vertical LinearLayouts (columns). In that way, you would be able to make your = button expand to the size of = and * simply by changing their weights (= should have android:layout_weight="2" and * should have android:layout_weight="0", if other buttons from this column have android:layout_weight="1").
Upvotes: 1