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.

Stop views overlapping when device is horizontal : Android

I have the following XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:padding="2.0dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:textSize="14.0sp"
android:textStyle="bold"
android:textColor="#ff449def"
android:layout_gravity="top|left|center"
android:id="#id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_gravity="left"
android:id="#id/eventvenue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/name" />
<TextView
android:layout_gravity="bottom|left|center"
android:id="#id/datetime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/eventvenue" />
<TextView
android:layout_gravity="left"
android:id="#+id/datetime2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/datetime" />
<ImageView
android:layout_gravity="right"
android:id="#id/customlistrowlogo"
android:padding="5.0dip"
android:layout_width="80.0dip"
android:layout_height="80.0dip"
android:scaleType="fitXY"
android:cropToPadding="true"
android:layout_alignTop="#id/name"
android:layout_alignBottom="#id/datetime2"
android:layout_alignParentRight="true"
android:contentDescription="logo" />
</RelativeLayout>
When the application is in vertical mode if the text in one of the textviews is too long then it will wrap on to the next line and not cover the image.
However when i am in horizontal mode then the text wont wrap on to the next line but instead gets covered by the image.
VERTICAL ::
----------------------------
| image |
|text text text tex image |
|t wraps around tex image |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
----------------------------
HORIZONTAL::
---------------------------------------------------------------
| |
| text image |
| text text text text text text text text text teimage |
| |
| |
| |
| |
| |
| |
| |
| |
---------------------------------------------------------------
unlike in the vertical one where the text drops to the next line in horizontal mode the text gets hidden behind the picture and doesnt go to the next line

You can have a separate XML file for landscape mode in layout-land folder. Whenever your configuration changes android tries to redraw the layout again.its better to have a layout for landscape view.

TextView width match drawableTop width

Is there someway to make TextView width match compound Drawable width (XML)?
For example for xml code:
<TextView
android:id="#+id/textView"
style="#style/TextIcons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/icon_contact"
android:gravity="center"
android:lines="2"
android:text="#string/contact_label" />
I get:
|---------------------|
| |-------------| |
| | | |
| | Drawable | |
| | View | |
| | | |
| |-------------| |
|[---Contact Label---]|
|---------------------|
But what i really want is:
|-----------------|
| |-------------| |
| | | |
| | Drawable | |
| | View | |
| | | |
| |-------------| |
| [---Contact---] |
| [----Label----] |
|-----------------|

You can simply get it to work by separating the image and the TextView, into a relative layout. It makes easy to specify where align some view's edges, etc.
The following code should do something close to what you want:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_contact"
android:id="#+id/imageView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp">
</ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/contact_label"
android:id="#+id/textView"
android:layout_below="#+id/imageView"
android:layout_alignRight="#+id/imageView"
android:layout_alignLeft="#+id/imageView"/>
</RelativeLayout>

Android: Placing button relative to ImageView

I want to make a part of a bitmap clickable and my layout looks like this:
________________________________
| ##### |
| ##### |
| ___________________ |
| | | |
| | | |
| | image | |
| | | |
| | | |
| ___________________ |
________________________________
I thought the easiest way to this would be to place a button over the image with a relative layout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>
But I haven't figured out how to get the button to align with the upper left corner of the image (instead of the upper left corner of the relative layout, as it does now). Is this possible with a relative layout?
Suggestions for other approaches are also welcome, I considered this:
http://blahti.wordpress.com/2012/06/26/images-with-clickable-areas/
But it seems a bit of an overkill for my simple rectangle area.

Try this:
<ImageView
android:id="#+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_alignLeft="#id/ImageView"
android:layout_alignTop = "#id/ImageView"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>

You can also use
<Button
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/image1"
android:drawableLeft="#drawable/image2t"
android:drawableRight="#drawable/image3"
android:drawableTop="#drawable/image4"
android:drawableTop="#drawable/image4"
android:textColor="#ffffff"
/>

Okay, my google-fu improved and thanks to asenovm I figured it out! The imageview has a android:adjustViewBounds property, which is by default set to false. Setting it to true adjusts the imageviews bounds to the image, so that alignLeft and alignTop work correctly for the button.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/ImageView"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ImageView>
<Button
android:id="#+id/Button"
android:layout_alignLeft="#id/ImageView"
android:layout_alignTop = "#id/ImageView"
android:layout_width="200dip"
android:layout_height="150dip"/>
</RelativeLayout>

Spacing LinearLayouts equally by the maximum height

I have a table row defined in XML file.
It contains 3 `LinearLayout' one on top of the other:
I would like to get this look:
|-------------------------------|
| |
| a |
| |
| |
|-------------------------------|
| |
| b |
|-------------------------------|
| |
| c |
|-------------------------------|
The "problem" is that the LinearLayout "a" might expand and be at different heights while "b" and "c" are always in the same height.
I would to find the maximum height of the LinearLayout's and to enforce this height to be the height of all the other LinearLayout's too, so I will get this look for each row:
|-------------------------------|
| |
| a |
| |
| |
|-------------------------------|
| |
| b |
| |
| |
|-------------------------------|
| |
| c |
| |
| |
|-------------------------------|
I tried using android:layout_weight with no success...
Any ideas?

I tried to implement this in one example.
Here is what I did :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#ff0000"
>
<TextView
android:layout_width="30dip"
android:layout_height="wrap_content"
android:text="hjadsh haksj hasjk haksj hjkas hkjas hjkas hkjas "
android:textColor="#000000"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#00ff00"
></LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#0000ff"
></LinearLayout>
</LinearLayout>
I used the textview in the first layout to show that it works as what you need.
You can also fixed the height of the layout b & c to make them of fixed height and vary layout a by setting layout_height:wrap_content
You can now customized it according to your need.

try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#00ffff"
></LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
></LinearLayout>
</LinearLayout>