Here is what I am trying to do. I am creating a drag and drop controller. Users are able to move the controls where they want on the screen to save it. I have everything else done, except this. I have thought of a couple different ideas to get this to work, but most of them do not work so well with the drag and drop feature.
I have created an XML file.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="50dp"
android:layout_height="40dp"
android:text=""
android:id="#+id/dpad_up"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:visibility="invisible"/>
<Button
android:layout_width="50dp"
android:layout_height="40dp"
android:text=""
android:id="#+id/dpad_down"
android:layout_below="#+id/dpad_up"
android:layout_centerHorizontal="true"
android:visibility="invisible"/>
<Button
android:layout_width="50dp"
android:layout_height="40dp"
android:text=""
android:id="#+id/dpad_left"
android:layout_alignTop="#+id/dpad_right"
android:layout_toStartOf="#+id/dpad_up"
android:visibility="invisible"/>
<Button
android:layout_width="50dp"
android:layout_height="40dp"
android:text=""
android:id="#+id/dpad_right"
android:layout_alignParentTop="true"
android:layout_toEndOf="#+id/dpad_up"
android:layout_marginTop="22dp"
android:visibility="invisible"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/d_pad"
android:background="#drawable/d_pad"
android:layout_alignParentTop="true"
android:layout_alignBottom="#+id/dpad_down"
android:layout_alignStart="#+id/dpad_left"
android:layout_alignEnd="#+id/dpad_right" />
</RelativeLayout>
I was thinking of using that XML bring into my activity and do a drag and drop, but I am not sure how I could do that. Any ideas or help would be great. I just need to be able to perform a drag and drop and have each of the directions buttons register when pressed to perform the action.
Invisible views are not touchable.
Just change Button into View or Space, and let it visible.
Related
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 have a bar layout with four ImageViews.
The code is showed below
<LinearLayout
android:id="#+id/layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/contact_bar_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/contact2"
android:orientation="vertical"
android:visibility="gone" >
<ImageView
android:id="#+id/contact"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/contact_phone_state" />
<ImageView
android:id="#+id/contact_call"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/contactcall_state" />
<ImageView
android:id="#+id/contact_call2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/contact_phone_state" />
</LinearLayout>
<ImageView
android:id="#+id/contact_bar_trigger"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/contact_phone_state" />
</LinearLayout>
At first the ImageView(contact_bar_trigger) would be showed on the screen only,
after touch(keep action_down) it, the LinearLayout(contact_bar_layout) will show up,
and the problem comes, is it possible to choose one ImageView from contact_bar by the touch motionevent action_up?
if not, please give me some suggestion to implement this. Thank you~~
I don't really understand your problem but, if I've good understood what you're excepting, you'd like to select a picture from your layout (with the 3 ImageView ; called contact_bar_layout) by a motionevent action_up.
To do it, you have to use code (and not just XML) and for each ImageView, you add a listener for each of them (you can use a method for all or do it separately). Then in each listener, you define what you want to do when this motionevent action_up is done.
Hope it helps.
to explain the situation :
-i have a listview filled with multiple rows, now i want to take any row and swipe left or right;
either way i need to show another view behind the current row as i swipe( kind of the sliding menu with the action bar, although i dont think i can use that in my case)
when the user swipes left for example the new view can have an offset, (or doesnt), so it may or may not cover the whole row, any suggestions ?
thanks a lot
random code()
<ListView
android:id="#+id/lvWatchlists"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/relativeLayout1"
android:layout_below="#+id/header_l" >
</ListView>
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#004c98" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/donnees" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/imageView1"
android:text="#string/differe"
android:textColor="#color/title_selected"
android:textSize="#dimen/footer_text" />
<TextView
android:id="#+id/maj2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:text="00/00/00 à 00:00:00"
android:textColor="#color/title_selected"
android:textSize="#dimen/footer_text" />
<TextView
android:id="#+id/maj1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/maj2"
android:text="#string/maj_le"
android:textColor="#color/title_selected"
android:textSize="#dimen/footer_text" />
</RelativeLayout>
use swipeable list view library from here
https://github.com/47deg/android-swipelistview
or check this open sourced program for the same feature by roman nurik
https://code.google.com/p/dashclock/source/browse/main/src/main/java/com/google/android/apps/dashclock/ui/SwipeDismissListViewTouchListener.java
It depends what you or doing on by swiping the row view, deleting it or something else
I'm new to Android development and I'm trying to achieve a layout for my app that is capable of handling different screen resolutions/ratios.
I've been reading a lot of the documentation and questions on this site to try to understand the basics and concepts.
First I went through:
developer.android.com/guide/practices/screens_support.html
And questions like:
stackoverflow.com/questions/6403619/how-to-support-all-the-different-resolutions-of-android-products
I've got a pretty basic idea on how to handle things out. But still, its pretty difficult for a starter to get going, and I found myself stucked trying to achieve the solution I came up with.
I designed my app to a target resolution of 480x800, and set it up to always show in portrait mode.
This is how it looks like and how I understand it should work (I used Waldo for the sake of example haha):
(sorry for the link, I need 10 rep to post images)
http://i.imgur.com/KXTAXir.jpg
My root Layout is a LinearLayout, wich contains 3 other Layouts being A and C set up to a weight of 0.8 while B is at 8.4. This is all fine, but the contents of B are set up to DP units at the moment just to be able to test.
B consists of a frame Layout who has 3 other Layouts inside, where 2 of them are working fine, and shown only when needed. The problem is that I need B to be able to adapt based on the contents of it first child: a LinearLayout wich contains 2 ImageView and 1 ProgressBar. I need that those ImageView always keep their ratio.
Here is an example of how it should work:
http://i.imgur.com/cH7fUze.jpg
Imagine those 4 are real screens, wich vary in ratio and size. So my app should only adapt B (from my first image) to keep the images original ratio.
Here is the layout code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/darkgray"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="LEVEL"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/level_text_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="SCORE"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/level_text_clock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="01:59"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8.4" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="1000"
android:progress="0" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
</LinearLayout>
<RelativeLayout
android:id="#+id/pauseMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:visibility="gone" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/gameoverMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:visibility="gone" >
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="0/0"
android:textAppearance="?android:attr/textAppearanceMedium" />
<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_centerVertical="true"
android:text="Button"
android:onClick="useHint" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button1"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="toggleSound" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button2"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="togglePause" />
</RelativeLayout>
The last thing that stays unclear to me is how to handle the text and button sizes. Should I set them in DPs? How do I get them to scale accordingly like it can be seen on the bottom of my second picture.
Thank you for your help, I also want this to serve as an example to others that are having trouble to understand how to handle this kind of scenarios.
I'm not sure, if I got your question right.
However, you can specify different layouts for different screen sizes and orientations, as described here: http://developer.android.com/guide/practices/screens_support.html
Just give the respective suffix in the name of your layout XML file.
I ended up creating a custom View for my images. The view calculates the space thats left on its parent, scales the images manually and then resizes itself to the same size of the resulting image.
To resize the progress bar to have the same width as the images, I used a custom listener that gets triggered when my custom views get resized. Then I resize the progressbar to match their width.
With this I achieved what I wanted, a layout that will work perfectly in all screen sizes.
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