I've built a button bar and want it spread like that the outer buttons taking 40% of the space and the middle button takes 20% of the space. As you can see in the screenshot this works but the text gets cropped within the button.
I found out that the text stays in the bounds of 1 weight (=20%) although the button "knows" it has more space - otherwise it wouldn't fill the background drawable properly.
Here's the setup of the button bar:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#id/headerbar_top"
android:layout_width="match_parent"
android:layout_height="#dimen/headerbar_divided_height"
android:orientation="horizontal"
android:gravity="center"
android:weightSum="5"
>
<Button
android:id="#id/headerbar_btn_left"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="2"
android:gravity="center_horizontal|bottom"
android:paddingBottom="#dimen/headerbar_paddingBottom"
android:textSize="#dimen/headerbar_textSize"
android:textColor="#color/font"
android:text="Spots"
android:maxLines="1" android:lines="1"
android:ellipsize="end"
android:background="#drawable/headerbar_button_left_states"
android:onClick="onHeaderbarBtnClick"
android:layout_marginRight="#dimen/headerbar_divided_margin"
/>
<Button
android:id="#id/headerbar_btn_center"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center_horizontal|bottom"
android:paddingBottom="#dimen/headerbar_paddingBottom"
android:textSize="#dimen/headerbar_textSize"
android:textColor="#color/font"
android:maxLines="1" android:lines="1"
android:ellipsize="end"
android:background="#drawable/headerbar_button_center_states"
android:onClick="onHeaderbarBtnClick"
android:layout_marginRight="#dimen/headerbar_divided_margin"
android:layout_marginLeft="#dimen/headerbar_divided_margin"
/>
<Button
android:id="#id/headerbar_btn_right"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="2"
android:gravity="center_horizontal|bottom"
android:paddingBottom="#dimen/headerbar_paddingBottom"
android:textSize="#dimen/headerbar_textSize"
android:textColor="#color/font"
android:text="Tours"
android:maxLines="1" android:lines="1"
android:ellipsize="end"
android:background="#drawable/headerbar_button_right_states"
android:onClick="onHeaderbarBtnClick"
android:layout_marginLeft="#dimen/headerbar_divided_margin"
/>
</LinearLayout>
Does anyone have an idea why the button text behaves so strangely?
EDIT:
Here's the XML-drawable for the left button:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/headerbar_button_left_on" android:state_selected="true"/>
<item android:drawable="#drawable/headerbar_button_left_off"/>
</selector>
And here are the drawables themselves:
Remove android:ellipsize="end" from the button's declaration.
Also: Your 9-patch-drawables seem to be missing the content area. The bottom and right corners are used for the 9-patch contents. Here's a good simple tutorial on 9-patches.
Related
I'm trying to build the following layout on Android without any success.
I want a text to be displayed on my screen. It can take the whole width, but must be centered horizontally.
On the same line, on the right side of the screen I want to display a small layout. It shouldn't impact the horizontal centering of the main text and the main text shouldn't be visible behind the layout displayed on the right.
I cannot use a hard color for my layout background as it's displayed on a transparent background over a bitmap...
Any idea on how to achieve this ?
I can either use a RelativeLayout in which case the main text isn't centered based on the middle of the screen (it takes the right layout width into account)
Or the text is displayed behind the right layout...
Edit:
Here is one of my test
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom|center_horizontal"
android:layout_centerInParent="true"
android:fontFamily="sans-serif"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:singleLine="true"
android:textColor="?android:attr/textColorPrimary"
android:textSize="17sp"
android:text="very looooooooooooooooooooooooooooooooong text"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerInParent="true"
android:layout_alignParentRight="true"
android:padding="3dp"
android:visibility="visible" >
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_vertical"
android:filter="true"
android:src="#drawable/device_access_time" />
<Spinner
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical" />
</LinearLayout>
</RelativeLayout>
RelativeLayouts adhere to the principle of z-indexes, so if you put the right-aligned layout first, the centered text view will be drawn correctly on top.
Having a problem with nested LinearLayouts to use as a custom row in a ListView.
App is a kind of internal corporate phone book and this row will be repeated in the ListView.
The "Details Witheld" on the right looks fine when gravity is set to left for it, but if gravity is set to center then it appears half off the page.
I'd guess my parent LinearLayout is too wide for the screen but it's set as fill_parent so I don't see how.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
Full XML source is below.
Aligned Left looks like this and I'd like Details to be a space in so it's centered above the Witheld.
Aligned Center looks like this
Full XML Source
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<!-- Left side name & post / parish -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:orientation="vertical" >
<TextView
android:id="#+id/txtrowname"
android:layout_marginBottom="2dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Smtih, Mr John"
android:textSize="24sp"
android:textColor="#color/darkblue_text"
android:textStyle="normal" />
<TextView
android:id="#+id/txtrowpost"
android:layout_marginBottom="2dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12 Some Street, SomeTown. SS11 1SS"
android:textSize="12sp"
android:textColor="#000000"
android:textStyle="normal" />
</LinearLayout>
<!-- Details withheld on right -->
<TextView
android:id="#+id/txtrowwitheld"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:text="Details Witheld"
android:layout_weight="20"
android:textSize="18sp"
android:gravity="center"
android:lines="2"
android:maxLines="2"
android:textColor="#FF0000"
android:layout_marginBottom="2dp"
android:textStyle="normal" />
</LinearLayout>
Image with layout_gravity as suggested by Ramesh
try layout_gravity in place of gravity that will work and dont use line="2". it will automatically fit into 2 lines if width exceeds.
I ended up just making do without it being centered.
I am aiming for a layout similar to the native calculator app. I want text to trail off the left of the screen without moving the buttons on the right. Currently my text moves to the left until filling the screen at which point the buttons are pushed off the right edge.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_weight="1"
android:gravity="right"
android:orientation="horizontal" >
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="none" >
<TextView
android:id="#+id/display_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textColor="#android:color/white"
android:textIsSelectable="true"
android:textSize="30sp" />
</HorizontalScrollView>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/delete_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onDelete"
android:text="#string/delete_button" />
<Button
android:id="#+id/equate_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onEquate"
android:text="#string/equate_button" />
</LinearLayout>
</LinearLayout>
You don't need to put your TextView into a HorizontalScrollView, it will automatically become scrollable when the text exceeds the bounds. See docs: http://developer.android.com/reference/android/widget/TextView.html#attr_android:scrollHorizontally
Just add android:scrollHorizontally="true" to the TextView in the layout.
You may also need to change the text view's layout_weight to 0 or set its layout_width to something fixed (like 100dp).
To get the text to go right-to-left, set the gravity on the TextView to be android:gravity="right|center_vertical"
I also humbly refer you the source of the calculator app you are trying to emulate: https://github.com/android/platform_packages_apps_calculator/tree/master/src
I have this layout for my header:
<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/home"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Home"
android:background="#drawable/ic_menu"
android:textSize="11dp"
/>
<Button android:id="#+id/questions"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Questions"
android:textSize="11dp"
android:background="#drawable/ic_menu"
android:layout_toRightOf="#+id/home" />
<Button android:id="#+id/businesses"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="11dp"
android:text="Businesses"
android:background="#drawable/ic_menu"
android:layout_toRightOf="#+id/questions"
/>
<Button android:id="#+id/learn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Learn"
android:textSize="11dp"
android:background="#drawable/ic_menu"
android:layout_toRightOf="#+id/businesses"
/>
</LinearLayout>
What I thought was that if I made the button backgrounds with images, then that would enable me to not have space between the buttons. Right now, the header buttons render nicely, but there is a thick whitespace background space between them. How could I get rid of that white space and make the space between them just 1px?
I just uploaded a photo of the emulator. See the 4 dark boxes on the top of the screen? That is the header with the spaces.
Thanks!
There is a potential solution in a similar question here, Is there a way to completely eliminate padding in a LinearLayout containing buttons?
Your drawable ic_menu could have padding, if you are using a 9-patch for that image, when you author it make sure the black lines along the right and bottom are as you intended, because this is for specifying the content area in your 9-patch and could contribute to padding.
Also, try adding 0dp for both margin and padding on the buttons.
Hope that helps.
The problem is that the image contains a border color. Remove the border from the image, or use a solid color #868686, which is the image center color.
I have a vertically oriented LinearLayout that has a child LinearLayout that includes a TextView, an EditText, and a Button, and a child ImageView.
So something like:
<LinearLayout>
<LinearLayout>
<TextView>
<EditText>
<Button>
<ImageView>
And the problem I am experiencing is that the seperation between the LinearLayout and the ImageView (displaying a .png as a background with android:background="#drawable/sun") is displaying a visible crease in between them. I have the LinearLayout using the same background color as the .png so that it looks like they flow together, but the crease ruins that aspect.
Edit: Here's a screenshot!
Do you see the thin line under the submit button?
Here is the xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/lightblue"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/welcome"
android:textSize="17sp"
android:textColor="#color/black"
/>
<EditText
android:id="#+id/entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_text"
android:textSize="25sp"
android:inputType="text"
/>
<Button
android:id="#+id/submitButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:text="Submit"
/>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="0px"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/sunclouds"
android:layout_marginBottom="20dip"/>
<TextView
android:id="#+id/marq"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dip"
android:layout_gravity="center_horizontal|bottom"
android:textColor="#color/black"
android:text="#string/provider"
android:marqueeRepeatLimit="marquee_forever"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:singleLine="true"
android:scrollHorizontally="true"
/>
</FrameLayout>
</LinearLayout>
How can I fix this?
(side note, my sun and cloud have rough edges, any quick fixes with gimp?)
As a reference for someone who does not have the patience to go through the comments, the real problem was that the exported image had a thin line which the OP had corrected. In any case, the following are the list of reasons why this could happen:
The exported image has a thin line - This can usually be solved by drawing a small rectangle over the line. If not, then slice a 1px version of the image and put it on top of this line to cover it up. It generally works fine.
When exporting if you set the line color - To solve this remove the line color. Either set it to the same color as the image or remove it altogether.