Develop Reference

Android: keeping overlay textview size same as underlying imageview

I have an image (.png) that is sliced into 3 pieces top, middle, bottom.
(The pieces mentioned are not of the same size).
What I am trying to achieve is to have a layout where the original image is assembled from the above 3 pieces - but the middle piece should also display a textview over it.
In a sense, I have managed the most of the above, however with my current layout - when the text of the textview exceeds some length (horizontally or vertically) the image is then broken, as then there is a gap between middle and bottom part (vertical excess) or the middle part is shifted related to the top and the bottom (horizontal excess).
Actually what I want to achieve is that the textview will always remain the same size as the underlying middle imageview.
My layout code is as follows (The code will be used for android 4.0 +):
<?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="match_parent"
android:background="#88666666"
android:id="#+id/top_layout">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingTop="25dp" >
<ImageView
android:id="#+id/ivTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotetops" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivMiddle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotemiddles" />
<TextView
android:id="#+id/mytext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:layout_centerHorizontal="true"
android:text="ajsdhaj\n\n\n\n\n\n\nhdjajhsdjfhsdjdfjsdjfksdjfkjkfj\ndkfjkdjfkj"
/>
</RelativeLayout>
<ImageView
android:id="#+id/ivBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotebottoms" />
</LinearLayout>
</RelativeLayout>
Thanks.

do this for all three children of LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:weight="1dp"
for middle element do this for children of RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
Also you can ditch top RelativeLayout as it is redundant. Your final layout file should look like this
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="25dp"
android:background="#88666666"
android:id="#+id/top_layout">
<ImageView
android:id="#+id/ivTop"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="0dp"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotetops" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="0dp">
<ImageView
android:id="#+id/ivMiddle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotemiddles" />
<TextView
android:id="#+id/mytext"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:layout_centerHorizontal="true"
android:text="ajsdhaj\n\n\n\n\n\n\nhdjajhsdjfhsdjdfjsdjfksdjfkjkfj\ndkfjkdjfkj"
/>
</FrameLayout>
<ImageView
android:id="#+id/ivBottom"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="0dp"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotebottoms" />
</LinearLayout>

Finally, solved it by using android:layout_align... and referencing the middle imageview.
(I also, removed the unnecessary android:layout_alignParentRight="true" from middle imageview - but that was not the main problem here)
So, the final layout became:
<?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="match_parent"
android:background="#88666666"
android:id="#+id/top_layout">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingTop="25dp" >
<ImageView
android:id="#+id/ivTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotetops" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivMiddle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotemiddles" />
<TextView
android:id="#+id/mytext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:layout_centerHorizontal="true"
android:text="ajsdhaj\n\n\n\n\n\n\nhdjajhsdjfhsdjdfjsdjfksdjfkjkfj\ndkfjkdjfkj"
android:layout_alignLeft="#+id/ivMiddle"
android:layout_alignRight="#+id/ivMiddle"
android:layout_alignTop="#+id/ivMiddle"
android:layout_alignBottom="#+id/ivMiddle"
/>
</RelativeLayout>
<ImageView
android:id="#+id/ivBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotebottoms" />
</LinearLayout>
</RelativeLayout>

How to align three ImageViews horizontally in Android?

I want to show three ImageViews at the bottom of the screen with equal weight. But the size of the images is not fixed. I want to show 2 images and one should be hidden, what should I do?
How to adjust the space in between three ImageViews which should be side by side of each other, and the 3rd ImageView should not overlap the two ImageViews which are visible on the screen?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/main_imge_1"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F9F939"
android:src="#drawable/ic_launcher"
android:layout_toLeftOf ="#+id/imageView6"
android:layout_alignParentBottom="true"
android:padding="15dp" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#54F71D"
android:src="#drawable/ic_launcher"
android:layout_alignParentBottom="true"
android:padding="15dp"
android:layout_margin="10dp" />
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#1DF7AB"
android:src="#drawable/ic_launcher"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/imageView6"
android:padding="15dp" />
</RelativeLayout>

Try this way
<?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:gravity="center|bottom" >
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#F9F939"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#54F71D"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#1DF7AB"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Output

From what I was able to decrypt, you're probably trying to achieve 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"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal">
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F9F939"
android:src="#drawable/ic_launcher"
android:padding="15dp"
android:layout_weight="1"
/>
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F9F939"
android:src="#drawable/ic_launcher"
android:padding="15dp"
android:layout_weight="1"
/>
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F9F939"
android:src="#drawable/ic_launcher"
android:padding="15dp"
android:layout_weight="1"
/>
</LinearLayout>
</RelativeLayout>
The result:
The key is to use an enclosing LinearLayout to hold your ImageViews and having that LinearLayout aligned to Bottom in your RelativeLayout.

