I need to set two buttons side by side... I have used linearlayout for it... I have given each button to 0.5 layout_weight as i want each one to take equal space..I also make button to take equal height. The problem i am facing that left button will slide down if i give right button to match its height.
<LinearLayout
android:id="#+id/buttonLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/botomMarginTextView"
android:orientation="horizontal" >
<Button
android:id="#+id/id1"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginLeft="20dp"
android:layout_weight="0.5"
android:background="#drawable/button_back"
android:text="#string/name1" />
<Button
android:id="#+id/id2"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="20dp"
android:layout_weight="0.5"
android:background="#drawable/button_back"
android:text="#string/name2" />
</LinearLayout>
Edit :
Please give left button longer text and right button smaller
text..otherwise it is producing right layout
I am using #android:style/Theme.Black.NoTitleBar.Fullscreen . If i am going with normal theme then it is working fine
Now how to make this button keep side by side and also to make them of equal height?
To android:layout_height attribute of LinearLayout, give value of 60dp
android:layout_height="60dp"
and to android:layout_height attribute of both Button, give value of match_parent
android:layout_height="match_parent"
So, updated XML snippet will be
<LinearLayout
android:id="#+id/buttonLayout"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:layout_below="#id/botomMarginTextView"
android:orientation="horizontal" >
<Button
android:id="#+id/id1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_weight="0.5"
android:background="#drawable/button_back"
android:text="#string/name1" />
<Button
android:id="#+id/id2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="20dp"
android:layout_weight="0.5"
android:background="#drawable/button_back"
android:text="#string/name2" />
</LinearLayout>
Related
I have a LinearLayout with two buttons. But, when a button has some longer text that needs breaking, the button's height does not expand to fit the text. Instead it crops the text.
Here's what I have:
<LinearLayout
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<Button
android:id="#+id/previous_button"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="#string/previous_button"
android:textColor="#color/light_blue" />
<Button
android:id="#+id/next_button"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="#string/next_button"
android:textColor="#color/light_blue" />
</LinearLayout>
Any help on why button crops the text?
Try adding android:singleLine="false" property to the problematic button. Hope this solve your problem.
If it doesn't work, probably you'll need to remove the button's default padding by adding android:padding="0dp"
You can make the text to align in multi-lines.
A horizontal LinearLayout aligns the baselines of all its child controls by default. So the first line of text in your multi-line button is vertically aligned with the single line of text in the other buttons.
To disable this behaviour, set android:baselineAligned="false" on the LinearLayout
For Example,
<LinearLayout
android:id="#+id/bottom_linear_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="horizontal">
<Button
android:id="#+id/two_board_btn_continue"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#drawable/rounded_corner_blue_button"
android:text="#string/continue_bidding"
android:textColor="#android:color/white" />
<Button
android:id="#+id/two_board_btn_checkOut"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#drawable/rounded_corner_blue_button"
android:text="#string/checkout"
android:textColor="#android:color/white" />
<Button
android:id="#+id/two_board_btn_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#drawable/rounded_corner_blue_button"
android:text="#string/add_to_cart"
android:textColor="#android:color/white" />
</LinearLayout>
Just remove #style from Both the buttons.
How much long your Button name. you have already used the match parent. So, only you can do to reduce the textSize of Button. That's All.
I want to layout 3 element Button , TextView , Button on the bar like this
[Button1] --- TextView --- [Button2]
2 button are always anchor fixed in left and right screen(padding 4dp) ,and TextView is center (change width depend on screen size),They should be apply for all screen size(not scaled in larger screen). How can I do it??
It would look something like this.-
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
</RelativeLayout>
Notice that you still need to set other properties such as texts, ...
You can use LinearLayout with android:weightSum
Try Like this, By using android:weightSum, you can divide how much space for Button and textView.. And it will automatically adjust in all the density devices.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="10" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_margin="4dp"
android:layout_weight="3"
android:text="LeftButton" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="4dp"
android:layout_weight="4"
android:gravity="center"
android:text="Center TextView text" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="4dp"
android:layout_weight="3"
android:text="Right Button" />
</LinearLayout>
android:weightSum work fine for me, I resolved all my troubles :)
I have a TextView and Button in my program and I cannot get the size of the Button and the TextView to be the same. How can I do this?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="67dp"
android:background="#999999"
android:gravity="center"
>
<Button
android:id="#+id/button1"
android:layout_width="130dp"
android:layout_height="60dp"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="130dp"
android:layout_height="60dp"
android:background="#ffffff" android:textColor="#000000"
android:textSize="24dp" android:textStyle="bold"
android:gravity="center"
android:text="0.0" />
</LinearLayout>
Actually, they both have the same size, but the Button uses an image as a background and it seems it has some margins.
To test this, override the background of button with a color and see they are the same size:
android:background="#0F0"
So, the solution would be to provide a custom background for your button, or adapt the TextView to match the Buttons' width and height, minus the margins of Button, which personnaly I don't think is the best approach.
When I want multiple controls to have the same size what i generally do is put them in a TableLayout.
In your case, i'd put a TableLayout inside the linear layout and put the button and textview inside a TableRow, set the weightsum for the TableRow to 2 and set the weights of the individual controls to 1.
This would make the controls take up the same amount of space on the screen. A sample xml is shown below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="2" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/hello_world">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</TableRow>
</TableLayout>
</LinearLayout>
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.
I have following three button in a Linear Layout with width fill_parent.
How can I set the width of these buttons to equally cover the whole screen area?
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnReplyMessage"
android:gravity="left"
android:text="Reply"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnMarkAsUnread"
android:gravity="left"
android:text="Mark as unread"
/>
<ImageButton
android:id="#+id/btnDeleteMessage"
android:src="#drawable/imgsearch"
android:gravity="right"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
/>
Give all buttons the following properties
android:layout_width="fill_parent"
android:layout_weight="1"
fill_parent tells them to consume as much width as possible, and weight determines how that width shall be distributed, when more than one control are competing for the same space. (Try playing around with different values of weight for each button to see how that works)
You should just specify these attributes for each button:
android:layout_width="fill_parent"
android:layout_weight="1"
So it should be something like that:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
you can use following code:
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
You must to do 0dp in width on every button.