Develop Reference

Layout issues problematic with drag and drop

I have 3 containers. A big one where I have all my ImageView and 2 other ones where the user needs to categorize.
I use LinearLayout.
Questions: the 3rd image view (beans) is shown reduced. How can I have regular imageview with space between them and if there are no space left, I'd like to to the next row.
Then I drag & dop the almond, apple, banana image views to the 2 container and get the followig result.
I would like the banana to appear in the 2nd row.
I have the same questions than above:
-how to have regular size imageviews
-how can I get spaces between (cosmetic)
-how to show the 3rd image on the 2nd row of my container
Are they recommendations on the way to have a nice look and feel?
I include below my layout file:
<?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:orientation="horizontal">
<LinearLayout
android:id="#+id/topleft"
android:layout_width="300dp"
android:layout_height="300dp"
android:background="#drawable/shape">
<ImageView
android:id="#+id/myimage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/almond" />
<ImageView
android:id="#+id/myimage2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/apple" />
<ImageView
android:id="#+id/myimage3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/banana" />
<ImageView
android:id="#+id/myimage4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/beans" />
</LinearLayout>
<LinearLayout
android:id="#+id/bottomleft"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_marginLeft="20dp"
android:background="#drawable/shape"
android:orientation="horizontal"/>
<LinearLayout
android:id="#+id/topright"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_marginLeft="20dp"
android:background="#drawable/shape"
android:orientation="horizontal"/>
<LinearLayout
android:id="#+id/bottomright"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_marginLeft="20dp"
android:background="#drawable/shape"
android:orientation="horizontal"/>
</LinearLayout>

I think, after thinking about it and some testing, that I need to manage it manually: position, width/height, ....
Let me know if I have other options.

Relative Layout containing FrameLayout and few other components

firstly excuse me for terrible naming with the subject.
I have the following layout setup:
<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=".PersonDetails" >
<FrameLayout
android:id="#+id/bannerLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/coverImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/default_cover">
</ImageView>
<ImageView
android:id="#+id/thumbImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|bottom"
android:scaleType="fitStart"
android:src="#drawable/fingerprint_ic" />
</FrameLayout>
<TextView
android:id="#+id/textName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textColor="#55FF55"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
What i am trying to achieve is to have a banner (much like facebook cover that spans across the top of the screen). And have a thumbnail photo at the corner left of the banner.
The height of the banner should only takes up about 1/4 of the height of the screen. Since i would need the rest of the space for other components.
Immediately below the banner i would like to have a TextView (on the leftside) and a button on the rightside.
So far i can only able to put the thumbnail on top of the banner, but i don't know how to place it on the lower left (i could set it using marginTop but, i believe this is not the correct way of doing it).
Does anyone know how to achieve this? Thanks.
EDIT #1:
Here is the UI

From your description i think you want to make something like this:
I used a linearlayout with 2 layouts as content. Using the android:layout_weight attribute we can make the top layout take up 1/4th of the space, while the bottom layout has the rest to use.
Then to position the icon in the top layout we use alignParentBottom to make it stick to the bottom.
<LinearLayout 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=".PersonDetails"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/bannerLayout"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/coverImage"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/default_cover"></ImageView>
<ImageView
android:id="#+id/thumbImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scaleType="fitStart"
android:src="#drawable/fingerprint_ic" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="3"
android:layout_margin="10dp">
<TextView
android:id="#+id/textName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="40dp"
android:text="Large Text"
android:textColor="#55FF55"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
</LinearLayout>

Top and bottom images overlay on imageview Issue

I want to make my layout like this as per below picture. this image i am able to see in iphone devices.
Here i used frame layout to achieve make overlays of top and bottom image bar on imageview but after using frame layout i can only able to see top imagebar overlay not bottom image bar? why its happens?
Forgot about the content of top and bottom iamge bar.. i am focusing to achieve this functionality.
Please make me correct if i am wrong in my code.
xml file code :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<include
android:id="#+id/top_bar"
layout="#layout/item_below_image_bar"
android:gravity="top" />
<it.sephiroth.android.library.imagezoom.ImageViewTouch
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="fitXY" />
<include
android:id="#+id/below_bar"
layout="#layout/item_below_image_bar"
android:gravity="bottom" />
</FrameLayout>