Use android:layout_weight="1" for each ImageView. And replace your RelativeLayout to Linearlayout.

5 sided dice like layout in Android

I'm currently working on an Android app and I would like to make a nice layout.
What I'm trying to achieve is the following layout:
The circles will be of equal size ofcourse. Besides that i need to be able to click them so they need to be buttons or imageviews.
What would be the best approach to achieve this kind of layout?

You could use a RelativeLayout, and say where each of the dots is supposed to be in relation to each of the others.
You could also use a LinearLayout, creating three 'rows' of buttons, the top and bottom rows containing two of the 'dots' and the middle one containing one in the center.
The layout would look something like this:
And the code would be something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/dot"
android:background="#android:color/transparent"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/dot2"
android:background="#android:color/transparent"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/dot3"
android:background="#android:color/transparent"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/dot4"
android:background="#android:color/transparent"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/dot5"
android:background="#android:color/transparent"/>
</LinearLayout>
</LinearLayout>

Try this..
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
>
<ImageView
android:src="#drawable/ic_launcher"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
/>
<ImageView
android:src="#drawable/ic_launcher"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
>
<ImageView
android:src="#drawable/ic_launcher"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
>
<ImageView
android:src="#drawable/ic_launcher"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
/>
<ImageView
android:src="#drawable/ic_launcher"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
/>
</RelativeLayout>
</LinearLayout>

Use a nest of LinearLayout or RelativeLayout. To use the images as button, then use ImageView and indicate in the xml corresponding ID for each image so you can use it in your activity.

android : Relative layout width wrap_content

I have following layout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" >
<ImageView
android:id="#+id/personal_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/dom_logo_new" />
<ImageView
android:id="#+id/round_corner_top_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/corner_white_left_top" />
<ImageView
android:id="#+id/round_corner_top_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="#drawable/corner_white_right_top" />
<ImageView
android:id="#+id/round_corner_bottom_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:src="#drawable/corner_white_left_bottom" />
<ImageView
android:id="#+id/round_corner_bottom_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/corner_white_right_bottom" />
</RelativeLayout>
There is 1 main image (personal_image) and 4 small images.
I need display main image (personal_image) at center horizontal of the screen with 4 images at its each corner (top left, top right, bottom left, bottom right). but RelativeLayout has width and height of all screen.
How can I set the width and the height of RelativeLayout the same width and height of personal_image??

<?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="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" >
<ImageView
android:id="#+id/personal_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/round_corner_top_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/round_corner_top_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/round_corner_bottom_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/round_corner_bottom_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/round_corner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
</LinearLayout>
As you are using wrap content you donot have to worry about different screen sizes.it will manage by its own.

I suggest you use a 9-patch instead of corner images which is the Android way to solve such issues.

Android Layout left and right align in horizontal layout

I am have a ImageView and a ImageButton. I have them next to each other in a horizontal layout. I am trying to make it so that the image is left aligned on the screen, and the button is right aligned. I have tried setting gravity but it doesnt seem to make a difference. Where am I going wrong?
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:gravity="left"
android:src="#drawable/short_logo" />
<ImageButton
android:id="#+id/terminateSeed"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:background="#null"
android:src="#drawable/unregister_icon" />
</LinearLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
</RelativeLayout>

Use...
<?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"
android:weightSum="1.0" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginRight="80dp"
android:layout_weight="0.5"
android:gravity="left"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/terminateSeed"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:gravity="right"
android:layout_marginLeft="80dp"
android:background="#null"
android:src="#drawable/ic_launcher" />
</LinearLayout>

Use This example if you want to use LinearLayout without giving Weight
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="right"
/>
</LinearLayout>

<RelativeLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_alignParentLeft="true"
android:src="#drawable/short_logo" />
<ImageButton
android:id="#+id/terminateSeed"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#null"
android:src="#drawable/unregister_icon" />
</RelativeLayout >

Make imageview and imagebutton wrap_content and set layout_gravity to left and right accordingly.

a RelativeLayout would solve your problem with a snap, but if you still insist on using LinearLayout (just because we're badass and do things the hard way), you do it like this:
Your parent LinearLayout is fill-parent, left-aligned, and horizontally oriented,
and contains your ImageView, and another LinearLayout.
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="left"
Second LinearLayout is fill-parent, right-aligned, and horizontally oriented, and contains your ImageButton.
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="right"

Another approach for LinearLayout, using layout_weight and gravity:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="BUTTON 1"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="BUTTON 2" />
</LinearLayout>