I have a linearlayout with two linearlayouts inside. Both linearlayouts have 2 buttons. I want to align the first two buttons to the left, and the other two buttons to the right. Unfortunately I have the four buttons (or the 2 layouts) side by side.
This is my code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:background="#drawable/vat_header_selector"
android:orientation="horizontal" >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:orientation="horizontal" >
<Button
android:id="#+id/btn_numbers"
android:layout_width="90dp"
android:layout_height="30dp"
android:textColor="#drawable/vat_btn_header_textcolor_selector"
android:background="#drawable/vat_btn_header_selector"
android:text="Numbers">
</Button>
<Button
android:id="#+id/btn_text"
android:layout_width="90dp"
android:layout_height="30dp"
android:textColor="#drawable/vat_btn_header_textcolor_selector"
android:background="#drawable/vat_btn_header_selector2"
android:text="Words">
</Button>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:orientation="horizontal" >
<Button
android:id="#+id/btn_black"
android:layout_width="50dp"
android:layout_height="30dp"
android:textColor="#drawable/vat_btn_header_textcolor_selector"
android:background="#drawable/vat_btn_header_selector"
android:text="B">
</Button>
<Button
android:id="#+id/btn_white"
android:layout_width="50dp"
android:layout_height="30dp"
android:textColor="#drawable/vat_btn_header_textcolor_selector"
android:background="#drawable/vat_btn_header_selector2"
android:text="W">
</Button>
</LinearLayout>
</LinearLayout>
This is how it looks like:
And this is what I want:
Gravity left, right doesn't work when the orientation of the LinearLayout is set to horizontal(as the views are placed along the X axis). One way to do what you want is to insert an empty View between the two LinearLayouts to create a space between them:
<View android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1" />
Apply below properties to Second Linear Layout which contain Button B and Button W.
android:gravity="right"
android:layout_weight="1"
Related
I was thinking it would be something like android:layout_startOf"centerHoriztonal" or something like that but I have searched and couldn't find anything. If it helps I am trying to make a soundboard app where all the buttons can be the same size across multiple device screens.
try this xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:text="Here is button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
/>
<Button
android:id="#+id/button2"
android:text="Here is button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>
You can wrap the button(s) inside a horizontal LinearLayout and use layout_weight to divide the screen in half and then layout_alignParentLeft/layout_alignParentRight to align the buttons inside a RelativeLayout that takes up exactly half the screen width.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Button Text"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1">
</RelativeLayout>
</LinearLayout>
Another way to do it is to create a dummy view object that is centered horizontally in the parent view, and align your buttons to the left or right of it:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/dummyview"
android:layout_width="0px"
android:layout_height="0px"
android:layout_centerHorizontal="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/dummyview"
android:text="Button Text"/>
</RelativeLayout>
Are you sure you want the same size of buttons in all devices? People try to avoid it and make make view elements flexible.
Anyways if you want to set same size just directly write in layout
android:layout_width = "#dimen/valueForButton"; //some absolute value
For starting at same point, just add all buttons inside LinearLayout and make some operations there, such as
android:layout_gravity = "center_horizontal";
Your layout must be something like this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
I have a game layout in my app that has four buttons that should display at the top of my view and then I have two FrameLayouts that are also in this linear layout. The first FrameLayout just makes the top 1/4 of the view so my imageButtons that implement the Drag and drop API are not allowed at the top. The second FrameLayout is for the bottom 3/4 of the view which has 4 imagebuttons in it.
My issue is that when the game layout is displayed, the buttons in the linear layout are displayed just how i want them to, but the two FrameLayouts are squished to the top right corner.
Here is the code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/game_layout" >
<Button
android:id="#+id/doneButton"
android:layout_width="170dp"
android:layout_height="wrap_content"
android:onClick="onDoneClicked"
android:text="#string/done" />
<Button
android:id="#+id/cancelButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCancelClicked"
android:text="#string/cancel" />
<Button
android:id="#+id/leaveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onLeaveClicked"
android:text="#string/leave" />
<Button
android:id="#+id/finishButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onFinishClicked"
android:text="#string/finish" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.75"
android:orientation="horizontal"
android:id="#+id/topHalf" >
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:orientation="horizontal"
android:id="#+id/bottomHalf" >
<ImageButton
android:id="#+id/polarCapButton1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:background="#drawable/polarcap" />
<ImageButton
android:id="#+id/polarCapButton2"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:background="#drawable/polarcap" />
</FrameLayout>
<TextView
android:id="#+id/scores"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageButton
android:id="#+id/spaceRockButton1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left"
android:background="#drawable/spacerock" />
<ImageButton
android:id="#+id/spaceRockButton2"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:background="#drawable/spacerock" />
</LinearLayout>
Any help would be appreciated guys. Thanks.
I see several things that can be a potential problem.
Your linear layout contains several widgets and only 2 of those contain layout_weight values. To solve this issue, you want to wrap your two frame layouts in another LinerLayout container, where you specify the distribution of your 2 frame layouts inside your new linear layout.
In your new linerLayout, you want to specify the total weight of the layout, such as: android:weightSum="1".
Depending of your linear layout orientation, (if unspecified, it will be horizontal) If your LinearLayout orientation is horizontal, specify: android:layout_width="0dp". If the orientation is vertical, specify: android:layout_height="0dp" for the child elements.
Also, it seems to me that you want your buttons to align horizontally next to each other (horizontal orientation), and your two frames to align underneath the buttons, but right underneath each other (vertical orientation).
So in this case, the code would look something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/top_layout" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/game_layout" >
<Button
android:id="#+id/cancelButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCancelClicked"
android:text="#string/cancel" />
<Button
android:id="#+id/leaveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onLeaveClicked"
android:text="#string/leave" />
<Button
android:id="#+id/finishButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onFinishClicked"
android:text="#string/finish" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="1"
android:id="#+id/ll_layout_frames" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.75"
android:orientation="horizontal"
android:id="#+id/topHalf" >
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal"
android:id="#+id/bottomHalf" >
<ImageButton
android:id="#+id/polarCapButton1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:background="#drawable/polarcap" />
<ImageButton
android:id="#+id/polarCapButton2"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:background="#drawable/polarcap" />
</FrameLayout>
</LinearLayout>
<!-- you can insert more widgets here, they will be placed in the vertical linear layout -->
</LinearLayout>
I have a Horizontal Layout and I have some views inside it. I want some to start from the left and others to start in the right, but I can't manage to do it. I tried several Gravity configurations but they don't do anything.
That's the case I have:
I want the Flag to be in the right and the Time to be in the left, as pointed by the arrows. I will add some more flags later.
Could anyone help me out with this? Thanks :D
EDIT:
XML so far:
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:id="#+id/hlTopBar"
android:background="#e6262626"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/default_time_date_string"
android:id="#+id/tvTime"
android:textStyle="bold"
android:paddingLeft="10dp"
android:gravity="left" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ibUSA"
android:src="#drawable/united_states_flag"
android:background="#android:color/transparent"
android:adjustViewBounds="true" />
</LinearLayout>
android:layout_gravity works in the direction opposite the orientation of the LinearLayout – the children of a vertical LinearLayout can use android:layout_gravity to control their positioning horizontally (left or right), but not vertically. In the same way children of horizontal LinearLayout can use android:layout_gravity to control their positioning vertically (top or bottom) but not horizontally. As you are using Horizontal LinearLayout you can use android:layout_gravity to position children either top or bottom.For your purpose it is better to go with RelativeLayout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
.........
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
/>
<ImageView
.......
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
/>
</RelativeLayout>
Instead of using a horizontal layout use a Relative layout
example:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Time" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Image" />
</RelativeLayout>
result:
The RelativeLayout is a good answer. If, however, you REALLY want to do it with a LinearLayout, try putting an empty TextView in the middle, with width=0 and weight=1.
This empty view will automatically try to fill up however much space isn't taken up by the other views.
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:id="#+id/hlTopBar"
android:background="#e6262626"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/default_time_date_string"
android:id="#+id/tvTime"
android:textStyle="bold"
android:paddingLeft="10dp" />
<TextView
android:id="#+id/spacer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ibUSA"
android:src="#drawable/united_states_flag"
android:background="#android:color/transparent"
android:adjustViewBounds="true" />
</LinearLayout>
i am desinging a 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" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.05"
android:background="#000000"
android:orientation="horizontal" >
<Button
android:id="#+id/btncancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center"
android:background="#CCCCCC"
android:text="Cancel" />
<Button
android:id="#+id/btnadd"
android:layout_width="82dp"
android:layout_height="wrap_content"
android:gravity="right"
android:background="#3399FF"
android:text="Add" />
</LinearLayout>
</LinearLayout>
for button "Add" android:gravity=right is not working.i have give a layout:margin,then only its moving right.can anyone help me out.
It's a little unclear what you want, but do notice the following:
gravity affects the contents of the widget i.e. your button text.
layout_gravity affects positioning of the widget in the parent layout
So if you want the button to be on right, change gravity to layout_gravity.
Use RelativeLayout instead of LinearLayout.
and use android:layout_alignParentRight="true" for btnadd.
EDIT :
Code :
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.05"
android:background="#000000"
android:orientation="horizontal" >
<Button
android:id="#+id/btncancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center"
android:background="#CCCCCC"
android:text="Cancel" />
<Button
android:id="#+id/btnadd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:background="#3399FF"
android:text="Add" />
</RelativeLayout>
Change the LinearLayout to be as RelativeLayout
and instead of android:gravity="right" use android:layout_alignParentRight="true"
It is because you use LinearLayout (orientation horizontal)
Try to use relative layout
you are using linear layout in linear layout your layout depends on orientation like you are using vertical:
use relative layout instead to solve your problem,and give margins you want
also to align your button right use:
android:layout_alignParentRight="true"
your problem would definetly be solved with this.
it was because of you are using android:orientation="horizontal"in Linear Layout
use this android:orientation="vertical"
or use this i modified your code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.05"
android:background="#000000"
android:orientation="horizontal" >
<Button
android:id="#+id/btncancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#CCCCCC"
android:text="Cancel" />
<Button
android:id="#+id/btnadd"
android:layout_width="82dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#3399FF"
android:text="Add" />
</RelativeLayout>
If you want to achieve something like this:
You can do that either with RelativeLayout or LinearLayout.
For LinearLayout you explicitely add space between the buttons. This is because the android:layout_gravitypositions the view only within the space, that LinearLayout has given. And this space is not the LinearLayout itself, but the sum of all views, that were layed out linearly (as the name says).
Here's my way of putting the two buttons:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<Button
android:id="#+id/btnadd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add" />
<ImageView
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#android:color/transparent" />
<Button
android:id="#+id/btncancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
</LinearLayout>
I always prefer LinearLayout over RelativeLayout as I experienced LinearLayout as more robust, especially on Android's 2.x versions.
BTW: The difference between android:layout_gravity and android:gravity:
The layout_gravity tells the parent layout of a view to position the whole view within the bounds that the layout defines. In case of LinearLayout this is the space that was allocated by linearly putting the views one after the other.
The gravity tells the view to position its foreground within the available space. You might have seen, that your Add-Button has shown the text on the right side.
I have two LinearLayouts in my Android application. One (the top) holds a TextView and a Button and the one below it holds two buttons. I was wondering if there was a way to make the right button of the upper LinearLayout the same size as the right button of the bottom LinearLayout.
<LinearLayout android:layout_width="fill_parent"
android:id="#+id/linearLayout1" android:layout_height="wrap_content"
android:orientation="horizontal" android:paddingTop="15.0dip">
<TextView
android:paddingLeft="5.0dip"
android:textSize="33px"
android:textStyle="bold"
android:layout_height="wrap_content"
android:id="#+id/textViewPoints"
android:text="Points: 0"
android:layout_width="wrap_content"
android:layout_gravity="center_vertical"
android:paddingRight="25.0dip"
android:layout_weight="0" />
<Button
android:enabled="false"
android:onClick="myClickHandler"
android:layout_height="wrap_content"
android:id="#+id/buttonAddTracker"
android:layout_width="fill_parent"
android:layout_gravity="center_vertical"
android:text="#string/buttonAddTracker"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:id="#+id/linearLayout2" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:paddingTop="15.0dip">
<Button
android:text="Calculate"
android:id="#+id/button01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="myClickHandler" />
<Button
android:text="Reset"
android:id="#+id/button02"
android:layout_toRightOf="#+id/button01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="myClickHandler"></Button>
</LinearLayout>
Well there are two ways how you can do that ...
1) If you are using Linear Layout as you are, then you'll have to fix the WIDTH of the Left TextView and Left Button then can't be wrap content , just give them say 40 dip . After that put Right Buttons Width to fill_parent or fix a WIDTH for them too .
2) Use TableLayout and put each of them in their respective columns and rows and the TableLayout should handle it for you.