Develop Reference

How to display Layout like below in android

Here i want to create a layout that contains following by using fragment how can i do this?
Should i use for top portion or can i use fragment? which one is the best approach. And instead of swipe tab i want to display .(dot) in the bottom. e.g. Android home screen bottom 3-5 dots.
+-----------------------------------------------+
| +------------+ |
| | | Line 1 |
| | Image | Line 2 |
| | | Line 3 |
| | | (Static) |
| +------------+ |
|-----------------------------------------------|
| |
| |
| |
| |
| Some Content goes here |
| (Swipe tab) |
| Swipe to next -->>> |
| Here dot(.) represent the pages |
| |
| |
| |
|____________________._._.______________________|
| |
| 3 images goes here |
| (Static Horizontal scroll able) |
+-----------------------------------------------+

Hmmm...i tried it...and here is the out put...
And here is the source...
<TableLayout 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:id="#+id/news_item_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/news_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="Test image"
android:padding="20dp"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your headline..."
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your text here..."
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your text here..."
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FFCCCCCC" >
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Inner contents..."
android:textAppearance="?android:attr/textAppearanceLarge" />
</FrameLayout>
<HorizontalScrollView
android:id="#+id/horizontalScrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Scrollable contents here..."
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</HorizontalScrollView>
NOTE: You need to put your tabs or any thing else in Inner contents section. And whatever contents in lower scrollable panel by you self. I just tried to make a structure for you...
Hope this helps...

You must put three layouts . In first linear horizontal layout place imageview and text views.
In the second one place a horizontal scrollable view with buttons or something suits to you contents with match parent widht to each . place page indicator tyo each button.
Third one is normal scrollable view or use gallery view to place you content.

ImageView is resizing when dragging outside the layout

I am creating an android application that adds an image/clipart on the picture. Everytime I drag the imageview on the right and bottom side of the layout, it automatically resize the image.
This is the sample scenario:
When I drag the clipart outide (TOP and Left Side of the layout), it doesnt resize the image but it cut the image (ClipArt1), but everytime I drag the image on the right and bottom side of the layout, it automatically resize, it does not exceed on the layout.
+-----------------------------+
| * ClipArt* |
| * 1 * |
| ********** |
| |
| ********* |
| *ClipArt* |
| * 2 * |
| ********* ****** |
| * CA3* |
| ****** |
+-----------------------------+
This is my XML layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.61"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/imgstage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:tag="stage" >
<ImageView
android:id="#+id/imgView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/tap" />
</RelativeLayout>
</LinearLayout>

Forgive me if this is incorrect - I experienced this in the past. My solution was to switch the root element of my dynamic container to a fixed-size RelativeLayout... Does this work?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.61"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/imgstage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:tag="stage" >
<ImageView
android:id="#+id/imgView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/tap" />
</RelativeLayout>
</LinearLayout>

How can I fix this RelativeLayout?

I'd like to see the following layout work:
--------------------------
| ----------- |
| |TextView1| |
| ----------- |
| ---------------------- |
| |EditText1 | |
| ---------------------- |
| ----------- |
| |TextView2| |
| ----------- |
| ---------------------- |
| |EditText2 | |
| ---------------------- |
| ----------- |
| |TextView3| |
| ----------- |
| ---------------------- |
| | | |
| | | |
| | | |
| | ImageView | |
| | | |
| | | |
| | | |
| |--------------------| |
| --------- -------- |
| |Button1||Button2| |
| --------- -------- |
| ---------------------| |
| | ButtonBar | |
| ---------------------- |
|------------------------|
My issue: I can't make Button1 and Button2 work in this layout. They either go below the ImageView, hidden behind the ButtonBar or they get shrunk to nothing between the bottom of the ImageView and the top of the ButtonBar.
The current XML-code:
<?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"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/footer" >
<TextView
android:id="#+id/textPostUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="user" />
<EditText
android:id="#+id/editPostUser"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textPostUser"
android:hint="user"
android:maxLength="40" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/textPostComment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/editPostUser"
android:text="comment" />
<EditText
android:id="#+id/editPostComment"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textPostComment"
android:hint="comment"
android:maxLength="200"
android:maxLines="3" >
</EditText>
<TextView
android:id="#+id/textPostCharacterCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/editPostComment"
android:text="characters"
android:textSize="5pt" />
<ImageView
android:id="#+id/imagePostResult"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/textPostCharacterCount"
android:src="#drawable/camera_icon" />
<Button
android:id="#+id/buttonPostRotateLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/imagePostResult"
android:text="left" />
<Button
android:id="#+id/buttonPostRotateRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/imagePostResult"
android:layout_toRightOf="#id/buttonPostRotateLeft"
android:text="right" />
</RelativeLayout>
<LinearLayout
android:id="#+id/footer"
style="#android:style/ButtonBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonPostSave"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="save" />
</LinearLayout>
</RelativeLayout>
How do I make the left/right buttons appear below the imageview and above the buttonbar?
I'd like to at least keep the fill_parent in both height/width of the ImageView as it scales pretty nicely on different resolutions.

