Custom titlebar positioning - android

I've created a custom titlebar for my Android application. All is well except I've placed a checkbox on the titlebar and I want my checkbox to be positioned farther left (so I can line it up with the checkboxes in each list item). I can not figure out how to move it farther left. It's almost like that's as far as it will let me put it. Here is a screenshot of what I mean as well as my titlebar XML:
http://i28.tinypic.com/2dpfn9.png
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
style="?android:attr/windowTitleBackgroundStyle"
android:layout_height="?android:attr/windowTitleSize"
>
<CheckBox
android:id="#+id/inbox_selectall"
android:text=""
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
android:focusable="false"
android:background="#drawable/checkbox_background"
android:button="#drawable/checkbox"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerVertical="true">
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
style="?android:attr/windowTitleStyle"
android:id="#+id/inbox_title"
android:text="#string/title_inbox"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical|center_horizontal"
android:background="#null"
android:fadingEdge="horizontal"
android:scrollHorizontally="true"
/>
</LinearLayout>
</RelativeLayout>

One thing to note is that when you set android:background to a 9-patch, you assume its padding. For the title bar graphic, there are a few pixels of left-padding (see the bottom row of pixels). I don't remember off the top of my head, but you may be able to override it using android:padding.

Related

How to vertically center content within a ListView footer?

I have posted the exact layout below. I want to show an image and text vertically centered inside the footer. I have applied:
android:gravity="center_vertical|center"
To both the LinearLayout containing these elements and the TextView inside but nevertheless the whole line image and text appears way too far towards the top of the footer. I want it centered vertically but instead it is in the top 30 % of the footer at all times.
<?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="vertical" >
<TextView
android:id="#+id/someMessageMessage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_margin="10dip"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical|center"
android:paddingBottom="2dip"
android:paddingTop="16dip" >
<ImageView
android:id="#+id/myImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dip"
android:paddingTop="3dip"
android:src="#drawable/picimg" >
</ImageView>
<TextView
android:id="#+id/myMessage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:gravity="center_vertical|center"
android:text="This message appears way to close to the top of the footer. It should be along with the image in the center:"
android:textStyle="bold"/>
</LinearLayout>
<Button
android:id="#+id/myButton"
style="#style/mybuttonstyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:text="#string/lbl_send"
android:visibility="gone" />
</LinearLayout>
After seeing your layout it seems you haven't given android:paddingTop to your TextView. Thats why its appearing to the top.
Moreover you can also remove android:paddingTop from ImageView if that suits to your layout.
Hope that helps.
How big is the image? I think the problem is in your second LinearLayout. You're setting the height to be "wrap_content" so that means that it will only be as big as the biggest child. If the image and the text are about the same height, then it won't seem as if anything is getting centered. You can test this theory by forcing the height to be something big enough.

How to achieve gravity="center_vertical" in a RelativeLayout nested within a LinearLayout?

https://docs.google.com/document/d/1SDDnAG-jkQjC6F85iPgfv3Et1pYl8t03k-TkCN3YcCw/edit
I have an Android preference page containing a mixture of stock, and custom List Items. The custom list items "Mood" and "Mixed Mood" can be seen in the screen shot in the referenced Google Doc, and function in the following way. (The external link is because, without a reputation of at leat 10, I'm not allowed to post images in stackoverflow...)
1) Before a user has chosen a value, they simply display their title. (either Mood or MixedMood)
2) After a user has chosen a value, they display their title AND a custom tool tip (the little colored squares), indicating their choice.
THE PROBLEM: You can see from the screen shot that before a user has chosen a value, the "Mood" text is not centered. I would like for it to be centered, and then dynamically make room for the custom tool tip after a choice is made. In other words, I would like
<TextView android:id="#+android:id/title"
To respond to
android:gravity="center_vertical".
Is this possible?
My layout file looks like this.
<?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:minHeight="60dip"
android:gravity="center_vertical"
android:paddingRight="?android:attr/scrollbarSize">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_marginLeft="15dip"
android:layout_marginRight="6dip">
<TextView android:id="#+android:id/title"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="18sp"/>
<!-- This image represents the dropdown arrow -->
<ImageView
android:gravity="center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#android:id/title"
android:scaleType="fitEnd"
android:src="#drawable/ic_btn_round_more_normal_cropped" />
<monarca_rct.client.customcomponents.MoodScalePresentation
android:id="#+android:id/hpmp_mood_scale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#android:id/title"
android:paddingTop="4.0dp"/>
</RelativeLayout>
</LinearLayout>
If i get your question right:
You can set android:layout_alignWithParentIfMissing="true" in <TextView android:id="#+android:id/title" for more info visit http://developer.android.com/resources/articles/layout-tricks-efficiency.html
I can't exactly try this out but I think it might be something like this:
<?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:minHeight="60dip"
//REMOVED GRAVITY
android:paddingRight="?android:attr/scrollbarSize">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
//REMOVED GRAVITY
android:layout_marginLeft="15dip"
android:layout_marginRight="6dip">
<TextView android:id="#+android:id/title"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center_vertical|left"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="18sp"/>
<!-- This image represents the dropdown arrow -->
<ImageView
android:gravity="center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#android:id/title"
android:scaleType="fitEnd"
android:src="#drawable/ic_btn_round_more_normal_cropped" />
<monarca_rct.client.customcomponents.MoodScalePresentation
android:id="#+android:id/hpmp_mood_scale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#android:id/title"
android:paddingTop="4.0dp"/>
</RelativeLayout>
</LinearLayout>
The reason to go from center_vertical to center_vertical|left is because your parent layout is like a grid and you can "choose" your position. So if you have:
(1) (2) (3)
(4) (5) (6)
(7) (8) (9)
[Don't mind the white spaces between each line, for some reason if I don't do it like that it gets displayed all in one line.]
The 4 is where you want your text. As you can see, the 4 is on the left but also vertically centered hence the combination:
android:gravity="center_vertical|left"
Quick question, why do you need a RelativeLayout inside a LinearLayout? You could do without the LinearLayout altogether from the looks of it.

