I have the following code in Android Studio in which I have two Linear Layouts inside a Frame layout. However, the buttons in both layout map on top of each other. Is it possible to have the two linear layouts (including the buttons) placed next to each other vertically rather than being mapped on top of peach other?
<FrameLayout 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:orientation="vertical"
android:background="#FFFFFF"
tools:context="com.dji.GSDemo.GoogleMap.MainActivity">
<fragment
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.google.android.gms.maps.SupportMapFragment" />
<FrameLayout
android:id="#+id/fram_map"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/locate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Locate"
android:layout_weight="1"/>
<Button
android:id="#+id/add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Add"
android:layout_weight="1"/>
<Button
android:id="#+id/clear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Clear"
android:layout_weight="1"/>
<Button
android:id="#+id/btn_draw_State"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Free Draw" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/config"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Config"
android:layout_weight="0.9"/>
<Button
android:id="#+id/upload"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Upload"
android:layout_weight="0.9"/>
<Button
android:id="#+id/start"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Start"
android:layout_weight="1"/>
<Button
android:id="#+id/stop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Stop"
android:layout_weight="1"/>
</LinearLayout>
</FrameLayout>
The following is a screenshot of how the buttons appears.
Try to change FrameLayout to LinearLayout in the root of xml code .
And set android:orientation="vertical"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fram_map"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/locate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Locate" />
<Button
android:id="#+id/add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Add" />
<Button
android:id="#+id/clear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Clear" />
<Button
android:id="#+id/btn_draw_State"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Free Draw" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/config"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.9"
android:text="Config" />
<Button
android:id="#+id/upload"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.9"
android:text="Upload" />
<Button
android:id="#+id/start"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Start" />
<Button
android:id="#+id/stop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Stop" />
</LinearLayout>
</LinearLayout>
FrameLayout will layout all children in the same frame on screen.
If you want multiple children to stack vertically or horizontally, you can wrap them in a LinearLayout instead. In this case, you can simply replace that root FrameLayout with a LinearLayout with android:orientation="vertical" to stack the two LinearLayouts vertically.
Related
This question already has answers here:
How do I align views at the bottom of the screen?
(18 answers)
Closed 5 years ago.
I am trying to align a button to bottom of screen but it is not moving.
The last button, with id=button 1, is the button in question. I want this button to align right at bottom of screen, but looks like, some combination of the attributes of nested arrays no letting it happen.
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="com.crackit.crackit.startQuiz1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="40dp"/>
<LinearLayout
android:layout_marginTop="50dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
android:weightSum="2">
<Button
android:id="#+id/radio0"
android:layout_weight="1"
android:layout_height="140dp"
android:layout_width="140dp"
/>
<Button
android:id="#+id/radio1"
android:layout_weight="1"
android:layout_height="140dp"
android:layout_width="140dp"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<Button
android:id="#+id/radio2"
android:layout_weight="1"
android:layout_height="140dp"
android:layout_width="140dp"
/>
<Button
android:id="#+id/radio3"
android:text="Android"
android:layout_weight="1"
android:layout_height="140dp"
android:layout_width="140dp"
/>
</LinearLayout>
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#0000FF"
android:onClick="NextQuestion"
android:layout_gravity="bottom"
android:textColor="#FFFFFF"
android:text="Next" />
</LinearLayout>
</LinearLayout>
I am trying to align a button to bottom of screen but it is not moving.
The last button, with id=button 1, is the button in question. I want this button to align right at bottom of screen, but looks like, some combination of the attributes of nested arrays no letting it happen.
Use this code to resolve your problem
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="40dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="50dp"
android:orientation="horizontal"
android:weightSum="2">
<Button
android:id="#+id/radio0"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_weight="1" />
<Button
android:id="#+id/radio1"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<Button
android:id="#+id/radio2"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_weight="1" />
<Button
android:id="#+id/radio3"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_weight="1"
android:text="Android" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_gravity="bottom"
android:background="#0000FF"
android:onClick="NextQuestion"
android:text="Next"
android:textColor="#FFFFFF" />
</RelativeLayout>
You can make use of RelativeLayout and then align the Button relative to it. Below is the example for your case.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
tools:context="com.crackit.crackit.startQuiz1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="40dp"/>
<LinearLayout
android:layout_marginTop="50dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
android:weightSum="2">
<Button
android:id="#+id/radio0"
android:layout_weight="1"
android:layout_height="140dp"
android:layout_width="140dp"
/>
<Button
android:id="#+id/radio1"
android:layout_weight="1"
android:layout_height="140dp"
android:layout_width="140dp"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<Button
android:id="#+id/radio2"
android:layout_weight="1"
android:layout_height="140dp"
android:layout_width="140dp"
/>
<Button
android:id="#+id/radio3"
android:text="Android"
android:layout_weight="1"
android:layout_height="140dp"
android:layout_width="140dp"
/>
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#0000FF"
android:onClick="NextQuestion"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:textColor="#FFFFFF"
android:text="Next" />
</RelativeLayout>
If you want the button to align to the right, change its width attribute to
android:layout_width="wrap_content"
And then add an attribute 'gravity' to your second linear layout: like this -
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:layout_gravity="center"
android:orientation="vertical" >
And if you must use linear layouts, include another empty linear layout before the button, with weight as 1 to use up the remaining space. ( So that button will be at the bottom) Like this-
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
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>
I want to achieve the following layout.
How do I make the button 0 equal to rest of the buttons. Please note that I have used layout_weight = "1" so that all of the rest of the buttons are of equal length while matching the parent. Since, I have created button 0 on a different layout so I can't seem to make it of equal length with other buttons.
Here's my code so far
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/seven"
android:layout_gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:id="#+id/eight"
android:layout_gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:id="#+id/nine"
android:layout_gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/zero"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Take the zero button out of the LinearLayout, I assume there is another layout all this are defined in, like a relative layout? and try something to this effect.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout">
<Button
android:id="#+id/seven"
android:layout_gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:id="#+id/eight"
android:layout_gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:id="#+id/nine"
android:layout_gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="wrap_content" />
</LinearLayout>
<Button
android:id="#+id/zero"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/linearLayout"
android:layout_marginTop="98dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
Take the last button in another linearlayout and further add linearlayout in it with weight, try this code....
<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/seven"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1" />
<Button
android:id="#+id/eight"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1" />
<Button
android:id="#+id/nine"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"></LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<Button
android:id="#+id/zero"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"></LinearLayout>
</LinearLayout>
here is the output
I'm creating an android app and I want to create a layout that has two buttons side by side and three buttons underneath. An example of what I am trying to do can be found here:
http://mycolorscreen.com/2014/11/29/flatdrop-zw-skin/
I am struggling to get the two buttons to be side by side in a horizontal linear layout and also have the three buttons in a vertical linear layout. Since the first linear layout is horizontal it will make my buttons become horizontal as well. My code is as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:weightSum="1">
<TextView
android:layout_width="164dp"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView2"
android:layout_gravity="left"
android:layout_weight="0.1" />
<TextView
android:layout_width="174dp"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView"
android:layout_gravity="right"
android:layout_weight="0.1" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
style="#style/AppTheme"
android:longClickable="false"
android:weightSum="1">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/btnFitnessGoalsDefaultString"
android:textColor="#FFFFFF"
android:id="#+id/btnFitnessGoals"
android:background="#drawable/buttondefault"
android:layout_marginBottom="10dp"
android:layout_weight="0.10"
android:layout_gravity="top" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="#string/btnNutritionGoalsDefaultString"
android:textColor="#FFFFFF"
android:id="#+id/btnNutritionGoals"
android:background="#drawable/buttondefault"
android:layout_weight="0.10" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/btnBonusEventsDefaultString"
android:textColor="#FFFFFF"
android:id="#+id/btnBonusEvents"
android:background="#drawable/buttondefault"
android:layout_weight="0.10" />
</LinearLayout>
</LinearLayout>
You need to do something like this
<LinearLayout
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal">
<!-- horizontal buttons here -->
</LinearLayout>
<LinearLayout
android:orientation="vertical">
<!-- vertical buttons here -->
</LinearLayout>
</LinearLayout>
Use something like this:
<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:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Button" />
<Button
android:id="#+id/button5"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Button" />
</LinearLayout>
</LinearLayout>
A little bit simpler:
<LinearLayout
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal">
<!-- horizontal buttons here -->
</LinearLayout>
<!-- vertical buttons here -->
</LinearLayout>
This layout will work fine with all device screen. try with it .
<?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" >
<!-- 2 buttons side by side -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- btn 1 -->
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00ff00"
android:foreground="?android:attr/selectableItemBackground" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button 1" />
</FrameLayout>
<!-- btn 2 -->
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#446600"
android:foreground="?android:attr/selectableItemBackground" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button 2" />
</FrameLayout>
</LinearLayout>
<!-- three buttons underneath -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical" >
<!-- btn 3 -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#dd77ff"
android:foreground="?android:attr/selectableItemBackground" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button 3" />
</FrameLayout>
<!-- btn 4 -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#9977ff"
android:foreground="?android:attr/selectableItemBackground" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button 4" />
</FrameLayout>
<!-- btn 5 -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#1277ff"
android:foreground="?android:attr/selectableItemBackground" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button 5" />
</FrameLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/costOperatingText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Operating cost:" />
<TextView
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="0"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="6">
<TextView
android:id="#+id/earnings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Daily Earnings: " />
<TextView
android:id="#+id/earningsValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="0" />
</LinearLayout>
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>