Develop Reference

Vertically stacking a dynamic height ImageView with a RelativeLayout

I'm trying to vertically stack a dynamic height ImageView (image will get downloaded and displayed, therefore don't know the height) with a RelativeLayout, and I need an outcome like in the right side figure of the following Image where blue rectangle represents the ImageView and red represent other RelativeLayout.
So far I've tried below, and it gives me the output of left side figure (layouts overlaps).
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardCornerRadius="2dp"
card_view:cardUseCompatPadding="true"
card_view:overlay="#drawable/default_selector">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- ImageView represented by Blue rectangle -->
<ImageView
android:id="#+id/thumb_image_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
<!-- RelativeLayout represented by Red rectangle -->
<RelativeLayout
android:id="#+id/thumb_bottom_view"
android:layout_width="match_parent"
android:layout_height="#dimen/default_height"
android:layout_alignParentBottom="true"
android:animateLayoutChanges="true"
android:gravity="center_vertical">
<TextView
android:id="#+id/thumb_text_resolution"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:paddingLeft="#dimen/default_gap"
android:paddingRight="#dimen/default_gap"
android:textColor="#color/Thumb.Text"
android:textSize="14sp" />
<ImageButton
android:id="#+id/thumb_button_heart"
android:layout_width="#dimen/default_press_size"
android:layout_height="#dimen/default_press_size"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="?heartBackground"
android:scaleType="centerInside"
android:src="#drawable/ic_action_heart_empty" />
</RelativeLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
What should I change in order to make it look like right side figure?

Got it fixed by removing android:layout_alignParentEnd="true"
and adding android:layout_below="#+id/thumb_image_view" instead.
<RelativeLayout
android:id="#+id/thumb_bottom_view"
android:layout_width="match_parent"
android:layout_height="#dimen/default_height"
android:layout_below="#+id/thumb_image_view"
android:animateLayoutChanges="true"
android:gravity="center_vertical">

Changing property on one element causes other elements to stop appearing

I am working the DeveloperWalkthrough example from developer.xamarin.com. Everything works after adding the imageview and the second layout with the two text widgets. When I change the orientation value of the root linear layout, the second linear layout with the two text widgets disappears from the designer
Here is the source code
<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="match_parent">
<ImageView
android:src="#android:drawable/ic_menu_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView1" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout1">
<TextView
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView1" />
<TextView
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView2" />
</LinearLayout>
</LinearLayout>
Attached are the before and after screenshots of the designer when I change the root LinearLayout orientation to horizontal

Your ImageView in the LinearLayout has a width of match_parent. This means it's going to fill out the entire screen. Your elements aren't disappearing, they're being pushed off-screen. They're siting next to the ImageView. Shorten the width and you can see them.

Image View not showing image in a Custom ListView

There are no errors that are crashing the program, I just want the image to be aligned. The Image is shown to the left of the Text if the ImageView is placed before the TextView
My Custom Layout for NavigationDrawer
<?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="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:gravity="center_vertical"
android:layout_marginLeft="5dp"
android:textColor="#ffffff"
android:text="New Text"
android:id="#+id/bookName" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:id="#+id/bookImageView" />
</LinearLayout>
How to make the image float right of the text and about some points from the right edge of the listview.
One more thing, my layout is being used in a NavigationDrawer, so the ListView covers less than the full width...
Thanks!!!

Change layout_width of TextView from match_parent to wrap_content:
android:layout_width="wrap_content"

make a textview width proportional to imageview above

my layout is very simple. i use a vertical relative layout which contains an imageview on top of 2 textviews (heading and text). In portrait it looks fine. However in landscape it happens, that the imageview will not fill out the whole width of the screen but the text below still does. that doesnt look good. is there a simply way i can make the text width as wide as the imageview above, so all views will have the same right boarder on any screen size?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:src="#drawable/picture" />
<TextView
style="#style/DescriptionTitle"
android:id="#+id/textView1"
android:layout_alignLeft="#id/imageView1"
android:layout_below="#id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/heading" />
<TextView
style="#style/DescriptionText"
android:id="#+id/textView2"
android:layout_alignLeft="#id/imageView1"
android:layout_below="#id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text" />
</RelativeLayout>
</ScrollView>

Add android:layout_alignRight="#id/imageView1" to your TextView. You may need to use android:layout_width="0dp"; also on the same TextView.

insted of using android:src="#drawable/picture"
use android:background="#drawable/picture" hope it will work for you

Android - Layout not in uniform

I have a horizontal list of images in my android application. But the problem is some of the images seems to not follow the layout I've defined in my xml. Like this:
my layouts look like this:
mainlayout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/back_shop_list"
android:orientation="horizontal">
<com.devsmart.android.ui.HorizontalListView
android:id="#+id/shop_hlist_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:scrollX="1dp"
android:scrollY="1dp"
android:overScrollMode="always" >
</com.devsmart.android.ui.HorizontalListView>
</LinearLayout>
then my listlayout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:translationY="200dp" >
<FrameLayout
android:id="#+id/framelayout"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:paddingLeft="8dp"
android:paddingRight="8dp" >
<ImageView
android:id="#+id/img"
android:clickable="true"
android:adjustViewBounds="true"
android:layout_width="360dp"
android:layout_height="360dp" />
<ProgressBar
android:id="#+id/img_progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:translationY="150dp"
android:translationX="140dp" />
</FrameLayout>
<TextView
android:id="#+id/labelText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:translationX="10dp"
android:textColor="#dc6800"
android:textSize="16sp"
android:textStyle="bold" />
<!-- Description label -->
<TextView
android:id="#+id/desc"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:translationX="10dp"
android:textColor="#acacac"
android:paddingBottom="2dip">
</TextView>
</LinearLayout>
My guess is that the size of my image is lesser than what my ImageView layout_width and height. Or I dont really know what causes this problem.
But any help will do, please. Thanks.
EDIT: What I really wanted is that if the image is like image 4 and image 5, it should not have those spaces. I've tried getting the size of the image from my ImageLoader then set the layout parameters height and width in there while images are loaded. But it looked worse.
Are there other ways in which i can dynamically adjust my ImageView if ever the images are like image 4 and 5?

If actually you want to make the image occupy the desired space
try adding this image View property to your ImageView
You can try others I usually use fitXY out of the predefined list you will get there in XML Layout
android:scaleType="fitXY"
so as to make this property work we also need
android:adjustViewBounds="true"
that you have already added in your case
If actually you want to avoid on blank spaces and let the image occupy as much space as it want
In my layout I am using two image views to show a demo
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_numbers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignLeft="#+id/tv_numbers"
android:layout_below="#+id/tv_numbers"
android:layout_marginTop="5dip"
android:layout_marginRight="10dip"
android:orientation="vertical">
<ImageView
android:id="#+id/textView1"
android:layout_width="200dip"
android:layout_height="200dip"
android:src="#drawable/desert"/>
<ImageView
android:id="#+id/textView2"
android:layout_width="200dip"
android:layout_height="200dip"
android:background="#drawable/desert"/>
</LinearLayout>
ImageView 1 is assigning image as Source using android:src="#drawable/desert"
and below is the result as you can notice that it is showing WhiteSpace arround it.
ImageView2 is assigning image as Background using android:background="#drawable/desert"
and below is the result as you can notice that it is showing no WhiteSpace arround it.
Or try using these attributes to make it possible
android:maxHeight=""
android:maxWidth=""
android:minHeight=""
android:minWidth=""