Develop Reference

Display textview below imageview and not bottom to the parent

I'm working on an Android application and I have an issue with how to display an image in a view. My issue is that I want to display an image and two textViews just below my imageView without aligning their bottom to the parent's. See the wireframe below.
My problem is that when the imageView is taking all the height of the relativeLayout, my textViews are hidden below the parents view.
I have tried a lot of things but nothing is satisfaying...
I have tried to put my imageview in a linearLayout and put a weight on it but if my imageView is smaller I have a blank between the imageView and the textView.
It's complicated because each image I load can have a different size and thus I can't fix a default size to it.
Also, my layout is in a viewPager and when I want to have the Height of the view when I instantiate it on my adapter it returns 0. So I can't compute the size of the elements in the view.
Have you any idea how can I make my layout ?
Maybe in a coordinatorLayout to have circular dependencies (but I don't know how to make it) ?
Here a wireframe of what I want to do with my view: image
And here the code of my layout :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_photo_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/relative_photo_detail_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/relative_photo_detail_bottom_infos">
<ImageView
android:id="#+id/photo_detail_full_size"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/placeholder"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"/>
<TextView
android:id="#+id/photo_detail_owner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/photo_detail_full_size"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:textColor="#color/grey"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relative_photo_detail_bottom_infos"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/relative_photo_detail_image"
android:padding="10dp">
<ImageView
android:id="#+id/photo_detail_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:src="#drawable/delete"/>
</RelativeLayout>
</RelativeLayout>

Try putting your code inside Scroll view

Update your layout structure as below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_photo_detail"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- TextView 2 -->
<TextView
android:id="#+id/photo_detail_owner_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="8dp"
android:padding="8dp"
android:gravity="center"
android:textSize="16sp"
android:textColor="#android:color/holo_red_dark"
android:text="This is TextView Two"/>
<!-- TextView 1 -->
<TextView
android:id="#+id/photo_detail_owner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/photo_detail_owner_description"
android:layout_marginTop="8dp"
android:padding="8dp"
android:gravity="center"
android:textSize="18sp"
android:textColor="#android:color/black"
android:text="This is TextView One"/>
<RelativeLayout
android:id="#+id/relative_photo_detail_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/photo_detail_owner"
android:background="#android:color/black">
<!-- Image -->
<ImageView
android:id="#+id/photo_detail_full_size"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/dummy"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"/>
<!-- Delete Icon -->
<ImageView
android:id="#+id/photo_detail_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="16dp"
android:src="#drawable/delete"/>
</RelativeLayout>
</RelativeLayout>
OUTPUT:
Hope this will help~

Something like this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_gravity="center_horizontal" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Large Text"
android:id="#+id/textView2"
android:textAlignment="center" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Large Text"
android:id="#+id/textView3"
android:textAlignment="center" />
</LinearLayout>

android nested LinearLayout sizing

I am trying to achieve the following layout for my expandable listview.
Layout
Problem:
On android previewer the layout looks as expected:
refer to first image in attachment below.
However, when I run it on an emulator or a device the second TextView is not displayed.
refer to second image in attachment below
I have to set the height of the second ImageView (ivGroupIndicator) to match parent in order for the second TextView to display. But this stretches the expandable arrow icon.
refer to last image in attachment below
Images
Here is my layout.xml
<?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="50dp"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="match_parent"
android:src="#drawable/ci_hand_cursor"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:layout_weight="0.8">
<TextView
android:id="#+id/route_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Dhelhi Belhi"
android:fontFamily="sans-serif"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#color/colorPrimaryText"
android:paddingBottom="2dp"/>
<TextView
android:id="#+id/route_schedule_date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="20-September-2017"
android:fontFamily="sans-serif"
android:textSize="14sp"
android:textColor="#color/colorSecondaryText"
android:paddingBottom="5dp"/>
</LinearLayout>
<ImageView
android:id="#+id/ivGroupIndicator"
android:layout_width="25dp"
android:layout_height="match_parent"
android:background="#drawable/group_indicator"
android:layout_gravity="center"/>
</LinearLayout>
What am i missing here?

This should do the trick:
Use 0dp as height/width when using weights
Weight can just be 1 (not 0.8)
Use equal weights on the 2 text views so they share equal vertical space
Set gravity to center_vertical on text views so the text is centered.
set scale type on image so it doesn't stretch.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="centerInside"
android:src="#drawable/ci_hand_cursor" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingTop="5dp">
<TextView
android:id="#+id/route_name"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fontFamily="sans-serif"
android:gravity="center_vertical"
android:text="Dhelhi Belhi"
android:textColor="#color/colorPrimaryText"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/route_schedule_date"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fontFamily="sans-serif"
android:gravity="center_vertical"
android:text="20-September-2017"
android:textColor="#color/colorSecondaryText"
android:textSize="14sp" />
</LinearLayout>
<ImageView
android:id="#+id/ivGroupIndicator"
android:layout_width="25dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#drawable/group_indicator"
android:scaleType="centerInside" />
</LinearLayout>

The problem maybe is that you set the height of the parent layout to 50dp. Try to set it to wrap content, and use height=0dp and weight=1 for the vertical LinearLayout

How to set textView as right as possible and set textView show only a part of text?

I have the xml code shown below. Everything is working as it should except the final textView( id locationTextView) which won't stay right. I want it to stay as right as possible, but I can't do that(it still appears straight after the linear Layout).Should I set a left margin?. And for the textView1 how can I make it to show only a certain part of the whole text, because I have texts of different lengths and they ruin the layout.
<?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="wrap_content"
android:background="#color/product_list_item_bg"
android:descendantFocusability="blocksDescendants">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/icon"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_margin="3dip"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:padding="2dp"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#33CC33" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="TextView" />
</LinearLayout>
<TextView
android:gravity="right"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_marginTop="0dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/locationTextView"
android:layout_gravity="right" />
</LinearLayout>
</RelativeLayout>

Try android:layout_weight="1" or some other value for your locationTextView. You can also try out android:weightSum="3" (or that is appropriate instead of 3) on your root LinearLayout. Assign proper weights to your different child views. You can get help here
For showing text in a presentable way, you could use android:ellipsize="marquee" or other options available.

Put a textview over Imageview in LinearLayout

I have stuck in some xml code and i hope you can help me out.
So here is what I need/what I have done by now.
I have 3 images of 650px width and I need them one below another while keeping aspect ratio.
I did that with the following code and it looks as it should. No problem here.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ll"
android:orientation="vertical"
android:background="#3afa3f"
android:weightSum="3">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/krk_history"
android:layout_weight="1"
android:background="#drawable/povjestkrka_vintage_yellow600" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/krk_frankopan"
android:background="#drawable/frankopan2_vintage_sundown600" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/krk_turizam"
android:background="#drawable/krk_turizam_vintage"/>
The problem is. I need to put three textviews in a left bottom corner of each image. Imagine it like image menu with text description on each image.
So, I can not use relative or frame layout because images won't play nicely with each other :) There is always a gap between or not aspect ration etc. I need weightsum.
Second, I can't hardcode the text on each image in photoshop because the app will be translated and text needs to change for each language.
I can have different images for each language but I am trying to avoid that.
Ah yea, one more last thing.
I tried to put entire linearlayout in relative layout and put the text between but the text appears beneath the image and I can't bring it upfront.
Any suggestions?
Thanks a lot,
Xsonz

just copy 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:orientation="vertical">
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 1" />
</FrameLayout>
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 2" />
</FrameLayout>
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 3" />
</FrameLayout>

Take three FrameLayout inside your LinearLayout and inside FrameLayout keep the ImageView and TextView.
Or Else You can use RelativeLayout and give dependency to Views

You can use frame layout inside linear layout. create imageview inside the linear layout and create textview in another frame layout below it.
<FrameLayout
android:id="#+id/frameLayout_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/krk_history"
android:layout_weight="1"
android:background="#drawable/povjestkrka_vintage_yellow600" />
</FrameLayout>
<FrameLayout
android:id="#+id/frameLayout_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-5dp" >
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="string" />
</FrameLayout>

Something like this might work for you.
//your layout -> LinearLayout>
....
<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/image1"
android:layout_weight="1"
android:background="#drawable/A1" />
<TextView android:id="#+id/textview1"
android:layout_margin="0dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Text"
android:layout_below="#id/image1"
android:layout_alignLeft="#id/image1" />
</RelativeLayout>
// end your LinearLayout
You can play with these parameters using Relative Layout Parameters android.com. The relative layout allows you to control the "relative" positioning between your elements.
You can lay your images out side by side, or in whatever fashion you wish.
Then you can adjust the text dynamically.

Use a vertical line in a ListView item

I'm trying to show a vertical line in an android ListView item. I define it in the XML for the cell but when I preview it in the ListView it doesn't appear.
I understand this is an issue because I see alot of questions on here, but don't see any real answer.
The XML is pretty standard:
Cell:
<?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"
android:background="#color/appWhite" >
<View android:layout_width="5dp"
android:layout_height="match_parent"
android:background="#color/appGreen"
android:layout_alignParentLeft="true" />
<RelativeLayout
android:id="#+id/cell_trip_info_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/vertical_bar" >
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_trip_name"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:textColor="#2c3e50"
android:paddingLeft="10dp"
android:text="adfadf" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_trip_country"
android:layout_below="#+id/cell_trip_name"
android:textColor="#2c3e50"
android:paddingLeft="10dp"
android:text="adfadf" />
</RelativeLayout>
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/whole_container"
android:layout_alignParentRight="true" >
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/appGreen"
android:id="#+id/cell_trip_date_box"
android:layout_alignTop="#+id/update_buttons"
android:layout_alignBottom="#+id/update_buttons"
android:padding="20dp" >
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_tripstart_date"
android:layout_centerHorizontal="true"
android:textColor="#fff" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_date_thru"
android:text="#string/thru"
android:layout_below="#+id/cell_tripstart_date"
android:layout_centerHorizontal="true"
android:textColor="#fff" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_tripend_date"
android:layout_below="#+id/cell_date_thru"
android:textColor="#fff"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/update_buttons"
android:visibility="gone"
android:layout_toRightOf="#+id/cell_trip_date_box"
android:background="#e9e9e9"
android:padding="20dp" >
<ImageView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/cell_button_edit_trip"
android:src="#drawable/slide_edit"
android:adjustViewBounds="true"
android:contentDescription="#string/content_description" />
<ImageView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/cell_button_delete_trip"
android:src="#drawable/slide_delete"
android:layout_toRightOf="#+id/cell_button_edit_trip"
android:adjustViewBounds="true"
android:contentDescription="#string/content_description" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>

I found the cause and the obvious solution/workaround on another post Here
Basically RelativeLayouts for whatever reason won't play nice with the "match_parent" height setting in a ListView Item. One of the answer to the post recommended using a LinearLayout instead. So I just created a new File with the parent view being a LinearLayout. I then created a RelativeLayout child and tossed everything else in there.
It worked fine this time, easily allowing me to create my vertical rule.

In your cell_trip_info_container RelativeLayout you have
android:layout_toRightOf="#+id/vertical_bar"
You dont have a View named vertical_bar
Add that ID to your vertical bar view and you should be good to go
<View
android:id="#+id/vertical_bar"
android:layout_width="5dp"
android:layout_height="match_parent"
android:background="#color/appGreen"
android:layout_alignParentLeft="true" />

change
RelativeLayout
to
VerticalLayout