Position of buttons in LinearLayout - android

I've added 5 buttons (see below), I need that reset button should be equally align as that of the above two buttons in order to maintain uniformity. Also I am not able to align submit button exact below of GoodButton.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<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_marginRight="2dp"
android:layout_weight="0"
android:text="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="4dp"
android:layout_weight="0"
android:text="1" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_weight="0"
android:background="#android:color/darker_gray"></View>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_weight="2"
android:text="Good" />
</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_marginRight="4dp"
android:layout_weight="1"
android:text="Reset" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_weight="0"
android:background="#android:color/darker_gray"></View>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_weight="1"
android:text="Submit" />
</LinearLayout>
</LinearLayout>
I feel it is due to extra layout margin space i have added on top buttons.

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<Button android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"></Button>
<Button android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"></Button>
</LinearLayout>
<Button android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"></Button>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:layout_height="match_parent">
<Button android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"></Button>
<Button android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"></Button>
</LinearLayout>
</LinearLayout>
Use it, exactly what you need

Using nested weight can bring performance issues.
This design can easily be achieved by using Relative layout.
Check this code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:orientation="horizontal" android:weightSum="1"
android:layout_margin="10dp">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="2" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="5"
android:text="3" />
</LinearLayout>
<LinearLayout
android:layout_below="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:orientation="horizontal" android:weightSum="1"
android:layout_margin="5dp">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="4" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="5" />
</LinearLayout>

your problem is that you are not distributing well the weight of the views.
You must apply weight to both horizontal LinearLayout and then try to distribute the weight of their child views equally.
See my example above:
<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:padding="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1">
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight=".5"/>
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight=".5" />
</LinearLayout>
<Button
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Good" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_marginRight="4dp"
android:layout_weight="1"
android:text="Reset" />
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Submit" />
</LinearLayout>

You can also use a TableLayout like this:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow>
<Button
android:layout_marginRight="2dp"
android:text="1" />
<Button
android:layout_marginRight="4dp"
android:text="1" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray" />
<Button
android:layout_marginLeft="4dp"
android:layout_weight="1"
android:text="Good" />
</TableRow>
<TableRow>
<Button
android:layout_marginRight="4dp"
android:layout_span="2"
android:text="Reset" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray" />
<Button
android:layout_marginLeft="4dp"
android:layout_weight="1"
android:text="Submit" />
</TableRow>
</TableLayout>

Related

Android - How to remove unwanted gaps when using LinearLayout with weights

I have a vertical LinearLayout that contains 2 horizontal LinearLayouts. Below the vertical LL, I have another horizontal LL. Since I'm using the weight attribute, I've made either the height or width attributes of the layouts = 0dp.
Code -
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonBack"
android:text="back" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonRefresh"
android:text="refresh" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonScore1"
android:text="Score: " />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonScore2"
android:text="Score: " />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:orientation="horizontal">
<Button
android:id="#+id/buttonPlayer1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="P1"
/>
<Button
android:id="#+id/buttonPlayer2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="P2" />
</LinearLayout>
This is how it looks -
As you can see, there are unwanted gaps (and rounded corners) between the elements. How do I remove the white spaces?
Replace All your buttons with material buttons
app:cornerRadius="0dp" this will remove corners
And android:background="#000000" this is for expand the buttons to full height
<com.google.android.material.button.MaterialButton
android:layout_width="0dp"
app:cornerRadius="0dp" //
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#000000"
android:id="#+id/buttonRefresh"
android:text="refresh" />
Use this code I just added a background to your Linear Layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:background="#color/purple_500"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonBack"
android:text="back" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonRefresh"
android:text="refresh" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:layout_marginTop="10dp"
android:background="#color/purple_500"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonScore1"
android:text="Score: " />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:id="#+id/buttonScore2"
android:text="Score: " />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:layout_marginTop="10dp"
android:background="#color/purple_500"
android:orientation="horizontal">
<Button
android:id="#+id/buttonPlayer1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="P1"
/>
<Button
android:id="#+id/buttonPlayer2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="P2" />
</LinearLayout>
Like this?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_weight="1.0">
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="BACK"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonBack"/>
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="SCORE:"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonScore1"/>
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="P1"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonPlayer1"/>
</LinearLayout>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_weight="1.0">
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="REFRESH"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonRefresh"/>
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="SCORE:"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonScore2"/>
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="P2"
android:padding="1px"
android:layout_weight="1.0"
android:id="#+id/buttonPlayer2"/>
</LinearLayout>
</LinearLayout>
I've put a padding of 1px for each Button because of Android bugs on rendering text in a Button.

