TextView above ImageView with dynamic height - android

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>

Related

Android allow layout cut off higher child

How i can insert an textview with height=100dp in parent layout with height=60 and display cropped textview?
I want to resize parent layout without resizing textview inside.
Set a negative value to the layout_marginTop of your TextView, and after resizing the parent you should also set that layout_marginTop to zero. The layout is like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_marginTop="-40dp"
android:layout_height="100dp"
android:text="text" />
</LinearLayout>

Android: Draw line behind ImageView in list item

I would like to draw a line behind an ImageView in a list item which fills the entire height of the list item. The image in the following link shows my desired result. The blue line is the one I want.
https://www.dropbox.com/s/fbdsuvcyxaz1pnj/listViewDesired.png?dl=0
I have a ListView with a custom adapter and layout for each row. The row is comprised of a relative layout with a few elements: an image with a specific size anchored to the left, a text view with a specific size anchored to the right, and a text view which fills the rest of the space in between.
I want to show a thin line coming out of the top and bottom of the ImageView and fill the rest of the space for that list item. The List item's size can become larger than the image size if there is a lot of text in the middle. How can I achieve this?
I have tried multiple approaches with a framelayout with a view that matches/fills the parent and the ImageView, and a linearlayout with 3 views (top line, imageView, bottom line that fills the parent), and the image looks correct in the IDE render, but the lines do not extend all the way or even show up when the app is actually running.
This is my layout without a line behind the imageview.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="#dimen/marginTop"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Line should be "behind" (extending from top and bottom) of this imageView and should extend to the full height of the RelativeLayout after it has been rendered-->
<ImageView
android:id="#+id/tabIcon"
android:src="#drawable/face"
android:layout_marginTop="#dimen/margin"
android:layout_width="#dimen/catchSize"
android:layout_height="#dimen/catchSize"/>
<TextView
android:id="#+id/tabUpdateTime"
android:layout_marginLeft="#dimen/margin"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/tabText"
android:text="#string/long_string"
android:layout_marginLeft="#dimen/margin"
android:layout_marginRight="#dimen/margin"
android:layout_toRightOf="#id/tabIcon"
android:layout_toLeftOf="#id/tabUpdateTime"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
You just need to create separate layout for Image as well as Vertical Line and to draw Vertical Line you need to add a View with width of 1dp or the thickness you want.
Try with the following Code :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- Line should be "behind" (extending from top and bottom) of this imageView and should extend to the full height of the RelativeLayout after it has been rendered -->
<RelativeLayout
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/tabText" >
<View
android:id="#+id/verticleLine"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:background="#0000ff" />
<ImageView
android:id="#+id/tabIcon"
android:layout_width="#dimen/catchSize"
android:layout_height="#dimen/catchSize"
android:layout_centerInParent="true"
android:layout_marginTop="#dimen/margin"
android:src="#drawable/face" />
</RelativeLayout>
<TextView
android:id="#+id/tabUpdateTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="#dimen/margin" />
<TextView
android:id="#+id/tabText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin"
android:layout_marginRight="#dimen/margin"
android:layout_toLeftOf="#id/tabUpdateTime"
android:layout_toRightOf="#id/image"
android:text="#string/long_string" />
</RelativeLayout>
So I managed to solve the issue by using an enclosing LinearLayout instead. I have changed some of the margin stuff but I get my desired effect. :)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:paddingLeft="#dimen/marginTop"
android:paddingRight="#dimen/marginTop"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Line should be "behind" (extending from top and bottom) of this imageView and should extend to the full height of the RelativeLayout after it has been rendered-->
<LinearLayout
android:orientation="vertical"
android:clipChildren="false"
android:id="#+id/frameTabIcon"
android:layout_marginRight="#dimen/margin"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<View
android:id="#+id/tabTopLine"
android:layout_width="#dimen/lineThickNess"
android:layout_height="#dimen/marginTop"
android:background="#android:color/black"
android:layout_gravity="center_horizontal"/>
<ImageView
android:onClick="deletePersonOnClick"
android:id="#+id/tabIcon"
android:src="#drawable/face"
android:layout_width="#dimen/catchSize"
android:layout_height="#dimen/catchSize"/>
<View
android:id="#+id/tabBottomLine"
android:background="#android:color/black"
android:layout_gravity="center_horizontal"
android:minHeight="#dimen/marginTop"
android:layout_width="#dimen/lineThickNess"
android:layout_height="match_parent"/>
</LinearLayout>
<RelativeLayout
android:layout_marginTop="#dimen/marginTop"
android:layout_marginBottom="#dimen/marginTop"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tabUpdateTime"
android:layout_marginLeft="#dimen/margin"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/tabText"
android:text="#string/long_string"
android:layout_marginLeft="#dimen/margin"
android:layout_marginRight="#dimen/margin"
android:layout_toLeftOf="#id/tabUpdateTime"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
</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>

ImageView increases and decreases dynamically after the size of a textfield

I have a layout like this one:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#272727"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/BtnSlide"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#null"
android:src="#drawable/lin" />
<TextView
android:id="#+id/textView1"
android:layout_width="275dp"
android:layout_height="50dp"
android:gravity="center"
android:paddingLeft="20dp"
android:paddingRight="100dp"
android:text="HEADER"
android:textAppearance="?android:attr/textAppearanceMedium" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="2.2dp"
android:src="#drawable/logo" />
The ImageView is placed to the right of the screen. But I'm facing an issue, the ImageView increases and decreases in height and width depending on the length of the TextView, how can I make this work properly, without the ImageView changing size?
The problem here is that your ImageView matches the size of your parent, that is your LinearLayout (with id tabBar).
That LinearLayout wraps the content on his height, so, it sums all "heights" of his contents. The LinearLayout will take the height of TextView + the height of the ImageButton. Then, the ImageView will match that height.
A solution depends on what you are trying to do, but you can try to:
Set a predefined height in your ImageView
Use a RelativeLayout instead of a LinearLayout and align all your views depending on each other
My suggestion is to set layout_weight to all the components so that their size is fixed regardless of their contents:) See here for more details

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

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

Categories

Resources