line three button together but space them in three row separately - android

<?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>

Related

How to create layout_weight for vertical and horizontal at the same time in a RecyclerView item

I want a layout like below image for the item of a RecyclerView:
Below is my XML Item script:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
android:weightSum="1"
android:layout_height="wrap_content">
<TextView
android:id="#+id/t"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="0.5"
android:gravity="center"
android:textColor="#000000"
android:textSize="20sp"
/>
<TextView
android:id="#+id/d"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="0.5"
android:gravity="center"
android:textColor="#000000"
android:textSize="20sp"
/>
</LinearLayout>
What changes to be needed so that vertical and horizontal weight will be applied on layout at same time using Linear Layout?
If you want to use LinearLayout You can use something like this:
[LinearLayout ] [LinearLayout ]
[child 1] [child 1](takes full screen height)
[child 2]
Here is the XML for it:
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2">
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Button"/>
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button" />
</LinearLayout>
</LinearLayout>
It will look like this:
Put it in Linear Layout and provide weight to your each layouts
<LinearLayout
android:weightSum="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_weight="0.5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:id="#+id/myText"
android:text="Hello"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:id="#+id/newText"
android:text="NEW Text"/>
</LinearLayout>
<TextView
android:layout_weight="0.5"
android:layout_width="match_parent"
android:textAlignment="center"
android:layout_height="wrap_content"
android:text="Hello"
android:id="#+id/Newtext"/>
</LinearLayout>
Thank you so much for your helps!
And this is my exact answer from your helps:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
android:weightSum="1"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="0.4">
<TextView
android:id="#+id/t"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:gravity="center"
android:textColor="#000000"
android:textSize="20sp" />
<TextView
android:id="#+id/d"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:gravity="center"
android:textColor="#000000"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="0.6">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.4"/>
<Switch
android:id="#+id/switch1"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="0.2"
android:checked="true" />
</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>

defining width and height to layouts 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

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