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.
Related
I have a xml view like this, and as you see I have scroll view in it, but scroll view doesn't scroll and just match screen size, and I'm not able to see data under the screen.
This is my code:
CODE HAS BEEN UPDATED
<ScrollView
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:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/aboveRelative"
android:background="#color/darkOrange">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/category_text"
android:textSize="23sp"
android:textColor="#color/white"
android:text="Category"
android:paddingLeft="10sp" />
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="match_parent"
android:layout_height="200dp"
android:verticalSpacing="0dp"
android:horizontalSpacing="10dp"
android:numColumns="2"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/gray"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/topVoices"
android:textSize="23sp"
android:text="#string/topVoices"
android:paddingLeft="10sp" />
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/trendlist"
android:elevation="2dp"
android:background="#color/white"
android:layout_margin="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/moreTrend"
android:layout_gravity="right"
android:textSize="23sp"
android:text="More"
android:paddingLeft="10sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/newVoices"
android:textSize="23sp"
android:text="#string/newVoices"
android:paddingLeft="10sp" />
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/soundlist"
android:background="#color/white"
android:layout_below="#+id/newVoices"
android:elevation="5dp"
android:layout_margin="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/soundlist"
android:id="#+id/moreNew"
android:layout_gravity="right"
android:textSize="23sp"
android:text="#string/more"/>
<LinearLayout
android:id="#+id/yoursongs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:background="#color/white"
android:padding="10dp">
</LinearLayout>
</LinearLayout>
</LinearLayout>
I'm sure that there are some data under the screen but scroll view doesn't let me scroll it and see them.
Scrollview layout can only have ONE child layout. You still have TWO linear layout children in the XML you posted.
This is explained in the first paragraph of the Android developer documentation for ScrollView:
http://developer.android.com/reference/android/widget/ScrollView.html
Your layout is wrong. Here's what you gotta do:
Change your ScrollView layout_height attribute to match_parent.
The ScrollView will take the whole screen and make itself scrollable, that's why you need it as match_parent. The scrolling happens inside the View.
Put everything inside the ScrollView in a Linear or RelativeLayout. (see below)
The ScrollView extends FrameLayout, so it can only have a single child view.
IMPORTANT: this layout must have the attribute layout_height set to wrap_content, otherwise the ScrollView won't have anything larger than itself to scroll.
I'd also remove the root layout from the XML and leave the ScrollView as root.
Simply because it's pointless and it requires extra work from the LayoutInflater.
EDIT: your layout is also way more complex that it needs to be.
It lead me to believe you did not have a single child inside the ScrollView (which you do).
Still, item #1 should fix your problem.
Finally, I found answer. The problem was from fillviewport in scroll view. if you remove fillviewport and set fix size for listview, you can scroll.
I'm trying to make a simple clock/stopwatch app. In my overall vertical linear layout, I have a relative layout followed by a button. The relative layout has several imageviews stacked on each other in order to produce the clock.
I noticed, however, that the relative layout, as well as the imageviews themselves, take up way too much space in the linear layout. The clock pieces are SQUARE, so why is Eclipse insisting that it is a long vertical rectangle? My button at the bottom doesn't even show if I don't use weights. (But strangely enough, it shows if it is above the relative layout.)
I've tried everything I could: Set the height of items in relative layout to wrap_content, as well as the relative layout itself. I tried using weights, by giving the relativelayout a weight of 0 and the button 1, and then setting their layout_heights respectively to 0dp as needed. Still no go. There is a lot of room left for other things, and I'd like for the clock's parent layout to wrap itself around just the content.
What is going on here? Please see attached image for details. Code is attached below.
<LinearLayout 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="#drawable/tiling_rules"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:ignore="ContentDescription" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/clock" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/hour" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/min" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/sec" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bell" />
</RelativeLayout>
<Button
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:text="Test" />
It turns out that all I needed was to add:
android:adjustViewBounds="true"
to every ImageView! Now the clock pieces' bounds are "wrapped" around the content, even though setting wrap_content in its layout didn't work. Thanks for the suggestions though!
Try using a RelativeLayout as your main layout. This way you can make the button show at the bottom of the screen. Then if you need, use a separate layout for the clock pieces within the main layout
Kinda like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="ContentDescription" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/clock" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/hour" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/min" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/sec" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bell" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:text="Button" />
I have an issue with my app where the button layout is not evenly spaced when used on different devices.
As shown, the first screenshot shows the layout evenally spaced out on an older, smaller screened android smartphone.
The second screenshot from a Nexus 4, shows the large white space under the bottom button that is uneven.
I thought I had set my layout to be even but it seems it isnt.
UPDATE:
How to set a scroll view with the two linear layouts in it.
<?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="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="84dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imgLink"
android:layout_width="78dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/appointmentmanimenuicon" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="75dp"
android:gravity="center"
android:text="Appointments"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="30sp" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical" >
<Button
android:id="#+id/btnaddAppoint"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="50dp"
android:drawableLeft="#drawable/appointmentmenu"
android:src="#drawable/appointmentmenu"
android:text="Add Appointment"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical" >
<Button
android:id="#+id/btnviewAppoint"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="50dp"
android:drawableLeft="#drawable/appointviewicon"
android:src="#drawable/appointviewicon"
android:text="View Appointments"
android:layout_weight="1" />
</LinearLayout>
</ScrollView>
</LinearLayout>
Your nested linear layout with the buttons has a fixed height of 400dp. On the small device this leaves a smaller amount of space at the bottom then it does on the larger nexus4.
If you change your linear layout with the buttons to use a height value of fill_parent it should place the buttons evenly in the space remaining in the parent layout underneath the header ( contacts).
Your second LinearLayout has a fixed height of 400dp. The bottom edge of that layout will always be at 484dp (taking into account the first LinearLayout), and will leave extra space after it on any screen larger than 484dp tall.
I'm not entirely clear on what your desired layout is, but believe what you want is to center the second LinearLayout within the parent LinearLayout.
To do so, add android:layout_gravity="center_vertical" like so:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="400dp"
android:orientation="vertical"
android:layout_gravity="center_vertical" >
You should also consider removing the ScrollView, as that content should never need to scroll.
I'm quite new to android programming and I stumbled upon a problem with my layout.
At first, I had a Linearlayout with a textview, 2 buttons and a imageview scaled to fit the screen.
Now I wanted to put this under a scrollview, so the imageview could be scaled larger (to the width of the screen).
Without the scrollview everything just went fine, but with the scrollview, my imageview is not scaled anymore.
What am I doing wrong? I tried numerous solutions on StackOverflow but I can't get it to work with a ScrollView. Thanks in advance!
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/pageno" />
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/texta" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/textb" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/page1" />
</LinearLayout>
</ScrollView>
Make LinearLayout/RelativeLayout as parent view. In that make a scroll view and set alignparentTop=true. This scrollView will contain a single layout in which all other views will be placed.
I has the following XML:
<RelativeLayout android:id="#+id/cover_box"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="#+id/cover"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="#+id/download" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/mark_download"
android:layout_centerInParent="true" android:layout_marginTop="90px" />
</RelativeLayout>
But it's look's like the marginTop is being ignored.
If you want the 2nd image to be 90dp under the center of the screen, you could replace it with a FrameLayout where you can control the padding to move your image downwards.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:paddingTop="90dp">
<ImageView android:id="#+id/download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/mark_download"/>
</FrameLayout>
When you use center in parent the view is put directly in the center. The margin top will only come into play if an object is within 90px of the top of your view. Thus pushing the centered view down to keep at least 90px of space on top of it. So it isn't being ignored but it is not having the effect that you think it should have.
I want the progressbar to shown under android:layout_centerInParent="true" so i have added a dummy TextView and set it to centerInParent .Then i put my progressbar under it. Now you can increase its distance from center in two ways . First by increasing marginTop in TextView and second increasing TextView height.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/widget"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/splash" >
<FrameLayout
android:id="#+id/splash_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<com.s3.tdd.interfaces.CircularProgressBar
android:id="#+id/circularprogressbar2"
style="#style/Widget.ProgressBar.Holo.CircularProgressBar"
android:layout_width="110dip"
android:layout_height="110dip"
android:layout_below="#+id/txt1"
android:layout_centerHorizontal="true" />
</RelativeLayout>
You can put your imageview inside of other ViewGroup (LinearLayout of RelativeLayout layout), leaving the margin of imageview, and doing android:centerInParent="true" for the ViewGroup:
<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">
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:centerInParent="true">
<ImageView android:id="#+id/download" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="#drawable/mark_download" android:layout_marginTop="90px" />
</LinearLayout>
</RelativeLayout>
You can make a dummy view and center it to parent. Now align your view relative to dummy view using layout:alignComponent and give the marginTop. Now in the code move it according to the width of your view to center it.