Android View background layout problem

I am trying to use a empty View to indicate the color for each item in a ListView.
The idea is that the rowColor View is just a 3dp wide line that should automatically size to the height of secondLine and thirdLine (note that all of the content is set in code including the background color of rowColor and that firstLine and thirdLine are often set to GONE).
It shows up perfectly in Eclipse's Graphical Layout but the rowColor does not show up at all on my phone (running 2.3.3) and all the views are stacked. Any idea how to fix it?
The following code for the list_row was adopted from here. I've provided all the code that I would think works based on that layout, but not even close. Does that layout still work?
list_row.xml:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<TextView
android:id="#+id/firstLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:singleLine="true"
android:text="First Line" />
<View
android:id="#+id/rowColor"
android:background="#FF0000"
android:layout_width="3dp"
android:layout_height="fill_parent"
android:layout_below="#id/firstLine"
android:layout_alignParentBottom="true" />
<TextView
android:id="#+id/thirdLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/rowColor"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:singleLine="true"
android:text="Third Line" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/rowColor"
android:layout_alignParentRight="true"
android:layout_below="#id/firstLine"
android:layout_above="#id/thirdLine"
android:layout_alignWithParentIfMissing="true"
android:gravity="center_vertical"
android:singleLine="true"
android:text="Second Line" />
</RelativeLayout>
main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
ListViewTest.java Activity here: http://pastie.org/2035822
Thanks.
I tested your layout in several emulators (from 2.1 to 2.3.3) and it works fine, with or without setting the first TextView visibility to View.GONE.
It must be either a problem in your code elsewhere or a glitch of your specific device.
As a workaround, you can use:
android:layout_height="0dp"
for your rowColor View. Since you are already defining the position of the top and bottom limits with android:layout_below="#id/firstLine" and android:layout_alignParentBottom="true", the actual value of layout_height is irrelevant.
I ran into this recently, and I found that a View with no content apart from a background color will not appear in a RelativeLayout.
If you can, try converting your layout to a LinearLayout. This seems to work for me.

Set an ImageView outside the screen with a LinearLayout

I'm developing an Android 2.2 application.
I have a linearlayout with a textview, a button and an ImageView.
I want to set this imageview outside of the screen and set an animation to move it from left to right.
I want to simulate a ship moving from left to right. The user will see it appears from left side of the screen and disappears from right side.
I know I can use AbsoluteLayout to set a layout_x for ImageView, but I don't want to set layout_x and layout_y for the others views (textview and button), because they are centred on the screen.
This is how I have solved my problem:
<?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="fill_parent"
android:orientation="vertical">
<TextView
android:id="#+id/appNameTextView"
android:text="#string/app_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="40px"/>
<Button
android:id="#+id/PlayButton"
android:text="#string/play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="40px"/>
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="#+id/greekShip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/picture"
android:maxWidth="176px"
android:maxHeight="87px"
android:layout_x="-200px"/>
</AbsoluteLayout>
</LinearLayout>

Android Dev: Placing layouts

I'm new to android development... while making my application layout i want a button to remain at the very bottom of the screen while a scroll view is placed above it. I am unable to do this i was using the size of the scroll view as 430dp so that it works but when i change the orientation of the screen this does not work as 400dp is bigger than the screen.
how do i make it so that the button stays at the bottom irresepective of the screen orientation ?
:/
Set the ScrollView's layout_height to fill_parrent and layout_weight to 1 and the Button's height to wrap_content.
You could go with this
android:gravity="bottom"
This should always push your element to the bottom of its container.
But it'd more helpful if you'd post up your layout XML.
Here's a real world example of precisely what you're asking.
In this layout, I have a header at the top, a list view taking all the space below it and a button to clear (cancelled, failed, finished) elements of the list view, then right at the bottom I have a custom control showing a toolbar.
<?xml version="1.0" encoding="utf-8"?><LinearLayout android:id="#+id/layout" xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout android:id="#+id/browsePeerHeader"
android:layout_width="fill_parent" android:layout_height="70sp"
android:layout_marginBottom="2sp"
android:layout_gravity="top"
android:background="#drawable/background_barbed_wire"
>
<ImageButton
android:id="#+id/frostwire_sphere"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/icon"
android:layout_gravity="center_vertical"
android:layout_margin="3sp"
android:background="#00000000"/>
<TextView android:id="#+id/browsePeerTitle" android:textSize="30sp"
android:text="Downloads"
android:textColor="#ffffffff" android:textStyle="bold"
android:shadowColor="#ff000000"
android:shadowDx="1.0"
android:shadowDy="1.0"
android:shadowRadius="4.0"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="10sp"
android:gravity="left|center_vertical"/>
</LinearLayout>
<ListView android:id="#+id/ListViewTransfers"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2sp"
android:layout_marginBottom="2sp"
android:layout_weight="1"></ListView>
<Button android:id="#+id/ButtonClearFinished" margin="2sp"
android:layout_width="fill_parent" android:layout_height="wrap_content"
/>
<com.frostwire.android.views.FrostWireStatusBar
android:id="#+id/FrostWireStatusBar" android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" /></LinearLayout>
Here's a screenshot
The trick is basically to have the list view use all the space left in the layout that contains it, you don't even have to tell it to fill_parent, just with android:layout_weight="1 it should work.

Categories

Resources