I have been working on an app that shows statuses about a server. I have a CardView for each server, with a RelativeView inside. On the left is an image, aligned to the cards left. In the middle, I have a TextView, aligned to the image right. On the right, I have a TextView, aligned to the right of the card.
Basically, my issue is, without using a LinearLayout, how can I make it so the middle TextView does not overlap the right TextView, preferably in the layout's XML? The text in both views is dynamically long, making a LinearLayout not very preferable.
Here is a diagram of the Layout to help you picture what I'm talking about. Sorry for the external link, it was getting reformatted in the post.
1.Aline middle TextView to centerHorizontal of parent, give fixed width , margin left and right to it. Mention that it is right of another TextView by using layout_toLeftOf.
2.Also aligh right hand side TextView to right by using alignRightToParent = true. Then give left margin to it.
I tried by using below xml code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="#+id/sun"
android:background="#004700" >
<TextView
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginRight="20dp"
android:layout_toLeftOf="#+id/sun12"
android:singleLine="false"
android:text="abcdgsss ssssssssssssssss ssssssss sssssssssssssssssssssss"
android:textColor="#fff"
android:textSize="16sp" />
<TextView
android :id="#+id/sun12"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dp"
android:text="abcdgsss ssssssssssssssss ssssssss sssssssssssssssssssssss"
android:textColor="#fff"
android:textSize="16sp" >
</TextView>
</RelativeLayout>
I figured out how to do it programatically. Simply, you want to subtract the widths and padding of the surrounding views from the size of the container view, and set the leftover value to the text view's width. Here is an example:
int view_length = personViewHolder.container.getWidth() - personViewHolder.container.getPaddingStart() - personViewHolder.container.getPaddingEnd();
view_length = view_length - personViewHolder.object_to_left.getWidth() - personViewHolder.object_to_left.getPaddingStart() -personViewHolder.object_to_left.getPaddingEnd();
view_length = view_length - personViewHolder.object_to_right.getWidth() - personViewHolder.object_to_right.getPaddingStart() - personViewHolder.object_to_right.getPaddingEnd();
personViewHolder.view_to_set_width.getLayoutParams().width = view_length;
personViewHolder.view_to_set_width.invalidate();
You can place the views in a RelativeLayout (if they are not already in one), then and use the ToStartOf or ToEndOf attributes to align one of them to the start or end of the other. You could also use ToLeftOf or ToRightOf, but this is not recommended because in some locales you want the user to read from right to left instead of left to right. This will ensure that the two views never overlap (assuming you haven't placed negative margins on either of the views). This can be extended to as many views as you want, as long as you correctly configure their alignment attributes.
Related
I want to use a text view in my Android layout, the text should be rotated by 90 degrees to the left. The width of the text view is rather small (20dp). My code looks like this:
<TextView
android:id="#+id/txtVw"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:minWidth="20dp"
android:maxWidth="20dp"
android:paddingEnd="6dp"
android:rotation="270"
android:text="Test"/>
The rotation is done, but only those characters are shown that would be visible without the rotation - but there is enough space to show all of them. Does anyone have an idea?
I think it is really a bug, but I found a solution without a custom TextView by my own - I post it if someone else needs a solution for this:
<TextView
android:id="#+id/txtVwOne"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:height="20dp"
android:gravity="end"
android:maxWidth="40dp"
android:minWidth="40dp"
android:rotation="270"
android:text="Test" />
<TextView
android:id="#+id/txtVwTwo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_weight="1"
android:layout_marginLeft="-20dp"
android:minHeight="40dp" />
The trick is to set the min and max width to a value that will allow the text not to be cut in horizontal alignment. The layout height must be set to the height you want it to be. The height attribut must be set to target width of the text view. The following text view must contain android:layout_marginLeft="-20dp" to make sure that it is moved by 20 dp to the left (the target position).
I'm making an app that is related to a card game and as such has many images of cards appear throughout the app. In one section I need the user to select one of four cards, with only one selection ever being possible and I want to have the card to change color slightly after being clicked to show that it is the currently selected one.
For the bulk of this task a RadioGroup with RadioButtons makes perfect sense since the functionality for having a checked/unchecked state and unselecting all other options when a new one is picked is built in; however, the issue is that I want the buttons to be the cards themselves and therefore an image with no text whatsoever.
At first this post looked promising: Adding custom radio buttons in android
My use of this strategy:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_weight="5"
android:orientation="horizontal">
<TextView
android:id="#+id/label_seatGod"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8"
android:gravity="center_vertical"
android:text="#string/ex2"
android:textColor="#color/font_condition_labels"
android:textSize="#dimen/font_gen_label_size"
android:textStyle="bold" />
<RadioGroup
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8" >
<RadioButton
android:id="#+id/radioButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="#drawable/power_aphrodite"
android:checked="false"
android:text="#null" />
</RadioGroup>
</LinearLayout>
which resulted in:
This is almost perfect. No text and the entire region of the clickable button space is composed of the image I want, EXCEPT that as you can see the image is not scaled at all and is cropped on the edges. Above the RadioButton you can see a LinearLayout with 4 ImageButtons that demonstrate exactly how I want the RadioButton/card image to appear (ignore the grey for now I haven't finished padding the views).
Essentially, I want a RadioButton that functions normally but looks exactly like one of the four ImageButtons in the top section. Ideally scaleType="fitCenter" would be the fix since it is what I am using in the example ImageButtons, but you cannot apply that attribute to the button drawable of a RadioButton or its background directly.
So how can I get the image to scale and not be cropped without resorting to some performance tanking layout jurry rigging or creating an entirely new RadioButton class?
Thanks in advance.
Maybe you could try adding this to your RadioButton in the xml:
android:scaleType="centerCrop"
How to set the text position to the right of a Switch without align a Switch and a TextView in a LinearLayout ? I tried to override the CheckBox button style in my style.xml button but I don't know how to get the Switch button reference ?
I've recently faced the same issue and as I didn't want to wrap my layout in an extra container like all the answers I came across suggested.
I found out that by adding android:layoutDirection="rtl" in the switch I can change the direction of the text because Android understands that this view is supposed to be read/used by a person who reads from right to left.
See full snippet below including an extra padding between the thumb and the text
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:switchPadding="16dp"
android:layoutDirection="rtl"
android:text="Your Text" />
Update
I decided to update this for future reference as the claims in the comments are wrong and the op "unaccepted" this answer even when the question states "without align a Switch and a TextView in a LinearLayout" which the currently accepted answer does.
What the solution provided does is to tell that specific widget to change its layout orientation and by doing that it flip it from "LTR" (Left to right) to "RTL" (Right to left).
If you are not willing to nest layouts, this is a doable solution.
Testing
Set the widget layout orientation to "RTL"
Run the app
Go to Settings > Developer Options > Force RTL layout direction
Observe the layout
The direction of all the other widgets will flip to "RTL" as by the default they were on "LTR" and nothing will happen with the Switch as it is already in the right configuration. Check the images below.
Layout orientation "LTR" default
Layout orientation "RTL"
Two ways are there but as negative padding is not recommended so the 2nd way.
=> Using a separate text view
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:layout_height="wrap_content">
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/switch1" />
<TextView
android:layout_width="wrap_content"
android:text="This is a switch"
android:layout_height="wrap_content" />
</LinearLayout>
EDIT - There's no direct way but using Negative padding, A parent Layout or Any custom library.
See here and here.
Forget this and use this library.
I have a table row in a linear layout
The table row is set to fill parent
I have three objects inside the tablerow a textview then a editbox and then a buttong
they all line up horizontally
i want the textview on the left to be fixed at 100p width
I want the button on the right to be fixed at 50dp width
how do i set the editbox in the middle so that all three fill the width of the screen which might vary from device to device
I have tried various combinations of match and wrap but cant seem to get it
Any ideas
Mark
You have to use layout_weight for particular child of your view group or use relativelayout may solve your problem and please post you layout XML.
Try the following, using layout_weight:
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Name"
android:id="#+id/textView" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:layout_weight="1" />
<Button
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="Ok"
android:id="#+id/button" />
</LinearLayout>
That's when LAYOUT WEIGHTS come in handy.
For the fixed elements, just assign width & height as usual.
For the elastic ones, set "0dp" as the size you want to be elastic, and enter a weight in the weight field (layout parameters of a linearlayout).
Which weight?
If you only have one elastic element, it doesnt matter. If you have 2, then the available space will be distributed proportionally between weights. So if you wanted 2 elastic elements, one twice the size of the other, you'd assign weights 1 & 2.
By the way, heavy use of LinearLayouts with weight are somewhat discouraged because it takes Android twice the time to calculate their size. If your table has a lot of rows, you will certainly notice it's not as fast as fixed elements.
I am trying to make two TextViews that will be on the same row. The first one should be left aligned and the second one right aligned, when one of them becomes to big the first one (the left aligned should go on new row). I was able to make the first one to go on new line when the second TextView (the right aligned one) became too big but the problem is that it doesn't display the whole information from it. So anyone has any ideas. I'd like it to be with RelativeLayout but any help would be appreciated.
You should play with android:layout_weight to acheive this , this is how it should be :
<LinearLayout .....
android:orientation="horizontal" >
<TextView android:id="#+id/txtView1"
android:layout_height="wrap_content"
android:gravity="left"
android:text="TextView Left"
android:layout_width="0dp"
android:layout_weight="1" />
<TextView android:id="#+id/txtView2"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_width="0dp"
android:text="TextView Right"
android:layout_weight="1" />
</LinearLayout>
You should try putting the two textviews into a linearlayout, set the layout_weight="1" on both textviews and their layout_width="0".
give weight = 1 for both text views....
if it does't work....change relative layout to linear layout or table row and give weight to 1 for both text view
Put your TextViews in LinearLayout and set layout_weight=1. it will solve your problem.