Align Multiple Views at the bottom of screen

I'm new to Android and I want to create an activity with 3 set (line) of Buttons at the bottom of screen .For my example I wrote this code for 2 set (line) of buttons:
<?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">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="4" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="5" />
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="7" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="8" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="9" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="10" />
</LinearLayout>
</RelativeLayout>
I want to buttons 6-10 put on (above) the buttons 1-5 (like Stack).
How I can do this?
Thanks
You are using a RelativeLayout with two LinearLayouts.
You should give both your LinearLayout ids and after that you will position the other LinearLayout which you want to be on top by giving it the atrribute
android:layout_above="#id/the_id_of_the_one_you_want_to_be_below"
Try to wrap your two LinearLayout in a parent linearLayout.
That parent layout need to be aligned to the bottom.
Something like this:
<?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">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="4" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="5" />
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="7" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="8" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="9" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="10" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>

Setting up layout of calculator buttons on android

I have just started learning Android. To start with,I just wanted to create a Calculator application similar to what we get in stock android phones. I used the following layouts:
Vertical Layout contining two rows which are:
Text view to display the result as a horizontal layout
Horizontal layout with two columns:
Table layout containing buttons 0-9, '.' and '=' with 3 buttons in each row
Table layout containing DEL, + , - , x and / buttons.
I want proper alignment of 4 rows of the first table layout and 5 rows of the second table layout. Shall I remove the padding space? Or do I need to manually set the minimum size of the buttons? Are the layouts set by me correct?
`
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="112dp"
android:id="#+id/textView" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true">
<TableRow android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:text="7"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button7" />
<Button
android:text="8"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button8" />
<Button
android:text="9"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button9"
android:elevation="0dp" />
</TableRow>
<TableRow android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:text="4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button4" />
<Button
android:text="5"
android:id="#+id/button5"
android:layout_height="match_parent" />
<Button
android:text="6"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button6" />
</TableRow>
<TableRow android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:text="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button1" />
<Button
android:text="2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button2" />
<Button
android:text="3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button3" />
</TableRow>
<TableRow android:layout_height="wrap_content"
android:layout_width="match_parent">
<Button
android:text="."
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/buttonDot"
android:minHeight="48dp" />
<Button
android:text="0"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button0" />
<Button
android:text="="
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/buttonequals"/>
</TableRow>
</TableLayout>
<TableLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:text="DEL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/buttonDelete" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:text="/"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/buttonDivide" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:text="x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/buttonMultiply" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:text="+"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/buttonPlus" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:text="-"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/buttonSubtract" />
</TableRow>
</TableLayout>
</LinearLayout>
</LinearLayout>
`
Current Layout
Required layout
I suggest that you can use GridLayout for that view
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
android:orientation="horizontal" >
</GridLayout>
https://code.tutsplus.com/tutorials/android-user-interface-design-creating-a-numeric-keypad-with-gridlayout--mobile-8677
http://sampleprogramz.com/android/gridlayout.php
Below code can do the job i guess,
<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"
xmlns:andriod="http://schemas.android.com/apk/res-auto"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="horizontal"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:id="#+id/resultview"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="120dp"
android:id="#+id/textView" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_below="#+id/resultview"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentTop="false"
android:layout_alignParentBottom="true"
android:background="#000000">
<TableRow android:layout_width="match_parent"
android:minHeight="100dp"
android:orientation="vertical"
android:id="#+id/row1"
android:background="#000000">
<Button
android:text="7"
android:background="#000000"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button7" />
<Button
android:text="8"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:textColor="#ffffff"
android:id="#+id/button8" />
<Button
android:text="9"
android:background="#000000"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button9"
android:elevation="0dp" />
</TableRow>
<TableRow android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/row2"
android:minHeight="100dp"
android:layout_below="#+id/row1">
<Button
android:text="4"
android:background="#000000"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button4" />
<Button
android:text="5"
android:background="#000000"
android:textColor="#ffffff"
android:id="#+id/button5"
android:layout_height="match_parent" />
<Button
android:text="6"
android:background="#000000"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button6" />
</TableRow>
<TableRow android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="100dp">
<Button
android:text="1"
android:background="#000000"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button1" />
<Button
android:text="2"
android:background="#000000"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button2" />
<Button
android:text="3"
android:background="#000000"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button3" />
</TableRow>
<TableRow android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#000000">
<Button
android:text="."
android:background="#000000"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/buttonDot"
android:minHeight="48dp" />
<Button
android:text="0"
android:background="#000000"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button0" />
<Button
android:text="="
android:background="#000000"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/buttonequals"/>
</TableRow>
</TableLayout>
<TableLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#000000">
<TableRow
android:layout_width="match_parent"
android:layout_height="10dp"
android:minHeight="80dp">
<Button
android:text="DEL"
android:background="#000000"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/buttonDelete" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="10dp"
android:minHeight="80dp">
<Button
android:text="/"
android:background="#000000"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/buttonDivide" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="10dp"
android:minHeight="80dp">
<Button
android:text="x"
android:background="#000000"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/buttonMultiply" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="10dp"
android:minHeight="60dp">
<Button
android:text="+"
android:background="#000000"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/buttonPlus" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="10dp" >
<Button
android:text="-"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:textColor="#ffffff"
android:id="#+id/buttonSubtract" />
</TableRow>
</TableLayout>
</LinearLayout>
</RelativeLayout>
You could either set the height of the buttons, or add padding.
BTW, a parent with height of wrap_content and children with height match_parent is legal, I suppose, but a bit odd. I'd give the children either a fixed height, or wrap_content with a sufficient padding to get the look that you want.
Go for Custom ViewGroup and Custom Views as child. You will have much more flexibility and control over performance also learn for your good..
Btw, Creating custom components are easy.
Thanks

