Develop Reference

Android: Problems with adjusting view size in an ImageButton

I'm trying something that should be simple, an imageButton and some text that says something about it. My problem is, the view of the imageButton is bigger than the image itself. I'm certain that the actual image is not like this (I've tried with several images and the result is the same). By searching online, the solution I've found is to insert the attribute "adjustViewBounds". That seemed reasonable but it didn't work. Here I leave my code and an image of how the result looks.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|top">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="fitXY"
android:scaleX="0.2"
android:scaleY="0.2"
android:src="#drawable/icon1"
android:padding="0dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DEFAULT!"
android:textSize="20sp"
/>
</LinearLayout>
image

The problem is using scaleX and scaleY to adjust the size. The button changes it's visible size, but the rest of the layout acts as if it were the original full scale.
I'd suggest using a different method of defining the size, for example:
<ImageButton
android:id="#+id/imageButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:background="#android:color/transparent"
android:scaleType="fitXY"
android:src="#drawable/icon1"
android:padding="0dp"/>

How to scale Android ImageView width according to layout_alignTop and layout_alignBottom

I'd like to have a simple player view with image, name and status. The image will be loaded via Google+.
The Problem I have is that with big images my ImageView get's far too wide and pushes my texts out of sight.
Here is an example to show how it looks like:
https://dl.dropboxusercontent.com/u/11037539/unwanted_padding.png
Layout:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/playerPane"
android:background="#color/player2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/playerName"
android:layout_alignBottom="#+id/playerStatus"
android:id="#+id/playerImage"
android:src="#drawable/ic_contact_picture"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/playerImage"
android:id="#+id/playerName"
android:text="Player"
android:textColor="#android:color/black"
android:singleLine="true"
android:textStyle="bold"
android:paddingTop="#dimen/player_padding"
android:paddingBottom="#dimen/player_padding"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/playerName"
android:layout_alignLeft="#+id/playerName"
android:id="#+id/playerStatus"
android:text="status"
android:singleLine="true"
android:paddingBottom="#dimen/player_padding" />
</RelativeLayout>
I've tried all ImageView.scaleTypes, but so far nothing works..
Thanks a lot for your help!

You just need to define your width. It should fix it. So change this line
to something like:
<ImageView
android:layout_width="75dp" //OR WHATEVER LOOKS BEST

ScaleType is only really useful when the imageview's size is smaller than the image. As previously mentioned, set the size and then you can use the scaleType to fix how the image should be scaled within the now smaller area.

creating arrow keys on center of screen

i am writing an application to control a robot
for controlling i need ( up, down , right, left ) keys
i used eclipse designer to create it but maybe it is not possible
i want to create something like this :
how can i create buttons like this in center of screen ?
is there a better way to create arrow keys on android ?

Here you go :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<View
android:id="#+id/view1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/view1"
android:layout_centerHorizontal="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/view1"
android:layout_centerHorizontal="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/view1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/view1"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
Of course, you can replace ImageView with anything else like an ImageButton.
Be sure, if you change the name of the first view, tu update the name in the 4 ImageView.
And be aware that the corners of each image are overlapping each other.

I suggest using ImageButtons and setting the background for each to a State List Drawable xml file. This will change the image between states(focused, pressed, etc).
The tricky part would be positioning each so that they orient themselves in this sort of "box" you have above.
Just create some PNGs of each button in their positions. Up button points up, left points left etc. Then use RelativeLayout to position them with respect to each other. You can also use Buttons as well

Android RelativeLayout Design issues

I designed one layout which have total 4 RelativeLayout one is outer cover and 3 are child of it. When I put White color in the outer layout than no spaces are left but when I put 9patch image as drawable image than little default padding/margin are left. Is there any properly which solve the padding/margin issue? I have tried margin negative but it will hide bit layout I think it is not proper solution, here is my layout
when I put white color as background than my layout look like
Here is the following code of my layout
<RelativeLayout
android:id="#+id/DetailSection1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/HeaderLayout"
android:layout_toLeftOf="#+id/DetailSection2"
>
<TextView
android:id="#+id/lblRestaurantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/DetailSection1"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:textColor="#color/heding_font"
android:textSize="#dimen/headingFont"
android:text="Restaurant Name" />
<ImageView
android:id="#+id/imgpin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblRestaurantName"
android:layout_margin="5dp"
android:src="#drawable/pin" />
<TextView
android:id="#+id/lblAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblRestaurantName"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgpin"
android:text="Address"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
<ImageView
android:id="#+id/imgphone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblAddress"
android:layout_margin="5dp"
android:src="#drawable/phn" />
<TextView
android:id="#+id/lblMobile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblAddress"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgphone"
android:text="Mobile"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
<ImageView
android:id="#+id/imgstar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblMobile"
android:layout_margin="5dp"
android:src="#drawable/star" />
<TextView
android:id="#+id/lblStar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblMobile"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgstar"
android:text="Star"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/DetailSection2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignBottom="#+id/DetailSection1"
android:layout_toLeftOf="#+id/DetailSection3"
android:layout_toRightOf="#+id/lblStar" >
<ImageView
android:id="#+id/imgmore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/read_more" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/DetailSection3"
android:layout_width="95dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/HeaderLayout"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:background="#drawable/photo_cover" >
<ImageView
android:id="#+id/imgRestaurant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/lblMobile"
android:layout_margin="5dp"
android:src="#drawable/rihanna" />
</RelativeLayout>
</RelativeLayout>

From the 9-patch drawable image you posted:
The bottom line which indicates the horizontal data population on the view wasn't drawn from the starting point of left.
I am not sure about it. And I know I wasn't clear in explaining the above line.
Just check this:
Consider the below 9-patch is used as a background for a TextView. If you put some text in it, it will start from the area where the bottom line is drawn. Which mean it will start from the left and go all the way to right.
If you use the following 9-patch as a background and try the same thing which you did above. Will result in Text not written from the left. It leaves a bit padding.
That is the reason why you get such result. Of course I am 100% sure about it.
So, just to find out if this works. Try changing the bottom line to fill complete image.

I think you better apply the background color for which layout you want exactly.And one more keep the code so that we can understand easily what is your issue.

Android: layout issue with Image Views

I am keeping three image views with 3 different images of the same height. My code is as mentioned below..
<LinearLayout
android:id="#+id/LinearLayout06"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left" android:layout_gravity="center_vertical|center_horizontal">
<ImageView
android:id="#+id/stopServiceButton"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#null"
android:paddingRight="5dp"
android:src="#drawable/stop_service_button_selector" />
<ImageView
android:id="#+id/calibrateButton"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#null"
android:padding="5dp"
android:src="#drawable/calibrate_button_selector" />
<ImageView
android:id="#+id/doneButton"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#null"
android:padding="5dp"
android:src="#drawable/done_button_selector" />
</LinearLayout>
In large layouts i was able to manage these images(i dont have to use weight parameter for it) but for small layout i have to keep the weight parameter as one to fit them in the screen, but then the height changes as shown below.
Can someone help me out in this ?

the android:adjustViewBounds="true" preserves the aspect ratio of the images. since the width is to wrap content, the height gets reduced accordingly.

To reduce the blurring effect that you mentioned in your comment, you can try setting android:filter the attribute to the drawables.