here is my code
<TextView
android:id="#+id/BIG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BIG"
android:textSize="50dp" />
<TextView
android:id="#+id/small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/BIG"
android:layout_toRightOf="#id/BIG"
android:text="small"
android:textSize="10dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/small"
android:layout_alignLeft="#id/small"
android:text="small above"
android:textSize="10dp" />
this is the result I am getting (actual screenshot). as you can see, an entire text view has disapeared.
this is the result I want (edited on mspaint)
I cannot use align_bottom because of the auto padding. here is what it looks like if I use align_bottom instead of align_Baseline(actual screenshot)
Apparently baseline alignment is performed after all other vertical alignment has already been performed.
So “small above” is lined up above “small” when it is still in its default position. Then, “small” is aligned with the baseline of “BIG” leaving “small above” out of view, at the top of the RelativeLayout.
One potential solution to this problem is to wrap the two smaller TextViews in a LinearLayout that can then be properly baseline aligned with the larger TextView on the left.
And also add android:baselineAlignedChildIndex="1" to the LinearLayout, so that the the second child's baseline is aligned to the "BIG"
Reference: http://scottweber.com/2014/02/06/working-with-baselines-in-relativelayout/
try this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/BIG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BIg"
android:textSize="50sp"
android:layout_gravity="bottom" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="bottom">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="small above"
android:textSize="10sp" />
<TextView
android:id="#+id/small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="small"
android:textSize="10sp" />
</LinearLayout>
and use sp instead of dp for text sizes.
Related
I have the following layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="#string/title_day"
android:textStyle="bold"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Tuesday"
android:textSize="16sp" />
</LinearLayout>
<TextView
android:id="#+id/tv_fail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+22"
android:textSize="16sp"
android:layout_gravity="end|center_vertical" />
</LinearLayout>
</LinearLayout>
And this looks like this:
And I want the last TextView with id tv_fail to be pinned to right end of screen. I suppose that
android:layout_gravity="end|center_vertical"
should handle it, but this instruction centers TextView vertically, but doesn't move it to end. How to fix it?
I suppose that
android:layout_gravity="end|center_vertical"
should handle it, but this instruction centers TextView vertically, but doesn't move it to end.
This is due to how LinearLayout works; your understanding of layout_gravity is generally correct.
LinearLayout takes its children and lays them out in a line, and the children will all be packed towards the "start" of the LinearLayout. In other words, a horizontal LinearLayout will ignore the horizontal component of the layout_gravity attribute of a child.
There are a few ways to work around this. The one that I think works best for your scenario is to make the TextView stretch to fill all the remaining space in the LinearLayout (using layout_weight), and then have the TextView position its text at the end of its content area (using gravity).
<TextView
android:id="#+id/tv_fail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="+22"
android:textSize="16sp"
android:layout_gravity="center_vertical"
android:gravity="end"/>
If you just want to set text inside of your last TextView to end then you should use :
android:gravity="end"
for TextView gravity use:
android:layout_gravity="center"
Difference between android:gravity & android:layout_gravity is that first one arrange content inside of any view with given gravity while second one arranges view according to given gravity.
Updated code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="title_day"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Tuesday"
android:textSize="16sp" />
</LinearLayout>
<TextView
android:id="#+id/tv_fail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="+22"
android:textSize="16sp" />
</LinearLayout>
I have these two TextViews in my content_main, I am a beginner and i can't figure out why are they overlapping in the center, I tried chanign everything and it still doesn't work.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:gravity="top"
android:text=""
android:id="#+id/nameTextView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textSize="35sp"
android:textColor="#1a237e" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:gravity="bottom"
android:text=""
android:id="#+id/temperatureTextView"
android:layout_alignParentTop="false"
android:layout_centerHorizontal="true"
android:textSize="50sp"
android:textColor="#00bcd4" />
Try adding this code on the second TextView(#tempratureTextView):
layout_below="#+id/nameTextView"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text=""
android:id="#+id/nameTextView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textSize="35sp"
android:textColor="#1a237e" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text=""
android:id="#+id/temperatureTextView"
android:layout_below="#+id/nameTextView"
android:layout_centerHorizontal="true"
android:textSize="50sp"
android:textColor="#00bcd4" />
</RelativeLayout>
The layout xml above will work.
Besides that, I noticed that you are trying to use android:gravity to position your TextView on top and bottom. This will not work because android:gravity only set the gravity of the content(the text) in your TextView. Use android:layout_gravity to set the TextView's gravity within the parent container.
layout_alignParentTop makes sure that your view stays at top,regardless of other views.Same thing about layout_alignParentBottom it makes view stick to bottom.
In your scenario you want these TextView one below other, So you have to specify android using, layout_below for the bottom element.
Anyway you have the answers as others has provided it,just making it clear about reason.
I'm attempting to align the text as you would expect to see if you were in a word pad and set your alignment to center, the middle of each line would be in the center of the screen and each margin to the left and right would be equidistant. However, using gravity does not appear to be working as the text is still starting from the left. Could someone shed light as to why? Here's the xml.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingTop="3dp"
android:paddingBottom="3dp"
android:orientation="vertical"
android:background="#111111"
tools:context="eqlogic.annswingsandthings.AboutUs">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/chalkBoard"
android:src="#drawable/ann_chalkboard_img"
android:layout_weight="0.5"/>
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:id="#+id/scrollView"
android:layout_gravity="center_horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:textColor="#999999"
android:text="#string/AboutUsText"
android:textSize="24sp"
android:id="#+id/textView"
android:layout_gravity="center_horizontal"
android:singleLine="false" />
</ScrollView>
</LinearLayout>
You are not setting the gravity, use:
android:gravity="center"
Full tag:
<TextView
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:textColor="#999999"
android:text="#string/AboutUsText"
android:textSize="24sp"
android:id="#+id/textView"
android:layout_gravity="center_horizontal"
android:singleLine="false" />
Set also android:gravity parameter in ScrollView to center.
For testing the effects of different layout parameters I recommend to use different background color for every element, so you can see how your layout changes with parameters like gravity, layout_gravity or others.
Make your layout_width be fill_parent and use gravity instead of layout_gravity:
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:textColor="#999999"
android:text="#string/AboutUsText"
android:textSize="24sp"
android:id="#+id/textView"
android:gravity="center"
android:singleLine="false" />
Set scrollview parameters Android:layout_width="match_parent" and Android:gravity="center".
I have a RelativeLayout with three views. Both TextViews should be to right of the ImageView and the seconds one should be below the first TextView.
Code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#bdbdbd"
android:paddingBottom="15dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="15dp" >
<ImageView
android:id="#+id/avatar"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerVertical="true"
android:src="#drawable/default_avatar" />
<TextView
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/avatar"
android:text="Chris"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/university"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/username"
android:layout_toRightOf="#id/avatar"
android:text="Oxford"
android:textSize="13sp" />
</RelativeLayout>
Result:
After removing android:layout_centerVertical="true" from the first TextView, everything works as expected (except that it's not vertical).
Why is this and how can I make the first TextView vertical centered?
For some reason the RelativeLayout's height param is giving the problem. Try setting it to 94dp (64 of the image + 15 of bottom padding + 15 of top padding). This should solve the problem
#f. de is right. The problem is android:layout_height="wrap_content", as the height of relative layout is determined my it's content setting it's content to vertically center based on it's height wont work. You need to set this to match_parent or to a fixed value.
You also could wrap your data, in your case Name and University inside another RelativeLayout or any other ViewGroup and make it to align center.
Like that
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#bdbdbd"
android:paddingBottom="15dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="15dp">
<ImageView
android:id="#+id/avatar"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerVertical="true"
android:src="#drawable/default_avatar" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:layout_toEndOf="#id/avatar"
android:layout_toRightOf="#id/avatar">
<TextView
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Chris"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/university"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/username"
android:text="Oxford"
android:textSize="13sp" />
</RelativeLayout>
</RelativeLayout>
This makes sense in order to group related views (TextViews) and also it produces better result because whole container is aligned center, in your initial example Name view is centered vertically but other view is below it and it makes it to look not as good as it will in case of container where baseline is vetical center of container.
Since trying to place both TextViews center vertical, they overlap. Use the padding attribute for the advantage.
So to align them as required, use this code.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#bdbdbd"
android:paddingBottom="15dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="15dp" >
<ImageView
android:id="#+id/avatar"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerVertical="true"
android:src="#drawable/default_avatar" />
<TextView
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/avatar"
android:text="Chris"
android:paddingBottom="7dp"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/university"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/username"
android:layout_toRightOf="#id/avatar"
android:paddingTop="7dp"
android:text="Oxford"
android:textSize="13sp" />
</RelativeLayout>
I wish this solves your problem...
The problem is with your RelativeLayout's height attribute,
if you change it to "match_parent" then it will work the way you wanted.
Or
you can make another Relativelayout in your main RelativeLayout who's height is "match_parent". After doing so you can place everything at any place without any problem.
I'm trying to create a layout for a callout bubble that includes an image on the left, another image on the right and then a layout in the middle which includes a couple of TextViews.
If the length of either TextView is short enough, I want the whole callout to only be wide enough to show the text; if it's too long I want it trimmed with a '...'.
Here's a sample of the XML I'm dealing with (I've stripped out all the margins and padding etc. for clarity):
<RelativeLayout android:id="#+id/callout"
android:layout_width="wrap_content"
android:layout_height="54dp">
<ImageView android:id="#+id/callout_img_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<RelativeLayout android:id="#+id/callout_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/callout_img_left">
<TextView android:id="#+id/callout_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true" />
<TextView android:id="#+id/callout_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:layout_below="#id/callout_name" />
</RelativeLayout>
<ImageView android:id="#+id/callout_img_right"
android:layout_width="48dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/callout_info"/>
</RelativeLayout>
Originally I had the image on the right using android:layout_alignParentRight="true" but this made the whole callout fill it's available width. The XML shown above works for short text, but if the text is too long it pushes out (shrinks?) the image on the right.
Perhaps a nested LinearLayout with a zero width will do the trick:
<LinearLayout android:id="#+id/callout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="54dp">
<ImageView android:id="#+id/callout_img_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TextView android:id="#+id/callout_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true" />
<TextView android:id="#+id/callout_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true" />
</LinearLayout>
<ImageView android:id="#+id/callout_img_right"
android:layout_width="48dp"
android:layout_height="wrap_content" />
</LinearLayout>
If you don't mind the two text views always having the same width, you can dispense with the nested LinearLayout and just give each TextView a width of 0dp and weight of 1.