I am trying to layout 1 textview (upText) left aligned and 1 textview (downText) and an image view (image) both on the same line and right aligned.
how can I do that? I tried that, but both 'textview' and image view at left aligned.
<TextView
android:id="#+id/uptext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left"/>
<TextView
android:id="#+id/downtext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:gravity="right|bottom"/>
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right|bottom"/>
</LinearLayout>
Don't use a LinearLayout. Use a RelativeLayout, with
your first TextView set with android:layout_alignParentLeft="true"
your second TextView set with android:layout_alignParentBottom="true" and android:layout_alignParentRight="true"
something similar for your ImageView, which presently looks like it is going to overlap the second TextView
I realize this post is a bit old but just in case someone comes across this in their search for clarity;
The parent linear layout is where gravity needs to be specified for the child to align with the desired behavior which is why the above posts are explaining that linear layout is not possible for two separate behaviors to occur since a child cannot decide where to align itself within a linear layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="200dp"
android:layout_height="50dp"
android:gravity="bottom|right">
<TextView
android:layout_width="40dp"
android:layout_height="20dp"
android:text="test"/></LinearLayout>
It should also be said that the parent linear layout must have a defined size and not be wrap-content or this will not work since wrap content implies that there will be no extra space in the layout for positioning, so at least 'match-parent' for width and height is necessary as well as having a parent with a greater size than wrap-content for the child linear layout itself.
Hope this helps.
Using RelativeLayout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom">
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="hi"
android:textStyle="bold|italic"
android:gravity="right"/>
<TextView
android:id="#+id/text2"
android:layout_below="#id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="All"
android:gravity="right"/>
</RelativeLayout>
Related
I have a TextView and ImageView in a ListView row, positioned next to each other. However, the ImageView doesn't show up at all, and doesn't register clicks either. This is the XML code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:text="text"
android:layout_width="320dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_centerVertical="true"
android:padding="10dp" />
<ImageView
android:id="#+id/imageView"
android:clickable="true"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/textView"
android:src="#drawable/ic_action"/>
</RelativeLayout>
The problem seems to lie in the layout_toRightOf line, if I remove it, the ImageView is shown, but in the wrong place. But I don't understand why it's causing a problem. What am I missing?
The issue is that the TextView is pushing the ImageView off the screen.
You can fix this using a LinearLayout and android:layout_weight
eg:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:text="text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:layout_centerVertical="true"
android:padding="10dp" />
<ImageView
android:id="#+id/imageView"
android:clickable="true"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/textView"
android:src="#drawable/ic_action"/>
</LinearLayout>
More info on the layout_weight attribute:
This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. Default weight is zero.
For example, if there are three text fields and two of them declare a weight of 1, while the other is given no weight, the third text field without weight will not grow and will only occupy the area required by its content. The other two will expand equally to fill the space remaining after all three fields are measured. If the third field is then given a weight of 2 (instead of 0), then it is now declared more important than both the others, so it gets half the total remaining space, while the first two share the rest equally.
You need to use LinearLayout with weight.. if you set fixed width and the size of the phone is small, it will either stretch out of the screen.
//do linearlayout with orientation horizontal
<LinearLayout
...
orientation = "horizontal"
...
>
<TextView
....
android:layout_width="0dp"
android:layout_weight="1"
...
/>
<Button
....
android:layout_width="wrap_content"
...
/>
</LinearLayout>
Play with android:layout_weight, you will understand
I am using the following code and when I set gravity to the first textview to center, automatically the second textview's text is also getting aligned with the first one. Even Though I set the gravity of second view to top
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="96dp"
android:text="New Text"
android:id="#+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="48dp"
android:text="New Text"
android:id="#+id/textView2" />
</LinearLayout>
There was a solution in another question which says to wrap the 2nd textview in another LinearLayout. But why is it so?
A horizontal LinearLayout aligns its child Views by their baselines by default, so the second TextView is being moved to align its text with the first's. To fix your problem, simply set the LinearLayout's baselineAligned attribute to false.
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false">
I have this XML layout in my App (example of one button):
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/scrollViewMain"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff0e8" >
///some views
<Button
android:id="#+id/btnVysledkySportka"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/chckSprotka"
android:layout_alignRight="#+id/chckSprotka"
android:layout_alignTop="#+id/chckSprotka"
android:layout_margin="3dp"
android:layout_toRightOf="#+id/textView3"
android:background="#ffe118"
android:gravity="center"
android:onClick="vysledkySportka"
android:text="Archiv výsledků"
android:textStyle="bold" />
///some views
</RelativeLayout>
</ScrollView>
But when I start my app at Android 4.3, the text of buttons isn´t in center of button. Look at the screenshot (in red rectangle):
Where can be problem?
EDIT:
Whole layout
When you specify:
android:layout_alignBottom="#+id/chckSprotka"
android:layout_alignRight="#+id/chckSprotka"
android:layout_alignTop="#+id/chckSprotka"
It does make the bottom/right/top edge of your button match the bottom edge of the given anchor view ID & accommodates bottom/right/top margin, but while doing that, the android_gravity does not take the resultant height/width into consideration.
So the gravity of the text is center according to wrap_content for layout_height and layout_width.
You can verify that by setting values for layout_height and layout_width (Eg. 200dp and 100dp to try with) and you will get the text with gravity center but for that height and width.
To confirm the same, what you can do is use a container LinearLayout for your Button like:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/chckStastnych"
android:layout_alignRight="#+id/chckStastnych"
android:layout_alignTop="#+id/chckStastnych"
android:layout_margin="3dp"
android:layout_toRightOf="#+id/textView3"
android:background="#ffe118" >
<Button
android:id="#+id/btnVysledkyStastnych"
android:layout_gravity="center"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffe118"
android:gravity="center"
android:onClick="vysledkyStastnych"
android:text="Archiv výsledků"
android:textStyle="bold" />
</LinearLayout>
Set the gravity of LinearLayout as center and then center the Button within or as shown above, use layout_gravity for the button to center it in parent LinearLayout.
This will work as a solution when you do that for all 4 buttons, however there might be better options if you restructure your xml and avoid this kind of nesting.
Try This:
<Button
android:id="#+id/btnVysledkySportka"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/chckSprotka"
android:layout_alignRight="#+id/chckSprotka"
android:layout_alignTop="#+id/chckSprotka"
android:layout_margin="3dp"
android:layout_toRightOf="#+id/textView3"
android:background="#ffe118"
android:gravity="center_vertical"
android:onClick="vysledkySportka"
android:text="Archiv výsledků"
android:textStyle="bold" />
I have a basic ListView with two TextViews in the cells and I would like for the TextViews to center to the middle of the Layout when there isn't any text in the other TextView.
Here is my current XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:minHeight="80dp"
android:orientation="vertical"
android:gravity="center_vertical"
android:paddingLeft="20dp"
android:paddingRight="20dp" >
<TextView android:id="#+id/titleTextView"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:textSize="16sp"/>
<TextView android:id="#+id/detailsTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_below="#id/titleTextView"
android:textSize="12sp"/>
</RelativeLayout>
I'm using a RelativeLayout because I am hoping to utilize it when I add more elements, but I want to figure this part out first. Switching to a LinearLayout didn't have any effect on adjusting the TextViews.
Will I have to adjust the views programmatically? If so, how should I handle that? Remove the one view from the layout (Which will require a LinearLayout, right)?
Simply make the TextView "gone" when it is empty, when a view is "gone" it has no effect on the layout it is in, thus the other TextView would center because of the gravity property you have added.
textView.setVisibility(View.GONE);
I have a RelativeLayout containing a pair of side-by-side buttons, which I want to be centered within the layout. I could just put the buttons in a LinearLayout and center that in the RelativeLayout, but I want to keep my xml as clean as possible.
Here's what I tried, this just puts the "apply" button in the center and the "undo" button to the left of it:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15sp">
<TextView
android:id="#+id/instructions"
android:text="#string/instructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15sp"
android:layout_centerHorizontal="true"
/>
<Button
android:id="#+id/apply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/apply"
android:textSize="20sp"
android:layout_below="#id/instructions"
/>
<Button
android:id="#+id/undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/undo"
android:textSize="20sp"
android:layout_toLeftOf="#id/apply"
android:layout_below="#id/instructions"
/>
</RelativeLayout>
android:gravity will align the content inside the view or layout it is used on.
android:layout_gravity will align the view or layout inside of his parent.
So adding
android:gravity="center"
to your RelativeLayout should do the trick...
Like this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="15sp">
</RelativeLayout>
Here is an extension of BrainCrash's answer. It is a non nested option that groups and centers all three horizontally and vertically. In addition, it takes the top TextView and centers it horizontally across both buttons. If desired, you can then center the text within the TextView with android:gravity="center". I also removed the margins, added color, and set the RelativeLayout height to fill_parent to highlight the layout. Tested on API 11.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:background="#android:color/black"
>
<TextView
android:id="#+id/instructions"
android:text="TEST"
android:textSize="20sp"
android:background="#android:color/darker_gray"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignLeft="#+id/undo"
android:layout_alignRight="#+id/apply"
android:gravity="center"
/>
<Button
android:id="#+id/apply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="APPLY"
android:textSize="20sp"
android:layout_below="#id/instructions"
/>
<Button
android:id="#+id/undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="UNDO"
android:textSize="20sp"
android:layout_toLeftOf="#id/apply"
android:layout_below="#id/instructions"
/>
</RelativeLayout>
android:layout_gravity="center"
will almost give what you're looking for.
Here is a combination of the above answer's that solved my specific situation:
Centering two separate labels within a layout that also includes a button in the left most position of the same layout (button, label, label, from left to right, where the labels are centered relative to the layout containing all three views - that is, the button doesn't push the labels off center).
I solved this by nesting two RelativeLayout's, where the outer most layout included the
Button and an Inner-RelativeLayout.
The Inner-RelativeLayout contained the two text labels (TextView's).
Here is a snippet that provides the details of how the centering and other layout stuff was done:
see: RelativeLayout Gravity not applied? and
Gravity and layout_gravity on Android
for the difference's between gravity and layout_gravity.
Tweak the paddingLeft on the btn_button1 Button to see that the TextView's do not move.
(My apologies to havexz for the downvotes. I was too hasty in thinking that just b/c your suggestions didn't solve the exact question being ask, that they do help to solve very similar situations (the answer here solves a very specific situation, and only the combination of all these answer's solved my problem. I tried upvoting, but it won't let me unless I edit the answer's, which I don't want to do.)
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_outer"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:background="#FF0000FF">
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/btn_button1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF00FF00"
android:text="<"
android:textSize="20sp"
android:paddingLeft="40dip"/>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_inner"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FFFF00FF"
android:layout_centerInParent="true"
android:gravity="center">
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tv_text1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF505050"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
android:text="Complaint #"
android:gravity="center"/>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tv_text2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FF505050"
android:textSize="20sp"
android:textColor="#FFFFFFFF"
android:layout_toRightOf="#id/tv_text1"
android:gravity="center"/>
</RelativeLayout>
</RelativeLayout>
LinearLayout is a good option. Other than that there are options like create an invisible view and center that and then align left button to the left it and right on the right of it. BUT those are just work arounds.