Properly aligning TextViews in RelativeLayout - android

I´m developing an instant message application for an university course, similar to Whatsapp as you could guess seeing the icon in the attached screenshot :).
I have a ListFragment being populated with a custom CursorAdapter. It gives two type of views, sent messages (aligned to right) and received messages (aligned to left).
The layout for sent messages works nicely, but I cannot say the same for received messages.
Here is a screenshot:
Sent message layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#FFCCCCCC"
android:padding="5dp" >
<TextView
android:id="#+id/ceo_timestamp"
android:layout_width="60sp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#FFBBBBBB"
android:gravity="center"
android:textSize="10sp" />
<TextView
android:id="#+id/ceo_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/ceo_timestamp"
android:background="#FFAAAAAA"
android:gravity="right"
android:textSize="16sp" />
</RelativeLayout>
</RelativeLayout>
Received message layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#FF999999"
android:padding="5dp" >
<TextView
android:id="#+id/cei_timestamp"
android:layout_width="60sp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#FF888888"
android:gravity="center"
android:textSize="10sp" />
<TextView
android:id="#+id/cei_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/cei_timestamp"
android:background="#FF777777"
android:gravity="right"
android:textSize="16sp" />
</RelativeLayout>
</RelativeLayout>
Those ugly background colors are added just to see the space taken for each view and layout. As you can see in the screenshot, send messages (right-aligned) work great. Received messages (left-aligned) aren't aligning well, because RelativeLayout takes all horizontal space available, insted of just wrapping content.
Anyone knows how to fix it, or maybe a better layout design to accomplish what I need?
Thanks a lot.

In Sent message layout replace android:layout_alignParentRight="true" parameter with the android:layout_alignParentLeft="true".

When RelativeLayout's child is alignParentRight, it's width will be auto changed to match_parent. TextView cei_timestamp 's android:layout_alignParentRight="true" make it's parent's width change from wrap_content to match_parent silently.
U have two ways to correct:
do not use RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#FF999999"
android:padding="5dp" >
<TextView
android:id="#+id/cei_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF777777"
android:gravity="right"
android:textSize="16sp" />
<TextView
android:id="#+id/cei_timestamp"
android:layout_width="60sp"
android:layout_height="wrap_content"
android:background="#FF888888"
android:gravity="center"
android:textSize="10sp" />
</LinearLayout>
</RelativeLayout>
do not use wrap_content, both use specific width like 60dp.

