I am trying to achieve the look of Facebook's event page and am having trouble copying their three buttons that say if a person is going to an event.
I am trying to achieve this,
Mine currently looks like this,
This is the XML for the buttons
<LinearLayout
android:id="#+id/button_holder"
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:paddingBottom="10dp">
<Button
android:id="#+id/button_going"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="14sp"
android:textColor="#color/secondary_text"
android:text="Going"
android:background="#drawable/item_left_button_background"/>
<Button
android:id="#+id/button_maybe"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="14sp"
android:textColor="#color/secondary_text"
android:text="Maybe"
android:background="#drawable/item_middle_button_background"/>
<Button
android:id="#+id/button_decline"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="14sp"
android:textColor="#color/secondary_text"
android:text="Decline"
android:background="#drawable/item_right_button_background"/>
</LinearLayout>
I do not know where the extra Padding or Margin is coming from above and below my buttons. I have tried android:padding="0dp" and android:layout_margin="0dp" on the buttons but it had no effect.
My best guess is it might have something to do with the layout_weight attribute. This may give the buttons a certain height based on their width, if this is the case then how can I make the buttons shorter?
AS you are applying the background item_left_button_background so that must be an image or selector which consists images those images have a specific height. When you give the button height as wrap_content it will take by default what is height of the image so as per my suggestion give a specific height to the button or create the background images as per your required sizes
Related
I've tried to track down what's going wrong here, and I'm coming up with nothing. If i change my layout weight from 1 to 2, on the first view in my horizontal linear layout, the resulting width actually decreases. Here is the code.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:weightSum="7">
<TextView android:id="#+id/filterButton"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content"
android:padding="0dp"
android:textColor="#android:color/white"
android:text="filter"></TextView>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="fill_parent"
android:gravity="center" >
<AutoCompleteTextView
android:id="#+id/editText1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:ems="14"
android:imeOptions="actionDone"
android:inputType="textAutoComplete|textAutoCorrect"
android:textColor="#FFFFFF"
android:singleLine="true"
android:gravity="left">
</AutoCompleteTextView>
<ImageView android:id="#+id/clear"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/close"
android:layout_alignParentRight="true"
android:scaleType="fitEnd"
android:adjustViewBounds="true"
android:padding="12dp"
android:visibility="invisible"
android:tint="#android:color/white"/>
</RelativeLayout>
<ImageView android:id="#+id/listButton"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:src="#drawable/list"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:padding="9dp"
android:tint="#android:color/white"></ImageView>
</LinearLayout>
Here is what my action bar looks like with the TextView's layout weight set to 1.
You can see I'm already getting some overflow on the right element. It's getting bumped off screen. Here is what it looks like with the TextView's weight set to 2.
Which is odd because the TextView has actually decreased in size. Here is the action bar without the TextView. The sizes are behaving well here.
Any help would be greatly appreciated!
It looks similar to problem i have sometimes.
For layout with weight 7 it would give space like that [[..2..][.5]].
Like in your example making weight smaller actually give more space for layout.
Try to change background color of the middle layout to have better grasp what space exacly is given to your layouts.
Unlucky on my computer your code works normally so I can't help more than that.
I have LinearLayout with TextView and Button. I set layout_height attribute to wrap_content but layout_height has much bigger size. If I remove this button then all is alright. I try to decrease button text size but frame of the button still the same. I don't want hardcode button size. What can be the reason this strange result?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="#dimen/left_margin"
android:layout_marginTop="#dimen/top_margin"
android:layout_weight=".3"
android:text="#string/contact" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:layout_marginLeft="#dimen/left_margin"
android:layout_marginTop="#dimen/top_margin"
android:orientation="horizontal"
android:weightSum="1" >
<TextView
android:id="#+id/contact"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/contact" android:textSize="#dimen/button_font_size"/>
</LinearLayout>
Button has background and other layout properties and does not seem possible to reduce its height. An option would be to use a TextView with custom style and handle click event so that it behaves like a Button.
Example:
<TextView
android:layout_height="wrap_content"
android:background="#ddd"
android:padding="6dp"
android:layout_width="wrap_content"
android:text="Contact" />
It requires some work and time spent to style the TextView properly, but if you have no other choice, it may do the trick for you.
I had this issue as well when using a button, you can manually set the height and width, but I also have not found a set way to reduce the wrap_content size.
android:layout_width="40dp"
android:layout_height="30dp"
This is because of minimum height of a button. Set android:minHeight="1dp" or any other size to make it happen.
I have 8 buttons inside a LinearLayout and I don't want any space betwen them. I have tried set all padding and margins to 0 and nothing.
Any solutions?
You could use negative margins but could be bad practice. Most 9-patch PNGs have transparent areas around the visible ones, that could be why it looks like you have margins. Try turning-on Show layout boundaries to investigate. It's under Settings > Developer Options.
Try this code. Use layout_weight=1 while, layout_width="0dp".
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:padding="3dp"
android:background="#color/green">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/green"
android:text="Submit"
android:textColor="#color/white"
android:layout_weight="1"
android:id="#+id/submitQuestionnaireButton"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/white"
android:text="Cancel"
android:textColor="#color/green"
android:layout_weight="1"
android:id="#+id/cancelQuestionnaireButton"/>
</LinearLayout>
I have a Button with its width as match_parent. And I want a image/icon with a text in its center. I have triedandroid:drawableStart attribute but its of no help. I don't know what I am missing. Is there any one who is also facing the same problem.
Note:This link is not solving my problem. I am attaching my button portion of xml
<Button
android:background="#drawable/blue_button"
android:id="#+id/btn_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:drawableStart="#drawable/ic_list"
android:text="#string/btn_schedule"
android:textColor="#android:color/white" />
After adding these attribute my text is coming on center but image/icon is still on left side of button. Can any body help!!!
You might want to check my answer to this question:
Android Button with text and image
Its an ugly solution but it you want the image and text to be centered as a group in the button rather than text center and drawable padded from the side then its the only way I have found.
100% working
<FrameLayout
style="?android:attr/buttonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#null"
android:clickable="false"
android:drawableLeft="#android:drawable/ic_delete"
android:focusable="false"
android:gravity="center"
android:minHeight="0dp"
android:minWidth="0dp"
android:text="Button Challenge" />
from here
This works for me. Basically play with the paddingLeft and PaddingRight of the button to get the text and image close together to the center.
Note: Might be an issue with rather long texts.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="search button"
android:drawableStart="#drawable/ic_action_search"
android:paddingLeft="60dp"
android:paddingRight="60dp"/>
</LinearLayout>
I had the same problem and I hadn't found anywhere clear solution. BUT I got some information which also help me to provide following solutions (I have chosen the second one):
Create image which will contain your image and text
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableTop="#drawable/YOUR_IMAGE"
android:gravity="center_horizontal|center_vertical" />
It is not so clear and you have to add more complicated changes to your layout but it is easier to modify the text later
<FrameLayout
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_height="50dp"
android:layout_width="match_parent" />
<TextView
android:text="sample"
android:layout_height="50dp"
android:layout_width="wrap_content"
android:drawableLeft="#drawable/YOUR_IMAGE"
android:gravity="center_horizontal|center_vertical" />
</FrameLayout>
I tried android:drawableTop
The image shown in the center of the button
Looks like there's a plenty of questions about centering, same size etc, but so far I didn't find the exactly my case so I dare to ask :)
What I need is a layout of three buttons like this:
[ previous ][*select*] [ next ]
where [previous] and [next] buttons are of the same size (i.e. in this case, size of the [previous] button as it is bigger), and the [*select*] button should stretch to occupy all of the available width.
Following the hints of making two buttons in LinearLayout same sized, i came up with the following xml file:
<LinearLayout
android:id="#+id/button_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Previous" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Select" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Next" />
</LinearLayout>
This almost works :)
Except one thing: instead of making Next button to match the size of Previous button, android makes Previous button to be the size of the Next :)
And because of this the text "Previous" gets wrapped in two lines, like
Previ
ous
Dunno if this is a bug or not, but can you advice me a workaround or some another way to achive the desired layout?
Thank you!
I'd suggest using a RelativeLayout
<RelativeLayout
android:id="#+id/buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="false">
<Button
android:id="#+id/previous"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:text="Previous"
android:layout_alignParentLeft="true"/>
<Button
android:id="#+id/next"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:text="Next"
android:layout_alignParentRight="true"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Select"
android:layout_toRightOf="#id/previous"
android:layout_toLeftOf="#id/next" />
</RelativeLayout>
This should work.
If you are including "android:layout_weight" you should give either "android:layout_width" or "android:layout_height" as "fill_parent"
modify your code like this
<LinearLayout
android:id="#+id/button_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Previous" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.5"
android:text="Select" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Next" />
In that sort of case I would go for a TableLayout, in which you have one row, and a weight of 1 for EACH button. and the stretchColumn attribute put to column 1. Does this make any difference?
I'm not sure if you can match a size to some other besides by doing this in code. The easiest solution is probably adjusting the previous and next button widths in dp/sp units until they look good and have the select button be the only one with the layout_weight attribute.