Develop Reference

scrollable and non scrollable images

I'm trying to build a gui for my app. It is comprised of two images, one on top of the other. The bottom image needs to be scrollable, the top image needs to be fixed.
This is the current layout xml for the view:
<?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="right"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal" >
<Button
android:id="#+id/button_load"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Load" />
<Button
android:id="#+id/button_save"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Save" />
</LinearLayout>
<uk.co.test.EditorView
android:id="#+id/EditorView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top" />
<HorizontalScrollView
android:id="#+id/scroll_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom" >
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:src="#drawable/imagemdpi" />
</HorizontalScrollView>
</LinearLayout>
Using this layout, the bottom image does not scroll, it is compressed to the width of the screen. If I remove the EditorView, it does scroll. How can I make the gui act as I want?
Any help gratefully received. Thanks

I'm actually not sure why removing the EditorView makes it work. Also, I only see one image view in your layout. But to make that ImageView scroll horizontally, I would change the layout_width of the scroll view to "match_parent" and add a scale type to your image view.
(see: https://developer.android.com/reference/android/widget/ImageView.ScaleType.html )
I would try either "center" or "matrix," although usually I have to play around with these a bit to get it to work just how I want it.
so:
<HorizontalScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom" >
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:layout_gravity="bottom"
android:src="#drawable/imagemdpi" />
</HorizontalScrollView>
In generally, with scroll views, you want to match_parent for the size of the scroll view, but wrap_content for the view being scrolled. The scroll view will allow the wrapped view to grow bigger than its own bounds, but if the scroll view grows bigger than the screen bounds, it won't scroll because it thinks it's showing everything already.

Problems Horizontal / Vertical Layout Android App

I´m trying to code my first android-app. I read a lot, but I have problems with the layout.
What is wrong in both xml?
For a better understanding, I have made a picture:
My XML for main.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="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2.5"
android:contentDescription="#string/upload"
android:scaleType="fitCenter"
android:visibility="visible" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/btnShoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/shoot_again" />
</LinearLayout>
</LinearLayout>
for main.xml in the folder layout-land, If i switch to the landscape-Mode the app crashes:
<?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="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/btnShoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/shoot" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/upload"
android:scaleType="fitCenter"
android:visibility="visible" />
</LinearLayout>

Okay, just looking at your XML, there are a few issues:
Portrait XML:
< ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2.5"
Here, you've set both a weight and a height - in a LinearLayout you can't have both. Either you set the height yourself, or you give it a height of 0dp and a weight, then let the LinearLayout assign the height. As for why it's rotated, the image itself might be rotated in your resources.
Horizontal XML:
Your root LinearLayout still needs to have a vertical orientation
Your ImageView needs to be declared above your Button
What's happening is that a) it's horizontal, b) your button is getting put on first, and c) your button has a android:layout_width="match_parent", which means the ImageView has nowhere to be put, as your Button is already taking up all of the space on screen (can you see why this is case?)
Make these changes, then update your question as appropriate, as I think that your problems will have changed

Views overlapping in app widget layout

I am building an app widget and the layout is going to have a View aligned at the bottom of the widget, to hold a TextView and a ImageView, then a View above it to hold the main text. The problem with what I have is that is seems the "top" View is overlapping with the bottom View:
UPDATE
Now I'm thinking the "top" view is not overlapping the bottom view, but that something is cutting off the top of the image. Here is another screenshot:
As you can see, the text is being cutoff at the top of the bottom view, but the image is getting cut of as well. Here is a screenshot with the image not being scaled to 18dp:
I'm extremely confused.
This is the code I'm using:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widgetLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="#dimen/widget_margin">
<RelativeLayout
android:id="#+id/widgetBgLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#drawable/bg_widget"
>
<RelativeLayout
android:id="#+id/widgetStatusLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:paddingTop="10dp"
>
<TextView
android:id="#+id/widgetStatus"
style="#style/WidgetStatus"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
/>
<ImageView
android:id="#+id/widgetIcon"
android:src="#drawable/icon"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:scaleType="centerInside"
android:adjustViewBounds="true"
/>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_above="#id/widgetStatusLayout"
android:layout_alignParentTop="true"
>
<TextView
android:id="#+id/widgetTitle"
style="#style/WidgetTitle"
/>
<TextView
android:id="#+id/widgetText"
style="#style/WidgetText"
/>
</LinearLayout>
</RelativeLayout>
</FrameLayout>

I figured it out. I had to set the height of the icon to a higher number (28dp). I don't think the icon is a true rectangle (I had someone else make the icons for me), which probably caused issues with the aspect ratio.

Place a fixed height button at the bottom of the screen always