Understanding layout_weight

I want to do this:
The problem: all of the layout is contain by ScrollView into a LinearLayout and at the bottom must be the buttons of the stepper. To do that i used layout_weight to locating the elements in the space how i want.
Here is my XML code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
android:background="#drawable/shape_fondo"
android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:src="#mipmap/indicador_wizzard2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Días de ingesta"
android:layout_marginBottom="6dp"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="12dp"
android:layout_marginLeft="12dp"
android:weightSum="49">
<ToggleButton
android:id="#+id/lunes"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/botonesdias"
android:textOn="Lu"
android:textOff="Lu"/>
<ToggleButton
android:id="#+id/martes"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/botonesdias"
android:textOn="Ma"
android:textOff="Ma"/>
<ToggleButton
android:id="#+id/miercoles"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/botonesdias"
android:textOn="Mie"
android:textOff="Mie"/>
<ToggleButton
android:id="#+id/jueves"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/botonesdias"
android:textOn="Jue"
android:textOff="Jue"/>
<ToggleButton
android:id="#+id/viernes"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/botonesdias"
android:textOn="Vie"
android:textOff="Vie"/>
<ToggleButton
android:id="#+id/sabado"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/botonesdias"
android:textOn="Sa"
android:textOff="Sa"/>
<ToggleButton
android:id="#+id/domingo"
android:layout_weight="7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/botonesdias"
android:textOn="Do"
android:textOff="Do"/>
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2.3"
android:id="#+id/contenedortitulito">
<TextView
android:id="#+id/titulohora"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_alignParentLeft="true"
android:text="Hora" />
<TextView
android:id="#+id/titulodosis"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:layout_alignParentRight="true"
android:text="Dosis"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:id="#+id/listview"
android:background="#color/azul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/contenedortitulito"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
style="#style/botones"
android:id="#+id/btn_cancelar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Atrás"
android:layout_gravity="center"/>
<Button
style="#style/botones"
android:id="#+id/btn_irapaso3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="Continuar"
android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
</ScrollView>
I do not quite understand the concept of layout weight. Can you explain me?
Thanks!
You Need to provide weightsum to parent layout first of all after that you can distribute weight accordingly..
i have provided example of screen in which i used weightsum and layout_weight.
You can apply layout weight on scrollview as well
Here is the code for sample screen.
You can ignore first relative layout.
Hope it Helps
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/whole_bg">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="35dp"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".15"
android:background="#drawable/top"
android:orientation="horizontal"
android:weightSum="6">
<ImageView
android:id="#+id/ivHome"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ll_home" />
<ImageView
android:id="#+id/ivTraderList"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ll_traderlist_green" />
<ImageView
android:id="#+id/ivStatement"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ll_statement_green" />
<ImageView
android:id="#+id/ivSummary"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ll_summary_green" />
<ImageView
android:id="#+id/ivProduct"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ll_product_green" />
<ImageView
android:id="#+id/ivLogout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ll_logout" />
</LinearLayout>
<TextView
style="#style/TitleStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="#string/trader_list_str" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/lightGreen"
android:orientation="horizontal"
android:weightSum="1">
<EditText
android:id="#+id/etDate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".495"
android:editable="false"
android:focusable="false"
android:gravity="center"
android:text="#string/date_str"
android:textAppearance="?android:textAppearanceMedium"
android:textColor="#color/white"
android:textStyle="bold" />
<View
android:layout_width="0dp"
android:layout_height="25dp"
android:layout_gravity="center"
android:layout_weight=".005"
android:background="#android:color/darker_gray" />
<EditText
android:id="#+id/etTime"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".495"
android:editable="false"
android:focusable="false"
android:gravity="center"
android:text="#string/time_str"
android:textAppearance="?android:textAppearanceMedium"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".84"
android:orientation="vertical"
android:weightSum="1">
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".8" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".2"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="#color/lightYellow"
android:orientation="horizontal"
android:weightSum="1">
<TextView
android:id="#+id/tvLabelTotal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight=".595"
android:gravity="center"
android:text="#string/total_str"
android:textAppearance="?android:textAppearanceMedium" />
<View
android:layout_width="0dp"
android:layout_height="20dp"
android:layout_gravity="center"
android:layout_weight=".01"
android:background="#android:color/darker_gray" />
<TextView
android:id="#+id/tvTotal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="1dp"
android:layout_weight=".395"
android:gravity="center" />
</LinearLayout>
<TextView
android:id="#+id/tvOrder"
style="#style/BtnStyle"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:layout_weight="1"
android:onClick="placeOrder"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:text="#string/place_order_str" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/advtLabel"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_alignParentBottom="true"
android:background="#color/lightYellow"
android:orientation="horizontal" />

