How to align the text on the right side of a picture? - java

I have an ImageView aligned to the parent right in a relativeLayout.
Here is my layout:
<RelativeLayout android:id="#+id/row" android:background="#null" style="#style/ListRow"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:textStyle="bold" android:textColor="#color/primary_text" android:text="Username" android:gravity="center_vertical" android:id="#+id/username" android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:layout_toLeftOf="#id/avatar" />
<LinearLayout android:gravity="center_vertical" android:id="#+id/time_item" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="#id/username" android:layout_alignBottom="#id/username" android:layout_alignParentLeft="true">
<TextView android:textSize="#dimen/font_size_small" android:text="12:00AM" android:textColor="#color/secondary_text" android:gravity="center_vertical" android:id="#+id/date" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout>
<RelativeLayout android:id="#+id/avatar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5.0dip" android:layout_alignParentRight="true">
<ImageView android:id="#+id/picture" android:src="#drawable/ic_launcher" android:layout_width="48.0dip" android:layout_height="48.0dip" android:scaleType="center" android:adjustViewBounds="true" />
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" />
</RelativeLayout>
<TextView android:textSize="#dimen/font_size_small" android:text="aslkndalskndlaksndlaskndlaksnlansldnaslkndalsdnaslkdnls" android:textColor="#color/primary_text" android:id="#+id/body" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_toLeftOf="#id/avatar" android:layout_below="#id/username" android:lineSpacingMultiplier="1.2" />
</RelativeLayout>
Here is what it looks like:
When starting a new line of text I want the text to align on to the right instead of the left. I have photoshopped what I want. Here is what I want:
Anyone know how I should modify my layout to where it does this? Thanks!

Just add one more property in your TextView body.
android:gravity="right"

You are missing the android:gravity="right" element from your TextView Body. It should go like
<TextView android:gravity="right"...
That simply makes the text originate on the right side of the TextView

Related

Can't center the TextView using RelativeLayout

