Android: Align one element below and in the middle of another - android

I have an ImageView and TextView. I want to place the TextView below the image view but with the middle of the TextView aligned with the middle of the ImageView (along the horizontal axis). If the text in the TextView changes to something much larger or smaller, the middle of the text always needs to remain aligned with the middle of the ImageView. Is this possible in xml?

Yes, you are simply looking to contain both elements in a vertical LinearLayout which has android:gravity set to center_horizontal.
Something like this:
<?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:gravity="center_horizontal"
android:orientation="vertical"
... >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
... />
</LinearLayout>
Because the TextView's width is wrap_content, setting its gravity shouldn't be necessary. I would do it just for safety (and additionally, I may set the width to match_parent as well).

You can make use of RealtiveLayout as follows..
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
... >
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
<TextView
android:layout_below="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
If you want your textview to be of single line only then add following properties to TextView
android:ellipsezed="end"
android:singleLine="true"
Use a given layout and add it to any of your existing layout you get result what your looking for ..
Hope this explanation works for you..

set TextView android:layout_width="fill_parent" and set android:gravity="center" in TextView.
I think it help you.
Thanks

Related

Android Textview with width 0 is forcing content to disappear below it

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.

How to vertically align text within TextView

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"
/>

TextView above ImageView with dynamic height

I have a ScrollView with some elements.
My problem is that i can't set textview's above ImageView's with dynamical height.
I have 3 ImageView with different height, they can be visible or gone.
Above them i need to put text with background color, this text need to be at the bottom part of the ImageView
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/pic"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</ImageView>
<TextView
android:id="#+id/third_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:padding="8dp"
android:layout_alignParentBottom="true"
android:layout_above="#id/third_picture"
android:gravity="center_horizontal"
android:background="#android:color/white"
android:text="example text">
</TextView>
I tried a lot, but my View was always broken.
Please help, i need some proffesional advise.
You can do this in textview:
android:layout_alignBaseline="#id/pic"
This will align the baseline of textview with basline of imageview
You can set your picture as a background for a layout (e.g linear layout ) rather than using an ImageView and then put the textview inside it and place it where ever you want.
<LinearLayout
android:background="your picture" >
<!-- align it to the bottom -->
<TextView
/>
</LinearLayout>

display textview above a button without hardcoding the height in xml

I am displaying a textview(I intend this to fill the entire screen excluding the button below it) and a button(small one at the bottom) in an activity. I want textview to be placed aove the button. I don't want to hardcode any height/width.
Hence
For button I have kept height ad width as word_wrap
For textview I have kept width as fill parent.
What I want to know is that, is there anyway by whcih I can specify textview height to be screenheight-button height. I want to this in xml file but not dnamically inside my code.
To achieve this you have to create something like this :
<?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" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button1"
android:text="TextView" />
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Button" />
</RelativeLayout>
and you have a textview which will stay above your button and will fit the entire screen.
Use RelativeLayout, set textview's dimensions as fill_parent, then place button below it,
set button's android:layout_below="#+id/textview" and button's dimensions as wrap_content.
Check the result in visual designer or in device, it should work
You can use layout_weight attribute
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:text="TextView" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>

android center textview in layout

I have a listview with custom rows. In the row there are these items:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="10dp"
android:layout_height="fill_parent"
android:focusable="false"
android:scaleType="fitXY">
</ImageView>"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textsll"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:layout_marginLeft="5dp">
<TextView android:id="#+id/textView1"
android:layout_width="240dp"
android:layout_height="wrap_content"
android:textColor="#000000"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:maxLines="1"
android:ellipsize="end">"
</TextView>
<TextView android:id="#+id/textView2"
android:layout_width="240dp"
android:layout_height="wrap_content"
android:textColor="#000000"
android:layout_alignParentBottom="true"
android:layout_below="#+id/textView1"
android:maxLines="1"
android:ellipsize="end">
</TextView>
</RelativeLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textsll2"
android:layout_gravity="center_vertical|right"
android:layout_marginLeft="10dp">"
<TextView android:id="#+id/textView3"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:textColor="#000000"
android:paddingBottom="5dp"
android:maxLines="1"
android:ellipsize="end"
android:gravity="center_vertical"
android:background="#87EB81">
</TextView>
</LinearLayout>
</LinearLayout>
If both textviews has some content, they are centered vertically in the row (almost).
But if the lower textview is empty, I call:
holder.textView2.setVisibility(View.INVISIBLE);
holder.textView.setGravity(Gravity.CENTER_VERTICAL);
Still, the upper textview gets into the top of the row. Why?
If I set it to View.GONE, I get this, but I dont want the height of the row to change:
Use android:layout_weight to set all the childs of the main LinearLayout to mesure the same.
Use a LinearLayout as parent for textView1 and textView2. Use Use android:layout_weight to have the same size for each one.
Define TextView one with android:gravity="center_vertical|left" Then, if you don't want to show the second TextView, set its visibility as View.GONE.
Maybe this will resolve your problem,
Update:
In a RelativeLayout, views are aligned with their parent, with the RelativeLayout itself, or with other views. For instance, we declared that the description is aligned with the bottom of the RelativeLayout and that the title is positioned above the description and anchored to the parent's top. With the description GONE, RelativeLayout doesn't know where to position the title's bottom edge. To solve this problem, you can use a very special layout parameter called layout_alignWithParentIfMissing.
This boolean parameter simply tells RelativeLayout to use its own edges as anchors when a constraint target is missing. For instance, if you position a view to the right of a GONE view and set alignWithParentIfMissing to true, RelativeLayout will instead anchor the view to its left edge. In our case, using alignWithParentIfMissing will cause RelativeLayout to align the title's bottom with its own bottom.
For more look at Layout Tricks: Creating Efficient Layouts
This can be possible in your RelativeLayout by setting up the layout_below and layout_above with the help of parent alignment by using layout_centerInParent and set the value true of layout_centerHorizontal
Hope, this will work.
Try to use:
<TextView
...
android:layout_height="?android:attr/listPreferredItemHeight"
...
/>
in your_list_item.xml. And use View.GONE
Try to fix some value to your RelativeLayout's height like-
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textsll"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:layout_marginLeft="5dp">
To Solve for your problem what u can do is have the LinearLayout fill Parent.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
And use View.GONE This will make the Row Height Same.
If you see a gap after Best Car in World then try using Relative Layout and align last Layout to bottom.

Categories

Resources