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.
Related
This is the layout I am using:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#color/background"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="30dip"
>
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="fill_parent" >
<RelativeLayout
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="fill_horizontal"
>
<TextView android:id="#+id/poi_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:layout_alignParentLeft="true"
/>
<ImageView android:id="#+id/internet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/internet"
android:adjustViewBounds="true"
android:maxHeight="20sp"
/>
</RelativeLayout>
...
</LinearLayout>
</ScrollView>
However, the text appears aligned to the left but the image appears at the same height than the text (as expected), but horizontally centered in the screen. Why is it not aligned to the right ?
I tried with different combinations of the android:gravity attribute at the RelativeLayout without success.
The maxHeight attribute of the image is set using 'sp' units because I want the image to be proportional to the text it is accompanying. Is that correct ?
Thanks for your feedback.
UPDATE:
Thanks to the answer of #danh32 I managed to solve this using a LinearLayout instead of a RelativeLayout. But just out of curiosity: if someone knows what was the problem with the RelativeLayout of my example, I will be grateful.
Have you tried using textview's drawableRight attribute to display the image, instead of a standalone imageview? You should be able to change the textview's width to fill parent and set the drawableRight as your internet drawable.
<TextView android:id="#+id/poi_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:layout_alignParentLeft="true"
android:drawableRight="#drawable/internet"
/>
I have a RelativeLayout containing a pair of side-by-side buttons, which I want to be centered within the layout. I could just put the buttons in a LinearLayout and center that in the RelativeLayout, but I want to keep my xml as clean as possible.
Here's what I tried, this just puts the "apply" button in the center and the "undo" button to the left of it:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15sp">
<TextView
android:id="#+id/instructions"
android:text="#string/instructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15sp"
android:layout_centerHorizontal="true"
/>
<Button
android:id="#+id/apply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/apply"
android:textSize="20sp"
android:layout_below="#id/instructions"
/>
<Button
android:id="#+id/undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/undo"
android:textSize="20sp"
android:layout_toLeftOf="#id/apply"
android:layout_below="#id/instructions"
/>
</RelativeLayout>
android:gravity will align the content inside the view or layout it is used on.
android:layout_gravity will align the view or layout inside of his parent.
So adding
android:gravity="center"
to your RelativeLayout should do the trick...
Like this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="15sp">
</RelativeLayout>
Here is an extension of BrainCrash's answer. It is a non nested option that groups and centers all three horizontally and vertically. In addition, it takes the top TextView and centers it horizontally across both buttons. If desired, you can then center the text within the TextView with android:gravity="center". I also removed the margins, added color, and set the RelativeLayout height to fill_parent to highlight the layout. Tested on API 11.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:background="#android:color/black"
>
<TextView
android:id="#+id/instructions"
android:text="TEST"
android:textSize="20sp"
android:background="#android:color/darker_gray"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignLeft="#+id/undo"
android:layout_alignRight="#+id/apply"
android:gravity="center"
/>
<Button
android:id="#+id/apply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="APPLY"
android:textSize="20sp"
android:layout_below="#id/instructions"
/>
<Button
android:id="#+id/undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="UNDO"
android:textSize="20sp"
android:layout_toLeftOf="#id/apply"
android:layout_below="#id/instructions"
/>
</RelativeLayout>
android:layout_gravity="center"
will almost give what you're looking for.
Here is a combination of the above answer's that solved my specific situation:
Centering two separate labels within a layout that also includes a button in the left most position of the same layout (button, label, label, from left to right, where the labels are centered relative to the layout containing all three views - that is, the button doesn't push the labels off center).
I solved this by nesting two RelativeLayout's, where the outer most layout included the
Button and an Inner-RelativeLayout.
The Inner-RelativeLayout contained the two text labels (TextView's).
Here is a snippet that provides the details of how the centering and other layout stuff was done:
see: RelativeLayout Gravity not applied? and
Gravity and layout_gravity on Android
for the difference's between gravity and layout_gravity.
Tweak the paddingLeft on the btn_button1 Button to see that the TextView's do not move.
(My apologies to havexz for the downvotes. I was too hasty in thinking that just b/c your suggestions didn't solve the exact question being ask, that they do help to solve very similar situations (the answer here solves a very specific situation, and only the combination of all these answer's solved my problem. I tried upvoting, but it won't let me unless I edit the answer's, which I don't want to do.)
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_outer"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:background="#FF0000FF">
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/btn_button1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF00FF00"
android:text="<"
android:textSize="20sp"
android:paddingLeft="40dip"/>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_inner"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FFFF00FF"
android:layout_centerInParent="true"
android:gravity="center">
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tv_text1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF505050"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
android:text="Complaint #"
android:gravity="center"/>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tv_text2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF505050"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
android:layout_toRightOf="#id/tv_text1"
android:gravity="center"/>
</RelativeLayout>
</RelativeLayout>
LinearLayout is a good option. Other than that there are options like create an invisible view and center that and then align left button to the left it and right on the right of it. BUT those are just work arounds.
I am trying to make a scroll view that has a nested relativeLayout view. The realative layout has a background image. When the realativeLayout is the only layout the background image is the size I want it to be.
When I add scroll view it makes the image bigger and I am not sure why and what properties I need to set to fix it.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/background2"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:id="#+id/txtApplicationTitle"
android:text="My Application"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginTop="5dp"
android:textSize="15dp"
android:layout_alignParentTop="true"
android:layout_alignLeft="#+id/txtAbout" />
<TextView android:id="#+id/txtPrivacyHeader"
android:layout_width="wrap_content"
android:text="#string/PrivacyHeader"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="21dp"
android:layout_marginTop="94dp" />
<TextView android:id="#+id/Privacy"
android:layout_width="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/Privacy"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/txtPrivacyHeader"
/>
</RelativeLayout>
</ScrollView>
// this is what I get (you can't tell but it is scrollable)
(source: gyazo.com)
// this how I want the SrcollView to look(this is the exact same code as above just without the ScrollView wrapping it)
(source: gyazo.com)
See how the top part has all of sudden grown so much.
Your ScrollView has its height set to wrap_content and your RelativeLayout has its height set to fill_parent. That means your ScrollView is going to expand to the entire view.
I have a relativelayout with an image, textview, image in that order. I have the left image with parent align left turned on. The right image has parent align right turned on. And the textview with align center parent turned on. The problem is that while everything is technically aligned correctly, the textview, while containing a value, has been reduced to basically a vertical line in the middle of the layout. Why isn't the textview keeping its width based on its content? Thank
try 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">
<RelativeLayout android:layout_height="match_parent"
android:id="#+id/RelativeLayout01" android:layout_width="fill_parent">
<ImageView android:layout_width="wrap_content" android:src="#drawable/icon"
android:layout_height="wrap_content" android:id="#+id/ImageView01"
android:layout_alignParentLeft="true"></ImageView>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/TextView01"
android:layout_centerInParent="true" android:layout_centerVertical="true"
android:text=" sdfsdf sdhfhskdhfkh hsdkfhksdhfh shdfkhsdkhfkjsdh fhskdfhksdhfjk sdfhsdkhfkjsdfhkhasdhfksa fsakhdfhsdfhkshdf skdhfkshdfk"
android:layout_toRightOf="#+id/ImageView01" android:layout_toLeftOf="#+id/ImageView02"></TextView>
<ImageView android:layout_width="wrap_content" android:src="#drawable/icon"
android:layout_height="wrap_content" android:id="#+id/ImageView02"
android:layout_alignParentRight="true"></ImageView>
</RelativeLayout>
</LinearLayout>
check the width of ur imageviews..set the width of those 3 things as 'wrap content'.
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.