defining width and height to layouts android - android

my requirement is to make 10 layouts in a single layout . Each layout should be 50 % horizontally and 20% Vertically.
Current my code can make horizentally 50% but how to make same layouts to 20% vertical.
Can it be possible.
Code is
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="horizontal">
<LinearLayout android:layout_width="0dip"
android:layout_height="wrap_content" android:orientation="horizontal"
android:id="#+id/linearLayoutouter" android:layout_weight=".5"
android:background="#android:color/holo_green_dark">
<Button android:text="Button" android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
</Button>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:id="#+id/linearLayout1"
android:orientation="vertical"
android:layout_width="0dip"
android:layout_weight=".5"
android:background="#android:color/holo_orange_light">
<Button android:text="Button"
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
</Button>
<Button android:layout_width="wrap_content"
android:id="#+id/button2"
android:layout_height="wrap_content"
android:text="Button"
android:layout_gravity="center"></Button>
</LinearLayout>

u should add another child layout in your linear layout to avoid nested weight.
and check this What is android:weightSum in android, and how does it work?
try this..hope works fo u..
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayoutouter"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:background="#ff0000"
android:orientation="horizontal" >
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button" >
</Button>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#000000"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:orientation="vertical"
android:weightSum="10" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button5"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button6"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button7"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button8"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button9"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button10"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<!-- added 8 mote view with weight 1 -->
</LinearLayout>
</LinearLayout>
</LinearLayout>

You can do that with nested layouts, like a grid.
<!-- Row 0 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical">
<!-- Row 0: Column 0-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"
android:orientation="horizontal">
<Button ... />
</LinearLayout>
<!-- Row 0: Column 1-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"
android:orientation="horizontal">
<Button ... />
</LinearLayout>
</LinearLayout>
...
...
<!-- Row 4 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical">
<!-- Row 4: Column 0-->
...
</LinearLayout>
It looks a bit odd, maybe you could consider using a ListView or any other strategy that fits better.

You can use weightSum property like below
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="5">
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:weightSum="2"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"></LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"></LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:weightSum="2"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"></LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"></LinearLayout>
</LinearLayout>
<!-- 3 more rows here -->
</LinearLayout>
Outer weightSum is used for 5 rows. And inner weightSum is used for 2 columns

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.

line three button together but space them in three row separately

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/wrapper"
android:layout_width="300dp" android:weightSum="1"
android:orientation="vertical" android:layout_height="300dp">
<LinearLayout android:id="#+id/LinearLayout02" android:layout_width="match_parent" android:layout_weight="0.33" android:layout_height="0dp">
<Button android:id="#+id/Button04" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
<Button android:id="#+id/Button05" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
<Button android:id="#+id/Button06" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
</LinearLayout>
<LinearLayout android:id="#+id/LinearLayout01" android:layout_width="match_parent" android:layout_weight="0.33" android:layout_height="0dp">
<Button android:id="#+id/Button01" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
<Button android:id="#+id/Button02" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
<Button android:id="#+id/Button03" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout1" android:layout_width="match_parent" android:layout_weight="0.33" android:layout_height="0dp">
<Button android:id="#+id/button1" android:text="Button" android:layout_weight="1" android:layout_width="0dp" android:layout_height="fill_parent"></Button>
<Button android:id="#+id/button2" android:text="Button" android:layout_weight="1" android:layout_width="0dp" android:layout_height="fill_parent"></Button>
<Button android:id="#+id/button3" android:text="Button" android:layout_weight="1" android:layout_width="0dp" android:layout_height="fill_parent"></Button>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Heres my code I want to space those rows I would like to know how can I achieve it?
On you wrapper LinearLayout add layout_gravity="center_vertical"
<LinearLayout
android:id="#+id/wrapper"
android:layout_width="300dp"
android:layout_gravity="center_vertical"
android:weightSum="1"
android:orientation="vertical"
android:layout_height="300dp">
Use GridView to get this.
<GridView
android:id="#+id/gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="60dp"
android:horizontalSpacing="5dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="15dp"/>
Try to use gravity="center" in main LinearLayout like below code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/wrapper"
android:layout_width="300dp" android:weightSum="1"
android:orientation="vertical" android:layout_height="300dp"/>
</LinearLayout>

Position of buttons in LinearLayout

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>

Android: How to balance GridLayout in xml

I want to have a layout with a header and a footer and four pictures (ImageView) all the same size in two rows and two columns in the center. I don't want to use GridView.
This is what I'm thinking of:
the GridLayout elements go their own way with size and don't shrink to the size imposed by the surrounding elements. They either become too big and go off the page, or are cropped by the following LinearLayout. Here is an example of what I mean:
I guess you'll need to see the xml:
<?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="match_parent"
android:orientation="vertical"
android:weightSum="3" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_column="1"
android:layout_columnSpan="2"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_row="0"
android:layout_weight="1"
android:columnCount="2"
android:weightSum="4"
android:rowCount="2" >
<Button
android:id="#+id/button2"
android:layout_column="0"
android:layout_row="0"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button13"
android:layout_column="1"
android:layout_row="0"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button14"
android:layout_column="0"
android:layout_row="1"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button15"
android:layout_column="1"
android:layout_row="1"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
</GridLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
</LinearLayout>
I want:
A header and footer
Four centered pictures of the same size
A left and right margin around the four-picture bock.
Maybe I'm taking the wrong approach to this, so feel free to send me off in a new direction if necessary.
Without GridView you can try it:
It works perfect.
<?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="match_parent"
android:orientation="vertical"
android:weightSum="3" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_row="0"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button13"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_row="0"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/button14"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button15"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>

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