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
Related
I want to achieve something of the format as shown in the image. The blue part is background, the image of the guy and girl is a ImageButton. The original images for these are 88x128 (trainer000, trainer001). I want to rescale the ImageButton such that the image covers the entire height and the width is adjusted accordingly. Now I found 2-3 ways to do so but they make use of a separate class to calculate width. I want to know if there is a way to do it purely in the xml file itself.
What I used:
`
<ImageButton
android:id="#+id/maleimage"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:layout_alignParentLeft="true"
android:src="#drawable/trainer000" />
<ImageButton
android:id="#+id/femaleimage"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:layout_alignParentLeft="true"
android:src="#drawable/trainer001" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textColor="#000000"
android:text="Are you a boy or a girl?"
android:textAppearance="?android:attr/textAppearanceMedium" />
`
What I want is this:
http://imgur.com/9D6XZUT
EDIT: Found the solution. I just used Studio's Layout editor.
What I am trying to do seems very basic in theory, but cannot find any information on this on the web. I have a series of clickable imagebuttons, containing images. I would like it so that when a user clicks on one of these imagebuttons, it becomes highlighted with a simple border.
To achieve this, I have created a basic solid-colour 62x62 pixel image and wish to place it -behind- my original 60x60 imagebutton. This will create the illusion of a border. My plan is to set it to non-visible by default and then have the code set it to visible on click. Sounds straight-forward.
However, in my layout, the solid-colour image always sits on top of the original image, and I cannot find any way of sending it behind. I would rather not do this in code, I am sure this is a layout issue (but will set it in code if I absolutely must).
Relevant section of layout, where the ImageView needs to sit behind the player 1 ImageButton:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="20dp"
android:paddingBottom="20dp" tools:context=".MainActivity"
android:id="#+id/Form_PlayerSelection"
android:background="#drawable/dark_wood">
<ImageButton
android:id="#+id/btnPlayer1"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/player_blank"
android:adjustViewBounds="false"
android:clickable="true"
android:cropToPadding="false"
android:padding="0dp"
android:scaleType="fitXY"
android:layout_marginLeft="15dp"
android:layout_marginTop="50dp" />
<ImageView
android:id="#+id/p1border"
android:layout_width="62dp"
android:layout_height="62dp"
android:src="#drawable/selectborder"
android:clickable="false"
android:cropToPadding="false"
android:padding="0dp"
android:scaleType="fitXY"
android:layout_marginLeft="13dp"
android:layout_marginTop="48dp"/>
<ImageButton
android:id="#+id/btnPlayer2"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/player_blank"
android:adjustViewBounds="false"
android:clickable="true"
android:cropToPadding="false"
android:padding="1dp"
android:scaleType="fitXY"
android:layout_marginLeft="85dp"
android:layout_marginTop="50dp" />
</RelativeLayout>
Each child is added in order and to the top of the ViewGroup. So, the bottom element should be your first child.
I'm trying to create my first real Android app, the code seems easy enough, but the layout is giving me problems.
My app will be a drag and drop application, very simple, just drag shapes to the correct place in the "puzzle". Here's an example of how it looks right now:
What I have currently is 4 ImageViews, one for the "empty puzzle" at the top, then 1 for each of the shapes below. I think the correct way to do this is to have each of the empty spots in the puzzle be an ImageView (what the arrow is pointing to, for example, should be an ImageView)
If I am correct on this, I need to "layer" ImageViews, put 3 "empty shape" image views over the "puzzle" image view at the top. The problem is I can't find any examples or suggestions for this anywhere online. So my questions are:
Does it make sense to have 3 ImageViews sitting on top of a "background" ImageView, or is there a more correct way to do this?
If I'm heading in the right direction, could someone explain/examplify how one builds ImageView layers?
XML for my current screen:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/emptyPuz"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/EmptyPuzzle" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizantal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:src="#drawable/Circle" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:src="#drawable/Square" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:src="#drawable/Triangle" />
</LinearLayout>
</LinearLayout>
The solution I ended up using was to add a new LinearLayout with the background set to a "puzzle base" image and added three new images with "empty puzzle" pieces on it. Ie: I broke up each of the 3 "empty" puzzle slots into individual images like in this example:
Then used them as backgrounds to a new layout, so where I had this code before:
<ImageView
android:id="#+id/emptyPuz"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/EmptyPuzzle" />
I now have:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/emptypuzzle"
android:orientation="horizontal" >
<ImageView
android:id="#+id/dropsquare"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="square"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:src="#drawable/emptysquare" />
<ImageView
android:id="#+id/droptriangle"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="triangle"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:src="#drawable/emptytriangle" />
<ImageView
android:id="#+id/dropcircle"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="circle"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:src="#drawable/emptycircle" />
</LinearLayout>
Ending with a resultant drag and drop game looking like:
It's not pretty, but my toddler likes it. :)
I am trying to place two imageviews -
<ImageView
android:id="#+id/ivLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:focusable="true"
android:layout_marginTop="20dp"
/>
<ImageView
android:id="#+id/ivAction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="110dp"
android:layout_centerHorizontal="true"
android:focusable="true"
/>
There is some overlapping between the images . The Action image overlaps with the logo. This is expected behaviour as they both have some common space on the screen.
The top part of action image comes on top of the logo while i want the bottom part of the logo to come over the top of action image .
What is happening - Action is on top
--
what is required -- Action should go to the background
I will appreciate any help.
Just change the order of your 2 ImageViews in your XML. The system draws them in the same order, so whatever you put first comes on bottom.
Try this. This will place your top image at the center of your background image
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
<ImageView
android:id="#+id/ivLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:focusable="true"
android:layout_marginTop="20dp"
/>
<ImageView
android:id="#+id/ivAction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="110dp"
android:layout_centerInParent="true"
android:focusable="true"
/>
</RelativeLayout>
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.