Develop Reference

Why gravity doesn't center all of my views?

I was expecting all my TextView to be vertically centered in my RelativeLayout but this is only the case for the logo one. The others are anchored to the top of the latter.
Image
Here's my layout :
<?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="72dp"
android:gravity="center_vertical">
<TextView
android:id="#+id/logo"
android:layout_width="40dp"
android:layout_height="40dp"
android:text="TextView" />
<TextView
android:id="#+id/stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/logo"
android:layout_toRightOf="#+id/logo"
android:text="TextView" />
<TextView
android:id="#+id/eta"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/stop"
android:layout_toRightOf="#+id/stop"
android:text="TextView" />
<TextView
android:id="#+id/direction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/stop"
android:layout_toEndOf="#+id/logo"
android:layout_toRightOf="#+id/logo"
android:text="TextView" />

The attribute layout_toEndOf performs layouting as follows:
Positions the start edge of this view to the end of the given anchor view ID. Link
Which means that all your TextViews start edges align with the logo's end.
As a starting point, just remove all layout_toEndOf attributes.
Then your layout should look something like this:
+--------------+
| | +-----------+
| | | stop |
| | +-----------+ +-----------+
| logo |/* no space */ | eta |
| | +-----------+ +-----------+
| | | direction |
| | +-----------+
+--------------+
More precisely, logo is vertically centered, same as eta. Since your layout code explictly places stop and direction directly to the right of logo, therefore direction is below stop.

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.

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>

Android Layout design help!

i am learning android development, and i am kinda confused when it comes to designing the application, please advise on what is the best way to reach the layout in the image below?
------------------
| * |
| Icon * Icon |
| * |
| ************** |
| * |
| Icon * Icon |
| * |
------------------
The starts in the layout indicates a Photoshop line image.
I hope you get the picture since i`m not allowed to post images yet.
Thanks.

You can create the same kind of layout using below code. For creating this layout, you can use android:layout_weight="1" with android:layout_width="0dp" to have all views with equal layouts if they lies in same layout. In your case, you have 2 images in the same row, so mention these attributes while taking imageviews in layout.
For your case, you can use:
<LinearLayout
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_weight="1"/>
<ImageView
android:layout_width="0dp"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_weight="1"/>
<ImageView
android:layout_width="0dp"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>