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>
Related
What I want is that I can have 1 ImageView on the left and next to the imageview 2 textviews under each other. I can't get the second textview under the textview.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/displayImage"
android:layout_width="67dp"
android:layout_height="100dp"
android:layout_gravity="left"
android:layout_weight="1" />
<TextView
android:id="#+id/textview_name"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_weight="2"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="3dp"
android:textColor="#color/colorPrimaryDark"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textview_description"
android:layout_width="55dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="2"
android:gravity="left"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="3dp"
android:textSize="20sp" />
</LinearLayout>
The result looks now:
Result
Expected result
You can use something like below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/displayImage"
android:layout_width="67dp"
android:layout_height="100dp"
android:src="#color/colorPrimaryDark" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/textview_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="3dp"
android:text="Left text"
android:textColor="#color/colorPrimaryDark"
android:textStyle="bold" />
<TextView
android:id="#+id/textview_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="3dp"
android:text="Right text" />
</LinearLayout>
</LinearLayout>
You can nest containers like LinearLayout,RelativeLayout, FrameLayout, etc inside each other to create complex Layouts.
Also, I'd advise knowing what each tags do by Googling them before using them inappropriately anywhere inside your layout. It needed me solid 5 minutes to fix your layout because you added layout_weight basically anywhere you pleased!
Your linear layout orientation is horizontal, so you can't get textviews vertically aligned unless you take one more linear layout for the 2 textviews with vertical orientation. Otherwise, you can do this with a single Relative layout.
Here is the structure
<LinearLayout> - horizontal orientation
<Imageview/>
<LinearLayout> - vertical orientation
<Textview/>
<Textview/>
</LinearLayout> - vertical orientation
</LinearLayout> - horizontal orientation.
You have set the orientation of the Linear Layout as horizontal. This will make all the children (in your case, ImageView, TextView name and TextView description) to be horizontally laid out next to each other.
There are many ways to do this.
1 way to achieve this is by using RelativeLayout and then you can use
android:layout_toBottomOf="#id/textview_name"
to get the description textview to be below the name text view.
For the image view, you can use the property
android:layout_alignParentLeft="true"
to make the image view to stick to the left border. Please experiment with RelativeLayout to get the desired result.
Please use this codelab from Google to use ContraintLayout. https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#0
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>
I have a Horizontal Layout and I have some views inside it. I want some to start from the left and others to start in the right, but I can't manage to do it. I tried several Gravity configurations but they don't do anything.
That's the case I have:
I want the Flag to be in the right and the Time to be in the left, as pointed by the arrows. I will add some more flags later.
Could anyone help me out with this? Thanks :D
EDIT:
XML so far:
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:id="#+id/hlTopBar"
android:background="#e6262626"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/default_time_date_string"
android:id="#+id/tvTime"
android:textStyle="bold"
android:paddingLeft="10dp"
android:gravity="left" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ibUSA"
android:src="#drawable/united_states_flag"
android:background="#android:color/transparent"
android:adjustViewBounds="true" />
</LinearLayout>
android:layout_gravity works in the direction opposite the orientation of the LinearLayout – the children of a vertical LinearLayout can use android:layout_gravity to control their positioning horizontally (left or right), but not vertically. In the same way children of horizontal LinearLayout can use android:layout_gravity to control their positioning vertically (top or bottom) but not horizontally. As you are using Horizontal LinearLayout you can use android:layout_gravity to position children either top or bottom.For your purpose it is better to go with RelativeLayout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
.........
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
/>
<ImageView
.......
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
/>
</RelativeLayout>
Instead of using a horizontal layout use a Relative layout
example:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Time" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Image" />
</RelativeLayout>
result:
The RelativeLayout is a good answer. If, however, you REALLY want to do it with a LinearLayout, try putting an empty TextView in the middle, with width=0 and weight=1.
This empty view will automatically try to fill up however much space isn't taken up by the other views.
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:id="#+id/hlTopBar"
android:background="#e6262626"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/default_time_date_string"
android:id="#+id/tvTime"
android:textStyle="bold"
android:paddingLeft="10dp" />
<TextView
android:id="#+id/spacer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ibUSA"
android:src="#drawable/united_states_flag"
android:background="#android:color/transparent"
android:adjustViewBounds="true" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0.0dip"
android:layout_marginBottom="1.0dip"
android:layout_marginRight="1.0dip"
android:layout_weight="1.0"
android:background="#drawable/main_buttons_light"
android:onClick="btnProfileSettingsClick" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:gravity="left"
android:paddingLeft="8.0dip"
android:paddingTop="8.0dip"
android:text="#string/activity_main_button_profile_settings"
android:textSize="12.0sp"
android:color="#color/maintitletext" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left"
android:gravity="left"
android:paddingBottom="10.0dip"
android:paddingLeft="8.0dip"
android:src="#drawable/profile_settings" />
</LinearLayout>
TextViewis is in top and ImageView is in bottom but image is positioned in right place instead of left. How can i set it one after another and in left site of the screen?
try this :
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_alignParentBottom="true"/>
You can use RelativeLayout instead of LinearLayout as a parent view of your textView and imageView and set their
layout_alignParentLeft
layout_alignParentRight
layout_alignParentTop
layout_alignParentBottom
properties.
Also if you use RelativeLayout as parent view, you can use
layout_toLeftOf
layout_toRightOf
layout_above
layout_below
properties to add subviews one after another.
EDIT:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/containerLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:id="#+id/myText"
android:text="Click Me" />
<ImageView
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:id="#+id/myImage" />
</RelativeLayout>
If you wish to keep linear layout, just have to change the orientation. Add this to the LinearLayout xml:
android:orientation="vertical"
For it to align on the left, if it's the root layout, just add
android:gravity="left"
This will make all child aligned left.
Otherwise, if the LinearLayout is a child of another layout add:
android:layout_alignParentLeft="true"
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"