Hi,
I am trying to design a layout that has no dependency on screen size. Actually I am designing a sample layout in which there is a large size add in the center of screen. There is a text in the center of upper remaining area and lower remaining part. The xml is:
<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" >
<ImageView
android:id="#+id/ads_layout_large"
android:layout_width="300dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:background="#android:color/background_light" />
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/ads_layout_large"
android:background="#fff000"
android:gravity="center"
android:text="#string/exit_enjoyed_text" />
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/ads_layout_large"
android:background="#fff000"
android:gravity="center"
android:text="#string/exit_enjoyed_text" />
</RelativeLayout>
The problem is, it is working on upper part, the text is exactly in the center of the remaining area, but the lower TextView has covered half of the screen, can you please help me find the mistake? Or any other way to design the same?
I think here is your problem :
android:layout_height="fill_parent"
setting your TextView height to fill_parent cause your textview extend to reach it's parent size , use wrap_content or static value like "30dp" instead
Related
I have a TextView whose width should not exceed the ImageView above it. Both image and text are downloaded from server and I don't know their dimensions (can't make assumptions either). I went through the logic to wrap the text content using this SO post.
Here is my layout XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parentLL"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout android:orientation="vertical"
android:id="#+id/LL1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:width="0dp"
android:text="This is a string whose width may or may not be more than the image downloaded" />
</LinearLayout>
<TextView android:background="#android:color/holo_red_dark"
android:id="#+id/text2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Second Text"/>
</LinearLayout>
With this code, the TextView at the end (text2) does not even show up. There are 2 solutions to this issue :
Apply android:maxLines="5" to the text1. Problem with this approach is that Text1 view would always be 5 lines high (I understand 'lines' is not a unit of height, but that's what I see visually). So if the text content is just one word, there would be a big white space below. And then text2 shows up.
Change topmost linear layout (parentLL) to RelativeLayout. text2 can then be used with alignBelow=LL1. This works as expected. But I cannot migrate the topmost view to RelativeLayout, because this view is from a library not in my control. I can only modify LL1 and it's children. Due to my code, other views below (like text2) are suffering (by not showing up).
There is a third approach for setting the textview as a compound drawable on ImageView. I guess that might work (haven't tested), but my requirement is to show the TextView if image download has failed (which can be detected only after a while). So I need to have a TextView. Also, my LinearLayout LL1 can have other children too.
I would request for some help understanding :
Why is my code not showing up the content below the textview 'text1'? With width=0 on textview it seems to set the height of the parent to be match_parent.
How is RelativeLayout able to handle this smoothly ? Can I replicate any of that behavior in TextView's onMeasure ? Assume I have callbacks to detect image has been downloaded, and I can get image width also.
I think what you are running into is a conflict of setting the width and height but not setting the layout weight, which is a key factor in how Linear Layouts work. If you add one more vertical LinearLayout in there and then move #id/text2 into it, you should be set. You'll need something like the following (obviously modified to your specs, this was just a quick test). Note my use of android:layout_weight,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/textView3" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/textView2" />
</LinearLayout>
</LinearLayout>
Which splits the screen in half vertically as shown in this picture,
Photo of resulting layout
I had to wrap the TextView in a RelativeLayout, which was wrapped by a LinearLayout. Not happy with this solution, but this is the only way for now.
Image of what I want to do
I want to align the center of the smaller red box to the left-edge of the black box. The red box has it's width and height set to wrap_content and there is a text-view inside. The black box takes up half the screen width. It's in a linear-layout with a spacer on the left and right, the spacers have .25 weight while the black-box has .5 weight.
I'd prefer to do this in XML without the use of margins. The red-box may contain 2 characters or 20, the contents come from the server.
There's only "toLeftOf" and "alignLeft". What I want to do is essentially "align center of box to left edge of another box".
Here is a simple implementation of what you want using only XML.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="100dp"
android:layout_height="50dp"
android:id="#+id/imageView"
android:background="#000000"
android:layout_marginLeft="50dp" />
<ImageView
android:layout_width="50dp"
android:layout_height="25dp"
android:id="#+id/imageView2"
android:background="#ff0000"
android:layout_marginTop="-40dp"
android:layout_marginLeft="25dp" />
You can try this xml for your purpose. But what you want center of black box with dynamic content, but it's not recommended, the reason is, if Content too long or too short, it will not look good in UI, because You want to maintain width of red box dynamically as well as center of left edge also. So black box size also you need to change everytime. That is not good. Please try my solution and you can always modify this layout as per your thought process.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/view_1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:background="#000000" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/view_1"
android:layout_centerVertical="true"
android:background="#ff0000">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Hi"
android:textColor="#ffffff" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
Hope it will help you !
I am trying to get some text vertically aligned within a TextView, but for some reason it just sticks to the top edge of such TextView.
Trust me, I've read several questions here on Stack Overflow regarding the same, or similar, questions and tried applying the provided solutions, but nothing seems to make a change.
For instance, what I thought would solve the issue right away was to add the attribute android:gravity="center_vertical|left", but that didn't help either.
This user's question describes almost exactly my issue, except that his TextView is inside a RelativeLayout which in turn is inside a ScrollView, which I don't (and don't need or want to) use. And the images he provided are also perfectly applicable to what I'm trying to describe and achieve.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2" >
<ImageView
android:id="#+id/account_server_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/account_server_icon"
android:paddingLeft="16dp"
android:gravity="left" />
<TextView
android:orientation="vertical"
android:id="#+id/tv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:gravity="left|center_vertical" />
</LinearLayout>
The problem is that your TextView's height is set to wrap_content. This means that the size of the text's container will be the same as the height of the text, thus there really is nowhere within the view to center the content (it is effectively already centered vertically).
If the LinearLayout that you posted only contains the ImageView and the TextView, then you can simple change the height to match_parent and it should work fine.
If the LinearLayout contains other Views, you might want to consider using a RelativeLayout and setting the TextView to align with both the top and bottom of the image.
as your achievement suggest, you only need to change your gravity to layout_gravity
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2" >
<ImageView
android:id="#+id/account_server_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/account_server_icon"
android:paddingLeft="16dp"
android:gravity="left" />
<TextView
android:orientation="vertical"
android:id="#+id/tv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:layout_gravity="left|center_vertical" />
</LinearLayout>
You need to set gravity then you set text alignment to gravity
<TextView
android:orientation="vertical"
android:id="#+id/tv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:gravity="left|center_vertical"
android:textAlignment="gravity"
/>
I have a banner that I am displaying on an Android Layout. On this banner, I have two avatars that I would like to display next to each other, and most importantly, I would like to have them displayed where the midway point of these two avatars on the y-axis is aligned with the bottom of the banner that these avatars sit on top of.
How would you do this?
Edit:
In other words, I'm asking how you could use an parameter like android:layout_below, but instead of it aligning the top of the imageview with the botton of the specified layout, to align the center.
Unfortunately, there is no direct layout parameter to align a center point with another edge. If the height of your avatars is fixed, you could add some padding that is half the height so they all line up; i.e.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/banner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="25dp"
android:src="#drawable/banner" />
<ImageView
android:id="#+id/avatar1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignBottom="#id/banner"
android:src="#drawable/horse" />
<ImageView
android:id="#+id/avatar2"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignBottom="#id/banner"
android:layout_toRightOf="#id/avatar1"
android:src="#drawable/horse" />
</RelativeLayout>
If the heights of those items, however, is dynamic, then you will need to create a custom ViewGroup container so you can measure the avatar heights (in onMeasure()) and apply the padding (or other offset value) at runtime.
Put them in a linear layout, and then give them a width to fill the parent. Then you can use the weight property to disperse the widths equally.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/clock" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/clock" />
</LinearLayout>
I am trying to draw some boxes in my activity, which will contain other layout elements, in XML. I want to do this using the relative dimensions, e.g. specify half of the height of the screen for each box. I understand that the correct way to do this is to set the initial height to 0px and use layout_weight, but I can't get the following example to work. I am expecting it to draw two identical rectangles (defined in /drawable/rect) in different vertical halves of the screen, but the screen is blank:
<?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">
<ImageView
android:src="#drawable/rect"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:scaleType="fitXY"
android:layout_width="fill_parent"
android:layout_height="0px"
android:layout_weight="1"/>
<ImageView
android:src="#drawable/rect"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_width="fill_parent"
android:scaleType="fitXY"
android:layout_height="0px"
android:layout_weight="1"/>
</RelativeLayout>
Does anyone have any ideas?
Why is it?
android:layout_height="0px"
That makes the rectangles to have zero height, which might explain why they don't show up.