View entire content of ScrollView in Eclipse's graphical layout - android

I'm using Eclipse Helios 3.6.2 for Android development and whenever I design a layout in the graphical layout mode (not the XML layout), I can't see the entire content of a ScrollView in the graphical layout.
Specifically, when I'm using a ScrollView and the height of the ScrollView exceeds the height of the content view area (i.e., the phone screen visible in the graphical layout mode), I am not able to see the items that I have at the bottom of the screen.
In Eclipse Helios 3.6.1 there was an option called "expand to fit"; whenever I used to click on it, the phone screen increased in size to encompass all the elements that I had added. How do i achieve the same thing in 3.6.2?

There's no way to scroll the content inside the Android Layout Editor. What you can do, though, is create a new device simulation with a huge height, so you can see what is hidden in the ScrollView.
To do so, go to the dropdown menu below "Editing config" ang choose "Custom..." (top-left corner of the Android Layout Editor). Select one of your preferred resolutions (mine is 3.7in WVGA) and hit "Copy". The copied resolution will appear in the "Custom" group in the bottom of the list.
Choose your new configuration and hit "Edit...". In there, you can select the "Screen Dimension" property and change the value. I created a resolution 2000x480 (portrait). This way, I can see the whole content inside the ScrollView.
Hope it helps.

Use an included layout for the scrollview.
Move the entire scrollview layout in a separated file (ie: my_scrollview.xml).
<?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" >
...
</ScrollView>
The layout editor will then display the entire scrollview.
In the main layout use in place of the scrollview something like:
<include layout="#layout/my_scrollview" />

There was a button that allow to remove the clipping generated in a scroll view and show all the views that you have inside it.
In later sdk versions the button is removed, and the view mode is triggered if the scroll view is the root element of the view, so my solution when this doesn't happen (because you have a relative layout with some buttons over the view for example) is extracting the scrollview to it's own view, and including it in the original layout with an include tag.

My quick fix.
In the upper right corner of the graphic layout window you will see a drop down menu that shows what minimum version of android you are creating for. Make sure you have it set to at least android 2.1. I had an app at 1.6 and i had the same issue you have. swapped minimum build platform to 2.1 and it was magic.
Hope this helps.

If use Relative layout, you can use layout_marginTop negative, like that:
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="-500px"
android:layout_alignParentLeft="true"
android:layout_below="#+id/linearLayout" >
Increase the layout_marginTop to move scrollview.

The drop-down on the left (under the text "Editing config: ...") allows you to change the simulated screen size in the graphical layout. Perhaps that is what you are looking for.

Just click on the Config window of the Graphical Layout and click on the preview for all screen sizes and u will be able to see your scroll

Use the android:scrollY in the ScrollView child and remove it before publishing.
<ScrollView ... >
<LinearLayout ...
scrollY="300dp">
</LinearLayout>
</ScrollView>

Related

Android - White space on the right and the left of a LinearLayout

When I add element into a layout(in this case a LinearLayout), there is a white space on the two side of the element, but the attribute layout_width is "match_parent". Why?
Here's a screenshot:
http://s32.postimg.org/o4vr8kzbp/device_2016_07_30_001720.png
The 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"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="500dp"
android:background="#color/blue"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
I found this lines somewhere on this site and it might be worth checking;
This is possibly because you are using the auto-generated layout files in Android Studio when starting a new project, which by default adds a margin of 64dp to tablet screens (the value found inside values-w820dp\dimens). – PPartisan 6 hours ago
Maybe you should check your layout's parent's layout in the host activity for one more time.
It is possible that the root layout does not fill the parent or that the child you are adding has a margin, to know exactly whats going on use the android tool called DDMS or Android Device Monitor (you can launch it from Eclipse or Android Studio) then click on Dump View Hierarchy. This will give you details on the size, padding, margin and other properties of every view on the view hierarchy
You should to check your code, may be you update margins of layout at your classes.
And try to check layouts of home activity, may be they are contains layout_marginLeft(layout_marginStart) and layout_marginRight(layout_marginEnd).
Also parent layouts may contains any white views on the sides or parameter layout_weight with specific value.

Android buttons are cut off (LinearLayout horizontal)

In my app I am calling API to get list of people with some informations (address, phone numbers etc.). Under every phone number, I am creating programatically 3 buttons (add to contacts, edit and call). Problem is, that last button is cut off (small screen). I am using Linear Layout horizontal.
Is there any way to control size of screen and if needed, put last button to second line? When I rotate screen to landscape, I have enough space, so buttons should stay in one line.
Now, I am using horizontalScrollView with visible scrollbar. It's working, but I am not very satisfied with it.
Thanks for help.
I'm not really sure if you can do that with LinearLayout. But you could do that using FlowLayout. Check this link: https://github.com/ultimate-deej/FlowLayout-for-Android.
This layout moves the buttons to the next line if there is no space for them on the screen.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weight="1" />
</LinearLayout>
the weight attribute will automatically adjust your button size
make sure you set width to match parent for all buttons.
Best to create a new variant of the listitem layout for smaller screenshots:
layout-w200dp/listitem.xml : layout with 3 buttons on one line
layout/listitem.xml : layout with buttons on separate lines
Android will then choose the multiline layout when the current available width is smaller than 200dp. (Note that you can still tweak the 200 to a different value)
Alternatively you can also use an alternatieve linearlayout which does the wrapping for you: Flowlayout
This is probably more complicated to achieve that you wan't it to be but the best shot is to use some adapter based solution:
GridView - this is the old solution, better go for the 2nd
RecyclerView with StaggeredLayoutManager setup to your needs
Simple solution is using android:layout_weight="1" and android:layout_width="0dp" as params for each button in your LinearLayout but then they will fit the whole screen and take the same percent of the width, and if the screen is too small buttons might get cut off.

