Can't center the TextView using RelativeLayout - java

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);

Related

How to align Two TextViews next to each other in LinnearLayouts?

I am trying to put two TextViews next to each other but somehow I can't get it to work. I wanted to have the following: txtViewAddress: txtAddress
I've tried putting android:layout_toRightOf="#id/txtViewAddress"
I also tried putting layout_toLeftOf, but both did not work.
Hope you guys can help me out. Thanks in advance.
<?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/CalendarID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium"
android:visibility="gone" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="480dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/txtViewAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Address: "
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="22dp"
android:textStyle="bold"/>
<TextView
android:id="#+id/txtAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/txtViewAddress"
android:text="Hello"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="22dp"
android:textStyle="bold"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:gravity="right"
android:orientation="horizontal">
<Button
android:id="#+id/btn_update"
android:layout_width="45dp"
android:layout_height="35dp"
android:layout_marginRight="5dp"
android:layout_marginTop="100dp"
android:background="#drawable/edit"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="" />
<Button
android:id="#+id/btn_delete"
android:layout_width="38dp"
android:layout_height="24dp"
android:layout_marginRight="5dp"
android:layout_marginTop="100dp"
android:background="#drawable/delete"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="" />
</LinearLayout>
</LinearLayout>
If you need views inside a linear layout next to each other, the orientation of your layout must be horizontal.
You can also use the constraint layout, it has much more flexibility in placing view on your screen.
android:layout_toRightOf="#id/txtViewAddress" is atrribute part of Relative Layout
Use this code
<LinearLayout
android:layout_width="480dp"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/txtViewAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Address: "
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="22dp"
android:textStyle="bold"/>
<TextView
android:id="#+id/txtAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/txtViewAddress"
android:text="Hello"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="22dp"
android:textStyle="bold"/>
</LinearLayout>
<LinearLayout
android:layout_width="480dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<TextView
android:id="#+id/txtViewAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Address: "
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="22dp"
android:textStyle="bold"/>
<TextView
android:id="#+id/txtAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/txtViewAddress"
android:layout_weight="1"
android:text="Hello"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="22dp"
android:textStyle="bold"/>
</LinearLayout>
change the android:orientation="vertical" to android:orientation="horizontal"
and you can also use android:weightSum="2" weightSum is used to define the priority of the view
if you give equal weight to all views inside linear layout then all the views take on equal amount of space inside the Linear Layout
this should be like following
<LinearLayout
android:layout_width="480dp"
android:layout_height="wrap_content"
android:orientation="horizontal">
.....
......
.....
</LinearLayout>
and also I suggest that do not give fix width to layout instead you set it releted to screen size

Aligning Text and Icons in a TextView Android

i am working on a ui design assignment in android studio. i have been able to get this
here is my 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" tools:context=".MainActivity">
<ImageView
android:id="#+id/topImage"
android:src="#drawable/shebaartist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop" />
<TextView android:text="Event Planning and Decoration, Beads and Jewelry Making, Props and Bridals, Aso-Oke #WeMakePoshDesign"
android:drawableLeft="#drawable/about"
android:layout_below="#+id/topImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawablePadding="5dp"
android:padding="10dp"
android:textSize="16dp"
android:fontFamily="sans-serif-black"
android:background="#F0E68C"
android:id="#+id/descText" />
<TextView android:text="150 Alimi Rd, Alore, Ilorin, Kwara State"
android:drawableLeft="#drawable/marker"
android:layout_below="#+id/descText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:drawablePadding="5dp"
android:padding="10dp"
android:textSize="16dp"
android:fontFamily="sans-serif-light"
android:id="#+id/addrText"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView android:text="shebaeventss#gmail.com"
android:drawableLeft="#drawable/message"
android:layout_below="#+id/addrText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:drawablePadding="5dp"
android:padding="10dp"
android:background="#F0E68C"
android:textSize="16dp"
android:fontFamily="sans-serif-black"
android:id="#+id/emailText"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView android:text="07055393673"
android:drawableLeft="#drawable/phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:drawablePadding="5dp"
android:padding="10dp"
android:textSize="16dp"
android:fontFamily="sans-serif-light"
android:id="#+id/mobilenoText"
android:layout_below="#+id/emailText"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
I want to align the icons and text in the text views on the same line and with the same size. my question is that how do i do this? please point out my errors and help me with fixing this.
If this is what you want, then you just need change gravity from
android:gravity="center" to android:gravity="center_vertical"
Please add gravity property to your TextView with center alignment and
icon size change with 24dp.
<TextView android:text="Event Planning and Decoration, Beads and Jewelry Making, Props and Bridals, Aso-Oke #WeMakePoshDesign"
android:drawableLeft="#drawable/about"
android:layout_below="#+id/topImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawablePadding="5dp"
android:padding="10dp"
android:textSize="16dp"
android:gravity="center"
android:fontFamily="sans-serif-black"
android:background="#F0E68C"
android:id="#+id/descText" />
It seems you want to use a compound drawable, see this answer:
How do I use a compound drawable instead of a LinearLayout that contains an ImageView and a TextView

ListView leaderboard is too spaced out, can I make the rows closer?

Right now I have a ListView that shows high scores in a database. My rows right now are very spaced out, and I'd like them to be closer. However I can't figure this out. Here's what my tables look like on the emulator:
Here's my code:
Here is Leaderboard xml:
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/display_listview"
android:layout_below="#+id/time" />
Here is Leaderboard_row xml:
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/mathAnswer"
android:layout_marginTop="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/orange"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="-----------"
android:textSize="25sp"
android:textColor="#000"
android:id="#+id/lb_rank"
android:gravity="center"
android:layout_alignParentLeft="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/orange"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="-----------"
android:textSize="25sp"
android:textColor="#000"
android:id="#+id/lb_score"
android:gravity="center"
android:layout_toRightOf="#id/lb_rank"/>
<TextView
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/orange"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="-----------"
android:textColor="#000"
android:textSize="25sp"
android:id="#+id/lb_time"
android:gravity="right"
android:layout_toRightOf="#id/lb_score"/>
</LinearLayout>
Is there something I can do to make these rows closer together?
your xml looks pretty messed up. you are using a lot of attributes that are only for relative layout. Try this:
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation = "horizontal"
android:layout_marginTop="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/orange"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="-----------"
android:textSize="25sp"
android:textColor="#000"
android:id="#+id/lb_rank"
android:gravity="center" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/orange"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="-----------"
android:textSize="25sp"
android:textColor="#000"
android:id="#+id/lb_score"
android:gravity="center"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/orange"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="-----------"
android:textColor="#000"
android:textSize="25sp"
android:id="#+id/lb_time"
android:gravity="right"/>
</LinearLayout>
The line - android:layout_marginTop="10dp" in Leaderboard_row Linear Layout is adding space between rows. Removing this line should place the rows one below the other with out any space between them.
And android:layout_alignParentLeft, android:layout_toRightOf are Relative Layout properties and should not be used inside Linear Layout.

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>

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

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

Categories

Resources