I know it is late but I am posting it for someone looking for the solution of same problem.
To align the received message to the left just remove this line from second TextView in xml for received messages.
android:layout_toLeftOf="#+id/cei_timestamp"
I tried it with a simple example and it worked.
Here is the code and screen shot
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.android.myapplication1.MainActivity">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF4081">
<TextView
android:id="#+id/textView"
android:layout_width="60sp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="center"
android:text="Hello"
android:textSize="23sp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/textView"
android:gravity="right"
android:text="New Text"
android:textColor="#FFF"
android:textSize="23sp" />
</RelativeLayout>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout centerHorizontal="true"
android:layout marginTop = "104dp"
android:text="New Button" /></RelativeLayout>`

Related

How can I allign my text correctly in Android studio?

In my app I currently have two text views in an alert dialog to display the temperature and the weather description. The problem with this is that whenever the description changes, the alignment changes.
I tried having my layout as a relative layout and move around both of them with one depending on the other but this does not help me out. Any suggestions?
This is my current code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:orientation="vertical">
<TextView
android:id="#+id/climaText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/desc"
android:layout_marginTop="18dp"
android:layout_marginStart="120dp"
android:textColor="#android:color/white" />
<TextView
android:id="#+id/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/climaText"
android:layout_centerHorizontal="true"
android:layout_marginTop="13dp"
android:textColor="#android:color/white" />
</RelativeLayout>
It is happening due to change in data size , when the data is increased it will wrap the data when you will use wrap_content . I suggest you can use a parent view and fix the height.here is the code, let me know if its working. thanks
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="250px">
<TextView
android:id="#+id/climaText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/desc"
android:layout_marginStart="120dp"
android:layout_marginTop="18dp"
android:textColor="#android:color/white" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="250px">
<TextView
android:id="#+id/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/climaText"
android:layout_centerHorizontal="true"
android:layout_marginTop="13dp"
android:textColor="#android:color/white" />
</LinearLayout>
</LinearLayout>

How to set textView as right as possible and set textView show only a part of text?

I have the xml code shown below. Everything is working as it should except the final textView( id locationTextView) which won't stay right. I want it to stay as right as possible, but I can't do that(it still appears straight after the linear Layout).Should I set a left margin?. And for the textView1 how can I make it to show only a certain part of the whole text, because I have texts of different lengths and they ruin the layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/product_list_item_bg"
android:descendantFocusability="blocksDescendants">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/icon"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_margin="3dip"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:padding="2dp"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#33CC33" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="TextView" />
</LinearLayout>
<TextView
android:gravity="right"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_marginTop="0dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/locationTextView"
android:layout_gravity="right" />
</LinearLayout>
</RelativeLayout>
Try android:layout_weight="1" or some other value for your locationTextView. You can also try out android:weightSum="3" (or that is appropriate instead of 3) on your root LinearLayout. Assign proper weights to your different child views. You can get help here
For showing text in a presentable way, you could use android:ellipsize="marquee" or other options available.

LinearLayout doesn't work. Title does not show up?

I have a question for you all. When I have a simple text in an xml file in eclipse. Why doesn't the title show up?
I have searched for similar problems, but can't find it on stackoverflow. Hopefully someone can help me.
unfortunately, I can't post pictures. Well, the text: #string/ondergewicht is the title of the text.
#/string/ondergewichttekst is the text wich I've used.
And this is the code I've used. Sorry if this is a stupid question, and I'm sure it is..
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/ondergewichttekst"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textStyle="italic"
android:layout_marginTop="80dp"
android:gravity="center"
android:text="#string/ondergewichttekst"
android:textSize="16sp"/>
<TextView
android:id="#+id/ondergewicht"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textStyle="italic"
android:gravity="center"
android:layout_marginTop="1dp"
android:text="#string/ondergewicht"
android:textSize="30sp"
/>
</LinearLayout>
So, the ondergewichttekst is showed, but the overgewicht is not. Maybe is there something like an text order?
Hopefully someone can help me out.
Jacob
Try this code ... It works fine for me.
<?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/ondergewichttekst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="italic"
android:layout_marginTop="80dp"
android:gravity="center"
android:text="#string/ondergewichttekst"
android:textSize="16sp"/>
<TextView
android:id="#+id/ondergewicht"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="italic"
android:gravity="center"
android:layout_marginTop="1dp"
android:text="#string/ondergewicht"
android:textSize="30sp"
/>
</LinearLayout>
Try this one
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/ondergewicht"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="italic"
android:gravity="center"
android:layout_marginTop="1dp"
android:text="#string/ondergewicht"
android:textSize="30sp" />
<TextView
android:id="#+id/ondergewichttekst"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="italic"
android:layout_marginTop="80dp"
android:gravity="center"
android:text="#string/ondergewichttekst"
android:textSize="16sp" />
</LinearLayout>
You have horizontal orientation in your Linear Layout and your first TextView has layout_width = match_parent This doesn't make sense, there is no more room for the second TextView.
Use vertical orientation of layout or use wrap_content instead of match_parent for widths and heights.
You have android:layout_width="match_parent" in both TextViews of a horizontal LinearLayout so the first TextView is taking up all of the width. Change them to wrap_content.
<TextView
android:id="#+id/ondergewichttekst"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textStyle="italic"
android:layout_marginTop="80dp"
android:gravity="center"
android:text="#string/ondergewichttekst"
android:textSize="16sp"/>
<TextView
android:id="#+id/ondergewicht"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textStyle="italic"
android:gravity="center"
android:layout_marginTop="1dp"
android:text="#string/ondergewicht"
android:textSize="30sp"/>

RelativeLayout: align View centered horizontal or vertical relative to other view

Is it possible to align a view in XML in a RelativeLayout centered horizontal or vertical according another already existing view.
For example: lets say there is something like this:
The second text view should be displayed centered below the first text view:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="72dp"
android:text="dynamic text" />
<TextView
android:id="#+id/second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView"
android:layout_marginLeft="43dp" <!-- Is there a rule to center it? -->
android:text="centered below text 1" />
</RelativeLayout>
Is is possible to implement something like that in XML? Is there a rule that i have missed yet? I do not want to calculate the position programmatically
I have a much better solution than the accepted one. NO EXTRA NESTING! You can do this by combining two attributes on the smaller view. if you are centering horizontally you can use both align_start & align_end to the bigger view. Make sure the text gravity is centered btw "android:gravity="center". For Vertical alignment use both align_top & align_bottom. below is the modified implementation of your layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="43dp" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/second"
android:layout_alignEnd="#+id/second"
android:gravity="center"
android:text="dynamic text" />
<TextView
android:id="#+id/second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView"
android:gravity="center"
android:text="centered below text 1" />
</RelativeLayout>
No need for unnecessary nesting like the accepted answer.
Use a separate parent layout for those views and add it in your main layout(can contain other things if you have)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_marginLeft = "30dp">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dynamic text" />
<TextView
android:id="#+id/second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="centered below text 1" />
</LinearLayout>
...
...
other veiws go here
...
</RelativeLayout>
Use the followings which suits you
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
Correct solution is to use ConstraintLayout
I tried to align a textview horizontally below a button in a RelativeLayout but it was not possible as align_bottom and layout_below didn't play well together. Finally i picked up constraintLayout and tried the same logic and it worked like a charm. here is the code below.
<android.support.constraint.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="#+id/episode_recording_header_stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.399" />
<TextView
android:id="#+id/button_selected_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="12sp"
android:text="text which is exactly center aligned w.r.t the Button above"
app:layout_constraintEnd_toEndOf="#+id/episode_recording_header_stop"
app:layout_constraintStart_toStartOf="#+id/episode_recording_header_stop"
app:layout_constraintTop_toBottomOf="#+id/episode_recording_header_stop"
/>
</android.support.constraint.ConstraintLayout>
The final output is attached below
Do this->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="dynamic text" />
<TextView
android:id="#+id/second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:layout_centerHorizontal="true" <!-- Is there a rule to center it? -->
android:text="centered below text 1" />
</RelativeLayout>
I found the solution:
Wrap the content into another RelativeLayout and then you can place this LayoutWrapper wherever you want:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="58dp"
android:layout_marginTop="58dp" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:text="dynamic text" />
<TextView
android:id="#+id/second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:layout_centerInParent="true"
android:text="centered below text 1" />
</RelativeLayout>
</RelativeLayout>
If you need to use RelativeLayout please don't use the nested layouts as far as possible. Today we have many other efficient cases to solve your task. But with use of the old faithful RelativeLayout the better way is to use attributes android:layout_alignTop, android:layout_alignBottom and android:gravity. For example, you would like to align TextView according to EditText vertically.
<RelativeLayout ...>
...
<TextView
android:id="#+id/tv1"
...
android:gravity="center"
android:layout_alignTop="#+id/edt1"
android:layout_alignBottom="#id/edt1"/>
<EditText
android:id="#+id/edt1"
...
android:layout_toRightOf="#id/tv1"/>
</RelativeLayout>
In the same way you can use android:layout_alignLeft, android:layout_alignRight and android:gravity or android:layout_alignStart, android:layout_alignEnd and android:gravity horizontally.

Android text will not align to center

I have a TextView and 3 Buttons centered in a RelativeLayout, and the text in all three of them is left-justified with the parent center as the leftmost line.
I've tried changing the gravity of the TextView, Buttons, and layout but nothing is working and I'm baffled because I've never seen Android align text like this before.
I want the Button text to be centered within each Button and the top text to be center-justified.
An image of what it looks like is here: http://i.stack.imgur.com/9lHEd.png
Here's my xml:
<RelativeLayout 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" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_margin="20dp"
android:gravity="center_horizontal"
android:text="#string/greeting"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/startQuizButton"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true"
android:onClick="#string/startQuiz"
android:text="#string/start_quiz" />
<Button
android:id="#+id/lessonsButton"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_below="#+id/startQuizButton"
android:layout_centerHorizontal="true"
android:onClick="#string/startLesson"
android:text="#string/lessonsString" />
<Button
android:id="#+id/viewAllButton"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_below="#+id/lessonsButton"
android:layout_centerHorizontal="true"
android:onClick="#string/showAll"
android:text="#string/view_all" />
I included a RelativeLayout because you have it as your parent layout. However, i am not sure that it is needed. See if the following code is what you are looking for.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Greetings" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Start Quiz" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lessons" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="View all questions" />
</LinearLayout>
</RelativeLayout>
add in button tab android:gravity="center"...see if it works..
u need to set layout width and height to fill_parent and everything will work fine
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="your text" />
if you want to centre some text, then you could also do it this way:
<TextView
android:text="Quantity"
android:textSize="34sp"
android:textColor="#ffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:layout_centerHorizontal="true"
android:paddingTop="10dp"/>
here i have changed made it horozontal by using android:layout_centerHorizontal="true"which takes a boolean value of true or false, by making it true, it will automatically be centred on all devices
hope that helps

Categories

Resources