I wish to keep a button at the bottom of my Activity screen. It has to be fixed irrespective of the size of scrollview above it. The problem is that once the textviews of the scrollview take up some place, the height of my button keeps decreasing and it eventually gets pushed out of the activity screen. This is the layout I am using.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical">
<TextView android:id="#+id/tvBanner" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" android:gravity="center"
android:text="Practice Exam" />
<ScrollView android:id="#+id/Scroll" android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout android:id="#+id/LinearLayout1"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:id="#+id/tvDesc" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_margin="10dp"
android:gravity="center" android:paddingTop="40dp" android:text="#string/welcom"
android:textSize="20sp" />
<TextView android:id="#+id/tvURL" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginBottom="30dp"
android:paddingTop="10dp" android:layout_gravity="center"
android:text="hello" android:textColor="#android:color/white"
android:typeface="sans" />
</LinearLayout>
</ScrollView>
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="bottom">
<Button android:id="#+id/btBottom" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_weight="1"
android:text="Enter" />
</RelativeLayout>
</LinearLayout>
I have also tried using android:weight=1 and android:layout_height=0dp in the Scrollview. But this removes the entire Scrollview portion from my activity and I can't see anything.
I do know that there are many similar questions asked about this and believe me, I have tried many of these. However, none of the tricks have worked for me. I have spent almost half a day fixing this. Kindly help.

For a case like this always use RelativeLayouts. A LinearLayout is not intended for such a usage.
Try this:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<Button android:id="#+id/btBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Enter"
android:layout_alignParentBottom="true"/>
<ScrollView
...
android:layout_above="#id/btnGetMoreResults"/>
</RelativeLayour>

You should try using RealativeLayout instead of Linear, and then you could use
android:layout_above="#+id/btBottom"
android:layout_alignParentBottom="true"
That should solve your problem.

looks like you need 'alignParentBottom' in your button like this
<Button android:id="#+id/btBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Enter" />

Do not wrap Button to RelativeLayout
Set layout_height of ScrollView to 0dp
Add layout_weight of ScrollView to 1

For this it would probably be a good idea if you used RelativeLayout for the outer wrapper layout. Then you could just set the layout with the button inside to LinearLayout and set layout_alignParentButtom="true" while you set your #+id/Scroll to layout_alignParentTop="true"
Also, you should probably set the layout with the button inside´s height to wrap_content instead of fill_parent

Why do you use a LinearLayout at top level at all ?
Choose a RelativeLayout with fill/fill and the following three childern (no further nesting !):
1) TextView with android:layout_alignParentTop="true" and android:layout_centerHorizontal="true"
2) Button with android:layout_alignParentBottom="true" and android:layout_centerHorizontal="true"
3) ScrollView with android:layout_below=#id/textview_id and android:layout_above="#id/button_id"
I didn't test it though, but give it a try.

problem with android layout

I have the following layout for a custom title bar. However, the problem is this: both the imageview and the imagebutton are coming at the centre. I was expecting the imagebutton to be at the extreme right. Can anyone kindly let me know what I did wrong here ? Thanks.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="35dip"
android:gravity="center_vertical"
android:paddingLeft="5dip"
android:background="#323331">
<ImageView
android:src="#drawable/header"
android:id="#+id/header"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center_horizontal">
</ImageView>
<ImageButton
android:id="#+id/saveButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/savetap"
android:background="#null"
android:gravity="right"
android:layout_above="#+id/header">
</ImageButton>
</LinearLayout>

Your layout is only 35dip tall, so pressumibly if you show your ImageView the ImageButton gets positioned outside the screen. Consider changing your layout_height to wrap_content, if appropiate.

You're using a vertically oriented LinearLayout, all View will be presented in a vertical fashion. Use a RelativeLayout so that you'll have more control over where Views are positioned. If you'd still like to use a LinearLayout, you'll have to use horizontal orientation so that the Views can be on the same "line".
Use layout_gravity to layout the item to the right, just gravity is used by the contents of the view.

At first if width is set to fill parent it really fills parent so it use all the width.
Second: why not RelativeLayout? It provides more options and control.
Maybe this is what you looking for:
`
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="35dip"
android:gravity="center_vertical"
android:paddingLeft="5dip"
android:background="#323331">
<ImageView
android:src="#drawable/header"
android:id="#+id/header"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="left">
</ImageView>
<ImageButton
android:id="#+id/saveButton"
android:layout_height="wrap_content"
android:src="#drawable/savetap"
android:background="#null"
android:layout_marginLeft="20dp"
android:layout_width="wrap_content" android:layout_alignParentRight="true">
</ImageButton>
</RelativeLayout>
`