Adding borderless buttons in Android xml with divider

I'm trying to follow the guidelines laid out by the Android team from this document:
https://docs.google.com/file/d/0Bz3qX4EBhUvwZWlHekI3Y0wxSUk/edit
According to the doc I should use these framework resources.
This is my code, but none of the borders show. Any ideas?
<LinearLayout
android:id="#+id/buttonLayout"
style="?android:buttonBarButtonStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:divider="?android:dividerVertical"
android:orientation="horizontal"
android:showDividers="middle" >
<Button
android:id="#+id/button1"
style="?android:buttonBarButtonStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Test" />
<Button
android:id="#+id/button2"
style="?android:buttonBarButtonStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Test" />
</LinearLayout>
Note: I understand there is a similar/exact question, but my resource seems to be more recent, yet the solution presented by the Google team doesn't work.
The top border is a "divider" which separates elements in a linear layout. If your buttons bar is on the bottom of a vertical layout, you have to activate the display of the divider, in the vertical layout. Generally, I do that by adding these attributes:
android:showDividers="middle"
android:divider="?android:dividerHorizontal"
android:dividerPadding="8dp"
The full layout code:
<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:divider="?android:dividerHorizontal"
android:dividerPadding="8dp"
android:orientation="vertical"
android:showDividers="middle" >
<TextView
android:id="#+id/url"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="dummyText" />
<LinearLayout
style="?android:buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
style="?android:buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button1" />
<Button
android:id="#+id/button2"
style="?android:buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button2" />
</LinearLayout>
</LinearLayout>
You have the wrong style in LinearLayout. It should be
style="?android:buttonBarStyle"
Not...
style="?android:buttonBarButtonStyle"
Example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonLayout"
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test"/>
<TextView
android:layout_height="wrap_content"
android:text="TextView (Place Holder)"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_margin="15dp"/>
<LinearLayout
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button2"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Test"/>
<Button
android:id="#+id/button3"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Test"/>
</LinearLayout>
</LinearLayout>
Example 2 (ListView):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonLayout"
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_weight="1.0"/>
<LinearLayout
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button2"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Test"/>
<Button
android:id="#+id/button3"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Test"/>
</LinearLayout>
</LinearLayout>
I ran into the same issue following the document. The solution provided by user3055552 will give the middle divider but no top divider when there aren't other views on buttons.
Try:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/dividerVertical"/>
<LinearLayout style="?android:buttonBarStyle"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button style="?android:buttonBarButtonStyle"
android:id="#+id/back"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/back"/>
<Button style="?android:buttonBarButtonStyle"
android:id="#+id/next"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/next"/>
</LinearLayout>
</LinearLayout>
Preview
You can create this without using a button with just color of views.Try this
<LinearLayout
android:id="#+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:background="#2B1B17" >
<TextView
android:id="#+id/tv_cancel"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Cancel"
android:textColor="#drawable/text_changepassword_selector"
android:textSize="19sp" />
<View
style="#style/Divider"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp" />
<TextView
android:id="#+id/tv_apply"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Select"
android:textColor="#drawable/text_changepassword_selector"
android:textSize="19sp" />
</LinearLayout>

Categories

Resources