per android documentation
Child views are drawn in a stack, with the most recently added child on top.
so you need to arrange your layout as follows
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<it.sephiroth.android.library.imagezoom.ImageViewTouch
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="fitXY" />
<include
android:id="#+id/top_bar"
layout="#layout/item_below_image_bar"
android:gravity="top" />
<include
android:id="#+id/below_bar"
layout="#layout/item_below_image_bar"
android:gravity="bottom" />
</FrameLayout>
in this case the actual location of the view is not determined by the order that the views are declared in the xml. For a linear layout this would be true however not so with the FrameLayout, in a framelayout the location is determined by gravity so your views will still be placed in the correct locations and they will be loaded in order they were declared, so first is the image view, then the first include is placed on top of that, then the second include is placed on top of that (however in this case they dont intersect so it doesn't matter).
edit2: after chatting with sam we were able to figure out the problem here's our solution
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:id="#+id/greenImage"
android:src="#2dff3d"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="14dp"
android:layout_marginRight="14dp"
>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_alignParentRight="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Label"
android:id="#+id/textView"
android:layout_centerVertical="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginLeft="14dp"
android:layout_marginRight="14dp">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_alignParentRight="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Label"
android:id="#+id/textView1"
android:layout_centerVertical="true"/>
</RelativeLayout>
</FrameLayout>
note the usage of layout_gravity as apposed to just gravity.

Layout: background picture stretched

I have difficulties with my layout.
As my first dev project, I'm trying to make a simple chronometer.
I want to have a picture of a chronometer in the background and the start and stop button
at the bottom of the application, side by side and filling the width of the screen.
Here is my best shot, but I'm not satisfied.
All widgets are placed properly but ...
My background is streched and my buttons seem vertically compressed, even the text at the bottom is a bit cropped.
I found that if I change these lines
android:layout_width="fill_parent"
android:layout_height="fill_parent"
by
android:layout_width="wrap_content"
android:layout_height="wrap_content"
The background is ok, the buttons too .. but all widgets are placed in the center of the Activity.
How can I fix this ?
By the way if I want to have my buttons side by side, did I choose the better solution ?
Thanks for your help !
Charles.
... and now my xml ....
<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:orientation="vertical"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2" >
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="START" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="STOP" />
</LinearLayout>
I tried relativeLayout.
I don't know how to have two buttons of the same size without using a padding, I don't think it's a good idea if you want your app to run on different screens.
Anyway I come up with this, but I still have my streched image and my buttons don't have the same size.
<RelativeLayout 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/background"
tools:context=".Chronosv1" >
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Start" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/button1"
android:text="Stop" />

Try RelativeLayout ;) I think this is much easier to handle than a LinearLayout. Maybe you can upload a picture how it looks like and I will give you a relativelayout solution ;)

Can you try this out? Should work IMO.
It is a better/fool-proof way to obtain your layout.
<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"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:text="Start" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:text="Stop" />
</LinearLayout>
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layout1" />
</RelativeLayout>

I finally found the solution.
First problem: my 9 patch image hid my other component.
Solution: add android:padding="0dip" in your linearlayout ... here the subject that gave me my answer (Android layout broken with 9-patch background)
Second problem: why my picture was streched whereas I designed it at the exact size of the screen. This one was a silly question ... it was because of the action bar and the other bar above (with battery level and other stuff).
To get rid of theses bars (included in the theme) use a different version of the Theme in the manifest.
I choose: Theme.Light.NoTitleBar.Fullscreen.
Problems solved.

down image[Reflaction one] not displaying as upper image

In my application i have two images original upper image and down reflection one. SO i made sample application and it is working fine as specified in this screenshot.
now i want to implement same in my application which has complex layout file. SO the code snippt is as follow. but 2nd image is always coming small with no respect of padding. CEnter point of both image is same but the width of down image is most probably half of it. I tried to play with margin but even if i increase it there is no change. let me know if you have any question. the screen and code snippt of my real application and image is as follow. i do not know why it is not working same way as it is working in sample app.
<RelativeLayout android:id="#+id/LinearLayout02"
android:layout_gravity="center" android:layout_height="fill_parent"
android:layout_width="wrap_content" android:orientation="vertical">
<View android:layout_width="match_parent" android:layout_height="32.5px"
android:layout_alignParentTop="true" android:id="#+id/top_padding"
android:background="#FFFF0000"></View>
<VideoView android:id="#+id/video_view"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:layout_width="fill_parent" android:visibility="gone"
android:layout_below="#+id/top_padding"
android:layout_height="match_parent">
</VideoView>
<ImageView android:id="#+id/video_image_view"
android:layout_gravity="center" android:layout_below="#+id/top_padding"
android:layout_above="#+id/bottom_padding" android:layout_height="match_parent"
android:baselineAlignBottom="true"
android:src="#drawable/anna"
android:layout_width="match_parent">
</ImageView>
<View android:layout_width="match_parent" android:layout_height="32.5px"
android:layout_alignParentBottom="true" android:id="#+id/bottom_padding"
android:background="#FFFF0000"></View>
<ImageView android:id="#+id/video_image_view_reflection"
android:layout_below="#+id/video_image_view" android:layout_width="fill_parent"
android:background="#FF00FF00" android:layout_alignBaseline="#+id/video_image_view"
android:layout_marginTop="32.5px"
android:layout_marginBottom="32.5px"
android:src="#drawable/anna"
android:layout_height="match_parent">
</ImageView>
</RelativeLayout>

Try this modifications:
<ImageView android:id="#+id/video_image_view"
android:layout_gravity="center" android:layout_below="#+id/top_padding"
android:layout_above="#+id/bottom_padding" android:layout_height="fill_parent"
android:baselineAlignBottom="true"
android:layout_centerInParent="true"
android:src="#drawable/anna"
android:layout_width="wrap_content">
</ImageView>
<View android:layout_width="fill_parent" android:layout_height="32.5px"
android:layout_alignParentBottom="true" android:id="#+id/bottom_padding"
android:background="#FFFF0000" ></View>
<ImageView android:id="#+id/video_image_view_reflection"
android:layout_below="#+id/video_image_view" android:layout_width="wrap_content"
android:background="#FF00FF00" android:layout_alignBaseline="#+id/video_image_view"
android:layout_marginTop="32.5px"
android:layout_marginBottom="32.5px"
android:layout_centerInParent="true"
android:scaleType="matrix"
android:src="#drawable/anna"
android:layout_height="fill_parent" >
</ImageView>