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.
Related
So I have been trying every mix and match with different layouts and settings and still cant figure out how to make this work. I want to have a spinner on the Same Screen as an MPAndroid Line Chart, I know I can fix the height Manually and adjust it to fit properly, but fill parent or match parent does not account for the spinner and just pushes it off the screen! If I load the application on my phone with height of 290dp Great fits perfectly! Load it on the 7" tablet not so pretty... Half the screen is empty. How do I contain the Chart to fill a layout that accounts for spinner? Wrap Content on the chart makes it unusable.
<?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"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".history"
android:background="#303030">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/chart"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner4"
android:entries="#array/list3"
android:popupBackground="#303030"
android:layout_centerHorizontal="true" />
</LinearLayout>
Try using this I have removed some attributes which were missing at my end. This is where spinner is on top and rest is filled with line chart.
<?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="match_parent"
android:layout_height="match_parent"
android:background="#303030"
android:orientation="vertical">
<Spinner
android:id="#+id/spinner4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:popupBackground="#303030" />
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/chart"
android:layout_width="fill_parent"
android:layout_below="#+id/spinner4"
android:layout_height="fill_parent" />
</RelativeLayout>
Try this,
<?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"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".history"
android:background="#303030">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="70">
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/chart"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
<Spinner
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="30"
android:id="#+id/spinner4"
android:entries="#array/list3"
android:popupBackground="#303030"
android:layout_centerHorizontal="true" />
</LinearLayout>
Because of using weight, on any screen "map and spinner" will look like in same screen height ratio.
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" />
I need to create a layout as shown in the image.
The rounded button with the arrow needs to be exactly between the blue and the gray background.
I'm having difficulties placing it without specifying the margins precisely, which is something I don't want to do because there is no guarantee it will look good on all resolutions and devices.
I would appreciate an xml sample for that
Thanks!
Use the desired drawable.. hope it works.. you can set width and height according to your need.
<?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="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:background="#1b96d9"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#e6e6e6"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/arrow" />
</FrameLayout>
</LinearLayout>
my code is like below,when the FrameLayout layout_height from
android:layout_height="wrap_content"
to
android:layout_height="120dp"
the layout becomes
i hope the image's height will become 120dp, and keep the scale.
And the width of the layout will be followed by changes , as described wrap_content ,
but it only seems to adapt to the size of the original image .
what can i do?
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/item_thumbnail_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/white" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/network_3" />
</FrameLayout>
How about specifying both the layout_width and layout_height to 120dp each? Like below
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/item_thumbnail_container"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:background="#color/black" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
</FrameLayout>
the imageview takes extra [black] space and i dont know why
ok this imageview should wrap content but instead..
photo explains the problem
this is the code
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/map"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/map" /><ImageView
android:id="#+id/blxx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingBottom="-20dp"
android:src="#drawable/photo" />
<ImageView
android:id="#+id/blxx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/blxx" />
</LinearLayout>
</ScrollView>
Try the below:
android:adjustViewBounds="true"
This will remove the extra padded space
first possible reason for your problem:
sometimes when the image is too small, it can't scratch anymore then some limit. after that limit - what happens is what you see - blank space claimed by the imageView where additional scratch of the image was expected. I advice you to take larger picture (with bigger resolution)
Second possible reason:
add to your imageView properties on the xml file the following attribute:
android:scaleType="fitXY"
android:layout_gravity="center"
Above line is centering the image to fit inside your ImageView. Try without it. If not, set gravity to "fill" and try again.
Also remove one of the duplicates of blxx as noted.
hope this ll help you
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_gravity="center">
<ImageView
android:id="#+id/map"
android:layout_width="fill_parent"
android:layout_height="fill_content"
android:src="#drawable/map" />
</LinearLayout>
</ScrollView>