i'm new on Android plattform. I'm trying make a View that divide the screen in three sections. The first section should be 200dip high, the third section should be 50 dip high and the middle section should take the remaining place in the middle. Is there any way to implement it? I tried some ways but either it doesn't work or the app crashed.
Thanks for help
Patrik
Sure. Use a RelativeLayout which looks like this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Defining the top view -->
<View android:layout_alignParentTop="true"
android:layout_height="200dip"
android:layout_width="fill_parent"
android:id="#+id/top_view"
android:background="#FFFF00"/>
<!-- Defining the bottom view -->
<View android:layout_alignParentBottom="true"
android:layout_height="50dip"
android:layout_width="fill_parent"
android:id="#+id/bottom_view"
android:background="#00FFFF"/>
<!-- Defining the view in between those views -->
<View android:layout_above="#id/bottom_view"
android:layout_below="#id/top_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FF0000"/>
</RelativeLayout>
Provided comments in the code for you.
I usually achieve this by setting layout_height/width of fixed Views to specific values (e.g. android:layout_height="200dp") and setting android:layout_weight="1" with android:layout_height="wrap_content" for dynamic View. In that case LinearLayout should be used as containing ViewGroup.
Related
I have a layout in a scrollview and I add another layout to the end of the first one. Actually I am trying to make a one page design and the rest of the other views will appear after scrolling. I tried to put linearlayout1 and linearlayout2 to another view but it didn't work. Also I set scrollview android:fillViewport="true" but it made the scrollview in screen size.
I've added an image of what I want, but it could also be one view, I mean lin1 and lin2 together.
I can set width and height for one phone but I want to do this for each screen. For example like yahoo weather app. They have done one layout for first view and start another view from the end of screen. I tried so many things but I couldn't imagine how to put layouts. Could you help me?
Thanks for your help
Here is what I want
Here is I tried:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroller"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/linearlayout1"
android:background="#android:color/holo_purple"
android:layout_width="match_parent"
android:layout_height="350dp" >
<TextView
android:text="LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearlayout2"
android:background="#android:color/holo_blue_bright"
android:layout_width="match_parent"
android:layout_height="250dp"
android:orientation="vertical">
<TextView
android:text="LinearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:background="#android:color/holo_green_light"
android:layout_width="match_parent"
android:layout_height="350dp">
<TextView
android:text="LnearLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</ScrollView>
But unfortunately I couldn't configure this for each screen size.
enter image description here
Just try this.
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/action_bar"
Instead of hardcoding the height as in:
android:layout_height="250dp"
Set android:layout_height="0dp" and use
android:layout_weight="25"
And also in the other layout use weight. Weight works like this, if you have 3 components in your container, set the weights to let's say 1, 2 and 3 => they will take in that order 1/6, 2/6 and 3/6 of the container. 6 being the sum of 1,2,3. So here instead of using heights as 350 and 250, you can set them to 0 and use weights 2.5 and 3.5 or 25 and 35.
I made a compound control, but when i add this new component into a XML layer with other standard components(e.g. TextView), when this layer is inflated, the compound control has a big margin added in the bottom separating this from the others components. I tried adding Layer_bottomMargin = 0dp without success, the only way to resolve this, is adding layer_height a fixed value (i.e. 15dp) instead "wrap_content", but this solution is not fine for me, due i want remove dinamically some component from my compound control.
The code of my compound control:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left|top"
android:clickable="false"
android:background="#CCCCCC"
android:layout_marginTop="#dimen/fieldset_margin"
>
<TextView
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/title_default"
android:textSize="14sp"
/>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#color/fieldset_lines_shadow"
/>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#color/fieldset_lines_light"
/>
</LinearLayout>
And the code of my layer including this compound control:
<?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="fill_parent"
android:background="#C8D5F6FF"
android:gravity="top"
android:layout_margin="8dp"
>
<com.apps.example.Header
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/fieldset_text_secondary"
android:text="nananananan"
android:textSize="10sp"
android:layout_marginLeft="#dimen/fieldset_margin"
/>
</LinearLayout>
Sorry but this is my first post and i can't upload images.
Thanks in advance.
I resolved partially by overwriting the onMeasure method in my compound control class. I did not this before because in the official documentation:
http://developer.android.com/guide/topics/ui/custom-components.html
says that is not necessary overwrite this method when is creating a compound control.
Anyway, this is partial solution due when an individual control of the compound is programmatically turned invisible (GONE) occurs the same issue mentioned in the original post but with smaller margin space.
I will continue trying to resolve this, but for now, this is my solution.
Thanks!
I have a Layout which consists of a RelativeLayout, with a TableLayout holding 15 rows. Basically this is supposed to be a board game.
Each row has 15 RelativeLayout with a ImageView inside each of them.
The three first ImageViews match up evenly, but from the fourth one the ImageViews get a bit smaller height, leaving a small white border / line between the rows.
I have no Idea how to fix this, can anyone help?
As you can see from the image below, the three first squares are in full height, whilst the rest have a line underneath them.
Here is a small part of the code, all the rows are exactly the same so no need to paste all 15:
<?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="wrap_content">
<TableLayout
android:id="#+id/board"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="0dip"
android:layout_margin="0dip"
android:fitsSystemWindows="true">
<!-- 15 rows like this -->
<TableRow
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_margin="0dip"
android:padding="0dip">
<!-- 15 relativeLayouts per Row -->
<RelativeLayout
android:id="#+id/boardTile_15_1"
android:layout_weight="1">
<!-- One ImageView per RelativeLayout -->
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="0dip"
android:padding="0dip"
android:src="#drawable/tile"
android:adjustViewBounds="true">
</ImageView>
</RelativeLayout>
<!-- End one RelativeLayout -->
</TableRow>
<!-- End one tableRow -->
Hard to say without testing, but a useful trick to 'debug' complex views like this, is adding background color to relevant subviews (i.e. RelativeLayouts containing your ImageViews), just to check who contains that padding.
You may also simplify as much as you can, for instance, you probably wouldn't need to wrap the ImageViews inside RelativeLayouts.
That said, my guess is that ImageViews need their scaleType attribute to be set, they'd look something like.-
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/tile"
android:adjustViewBounds="true" />
There's no need to set padding/margin, as they're 0 by default, and remember that fill_parent is deprecated from API level 8.
I am thinking to build an app which will have the same grid layout like in the picture, but I cant figure out what layout I should use.
GridView, or something like that?
It is possible using StaggeredGridView . Check out below repos on github
https://github.com/maurycyw/StaggeredGridView
https://github.com/chrisjenx/StaggeredGridView/tree/master/demo
Simple enough to do it with LinearLayout:
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Stack rows vertically -->
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<!-- First row, two items -->
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<!-- First item, 50% of width -->
<FooView android:id="#+id/foo1"
android:layout_width="0px"
android:layout_weight="1"
android:layout_height="wrap_content" >
<!-- Second item, 50% of width -->
<FooView android:id="#+id/foo2"
android:layout_width="0px"
android:layout_weight="1"
android:layout_height="wrap_content" >
</LinearLayout>
<!-- Next row, just one item -->
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<!-- Third item, 100% of width -->
<FooView android:id="#+id/foo2"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</LinearLayout>
<!-- And so on... -->
</LinearLayout>
</ScrollView>
Obviously, the exact nature of "FooView" is up to you, as are decorative borders, shadows, etc. In practice, you'd want to do this programatically, but this static xml layout shows you what you're after.
GridLayout also would work, but it's only available in 4.0 and above, unless you want to start using the compatibility library. Since LinearLayout will do the job, that's what I would use. RelativeLayout would probably also work, but I've never been able to get the damn thing to work, myself.
I'm not sure exactly what they use, but you can achieve the same effect with either a GridLayout or a ListView.
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