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
Related
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
Thank you everyone who posted an answer, I looked over most of them and they all seem to work! Sorry if I didn't mark your's the answer since I could only mark one. However all methods below worked for me. Much appreciated.
Hi just a couple of things to know:
I created a new activity, very simple. Basically the function is to press the button on the MainActivity page which will redirect the user to a new page called display. Everything seems to be working fine except for two errors I keep on getting. The android:id="#+id/" and android:layout_below="#+id/" return that they are missing resource names.
Here is my code:
<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" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<TextView android:text="#string/welcome_screen" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textStyle="bold"
android:textSize="24sp"
android:textColor="#000000"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/g_button"
android:id="#+id/g_button"
android:layout_marginTop="121dp"
android:layout_below="#+id/"
android:layout_centerHorizontal="true"
android:clickable="true"
android:onClick="onButtonClick" />
</RelativeLayout>
Any help would be much appreciated.
You have to give proper id to textview like below code
<TextView android:text="#string/welcome_screen" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/myText"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textStyle="bold"
android:textSize="24sp"
android:textColor="#000000"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/g_button"
android:id="#+id/g_button"
android:layout_marginTop="121dp"
android:layout_below="#+id/myText"
android:layout_centerHorizontal="true"
android:clickable="true"
android:onClick="onButtonClick" />
Replace your layout like this
<TextView android:text="#string/welcome_screen" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tv_temp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textStyle="bold"
android:textSize="24sp"
android:textColor="#000000"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/g_button"
android:id="#+id/g_button"
android:layout_marginTop="121dp"
android:layout_below="#+id/tv_temp"
android:layout_centerHorizontal="true"
android:clickable="true"
android:onClick="onButtonClick" />
</RelativeLayout>
you actually describing the id tag and not giving the id to your views.Give your views some id.for eg :-
<TextView android:text="#string/welcome_screen" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textAbc" //id cannot be left blank
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textStyle="bold"
android:textSize="24sp"
android:textColor="#000000"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/g_button"
android:id="#+id/g_button"
android:layout_marginTop="121dp"
android:layout_below="#+id/myText"
android:layout_centerHorizontal="true"
android:clickable="true"
android:onClick="onButtonClick" />
You need to have an ID name after the identifier, for example
android:layout_below="#+id/textview1"
android:layout_below="#+id/button1"
That ID is used to reference the View element from the code. For more details, see
http://developer.android.com/guide/topics/ui/declaring-layout.html
Cause
The layout has a TextView and below it a Button (atleast you want that), in the button you have layout_below which expects an id of the widget you want it to be below. But in your case you did not specify one. So you are getting this error.
Solution
Replace your xml with this the xml below.
<TextView android:text="#string/welcome_screen" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/top"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textStyle="bold"
android:textSize="24sp"
android:textColor="#000000"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/g_button"
android:id="#+id/below"
android:layout_marginTop="121dp"
android:layout_below="#+id/top"
android:layout_centerHorizontal="true"
android:clickable="true"
android:onClick="onButtonClick" />
Try this code
<TextView android:text="#string/welcome_screen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textview"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textStyle="bold"
android:textSize="24sp"
android:textColor="#000000"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/g_button"
android:id="#+id/g_button"
android:layout_below="#+id/textview"
android:layout_marginTop="121dp"
android:layout_centerHorizontal="true"
android:clickable="true"
android:onClick="onButtonClick" />
android:id="#+id/textview"
You can give id manually. If you want
android:id="#+id/"
android:layout_below="#+id/"
Remove them your not doing anything with that attributes :
ID
Any View object may have an integer ID associated with it, to uniquely identify the View within the tree. When the application is compiled, this ID is referenced as an integer, but the ID is typically assigned in the layout XML file as a string, in the id attribute. This is an XML attribute common to all View objects (defined by the View class) and you will use it very often. The syntax for an ID, inside an XML tag is:
eg android:id="#+id/my_button"
android:layout_below
Positions the top edge of this view below the given anchor view ID. Accommodates top margin of this view and bottom margin of anchor view.
Must be a reference to another resource, in the form "#[+][package:]type:name" or to a theme attribute in the form "?[package:][type:]name".
This corresponds to the global attribute resource symbol layout_below.
android:layout_below="#+id/myText"
In your xml file- the code for TextView , u have to give a name/id to it like below:
<TextView android:text="#string/welcome_screen" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/txtVw1"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textStyle="bold"
android:textSize="24sp"
android:textColor="#000000"/>
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" />
i have some imagebuttons and each one has a corresponding textview, i'd like to align those textview's to the center of their corresponding imageview, i mean, like is seen on the app drawer...
!-----!
!icon !
!_____!
app name
this is my code, i'm using a RelativeLayout
<ImageButton
android:id="#+id/blog_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/logo_img"
android:layout_marginLeft="50dp"
android:layout_marginTop="51dp"
android:background="#null"
android:contentDescription="#string/blog_desc"
android:src="#drawable/blog" />
<TextView
android:id="#+id/blog_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/blog_button"
android:layout_below="#+id/blog_button"
android:layout_marginTop="8dp"
android:text="#string/blog_desc" />
Wrap that in a LinearLayout and center the children, like so:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/logo_img"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageButton
android:id="#+id/blog_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:contentDescription="#string/blog_desc"
android:src="#drawable/blog" />
<TextView
android:id="#+id/blog_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/blog_desc" />
</LinearLayout>
Old post but if this can help I think it's not necessary to add an additional container.
<ImageButton
android:id="#+id/blog_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/logo_img"
android:layout_marginLeft="50dp"
android:layout_marginTop="51dp"
android:background="#null"
android:contentDescription="#string/blog_desc"
android:src="#drawable/blog" />
<TextView
android:id="#+id/blog_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/blog_button"
android:layout_alignRight="#+id/blog_button"
android:layout_below="#+id/blog_button"
android:gravity="center_horizontal"
android:layout_marginTop="8dp"
android:layout_marginLeft="-20dp"
android:layout_marginRight="-20dp"
android:text="#string/blog_desc" />
It's work for me.
If a the TextView can be transparent then this can be achieved with a single View
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test string"
android:drawableTop="#android:drawable/btn_star"
android:background="#android:color/transparent"
android:textSize="10sp"
/>
If your views in RelativeLayout follow these steps:
1- wrap your view that wants to be aligned in the center of target view in Framelayout.
2- move all layout attributes to FrameLayout.
3- set layout_align_top and layout_align_bottom (or start and end if horizontal) to target view.
4- set layout_gravity to center_vertical (or horizontal) to child of Frame layout
Result:
<RelativeLayout
android:id="#+id/yourView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0">
<RatingBar
android:id="#+id/masseur_rating_bar"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:isIndicator="true"
android:progressDrawable="#drawable/ic_selector_rating_bar"
android:rating="#{masseurItem.rate}"
android:scaleX="0.8"
android:scaleY="0.8"
tools:rating="4.5" />
<TextView
android:id="#+id/rate_text_view"
style="#style/BodyTextViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#id/masseur_rating_bar"
android:text="#{String.valueOf(masseurItem.rate)}"
android:textSize="12sp"
tools:text="4.5" />
</RelativeLayout>