I have TextView (green A) between 2 views.
Normally I want the B view to appear below A view. But when the TextView's content will be big enough that the B view will meet the bottom of the screen, I want to be able to scroll that 'excessive' A's content. How can I achieve this?
You can achieve this by many methods, i will list 3:
Put A and B views inside a ScrollView.
Put A inside a ScrollView.
To scroll the 'excessive' A's content, search on google and use an ScrollableTextView.
I found a solution but forgot to post it here. So, to achieve this, we need to somehow force a ScrollView's measurement to take place after other views' measurements in a layout. And we can do it by setting layout_weight attribute in ScrollView. So basically, our layout should look like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fillViewport="true"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</ScrollView>
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
Related
I have a layout contain one image and 3 text field
I've tried to align the image to right and text field to left but I've failed
I've used
android:layout_gravity="right" for image and left to text but it did not work also I've used end and start in gravity with no success
this is the layout code:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:background="#drawable/card_background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/listthumb"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:contentDescription="Rss video thumbnail"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/listtitle"
style="#style/listTitle"
android:maxLines="3"/>
</LinearLayout>
<TextView
android:id="#+id/shortdescription"
android:layout_width="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/listpubdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="11dp"/>
</LinearLayout>
</FrameLayout>
Try to use a <RelativeLayout> instead of a <LinearLayout>
With the RelativeLayout you could place a widget depending on the position of another widget
Here the Relative Layout description
Hope this will help, I have not had time to test....
One linear layout should have vertical orientation and contain the 3 text fields.
One linear layout should have horizontal orientation and contain both the above linear layout and the image.
To push two views to the edges of the screen, you can also give each a left/right margin and then put a blank view with weight = 1 in between them.
Please read a bit more on how layouts work on Android and the different types available to you. A LinearLayout will stack the containing Views either Horizontally or Vertically one after the other. A FrameLayout is simply a container and the items within have to position themselves. RelativeLayout allow you to position your views with a relative reference to other views (in your case, you can position your ImageView, and then your 3 TextViews relative to where the ImageView is).
If you can use LinearLayout instead of RelativeLayout, you should do so, as RelativeLayout is always slower, due to having to perform two passes prior to rendering as it needs to measure each view and then also perform the layouts based on that. You might be looking for something like (pseudo-code):
<LinearLayout orientation=horizontal>
<LinearLayout orientation=vertical>
<TextView />
<TextView />
<TextView />
</LinearLayout>
<ImageView />
</LinearLayout>
You have not described your question well . Check below code if it works .
You just forgot to add orientation in linear layout containing one text view and a Image view .
Add Orientation to Your Linear Layout.
Please refer to example below. I want to have the top layout (below encased in red) to be unmoving in a scrollview in my activity. I have a scrollview as the parent layout and then I thought having a relative layout for the top one would work, and align it to the top, but that didn't really work out as it still remained within the scrollview. I would like to have the users have the red-layout box remain static when they scroll down.
I figure I would also have to put in a topMargin at the top of the scrollview or something in order to fit the redbox layout in.
XML Code posted here: http://pastebin.com/bxdREbeG
Do something like this (hand code, for reference only):
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/YourTopStaticView"
android:layout_width="match_parent"
android:layout_height="48dp"> //Or any other height you want
//Contents of the top view
</RelativeLyout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/YourTopStaticView">
//Contents of the ScrollView
</ScrollView>
</RelativeLayout>
As a side note, do not hardcode children into the ScrollView like that. Use the RecyclerView (which is an updated, modern replacement for ListView), which you will be expected to know how to use if you want to move into serious Android programming. It is actually super easy to use, once you get the hang of it :-)
You should use the ScrollView with only one child (official documentation - http://developer.android.com/reference/android/widget/ScrollView.html). According to your xml, your ScrollView is very complicated with a lot of child widgets.
The best option for you is to use a LinearLayout as the root for the whole container, a LinearLayout( or Relative) for the top layout containing the Reset and Save buttons, and a ListView for the long list that you have. ListView takes care of it's own scrolling. So you don't have to worry about that.
This will improve your code performance as well.
This should suit your needs:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout android:id="#+id/topPanel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<TextView android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Multi TTS Implementation"/>
<Button android:id="#+id/save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="SAVE"/>
<Button android:id="#+id/resetAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/save"
android:layout_centerVertical="true"
android:text="RESET ALL"/>
</RelativeLayout>
<ScrollView android:id="#id/scroll"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#id/topPanel"
android:layout_alignParentBottom="true"
android:padding="5dp">
<!-- Your scrollable content here -->
</ScrollView>
</RelativeLayout>
I am fairly new to Android UI design. I'm attempting to mimic the UI design of the following Living Social screen shot:
What is the best way to structure the UI elements here? How can this be implemented in XML? I'm trying to use the Android Eclipse UI editor to drag and drop UI elements, but it seems that I'll need to dynamically program the UI. What is the recommended way to approaching a problem like this?
So far, I have the following:
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin">
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageView
android:id="#+id/imageViewBackground"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:scaleType="fitXY"
android:src="#android:drawable/dialog_holo_dark_frame" />
<View
android:id="#+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<View
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<View
android:id="#+id/view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:backgroundTint="#color/abc_search_url_text_normal"
android:gravity="bottom|end"
android:orientation="vertical" >
<Button
android:id="#+id/buttonBUY"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="BUY!" />
</LinearLayout>
</LinearLayout>
Questions:
I'm using a parent LinearLayout. Inside this, I have a ScrollView for the top and a LinearLayout on the bottom. The LinearLayout on the bottom has a child button for the BUY NOW button. Is this the correct parent layout scheme?
Inside the ScrollView is an ImageView which is aligned to the top of the ScrollView. Then, inside the scrollview are X number of white boxes. How can I place the inner white box view slightly on top of the ImageView? Will I need to do this programatically?
What is the recommended way to create the inner white box views? Do I need to create a separate .xml view file for each of these? Or would you recommend to use a Fragment for each of the white boxes? Or, do I need to implement a custom view class for each of the white boxes?
Thank you
Probably, you need Parallax effect and CardView controls inside linear layout control. In order to add bottom button you can use Relative layout. As for parallax, please, take a look at the following thread : How to do the new PlayStore parallax effect
I have a ScrollView on one of my screens. I want the right edge to have a shadow. I decided the easiest way to do this was to make the child of the ScrollView a RelativeLayout, and have two children of the RelativeLayout -- one being a LinearLayout that will house the layout of the screen, and the second View being the shadow.
Like so...
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- stuff -->
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/shadow"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
</ScrollView>
Unfortunately, this doesn't quite work. The ImageView is forcing its dimensions to be the size of the image file. It will not stretch vertically to be the height of the RelativeLayout. I've also tried "match_parent" to no avail. The image is a 9-patch.
Ideas?
Applying drawable content as the source of an ImageView somewhat carries with it an inherent requirement that you want the view to do what it can to accomodate the content without modifying the content itself very much. Typically, this is the behavior you would want out of an ImageView.
What you really want is the behavior you get by setting drawable content as the background of a view, for which you don't really need ImageView at all. A background is designed to simply stretch, fill, etc. to whatever size the view is. Also, since you are using RelativeLayout you can tell the view to match the bound of the view you are shadowing by adding an id and some extra layout_alignparameters.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/content_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- stuff -->
</LinearLayout>
<View
android:layout_width="11dp"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignTop="#id/content_layout"
android:layout_alignBottom="#id/content_layout"
android:background="#drawable/shadow"
/>
</RelativeLayout>
try this
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/ic_launcher"
android:scaleType="fitXY"
android:layout_alignParentRight="true"
/>
here is what I get
and code id
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:scrollbars="none" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- stuff -->
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:background="#drawable/ic_launcher"
android:scaleType="fitXY" />
</RelativeLayout>
</ScrollView>
Your problem has nothing to do with the ImageView or 9-patch itself, but rather with the fact that you're wrapping everything in a ScrollView. A ScrollView will automatically force its children direct child to wrap its content, no matter whether you tell it to FILL_PARENT or MATCH_PARENT - both do exactly the same thing by the way; the only difference is the name, which reflects better the actual behaviour of the flag.
Fortunately ScrollView provides a way to force it to fill the viewport with a flag, which will make the behaviour pretty similar to setting FILL_PARENT to a regular view. Either add the attribute android:fillViewport or use setFillViewport() from code.
Edit: Just to be clear, you need to set that flag on the ScrollView. Also, if it's the ScrollView that should have the shadow, can you not send your 9-patch as background to it? I suppose it does depend on what your actual image looks like. Regarding you comment: yes, the RelativeLayout is flexible in terms of positioning and sizing children, but any child will still be bound to the size of its parent.
I do have the feeling that some of us may be working towards something different than what you have in mind. It would definitely help to clarify things with a simple drawing.
You wanted a Shadow towards the right of your image, Then use single layout with Horizontal Orientation, It's good that you have decide to use Relative Layout. Use
android:orientation="vertical"
inside this layout, add those two images. If you still have a doubt, give me those two images or sample images, i will give you the code
Basically I have a horizontal scroll view which, by monitoring the onTouch event I'm paging (ie:each visible part of the scroll view (page) "clicks" into the next when scrolling, rather than just having a standard ScrollView. see paged scrollviews in iOS).
Now I want to find a way to have inner children inherit the same width as the scrollview (which is set at "fill_parent").
Here is my XML to help:
<HorizontalScrollView
android:id="#+id/scrollview"
android:layout_height="0dp"
android:layout_width="fill_parent"
android:layout_weight="1"
android:background="#drawable/scrollviewbg">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="fill_parent">
<ImageView
android:src="#drawable/content1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:src="#drawable/content2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:src="#drawable/content3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</HorizontalScrollView>
As you can see the scrollview is set to width fill_parent and there is a LinearLayout inside it. Now at the moment there are three images which have a set width and height similar to the width of the screen, but what I want to do is change that for 3 LinearLayouts.
Each LinearLayout needs to inherit the same width as the scroll view, so that each one takes up a whole "page" when my code is applied, as it were.
How would I do this? Is it something I will have to do using code? What code will I need?
Thank you.
I know its not direct answer, but its much easier to user ViewPager from Compatibility Package for paging functionality. You can find an example in samples folder (see src/com/example/android/supportv4/app/FragmentPagerSupport.java for source code).
Try this:
android:fillViewport="true"
<HorizontalScrollView
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_gravity="right"
android:background="#drawable/black_border"
android:id="#+id/displayText"
android:layout_width="match_parent"
android:scrollHorizontally="true"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="20dp"
android:text=""
android:textSize="20sp" />
</HorizontalScrollView>
inside horizontal scroll view, i have a text view, you can try for image view
Set all the layout_height parameters as fill_parent. You should see the image in full screen then.