I have a table row setup using relative layout. It has 2 TextView both of which I want to have equal spacing and left aligned text. See current setup below. This has one textview aligned left and another right. When I change to align both to left content overlaps.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip">
<TextView
android:id="#+id/displayLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:layout_toRightOf="#+id/row_image"
android:text="adasd"
android:textSize="18sp" />
<TextView
android:id="#+id/displayValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="20dp"
android:text="adasd"
android:textSize="18sp"/>
</RelativeLayout>
Any suggestions. Thanks in advance for the help.
It seems like a job for weighted LinearLayout - display two equaly-sized text views:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip">
<TextView
android:id="#+id/displayLabel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="adasd"
android:textSize="18sp"
android:layout_weight="1"/>
<TextView
android:id="#+id/displayValue"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="adasd"
android:textSize="18sp"
android:layout_weight="1"/>
</LinearLayout>
Then in emulator it will looks like:
Note the layout_weight attribute in both text views and zero layout_width. Basically it means that the views will get additional amount of free space proportional to specified weight. So for equivalent weights these views will be of identical width.
See layout guide on developer.android.com for further reference.
Did you tried using following for displayValue TextView instead of alignParentRight?
android:layout_toRightOf="#id/displayLabel"
Then give some left margin.
Related
What I want is that I can have 1 ImageView on the left and next to the imageview 2 textviews under each other. I can't get the second textview under the textview.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/displayImage"
android:layout_width="67dp"
android:layout_height="100dp"
android:layout_gravity="left"
android:layout_weight="1" />
<TextView
android:id="#+id/textview_name"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_weight="2"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="3dp"
android:textColor="#color/colorPrimaryDark"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textview_description"
android:layout_width="55dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="2"
android:gravity="left"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="3dp"
android:textSize="20sp" />
</LinearLayout>
The result looks now:
Result
Expected result
You can use something like below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/displayImage"
android:layout_width="67dp"
android:layout_height="100dp"
android:src="#color/colorPrimaryDark" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/textview_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="3dp"
android:text="Left text"
android:textColor="#color/colorPrimaryDark"
android:textStyle="bold" />
<TextView
android:id="#+id/textview_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="3dp"
android:text="Right text" />
</LinearLayout>
</LinearLayout>
You can nest containers like LinearLayout,RelativeLayout, FrameLayout, etc inside each other to create complex Layouts.
Also, I'd advise knowing what each tags do by Googling them before using them inappropriately anywhere inside your layout. It needed me solid 5 minutes to fix your layout because you added layout_weight basically anywhere you pleased!
Your linear layout orientation is horizontal, so you can't get textviews vertically aligned unless you take one more linear layout for the 2 textviews with vertical orientation. Otherwise, you can do this with a single Relative layout.
Here is the structure
<LinearLayout> - horizontal orientation
<Imageview/>
<LinearLayout> - vertical orientation
<Textview/>
<Textview/>
</LinearLayout> - vertical orientation
</LinearLayout> - horizontal orientation.
You have set the orientation of the Linear Layout as horizontal. This will make all the children (in your case, ImageView, TextView name and TextView description) to be horizontally laid out next to each other.
There are many ways to do this.
1 way to achieve this is by using RelativeLayout and then you can use
android:layout_toBottomOf="#id/textview_name"
to get the description textview to be below the name text view.
For the image view, you can use the property
android:layout_alignParentLeft="true"
to make the image view to stick to the left border. Please experiment with RelativeLayout to get the desired result.
Please use this codelab from Google to use ContraintLayout. https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#0
I'm trying to figure out why a two-line button in my application is being shifted a couple of pixels lower than the other buttons:
This does not happen if I shorten the text on the third button until it fits on one line, which tells me it has something to do with the line break. Adding android:layout_gravity="top" to the button's layout doesn't seem to help. Any ideas what might be causing this one?
Edit: Here's the layout XML file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
android:padding="10dip"
android:layout_width="wrap_content">
<TextView android:id="#+id/error_text"
android:layout_height="wrap_content"
android:layout_marginBottom="5dip"
android:text="Place holder"
android:layout_width="wrap_content"
android:textSize="17dip"/>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:padding="10dip"
android:layout_width="wrap_content">
<Button android:id="#+id/ok_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/ok"
android:textColor="#color/black"
android:textStyle="bold"/>
<Button android:id="#+id/cancel_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dip"
android:text="#string/cancel_login"
android:textColor="#color/black"
android:textStyle="bold"
android:visibility="gone"/>
<Button android:id="#+id/third_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dip"
android:textColor="#color/black"
android:textStyle="bold"
android:visibility="gone"/>
</LinearLayout>
</LinearLayout>
A horizontal LinearLayout aligns the baselines of all its child controls by default. So the first line of text in your multi-line button is vertically aligned with the single line of text in the other buttons.
To disable this behaviour, set android:baselineAligned="false" on the LinearLayout.
Having had a look at your layout (on a device), I am not sure why it exhibits this strange behaviour. When debugging layouts I like to put background colours on Views so you can see more clearly the space they are taking up. If we remove all the padding, we see that the buttons simply don't sit on the same top line. If we apply android:gravity="center_vertical" to the containing LinearLayout we see that the first two buttons are centered but the last one sits snugly with the top edge.
One solution to this is just to rewrite the inner container using a RelativeLayout:
<RelativeLayout
android:layout_height="wrap_content"
android:padding="10dip"
android:layout_width="wrap_content">
<Button android:id="#+id/ok_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/ok"
android:textColor="#color/black"
android:textStyle="bold"/>
<Button android:id="#+id/cancel_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dip"
android:layout_toRightOf="#id/ok_button"
android:text="#string/cancel_login"
android:textColor="#color/black"
android:textStyle="bold"
android:visibility="gone"/>
<Button android:id="#+id/third_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dip"
android:layout_toRightOf="#id/cancel_button"
android:textColor="#color/black"
android:textStyle="bold"
android:visibility="gone"/>
</RelativeLayout>
From my testing, by using a RelativeLayout you can get all of the buttons to sit on the same top edge.
I ran your code with the following change and it worked fine:
Change the android:gravity in the horizontal linear layout from "center_horizontal" to "center".
I have add the following lines to your third button in XML and make it's height to "fill_parent" :
android:paddingTop="4dp"
android:layout_height="fill_parent"
For me, 4dp worked fine you can check if you need more or less.
Make these changes and your button will be fine, like its fellows :-)
write android:layout_height="fill_parent" for all three buttons
Why is my Linear Layout not taking up the whole space inside the CardView?
When I use the preview and expand the LinearLayout to match the CardViews width it sets the width to match_parent (which I tried manually) but then goes back to how it is now.
In other words: I want the red background to go all the way to the right and also the right TextView aligned to the right.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="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/itemCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_marginBottom="3dp"
android:layout_marginTop="3dp"
android:background="#color/Mat"
android:padding="3dp"
app:cardElevation="4dp"
app:cardCornerRadius="1dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:background="#color/Mat"
android:orientation="horizontal"
android:padding="3dp"
android:paddingLeft="5dp"
android:paddingRight="5dp">
<TextView
android:id="#+id/textView2"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#drawable/circle"
android:gravity="center"
android:text="DEU"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Frau Hardt"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/textView4" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="O03"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Edit: After removing the min-width and setting the width of the whole layout to match_parent it goes all the way to the right.
Now how do I get to center the TextView with the name horizontally and have the text view on the right align to the right of the whole layout?
I included a picture because it looks all nice right next to each other. I hope the code (especially since it's not a whole lot) doesn't have to be as text. If so I'll edit the question of course!
Thanks!
Make your middle TextView as this;
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
... />
It fills the remaining middle space.
You also should use match_parent instead of fill_parent since it is deprecated.
What I want to do is have one word aligned on the far left side of a textview and one word aligned on the far right of the same textview. I have no idea how to do this. I'm using android studio. Whats the best, if not the only way to do this? Thanks.
use RelativeLayout,
RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).
Here you have two textview tv_1 at the most left and tv_2 at the most right (layout_alignParentRight="true"), and the tv_2 will follow tv_1 do to layout_alignBottom="#+id/tv_1"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tv_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="left"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/tv_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="right"
android:layout_alignParentRight="true"
android:layout_alignBottom="#+id/tv_1"/> </RelativeLayout>
It would be very hard to do that(Auto spacing between two words in a single TextView). Using 2 TextView is suggestive
Replace your TextView with this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:layout_weight="1"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:gravity="right"
android:layout_weight="1"/>
</LinearLayout>
I have a TextView inside a LinearLayout and i want to align it in center of the page but its not happening, i have tried the following:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:background="#80000000"
android:gravity="center"
android:padding="10dp"
android:text="User Name"
android:textColor="#FFFFFF"
android:textSize="12sp" />
</LinearLayout>
Change the TextView layout_width to "match_parent", the issue is that "gravity" works only for the child of the View in this case the "text" it self, hence if you specify the object width as just to wrap its content, it means there's no space to center to, filling the whole parent and using "gravity" center would do the trick.
The other thing you can do is changing the "android:gravity" property to "android:layout_gravity" and center horizontal, this way you are telling the TextView itself to move to the center...
As best practice always try to use RelativeLayouts and avoid LinearLayouts, they provide a better way to manipulate Views position and are "device size fragmentation" friendly, RelativeLayout have plenty of methods to position views on the most common positions including center, top, bottom etc...
Hope this Helps.
Regards!
Try changing the layout. Linear Layout is meant for displaying ui components in rows. If you want to center your textview using you layout, I suggest changing the layout to Relative Layout.
First of all you cant set the property android:layout_centerHorizontal="true" for a LinearLayout. To make it centered you need to make layout height and width to match_parent like below,
<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/userName"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:background="#80000000"
android:gravity="center"
android:padding="10dp"
android:text="User Name"
android:textColor="#FFFFFF"
android:textSize="12sp" />
</LinearLayout>
Try using:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:gravity="center" >
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#80000000"
android:gravity="center"
android:padding="10dp"
android:text="User Name"
android:textColor="#FFFFFF"
android:textSize="12sp" />
</LinearLayout>