Im trying to set a backgound to a RelativeLayout.
The issue is that the layout is resized after the size of the image, which i don't want. I want the layout to be sized after the two textviews.
Anyway to prevent the layout to be scaled to the size of the background?
This is the xml-code
<RelativeLayout
android:id="#+id/hud"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#+drawable/hud_background"
android:layout_weight="1" >
<TextView
android:id="#+id/lblScore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Score: " />
<TextView
android:id="#+id/txtScore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/lblScore"
android:layout_alignBottom="#+id/lblScore"
android:layout_toRightOf="#+id/lblScore"
android:text="00" />
</RelativeLayout>
Regards
I think all you need is to change android:layout_width="match_parent" into android:layout_width="wrap_content" for the relativeLayout, so that the sizes will be according to the textViews alone.
Why did you add android:layout_weight="1" ? is it only a part of your layout file?
if so, if it's in a vertical linearLayout, use:
android:layout_width="match_parent"
android:layout_height="0px"
and if it's in a horizontal linearLayout, use:
android:layout_width="wrap_content"
android:layout_height="0px"
Related
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.
I would like to have image behind TextView in FrameLayout. I need FrameLayout to adjust it's height to TextView inside and not to be affected by image size. Image should be behind the text in it's original size, cropped by FrameLayout. This is what I tried:
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:layout_gravity="right|center_vertical"
android:gravity="center"
android:alpha="0.1"
android:id="#+id/img_logo" />
<TextView
android:textAppearance="?android:attr/textAppearanceMedium"
android:textAllCaps="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:gravity="left|center_vertical"
android:id="#+id/text_long" />
</FrameLayout>
It's almost what I want except the FrameLayout's height is affected by image size. It should change only with text.
Actually I think you can do this without overriding any layouts or writing any java code. Instead you can wrap the whole thing in a RelativeLayout move the TextView after the FrameLayout and set the FrameLayout's top and bottom to align with the textView. I admit it is a bit messy; to address that I would recommend either making it a custom view or putting it in another xml file that you include.
Edit: Actually, you don't need the FrameLayout any more, instead you can set the android:layout_alignTop and android:layout_alignBottom attributes on the ImageView instead. Here is what it look like:
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignTop="#+id/text_long"
android:layout_alignBottom="#id/text_long"
android:scaleType="centerCrop"
android:layout_gravity="right|center_vertical"
android:gravity="center"
android:alpha="0.1"
android:id="#+id/img_logo"/>
<TextView
android:textAppearance="?android:attr/textAppearanceMedium"
android:textAllCaps="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:gravity="left|center_vertical"
android:id="#id/text_long" />
</RelativeLayout>
this is my layout code
i use like root a grid layout and then for every row a frame layout inside that frame layout two frame layouts with image and txt...
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:columnCount="1"
android:rowCount="2">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="200dp"
android:layout_height="220dp"
android:layout_marginLeft="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="0.1dp"
android:layout_marginRight="2dp"
android:layout_row="1"
android:layout_column="1">
<ImageView
android:layout_width="150dp"
android:layout_height="190dp"
android:id="#+id/am"
android:layout_gravity="top|center_horizontal"
android:src="#drawable/black" />
<TextView
android:layout_width="153dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="text"
android:id="#+id/w"
android:layout_gravity="bottom|center"
android:layout_marginBottom="10dp" />
</FrameLayout>
<FrameLayout
android:layout_width="200dp"
android:layout_height="220dp"
android:layout_marginRight="2dp"
android:layout_marginLeft="2dp"
android:layout_marginTop="0dp"
android:layout_row="1"
android:layout_column="0"
android:layout_gravity="right|center_vertical">
<ImageView
android:layout_width="150dp"
android:layout_height="190dp"
android:id="#+id/imageView"
android:layout_gravity="top|center"
android:src="#drawable/black" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="text"
android:id="#+id/textView2"
android:layout_gravity="bottom|center"
android:layout_marginBottom="10dp" />
</FrameLayout>
</FrameLayout>
this is how its seen
looks cool rigth?
well this is my problem when i take this to a bigger screen this happends
well i dont whant this i whant that the text and images grow to take half of screen like first one...
HOW I DO THIS!!!
You are using fix layout_width and layout_height sizes at the FrameLayout and ImageView too. This way you wont reach the desired goal. You should use wrap_content value instead of fix sizes and play with the layout_weight. For example in a LinearLayout put two FrameLayout which contains the image and the text, after that add layout_weight="1" to the FrameLayout attributes.
Don't use a frame layout.
Layout_weight is what you should use if you want to set your dimensions in relation to your view size(but don't nest weights as it quickly becomes very inefficient), or set the dimensions in your code based on the size of your view.
you hardcoded all of your view dimensions so they are always going to interact poorly with changes in screen size
I'm trying to increase the size of an image in relative layout. Right now, its width and height are set to wrap_content. When I set them fill_parent, the image grows, but pushes the button underneath off the display. The relevant XML is below. What am I doing wrong?
Edit: Thanks for all the answers, but so far, if I set the height of the image to fill_parent or match_parent, it always extends to the bottom of the display, regardless of if the button is in or outside of relative layout. Why does the relative layout ignore what's beneath it?
<LinearLayout>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativelayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/myImageView"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/apple"
android:alpha=".5"
android:paddingBottom="0dp"
android:adjustViewBounds="true" />
<TextView
android:id="#+id/myImageViewText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Sample"
android:textColor="#000000"
android:singleLine="true"
android:layout_alignLeft="#+id/myImageView"
android:layout_alignStart="#+id/myImageView"
android:layout_alignParentTop="true" />
</RelativeLayout>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/enterPluButton"
android:background="#FFBD5C"
android:textColor="#000000"
android:text="Submit" />
</LinearLayout>
Set android:layout_alignParentBottom="true" for button.
Set android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/enterPluButton" for your RelativeLayout
Set android:layout_width="match_parent"
android:layout_height="match_parent" for the ImageView
In RelativeLayouts views are positioneed relatively to the top left of the "ViewGroup". To get the ImageView to stop hiding the Button, or any other view at that matter, add the layout_below attribute.
<TextView
android:layout_below="#+id/relativelayout"
android:id="#+id/myImageViewText"
android:layout_width="fill_parent"
...
/>
Also, for ImageView it is not advised, unless being used for a background, that you set layout_height to fill_parent or match_parent.
You would get the desired result if you place the Button in the relative layout and position it under the text view.
RelativeLayout positions View relative of each other. if it does not have a relation to a another child View it calculates with the Parent View which is the RelativeLayout. This is why you are having that. Why don't wrap the LinearLayout in a ScrollView or give the RelativeLayout a fixed dimension
I understand now what you're trying to do. Try this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativelayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/myImageView"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:alpha=".5"
android:paddingBottom="0dp"
android:src="#drawable/apple" />
<TextView
android:id="#+id/myImageViewText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/myImageView"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/myImageView"
android:gravity="center"
android:singleLine="true"
android:text="Sample"
android:textColor="#000000" />
<Button
android:id="#+id/enterPluButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/myImageView"
android:background="#FFBD5C"
android:text="Submit"
android:textColor="#000000" />
</RelativeLayout>
I'm trying to do a layout with dynamic scaling of test view. The layout looks like - see bottom left corner.
Now that portion is a composite control. The circle scales just fine, but I can't figure out how to make the text positioned perfectly in the middle while scaling properly. I want the text at let's say 50% of the container size and positioned perfectly in the center. RelativeLayout only allows for absolute values, and I can't seem to get the weighting working with text view for linear layout with textview.
Composite control:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/VarioCircle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:contentDescription="Vario Circle"
android:scaleType="fitCenter"
android:src="#drawable/circle" />
<LinearLayout
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:weightSum="1.0"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
>
<TextView
android:id="#+id/VarioText"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="200"
android:textColor="#FF0000"
android:textSize="60dp"
android:layout_weight="0.7"
android:textStyle="bold"
android:typeface="monospace" />
</LinearLayout>
</RelativeLayout>
Overal layout:
<com.proflite.VarioView
android:id="#+id/Vario"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
/>
Put the TextView inside of container. And set Gravity (Views attribute) to Center.
Set TextViews width and height to wrap_content.
This will make TextView centered in it's container.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="200dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="20sp" />
</FrameLayout>
This will get TextView centered inside of FrameLayout
try this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/VarioCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="Vario Circle"
android:scaleType="fitCenter"
android:src="#drawable/circle" />
<TextView
android:id="#+id/VarioText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="200"
android:textColor="#FF0000"
android:textSize="60dp"
android:layout_weight="0.7"
android:textStyle="bold"
android:typeface="monospace" />
</RelativeLayout>
</RelativeLayout>
I suggest you make an Button widget and set an image as background which has .png format, having transparent background.
Like this:
After that Make sure to save it as .png
1)Then go to your xml layout create a Button or ImageButton widget.
2)Set this pic saved as a background image ( android:background="#drawable/yourcircle")
3)then finally you can put any text inside ( android:text="blabla") + you can change it from the code for sure using Button.setText("blablabla")
4)You will also want to change the font size using Button.setTextSize(49) for example.
5)Finally to make it in the center, android:gravity="center"