Android Studio: View content in scrollView that is off the screen

I'm brand new to android development and I'm using both design view and text view to create a layout.
I've just used a scrollView element on the screen and have started to fill in all of the content. Unfortunately, the content is going off of the page (obviously will be scrollable when it's built). But I would like to be able to see the designed content before I run a build to see it.
Is there any way to expand my view of the scrollView element so I can see the content below the screen?
If you put all of the content you want in a separate layout using merge tag as the top level element you should be able to preview that layout in the preview window. Then just use an include tag to put it into the scrollView
eg
<merge xmlns:android="http://schemas.android.com/apk/res/android">
Your content here
</merge>
And
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/yourlayout"/>
</ScrollView>
See http://developer.android.com/training/improving-layouts/reusing-layouts.html
Well, obviously you can't scroll the screen in Android Studio, but you can set the visibility of any parent view to gone to see how your off-screen views look like, then change it back by removing the visibility attribute in xml.
You can also copy the views that are off-screen and paste them in another new layout for testing purposes only to see how it looks like.
Generally, you can just run the emulater in Android Studio and see how your design looks like too.

Android Sliding Up View

I need to do a Sliding Up View wich should slide up from the bottom of the screen when I click a button. It has to show on the bottom of the screen and I need to slide/drag it to the center of the screen. The images below explain it better.
almost like the AndroidSlidingUpPanel from "umano" which you can find here:
The problem is that I want the first child (The content of my View - an image for example) to fill all the screen and also I want the second child(the actual bottom bar) to be showed when I click a button. The images below explain it better. If there is not possible to do this by changing the AndroidSlidingUpPanel, how can I do that? I have never worked with views like this. I would really appreciate any tip or help. Thank you very much.
To hide or show panel, you can use
showPanel()
method.
To hide it try this:
SlidingUpPanelLayout slidingPanel = (SlidingUpPanelLayout) findViewById(R.id.sliding_panel);
slidingPanel.hidePanel();
To make it appe
SlidingUpPanelLayout slidingPanel = (SlidingUpPanelLayout) findViewById(R.id.sliding_panel);
slidingPanel.showPanel();
This is available only in v 2.0 of AndroidSlidingUpPanel (https://github.com/umano/AndroidSlidingUpPanel). As I know, it's included in android support library v13 now, but not sure if there is latest version.
You can check this library for dragging content from all four edges of the screen https://github.com/SimonVT/android-menudrawer
You can make a custom layout inside this menu drawer to get your expected result.
You can do it with AndroidSlidingUpPanel, just set visibility:
android:visibility="GONE"
on the 2° child of the view (the panel) and use .showPane() and .hidePane() on SlidingUpPanelLayout to show/hide the panel when you click the button.
The following library do it as well
https://github.com/Paroca72/sc-widgets
Inside you will find a widget named ScSlidingPanel.
This widget work different from the other and can be use and customize very easily.
You put it inside a RelativeLayout give an alignment and it will open from that side.. Left, Right, Top and Bottom or mixed..
In your specific case your must align your panel at bottom of the container and it will sliding from the bottom.
<!-- Define the container -->
<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"
tools:context=".MainActivity">
<!-- Sliding from top -->
<scapps.com.library.ScSlidingPanel
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<!-- HERE THE YOUR CONTENT -->
<!-- or you can load by setLayout method -->
</scapps.com.library.ScSlidingPanel>
</RelativeLayout>
Another important property that you can use right for your case is the handle size.
You can define an handle and define the beavior of it.. as your image above you used a button.. you can unsing an image and setting setToggleOnTouch() to true for open/close the panel touching on handle.

How to make the Eclipse Android layout editor expand in height?

I've been playing around with Android lately and I've run into a problem building UIs. More precisely, I'm pretty sure when I was building the first layout, the layout editor in Eclipse adjusted the visible area so when I added new widgets, it stretched in height to display them.
Now I have a problem that whenever the widgets fill the area, it's impossible for me to properly lay them out since the preview window displays only the height of a single screen, even if it's a simple LinearLayout with a bunch of textviews to fill about 2 screen heights.
Also, I'm using the latest stable Eclipse and ADT plugin, target platform is 2.2.
EDIT
What I meant was that the editor doesn't display the elements that don't fit inside a single screen height and clips the stuff (see the image to see how it clips, there are actually 2 more textviews that are clipped totally) which makes impossible to build UIs that are taller that a single screen height.
That's normal there is a clipping occuring. I just tested it on my eclipse and I have the same behavior than you.
If what you want to achieve is creating a layout bigger than your screen size, you should use scroll views (and insert your initial layout in it):
<?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="fill_parent"
isScrollContainer="true" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/exampleView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
...
Once in scroll mode, the layout will auto adjust.
Try this:
Hope this helps. If this hasn't solved your problem, then please explain your question again in different words, because that's how I understood it.

Categories

Resources