I've got an issue with my TextView, I just can't center it. Here's what it should look like :
And it's actually look like that
Here's my XML code
<?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/magnitudeTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_margin="10dp"
android:textSize="15sp" />
<TextView
android:id="#+id/cityNameTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:textSize="15sp" />
<TextView
android:id="#+id/dateTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_margin="10dp"
android:textSize="15sp" />
</RelativeLayout>
Using a LinearLayout with horizontal orientation along with a weightsum of 3 for the children text view would give you a light and more reliable solution, doing it like the following:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="3"
android:orientation="horizontal">
<TextView
android:id="#+id/magnitudeTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:text="test"
android:textSize="15sp" />
<TextView
android:id="#+id/cityNameTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test"
android:gravity="center"
android:layout_weight="1"
android:layout_margin="10dp"
android:textSize="15sp" />
<TextView
android:id="#+id/dateTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="10dp"
android:textSize="15sp" />
</LinearLayout>
Now each of your text views will take exactly 1/3 of the whole screen width, if you want the center one to be bigger you can play with the layout_weight value in each of the text view to match your desired design.
Instead of RelativeLayout you can use LinearLayout in which you can set the weightsum to 3 that will give you more reliable solution. Every TextView will get the equal amount of space in a row.
The Below technique work for me.That is:
Use your first TextView as left orient and middle TextView as center oriented and last TextView as right oriented and apply weight for each TextView.
Your code it would be like this:
<?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"
orientation=vertical
weightsum=3
>
<TextView
android:id="#+id/magnitudeTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_margin="10dp"
android:textSize="15sp"
android:layout_weight=1 />
<TextView
android:id="#+id/cityNameTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textSize="15sp"
android:layout_weight=1/>
<TextView
android:id="#+id/dateTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="10dp"
android:textSize="15sp"
android:layout_weight=1/>
</LinearLayout>
`
A horizontal LinearLayout would provide a better and lighter solution for your problem. What you'd do is wrap your three textviews in it, then use layout_width=wrap_content for the ones to the left and right and layout_width=0dp
layout_weight=1
for the middle one
Generally, a linear layout with weights would suit these kinds of needs, the system will automatically divide the screen into parts depending on the weightsum you mentioned
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum = "5"
android:orientation = "horizontal"
/>
<TextView
android:id="#+id/magnitudeTV"
android:layout_width="0dp"
android:layout_weight = "1"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_margin="10dp"
android:textSize="15sp" />
<TextView
android:id="#+id/cityNameTV"
android:layout_width="0dp"
android:layout_weight = "3"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:textSize="15sp" />
<TextView
android:id="#+id/dateTV"
android:layout_width="0dp"
android:layout_weight = "1"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_margin="10dp"
android:textSize="15sp" />
</LinearLayout>
You can achieve this by doing this :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<TextView
android:id="#+id/magnitudeTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="sdf34 "
android:textColor="#000000"
android:textSize="15sp" />
<TextView
android:id="#+id/cityNameTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/magnitudeTV"
android:layout_margin="10dp"
android:text="dasdasdsadasdds"
android:textColor="#000000"
android:textSize="15sp" />
<TextView
android:layout_toRightOf="#id/cityNameTV"
android:id="#+id/dateTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="fg25111dfg"
android:textColor="#000000"
android:textSize="15sp" />
</RelativeLayout>
but according to me it is not a good solution for this you can con-catenate all the three strings and than set the final string to one single text view as mentioned below:
String final_string = distance +" "+string_2 +" "+string_3;
textView.setText(final_string);

Can't set margin left userName

i have 2 items in a relative layout that i want to put side by side,the User icon and the username, at the moment i have the user icon where i want but the username is always right at the side with no margin, i need some margin left so i can have a litle space between each other, and i tried with margin left but it didn't work.
here is the xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="142dp"
android:layout_gravity="center"
android:layout_margin="#dimen/card_margin"
android:elevation="3dp"
card_view:cardCornerRadius="#dimen/card_specie_radius">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/Avaliation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/plantName"
android:layout_marginStart="92dp"
android:layout_marginTop="15dp"
android:layout_toEndOf="#+id/dateTxt"
android:text="Avalie a fotografia" />
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/dateTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="29dp"
android:text="TextView" />
<ImageView
android:id="#+id/reportImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/color_cursor_white" />
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginRight="16dp" />
<ImageView
android:id="#+id/userIcon"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_alignParentBottom="true"
android:layout_below="#id/plantPhoto"
android:src="#drawable/ic_user"
/>
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/plantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/plantPhoto"
android:textColor="#color/nephritis"
android:textSize="20sp" />
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/plantPhoto"
android:textColor="#color/base"
android:layout_marginEnd="29dp"
android:layout_toEndOf="#+id/userIcon"
android:layout_toLeftOf="#+id/userIcon"
android:layout_marginLeft="20dp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
I have found too issues with your code:
You have both android:layout_toEndOf="#+id/userIcon" and android:layout_toLeftOf="#+id/userIcon" attributes set in your username view, which makes no sense. You should replace android:layout_toLeftOf with android:layout_toRightOf if you want it to be to the right of the userIcon view.
You are setting the left position of the username view with the android:layout_toEndOf="#+id/userIcon" attribute, that's why android:layout_marginLeft="20dp" has no effect. You can use android:paddingLeft="20dp" instead.
Let me know if it helps.

Multiline TextView and Singleline TextView in one line

I want to get next result in my layout:
[left textview] [space] [right textview]
For this purpose I use it:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="left"
android:id="#+id/left"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="right"
android:id="#+id/right"/>
</RelativeLayout>
It's okay. But if left TextView contains a large text, the result will be next:
[left textview] (under left textview [right textview]. So left override right. But I want that left TextView doesn't override right, and when left TextView reaches right TextView the Left TextView go down into multiline. So I want to get next result:
some-text-text-left-multiline
some-text-text-left-multiline text-in-right-text-view
some-text-text-left-multiline
Use a linear layout (horizontal) and place textview with the same android:layout_weight inside to make a 50/50 split
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="#+id/right"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
This expands the left until reaching the right using android:layout_toLeftOf
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/right"
android:text="this is a long text on the left which should be multiline and it is" />
<TextView
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="some text" />
</RelativeLayout>
Do this to your layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="right"
android:minWidth="50dp"
android:maxWidth="100dp"
android:text="right" />
<TextView
android:id="#+id/left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:gravity="left"
android:layout_toLeftOf="#+id/right"
android:text="left" />
</RelativeLayout>

Add another textview under the previous textview as a second textview

guys I tried to add another textview but when I tried the new textview has been placed on the previous textview how can I make the second textview goes down as a new second text view
This is my code I hope you can help me
<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/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="center_vertical"
android:text="#string/state1"
android:textSize="16sp" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#id/textView1"
android:ellipsize="marquee"
android:singleLine="true"
android:text="#string/sayer1"
android:textSize="12sp" />
<TextView
android:id="#+id/thirdLine"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#id/textView2"
android:ellipsize="marquee"
android:singleLine="true"
android:text="#string/sayer2"
android:textSize="12sp" />
<TextView
android:id="#+id/textView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:gravity="center_vertical"
android:text="#string/state2"
android:textSize="16sp" />
</RelativeLayout>
Simple just wrap those two TextView with LinearLayout and slightly align a Bit.
this would be very neat rather than just positioning inside the relative layout. because if you wanna move entire wrap TextView will move alongside. so you don't need to worry about aligning each TextView
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:baselineAligned="false"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/state1"
android:textSize="16sp" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:layout_below="#id/textView1"
android:ellipsize="marquee"
android:singleLine="true"
android:text="#string/sayer1"
android:textSize="12sp" />
</LinearLayout>
You should only align one TextView based on the parent and the rest based on that one.
Or put in other words, if you are not setting a layout_ parameter, then you should align it with the parent so the view knows where to position itself. Now, the other views can use layout_ parameters against the view that has an alignParent parameter.
If you align all of them against the parent, they will just align keeping the parent in mind and not bother about the other TextViews.
I like to imagine that they view that is aligned with the parent is a sort of "anchor" and the other ones position themselves against it.
Try the following (I removed the to other parameters for readability not because you should remove them!)
<TextView
android:id="#+id/textView1"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/secondLine"
android:layout_below="#id/textView1" />
//If You set it below, there's no reason to align it with the Parent
// you can now use margins instead
<TextView
android:id="#+id/thirdLine"
android:layout_below="#id/textView2" />
//Same scenario
<TextView
android:id="#+id/textView2"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" />
//In this case you DO need to align with parent because you are not setting a
//layout_ parameter
I hope this helps guide you in the right direction. Also, keep in mind that if you change the values on the views with alignParent parameter, the other views that have a layout_ parameter and will also change in position.
Change your xml file to following. It might help you
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:orientation="vertical"
android:padding="6dip" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="#string/state1"
android:textSize="16sp" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:ellipsize="marquee"
android:singleLine="true"
android:text="#string/sayer1"
android:textSize="12sp" />
<TextView
android:id="#+id/thirdLine"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:ellipsize="marquee"
android:singleLine="true"
android:text="#string/sayer2"
android:textSize="12sp" />
<TextView
android:id="#+id/textView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="#string/state2"
android:textSize="16sp" />
</LinearLayout>

I can't get an image on the left side of my Android XML Layout to appear properly. What am I doing wrong here?

Here is what is looks like and here is my XML code.
Can someone please post the fixed XML layout code for me and explain what I am doing wrong? I want the - symbol on the left to be all of the way left, just like the > symbol on the right side. The black text should be just to the right of the - symbol.
<?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">
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="44dip"
android:stretchColumns="0"
android:divider="#null"
>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/infocells"
android:divider="#null" >
<ImageView
android:id="#+id/imgDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/minus" />
<TextView
android:id="#+id/txtKey"
android:text="Some text"
android:textSize="16dip"
android:textStyle="bold"
android:layout_marginLeft="8dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
android:layout_weight="1.0"
android:layout_marginTop="11dp"
android:layout_marginBottom="6dp"
android:textColor="#color/black"
/>
<TextView
android:id="#+id/txtValue"
android:text="Some text"
android:textSize="16dip"
android:layout_marginRight="8dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:layout_weight="1.0"
android:layout_marginTop="11dp"
android:layout_marginBottom="6dp"
android:textColor="#color/darkblue"
/>
<ImageView
android:id="#+id/imageView1"
android:layout_marginTop="7dp"
android:layout_marginRight="7dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrow" />
</TableRow>
</TableLayout>
</LinearLayout>
Why don't you make use of RelativeLayout and using various property of it you can align your TextView and ImageView according to your other views.If u want to set a - to the left then make use android:layout_alignParentLeft="true" and android:layout_alignParentLeft="true" for you > to set it to the right of the layout
In your ImageView you can set your X position using translationX like something below:
<ImageView
android:id="#+id/imgDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:translationX="-25"
android:src="#drawable/minus" />
Just try it. This is a quick solution only.
Here's an idea on how you can do it. Give it a try.
<RelativeLayout>
<ImageView
android:id="#+id/imgDelete"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/txtKey"
android:layout_toRightOf="#+id/imgDelete" />
<TextView
android:id="#+id/txtValue"
android:layout_toRightOf="#+id/txtKey" />
<ImageView
android:id="#+id/imageView1"
android:layout_alignParentRight="true" />
</RelativeLayout>

Categories

Resources