TextViews overlapping in Relative layout - android

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.

Related

TextView displaying one char per line

I'm having a problem whereby a string in textview is displaying each character on seperate lines. My code is as below. I am hoping to show the text on one line.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp" >
<NumberPicker
android:id="#+id/numberPicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="#drawable/button"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/sectionPicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_marginLeft="10dp"
android:text="AM"
android:textSize="18sp"
android:background="#drawable/button"
android:layout_toRightOf="#+id/numberPicker"
android:layout_centerVertical="true" />
</RelativeLayout>
The problem was that like #mbm29414 suggested I had another relative layout that the above was nested in and this layout had a left/right margin that was limiting this layouts size. The parent layout had a horizontal margin set to 40dp. I discovered this by rotating the screen and noticing a change.

How to aligning textviews on the left and right side of a linearlayout

According to below codes
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:layout_marginTop="15dip">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="نوع"
android:gravity="left"
android:layout_weight="1"
android:id="#+id/txt_type" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="تاریخ: ۱۳۹۲/۰۳/۲۸"
android:layout_weight="1"
android:gravity="right"
android:id="#+id/txt_date" />
</LinearLayout>
TextViews are not well aligned and both are not in exact line.
It's like what exactly showed in below picture.
Please check the parent layout and try to set orientation to horizontal. I tried different cases but found that its working in all cases...

Is layout_above broken? this simple layout is driving me crazy

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.

Android how to align headings to listview items

I have a Listview in my application, Which I am trying to put a head for each 'Coloumn' however I cant get them to align correctly.
I have made the heading linearlayout items the same layout params as the listView items but they still dont align.
Here is an example app I made to demonstrate the issue.
I have enabled the developer boarder lines so you can easily see how its not aligned.
Here is the list view display item:
<TextView
android:id="#+id/rhinoZoneDisplayItem_textView_zoneNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:paddingRight="5dp"
android:text="1:"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/rhinoZoneDisplayItem_textView_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="2"
android:clickable="false"
android:gravity="center"
android:text="Status"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
and the headings linear layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="Zone"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="2"
android:gravity="center_horizontal"
android:text="Status"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
What your doing is correct when your using Layout-Weights make sure you set the width as "0dp" rather than wrap-content. So as to get all Heading and list view items to align correctly and give equal weights for each column.
Use match_parent for TextView width.
You can put in each item of the list the same value for the field
android:layout_marginLeft="50dp"
this is just an example of the value, in this way all the elements are aligned on left side.

Android layout_toLeftOf not working

I've searched quite a lot here and have tried to provide information about how to align the children objects inside my relative layout, however one of them doesn't display.
This is my code:
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignLeft="#id/textView1"
android:layout_below="#id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="example"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/textView2"
android:layout_alignBottom="#id/textView2"
android:text="example" />
</RelativeLayout>
TextView3 doesn't appear at all. It looks like there is a missing or conflicting rule, but I can't figure out which one.
Go ahead and give this a try, works for me.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="example"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/textView2"
android:layout_alignBottom="#+id/textView2"
android:text="example"
/>
</RelativeLayout>
textView2 is aligned to the left. If you align textView3 to the left of a left object it's going to be off the screen
Your code does not provide the code for textView1, but if I were to assume that your textView1 were to be on the top left side of the screen, then if you have this line for your inner RelativeLayout:
android:layout_alignLeft="#id/textView1"
textView2 would be aligned to textView1, therefore if you added textView3 was added and you did:
android:layout_toLeftOf="#id/textView2"
then it would appear off the screen to the left.
What I watch here for example using Relative Layout ,you need to be specific, if you wish to locate to the right of editTextNumberPeriods in this case, also you need to instruct .xml where is textView2, in this case it is below btn18, I meant it is not enough to instruct .xml if it is right or left. I tested it, it works perfectly.
<TextView
**android:id="#+id/btn18"**
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:gravity="center"
android:textAllCaps="false"
android:layout_centerHorizontal="true"
android:layout_below="#id/btn19"
android:text="Please enter numbers of periods." />
<EditText
**`android:id="#+id/editTextNumberPeriods"`**
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/btn18"
android:cursorVisible="true"
android:focusable="true"
android:fontFamily="sans-serif"
android:layout_centerHorizontal="true"
android:ems="10"
android:gravity="center"
android:background="#68DBFA"
android:hint="numbers of periods"
android:textColorHint="#color/white"
android:inputType="number"
android:selectAllOnFocus="true"
android:textAllCaps="false"
android:textColor="#7C1616" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
**android:layout_below="#id/btn18"
android:layout_toRightOf="#id/editTextNumberPeriods"**
android:text="TextView" />

Categories

Resources