Your ImageView is set to fill_parent so there is no space left for the buttons below. You can switch the buttons and the imageview so the imageview takes all the space left when the buttons are already included:
<Button
android:id="#+id/buttonPostRotateLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="left" />
<Button
android:id="#+id/buttonPostRotateRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/buttonPostRotateLeft"
android:text="right" />
<ImageView
android:id="#+id/imagePostResult"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/buttonPostRotateLeft"
android:layout_below="#id/textPostCharacterCount"
android:src="#drawable/camera_icon" />

Why not putting the two buttons inside a horizontal LinearLayout?

Your buttons are set to android:layout_alignParentBottom="true", as well as the linear layout. The latter will hide the former since it comes last in the xml code.
Try putting your buttons in a linear layout and align it above the footer android:layout_above="#+id/footer"

how to put a view off-screen?

Is it able to put views to the left, but off-screen?
I want display three views(images) but only the second fit on the screen, something like:
+---------------------+
| Screen |
+-------+ +-------+ +-------+
| | | | | |
| image | | image | | image |
| | | | | |
+-------+ +-------+ +-------+
| |
+---------------------+
I would like to start be visible in this form.

You can use several approaches:
Gallery (http://developer.android.com/resources/tutorials/views/hello-gallery.html)
HorizontalScrollView (http://developer.android.com/reference/android/widget/HorizontalScrollView.html)
ViewPager (http://android-developers.blogspot.com/2011/08/horizontal-view-swiping-with-viewpager.html)
The choice now depends on what exactly you want to perform in your app.
Hope this helps!
In case you need something more specific, please shoot it!

In xml, try using:
android:paddingLeft

you can also do it with RelativeLayout. i think it is kind of like floating div in HTML, very funny.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout android:id="#+id/left_body"
android:gravity="center"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:background="#drawable/house"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
<RelativeLayout android:id="#+id/right_body"
android:gravity="center"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:background="#drawable/house"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
<RelativeLayout android:id="#+id/main_body"
android:layout_toRightOf="#id/left_body"
android:layout_toLeftOf="#id/right_body"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView android:background="#drawable/house"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</RelativeLayout>

Android AppWidget layout troubles with ellipsize

I'm writing an app-widget that displays some numbers, each with label in front of it.
The layout looks like this:
.-----------------------------.
| Label1 | AAAAAAAAAAA |
| LongerLabelLabel2 | BBBBBBB |
| LongLabel3 | CCCCCCCCCC |
'-----------------------------'
There is one outer (vertical) LinearLayout, and each row is a horizontal LinearLayout with two TextViews.
The problem is that the numbers get ellipsized if the width of the label and the number is too wide for the widget. I want the labels to get ellipsized.
The above situation for instance, would end up like this:
.-----------------------------.
| Label1 | AAAAAAAAAAA |
| LongerLabelLabel2 | BBBB... |
| LongLabel3 | CCCCCCCCCC |
'-----------------------------'
instead of the desired
.---------------------------.
| Label1 | AAAAAAAAAAA |
| LongerLabelL... | BBBBBBB |
| LongLabel3 | CCCCCCCCCC |
'---------------------------'
I can't for my life figure out how to solve this. Any help is appreciated.
My current layout is the following:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widget"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="0dip"
android:orientation="vertical"
style="#style/WidgetBackground">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ROW1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="7dip"
android:paddingBottom="0dip"
android:paddingRight="10dip"
android:paddingLeft="10dip"
android:orientation="horizontal">
<TextView android:id="#+id/NAME1" android:singleLine="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="end" style="#style/Text.account" />
<TextView android:id="#+id/BAL1" android:singleLine="true" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="right" style="#style/Text.balance" />
</LinearLayout>
... (more similar rows in the outer layout)
</LinearLayout>

I suspect your problem, in part, is that you have android:layout_width="wrap_content" for your label. I would not expect it to ellipsize at all, since there is enough room to show it.
I would switch away from LinearLayout to RelativeLayout. Define your number "column" as android:layout_alignParentRight="true" and android:layout_width="wrap_content". Define your label "column" as android:layout_alignParentLeft="true", android:layout_toLeftOf="..." (where ... is your number column), and android:ellpsize="end". That should give the number all the space it needs and constrain the label, forcing it to ellipsize.