I'm implementing an EULA with a checkbox, where part of the text is clickable. Through googling and from other answered questions here, I've used a checkbox with no text and a separate textview for the text, which in the C# code uses a SpannableString and ClickableSpan.
However, I'm having some problems with the layout of the checkbox and textview. Here is what the layout looks like now:
I want to get the one on top to look like the one below
As can be seen, there's a large unknown padding on the left and right of the textview even though the padding is explicitly set to 0. Here is the xml code:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/registerMobileField"
android:layout_marginTop="27dp"
android:layout_centerHorizontal="true">
<CheckBox
android:id="#+id/pdpaChkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="0"
android:text=""
android:scaleX="0.80"
android:scaleY="0.80" />
<TextView
android:id="#+id/pdpaText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/pdpaChkbox"
android:layout_centerVertical="true"
android:padding="0"
android:textColor="#color/dark_blue"
android:text="#string/pdpa"
android:scaleX="0.80"
android:scaleY="0.80" />
</RelativeLayout>
<CheckBox
android:id="#+id/pdpaChkbox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/registerMobileField"
android:layout_centerHorizontal="true"
android:layout_marginTop="47dp"
android:textColor="#color/dark_blue"
android:text="#string/pdpa"
android:scaleX="0.80"
android:scaleY="0.80" />
Any help would be greatly appreciated!
This is not unknown padding this is scaleX and scaleY property you have given to you that you have given CheckBox and TextView. just remove these properties from your CheckBox and TextView and give it to the RelativeLayout then your both case will same as follows.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/registerMobileField"
android:layout_marginTop="27dp"
android:scaleX="0.80"
android:scaleY="0.80"
android:layout_centerHorizontal="true">
<CheckBox
android:id="#+id/pdpaChkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/pdpaText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/dark_blue"
android:layout_toRightOf="#id/pdpaChkbox"
android:layout_centerVertical="true"
android:text="#string/app_name"
/>
</RelativeLayout>
<CheckBox
android:id="#+id/pdpaChkbox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="47dp"
android:textColor="#color/dark_blue"
android:layout_below="#id/registerMobileField"
android:text="#string/app_name"
android:scaleX="0.80"
android:scaleY="0.80" />
I hope its work for you
Related
I've searched quite a lot here and have tried to provide information about how to align the children objects inside my relative layout, however one of them doesn't display.
This is my code:
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignLeft="#id/textView1"
android:layout_below="#id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="example"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/textView2"
android:layout_alignBottom="#id/textView2"
android:text="example" />
</RelativeLayout>
TextView3 doesn't appear at all. It looks like there is a missing or conflicting rule, but I can't figure out which one.
Go ahead and give this a try, works for me.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="example"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/textView2"
android:layout_alignBottom="#+id/textView2"
android:text="example"
/>
</RelativeLayout>
textView2 is aligned to the left. If you align textView3 to the left of a left object it's going to be off the screen
Your code does not provide the code for textView1, but if I were to assume that your textView1 were to be on the top left side of the screen, then if you have this line for your inner RelativeLayout:
android:layout_alignLeft="#id/textView1"
textView2 would be aligned to textView1, therefore if you added textView3 was added and you did:
android:layout_toLeftOf="#id/textView2"
then it would appear off the screen to the left.
What I watch here for example using Relative Layout ,you need to be specific, if you wish to locate to the right of editTextNumberPeriods in this case, also you need to instruct .xml where is textView2, in this case it is below btn18, I meant it is not enough to instruct .xml if it is right or left. I tested it, it works perfectly.
<TextView
**android:id="#+id/btn18"**
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:gravity="center"
android:textAllCaps="false"
android:layout_centerHorizontal="true"
android:layout_below="#id/btn19"
android:text="Please enter numbers of periods." />
<EditText
**`android:id="#+id/editTextNumberPeriods"`**
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/btn18"
android:cursorVisible="true"
android:focusable="true"
android:fontFamily="sans-serif"
android:layout_centerHorizontal="true"
android:ems="10"
android:gravity="center"
android:background="#68DBFA"
android:hint="numbers of periods"
android:textColorHint="#color/white"
android:inputType="number"
android:selectAllOnFocus="true"
android:textAllCaps="false"
android:textColor="#7C1616" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
**android:layout_below="#id/btn18"
android:layout_toRightOf="#id/editTextNumberPeriods"**
android:text="TextView" />
I have the below code, it is a checkbox and button on opposite ends. I want to keep it on opposite ends, but i want the checkbox (along with its text) to come at the middle of the button height.
As is , the checkbox comes on top of button height
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp">
<CheckBox
android:id="#+id/rememberCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="#string/remember_choice"
android:textSize="#dimen/dux_textSizeSmaller" />
<Button
android:id="#+id/submitBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:text="#string/submit" />
</RelativeLayout>
Use this updated XML. I think you will get your result...
<CheckBox
android:id="#+id/rememberCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/submitBtn"
android:layout_alignBottom="#+id/submitBtn"
android:layout_alignParentLeft="true"
android:text="#string/remember_choice"
android:textSize="#dimen/dux_textSizeSmaller" />
<Button
android:id="#+id/submitBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:text="#string/submit" />
You should use this:
android:layout_alignBaseline="#+id/submitBtn"
In your code:
<CheckBox
android:id="#+id/rememberCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/submitBtn"
android:layout_alignParentLeft="true"
android:text="#string/remember_choice"
android:textSize="#dimen/dux_textSizeSmaller" />
Add android:gravity = "center" to the layout which holds your CheckBox and The Button. That simple. Happy coding :)
Somebody can please explain this?
Why the third TextView is weird?
The definitions for the 2 lines before are the same, and I haven't touched the style with java...
Edit: I've added the XML Layout file.
The XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top" >
<TextView
android:id="#+id/quadEqu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:text="#string/quadequ"
android:textSize="27sp" />
<Button
android:id="#+id/closeBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp"
android:text="#string/close"
android:onClick="close" />
<TextView
android:id="#+id/stepOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/quadEqu"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:text="#string/quadEquForm"
android:textSize="18sp" />
<TextView
android:id="#+id/stepTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/stepOne"
android:layout_below="#+id/stepOne"
android:text="#string/quadEquForm"
android:textSize="18sp" />
<TextView
android:id="#+id/stepThree"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/stepOne"
android:layout_below="#+id/stepTwo"
android:text="#string/quadEquForm"
android:textSize="18sp" />
</RelativeLayout>
It's a strange behaviour.
Try to set the content of the 'stepTwo' to the 'stepThree'.
If the same issue appeared, so the problem from the TextView.
You should check if you modify the padding of 'stepThree' textView programmatically.
In android Text View, when you try to render the subscript, the text gets clipped at the top and bottom. To avoid this, you can try to set the text from HTML.
Example.
stepThree.setText(Html.fromHtml("Some text<sup><small>1</small></sup>"));
stepThree.setText(Html.fromHtml(
"HCO<sub><small><small>3</small></small></sub>));
Refer this link for more details.
Android TextView's subscript being clipped off
Subscript and Superscript a String in Android
You need to change android:layout_height for the TextView (for all 3 is better).
<TextView
android:id="#+id/stepOne"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_below="#+id/quadEqu"
android:layout_centerHorizontal="true"
android:layout_marginTop="25dp"
android:text="#string/quadEquForm"
android:textSize="18sp" />
<TextView
android:id="#+id/stepTwo"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignLeft="#+id/stepOne"
android:layout_below="#+id/stepOne"
android:text="#string/quadEquForm"
android:textSize="18sp" />
<TextView
android:id="#+id/stepThree"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignLeft="#+id/stepOne"
android:layout_below="#+id/stepTwo"
android:text="#string/quadEquForm"
android:textSize="18sp" />
I'm trying to develop an android application, but I'm having some problems with the GUI design. The following part of screenshot is my problem (red and blue lines were generated by Android debug options).
This is the code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/caption"
android:layout_below="#+id/caption" >
<ImageButton
android:id="#+id/button_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/content_edit"
style="?android:attr/borderlessButtonStyle" />
<TextView
android:id="#+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/num_placeholder"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
As you can see, the TextView myText overlaps the ImageButton button_edit.
A simple solution would be to use a LinearLayout instead of a RelativeLayout. The problem is that:
I need the edit button on the right
I need the text to fill the rest of the layout (at the left of edit button obviously)
I also tried to set myText's layout_width to 'fill_parent', but it fill the entire rest of the screen at the left of the edit button.
The expected behavior would be myText to increase its height (becoming a two-lines TextView) instead of overlapping 'button_edit'
Can anyone help me? Thanks
use layout_toLeftOf in TextView layout
like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/caption"
android:layout_below="#+id/caption" >
<ImageButton
android:id="#+id/button_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/content_edit"
style="?android:attr/borderlessButtonStyle" />
<TextView
android:id="#+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/num_placeholder"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_toLeftOf="#+id/button_edit" />
Another way of doing is to use android:layout_toEndOf attribute
<ImageButton
android:id="#+id/button_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/content_edit"
style="?android:attr/borderlessButtonStyle"
android:layout_toEndOf="#+id/myText" />
<TextView
android:id="#+id/myText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/num_placeholder"
android:textAppearance="?android:attr/textAppearanceLarge" />
So My text View has to be drawn over the image view, so its defined in xml like this:
<ImageView
android:id="#+id/chatBalloon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="-5dp"
android:layout_marginRight="-5dp"
android:layout_marginTop="2dp"
android:layout_toRightOf="#+id/chatItemProfPic"
android:scaleType="fitXY"
android:src="#drawable/chat_bar_user" />
<TextView
android:id="#+id/userText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="7dp"
android:layout_marginTop="3dp"
android:layout_toRightOf="#+id/chatItemProfPic"
android:text="username"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="15sp" />
but i because the textView can contain multiline text, i need to have the imageView increase its height accordingly. It would be accomplished by adding this rule:
android:layout_alignBottom="idOfText"
but because the textView hasnt been defined at that part, the app crashes. I get the same when trying to do it from code by addRule in the LayoutParams because i call it in onCreate, before the view has been drawn.
Any ideas how to bypass this?
SOLVED:
Final xml:
<ImageView
android:id="#+id/chatBalloon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="-5dp"
android:layout_marginRight="-5dp"
android:layout_marginTop="2dp"
android:layout_toRightOf="#+id/chatItemProfPic"
android:scaleType="fitXY"
android:layout_alignBottom="#+id/userText"
android:src="#drawable/chat_bar_user" />
<TextView
android:id="#id/userText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="7dp"
android:layout_marginTop="3dp"
android:layout_toRightOf="#+id/chatItemProfPic"
android:text="username"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="15sp" />
You use
android:layout_alignBottom="#+id/idOfText"
when you first make a reference to a particular id. Note the "+" which is adding the id to the list of resource identifiers.
Then, you can assign an existing id to a widget without using the "+", as follows:
android:id="#id/idOfText"
after. It's typical to create the id when we're assigning it, which is why you only really need to care about the presence of the "+" in relative layouts.
In your specific case:
<ImageView
android:id="#+id/chatBalloon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="-5dp"
android:layout_marginRight="-5dp"
android:layout_marginTop="2dp"
android:layout_toRightOf="#id/chatItemProfPic"
android:layout_alignBottom="#+id/userText"
android:scaleType="fitXY"
android:src="#drawable/chat_bar_user" />
<TextView
android:id="#id/userText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="7dp"
android:layout_marginTop="3dp"
android:layout_toRightOf="#id/chatItemProfPic"
android:text="username"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="15sp" />
You should have set the ID of the profile pic widget using: android:id = "#+id/chatItemProfPic" assuming that you are declaring the widget before any references to it. Otherwise, similarly, use "+" for the first reference, and then assign the ID when you declare the widget without the "+".
why dont put that image like textview background.?
or something like:
<RelativeLayout
android:id="#+id/Rlayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="35dp" >
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/img" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="lorem ipsum"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="#dimen/dimension" />
</RelativeLayout>
in relative layout you could easily put text right over imageview