Develop Reference

NetworkImageView to occupy full width of screen

I am using com.android.volley.toolbox.NetworkImageView.
Image is coming from url.
I want to display image so that its width to occupy full width of screen not height because below image there is a caption which is a Textview.
Here is the activity's xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/black"
tools:context=".MainActivity" >
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Here is the items xml.
<?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:gravity="center" >
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/photo_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="1dp"
android:src="#drawable/button_register" />
<TextView
android:id="#+id/caption"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/photo_image"
android:layout_marginLeft="15dp"
android:text="Check"
android:textColor="#color/white" />
</RelativeLayout>
From the backend the image size is 300 X 200 pixels.
How to set imageview so that it can occupy full width of the screen.
Can anyone help?

NetworkImageView extends ImageView so you should be able to use everything that works with ImageView.
So, if you want your image to occupy full width and adjust its height so it maintains its aspect ratio (at least that's what I understood you wanted to do) use the adjustViewBounds property
Your xml will look like this:
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/photo_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="1dp"
android:src="#drawable/button_register"
<!-- add adjustViewBounds -->
android:adjustViewBounds="true" />

How to make an item layout with a fixed aspect ratio background on multiple types of devices in Android?

What we want to make:
Display a sub layout on the screen of the TV. The width of the TV layout is match_parent.
What I Tried:
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:src="#drawable/bg_tv_left" />
<include
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="13dp"
android:layout_marginLeft="13dp"
layout="#layout/content" />
</RelativeLayout>
The Result:

Your ratio looks good, you need both child have the same layout_width and layout_height to get the perfect position, try this one:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:src="#drawable/bg_tv_left" />
<!-- adjust the margin to get the best positioning -->
<include
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="13dp"
android:layout_marginLeft="13dp"
layout="#layout/content" />
</RelativeLayout>
You may need one more layout to wrap them, depend on your UI design

android:background stretching not preserving aspect ratio

On landscape mode my background image stretches, I would like the image to enlarge rather than stretch to fit the size. From what I've seen I have to add it to it's own layout (E.g. LinearLayout) or 'ImageView` and the have a layout for the content on the view, am I correct in saying this?
My current xml layout looks like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/instructions"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/photo_background"
android:tag="layout" >
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fadingEdge="none" >
<include layout="#layout/instructions_internal" />
</ScrollView>
Which includes the following layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroll_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/instructionsLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent_black" >
<RelativeLayout
android:id="#+id/more_info"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<WebView
android:id="#+id/top_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" />
<Button
android:id="#+id/test"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_below="#+id/top_content"
android:layout_marginBottom="10dp"
android:layout_centerHorizontal="true"
android:onClick="onClickHandler" />
<Button
android:id="#+id/instructionsbutton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/test"
android:background="#color/dark_gray"
android:drawableLeft="#drawable/arrow_down_float"
android:gravity="left|center"
android:onClick="onMoreInstructions"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:text="#string/more_instructions_start"
android:textColor="#color/solid_white" />
</RelativeLayout>
<WebView
android:id="#+id/bottom_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#+id/more_info"
android:layout_marginTop="10dp" />
</RelativeLayout>
Any guidance on this would be gladly appreciated. Thanks

Yes you're correct. View's background scaling type is equivalent to ImageView's ScaleType.FIT_XY It will mess up the aspect ratio unless you're using wrap_content and the contents do not make it stretch past background bounds.
So in this situation I usually use an ImageView I place behind the view I need to give a properly-scaled background to. (Most likely yo're looking for CENTER_CROP scale type)
UPD here's some code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/instructions"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:tag="layout" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/photo_background"
android:scaleType="centerCrop" />
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadingEdge="none" >
<include layout="#layout/instructions_internal" />
</ScrollView>
</FrameLayout>

use an image that matches or in accordance with the android device resolution and screen size.
the image cannot itself enlarge itself, even if you use a linear layout dedicatedly for the image, the image is bound to stretch.
keep images of all possible resolutions in separate folders that you plan to run you application on.

Android: Layout looks different on different devices

Hi I have an activity with an imageview and a row with buttons at the bottom.The buttons are added to the iconView layout programmatically.When I test my app on my HTC one the buttons are displayed correct.
Once I run it on a device with a smaller screen it is cropped i.e. only the top of the buttons is displayed.
How can I make my code device independent?
<?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:background="#000000"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/mainView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background2"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.95"
android:orientation="vertical"
android:paddingLeft="4dp"
android:paddingTop="4dp"
android:paddingRight="4dp"
android:paddingBottom="4dp"
android:src="#android:drawable/ic_menu_camera" />
<LinearLayout
android:id="#+id/iconView"
android:layout_weight="0.05"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
Thanks in advance.

Try this layout:
<?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:background="#000000" >
<RelativeLayout
android:id="#+id/mainView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background2" >
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:layout_above="#+id/iconView"
android:src="#android:drawable/ic_menu_camera" />
<LinearLayout
android:id="#+id/iconView"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal" />
</RelativeLayout>
</LinearLayout>

Try this
make the first view with android:layout_weight="1"
and the with a static height without the layout_weight, this should solve it

Unfortunately the solutions did not work. Eventually I changed my code and add the buttons in the xml, not programmatically. This works fine. I don't know why...

When adding button either programmatically or in XML layout, try to use LinearLayout as the parent for button and leverage the "weightsum" property of that LinearLayout.
When you're going to share the real state of screen's width or height equally between a number of views such as buttons or textview or ..., you can set "layout_weight" property on those controls. Notice that, this is only possible when using LinearLayouts.
What happens at the end is that the linearlayout's real estate is calculated and allocated according to each child's element's "layout_weight" value.
The example below shows how to put two buttons beside each other and make them fill the screen's width equally :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
>
<Button
android:id="#+id/btn_left"
android:layout_width="0dp" // width is calculated by weight
android:layout_height= "wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/btn_right"
android:layout_width="0dp" // width is calculated by weight
android:layout_height= "wrap_content"
android:layout_weight="1" />
<LinearLayout/>

How can I make a `View` fill a `RelativeLayout`?

I have a RelativeLayout with some stuff in it, and I want a background view to fill the whole thing. This is what I would expect to work:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000" >
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_margin="1px"
android:background="#fafafa" />
<ImageView
android:id="#+id/im"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_blank_profile" />
.... and so on.
That doesn't work. It fills the width but the height gets set to zero. However, if I change layout_alignParentBottom to layout_alignBottom="#+id/im" then it does work (sort of; that's not a satisfactory solution but at least it isn't 0 height any more).
What's going on? Is this a bug?

You need to change the relative layout from
android:layout_height="wrap_content"
to
android:layout_height="match_parent"
Because you are wrapping the height of the parent to the child, and the child to match the parent, it will come up 0.
if you are wanting to have other things above/below the relative layout, then use android weights.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0px" <!-- or 0dip -->
android:layout_weight="1"
android:background="#000" >

Try setting the layout_height property of you relative layout to match_parent
And what happens if you remove all the alignParent properties from the view and just use match_parent for the width and the height of the view?
Rolf
Final Edit?:
Small example, something like this?
Using a container? When the content of the inner RelativeLayout grows the View will just stretch with it.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<View
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/relativeLayout1"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_margin="1px"
android:background="#fafafa" />
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/im"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_blank_profile" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>