which layout displays multiple image buttons? - android

Hi I'm trying to add an activity that displays 4 images (imagine a square cut to quarters) where each image shows a different one when clicked, I have tried a few layouts using image buttons to no avail but then read here my answer is a grid view using image pager but when implementing this I get small images spaced quite far apart in grid view is there a better way please?

if it's always 2x2 images you can simply use a vertical linear layout and two horizontal layouts in it and then put your images as ImageButton or ImageView inside the horizontal layouts...
if it needs to be dynamic a gridlayout would probably be a good idea...
however, you need to provide more detailed information on what the issue is, if you need a more detailed answer...
(edit: I meant gridview, gridlayout is only available since api level 14)

You can use a RelativeLayout in order to add your ImageButtons and have all the control to your hands for location of buttons, size etc.
A different point of view, is to break your screen into 4 Rectangles (Rects).
Something like this :
Rect upLeftRect = new Rect(0,0,screenWidth/2 , screenHeight/2);
Rect upRightRect = new Rect(screenWidth/2,0,screenWidth,screenHeight/2);
Rect downLeftRect = new Rect(0,screenHeight/2, screenWidth/2 , screenHeight);
Rect downRightRect = new Rect(screenWidth/2, screenHeight/2, screenWidth,screenHeight);
The, attach an onTouchListener on your relativeLayout, something like this in your constructor:
yourRelativeLayout.setOnTouchListener(this);
And finally , inside the onTouch method you will have something like this :
#Override
public boolean onTouch(View v, MotionEvent e){
if(upLeftRect.contains( ( int ) e.getX(), (int) e.getY){
// do whatever you want, i guess that you want some alpha animation or something like this
}else if(upRightRect.contains( (int) e.getX(), (int) e.getY(){
// bla bla.. :)
} // do the rest conditions your self!!
Hope that helped!

Related

How do I get a view position relative to another view in Android?

I'm making a app for Android that shows a camera image (after going through some manipulation) on screen using an ImageView and I want to allow to move other ImageViews on the screen - but only inside the the parent ImageView.
Also, I need to get the coordinates of the child views relative to the coordinates of the parent ImageView. i.e - So that (0,0) will not be the whole screen, but the ImageView that shows the camera.
Is that possible at all? If so - How?
Help is much appreciated! Thanks
If you want to move the views by drag here's a lot of info around, e.g Moving image with touch events .
What about getting the top and left side of minorView relative to majorView it's also straightforward with some plain substraction minorViewRelativeTop = minorViewTop - majorViewTop. Use View.getLocationInWindow() for getting these absolute positions.
N.B. That View.getLocationInWindow() will usually not work just inside Activity.onCreate() so better call it after some delay. For testing it could be sth like:
majorView.postDelayed(new Runnable() {
#Override
public void run() {
int[] location = new int[2];
majorView.getLocationInWindow(location);
int majorViewLeft = location[0];
int majorViewTop = location[1];
}
}, 1000);

relative layout merging two textviews

I have a relative layout with textviews ordered in more then one column. When clicked on screen, there is a "popup screen" or "input screen" (have no idea how it is called) in which I define the time "from" and "to", what is the name of school class etc. It will compute which textviews it needs to merge from that input. Merged textviews have to be like one larger textview. Is it possible to do something like this?
Thanks for the answer in ahead.
Something like this:
http://i.stack.imgur.com/r1o8D.png
I've got an idea you could try creating a custom view to draw this instead of using views.
Extend the View class in a new class and override the onDraw method.
//variables
Paint paint[]; //Set up these paints with the colors you need
int rowWidth, int colHeight;
void onDraw(Canvas c){
for(int i=0;i<noOfRows;i++){
for(int j=0;j<noOfColumns;j++){
if(cellRequired(i,j)){
//cellRequired will be whatever logic you have to check if cell is required
int rectHeight=colHeight; //Now the Rect Height changes whether the cell
// below is in use or not.
for(int k=i;k<noOfRows;k++){
//This loop will run through the rows and see if merging is required
if(cellRequired(i,k))
rectHeight+=colHeight; //Merge Cell
else
break; //If not required at any point break loop
}
//Draw Rectangle background
c.drawRect(i*rowWidth +i, j*colHeight +j, rowWidth, rectHeight, backPaint);
//Draw Text
canvas.drawText("Text",i*rowWidth +i, j*colHeight +j, paint[requiredPaint]);
//I added the plus i and plus j so there'd be a gap in the rectangles
// Then it will be a border
}
}
}
}
Android documentation on custom controls
you
Android: Tutorial on Custom View creation
How to make a custom view similar to above
http://www.droidnova.com/playing-with-graphics-in-android-part-i,147.html
Go through these and then through the code above. Hopefully it should show you how to implement it.

Change the behaviour of a GridView to make it scroll horizontally rather than vertically

I want to make a UI element like a GridView, I want it's complete functionality but want it to be horizontally scrollable rather than vertically.
By horizontal scroll I mean it should be built that way and not put in a HorizontalScrollView.
My would be Custom GridView will have fixed number of rows say 4-5 and the columns should be extensible based on number of items in the Adapter. You can think of it as the opposite of what the native GridView does, yet it should maintain the functionality.
I have looked at the source code of how a GridView is implemented by Google, but I am able to understand very less and starting to make the View from scratch doesn't seem to be a good idea, since I am afraid I will not be able to do justice to memory optimization's the way Google did it.
I had observed that GridView extends AbsListView, so my question is, is it AbsListView which lets a GridView scroll vertically and add items from the adapter, or is it GridView which adds the vertical scrolling ability? Should I tweak GridView or AbsListView?
It would be even better to know if there's something which already does what I want to do?
This has already been implemented in native Gallery and YouTube app of Android Honeycomb 3.1 and above. So if anyone has an idea, please elaborate.
Snapshot of Honeycomb Gallery app:
Snapshot of Honeycomb YouTube app:
There is setRotation in API 11. You'll have to rotate the gridview by 90 degrees and child views by -90 degrees.
Documentation: http://developer.android.com/reference/android/view/View.html#setRotation(float)
Update:
To get a 3d effect on views following APIs would be useful
setCameraDistance(float) - set the z axis distance(depth)
setRotationX(float) - set the horizontal axis angle
setRotationY(float) - set the vertical axis angle
Set the camera distance to half of the screen height. Then set the rotationX based on the view's location on screen. The rotation angles should be something like (20, 10, 0, -10, -20) from left to right. Later you can play with rotationY angles to get some height perception.
Do all setting in extended GridView's overriden layout method.
#override
void layout(int t, int l, int r, int b) {
super.layout(t, l, r, b);
...
int columnStart = getFirstVisiblePosition()/no_of_columns;
int columnEnd = getLastVisiblePosition()/no_of_columns;
loop from 'columnStart' to 'columnEnd' 'no_of_colmns' times {
// set the camera distance and rotationX to views
// depending on the position of a view on screen.
}
}

Using ViewGroup and View on Android draw and make buttons using canvas

I'm trying to make my own custom view, currently all it does is draw an image on a specific x and y coordinate and then draws the similar images repeatedly on different locations.
I want to be able to create a button on each instance of the image that is drawn. if one image is clicked it will have cause something different to happen depending on which image is chosen.
How can I implement this?
would I have to create a different view for each image/button combination and then set an onClick event?
Let me try to be a little more clear
I'm trying to make a map using hexagon (different types of terrains for different players)
I've figured out how to get them to draw (see here - they will have a border to show what terrain is owned by whom)
I just made a custom view class and had the hexagons drawn using a Canvas; however, I'm not sure how to be able to make the hexagons into buttons so that I can differentiate between which hexagon was chosen and how it should react to the opponents spot.
I was thinking of making a ViewGroup called Terrain to contain the Nodes(hexagons) that belong to the player and have a group of Node Views that only draw the hexagon where it should be located.
the question is can i make each node or the entire viewGroup into a button (or do an onTouch ) if a certain hexagon is pressed?
If I understood well, you should do :
One template my_pictures.xml which is a simple button.
Then you create a custom adapter which as a function for each kind of image you wanna create. By this, I mean that you will have to change the background value of your button depending on what you need it to be. Then you do a notifyDataSetChanged(); to refresh the container with the new button.
For the Listener, you just have to add it either in your activity or your adapter when you create your buttonImages, I don't know what's better.
Thanks for your help!
I figured out what I needed to do.
I have a NodeView class and in my GameActivity class, I'm using a relative layout and setting the layout parameters of where I wanted things positioned
RelativeLayout rl = new RelativeLayout(this);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(95,95);
params.leftMargin = 10;
params.topMargin = 10;
params = new RelativeLayout.LayoutParams(95,95);
params.leftMargin = 10+95*x;
params.topMargin = 81+(71*y);
rl.addView(new NodeView (this,0,0,1,1), params);
This helped me add things where I needed them and now all I'm trying to figure out how to scroll around the territories on both the x and y axis (I tried ScrollView but that only allows me to scroll on the y-axis, I'm looking into it though)

Android - How to draw a letter at a specific point?

I want to fill the screen with a 100 different letters in random positions. On the iPhone I just created a bunch of UILabels set their x and y positions and then used animations to move them about.
On Android it doesn't look like I can add a TextView to my view and specify its X and Y. Is there a way to do this?
View gameView = findViewById(R.id.gameboard);
tv = new TextView(gameView.getContext());
tv.setText("A");
tv.setWidth(w); tv.setHeight(h);
// How to set the X and Y?
EDIT: The solution was to use AbsoluteLayout:
AbsoluteLayout al = (AbsoluteLayout)findViewById(R.id.gb_layout);
tv = new TextView(this);
AbsoluteLayout.LayoutParams params = new AbsoluteLayout.LayoutParams(
AbsoluteLayout.LayoutParams.WRAP_CONTENT,
AbsoluteLayout.LayoutParams.WRAP_CONTENT,10,10);
params.x = 50;
params.y = 50;
al.addView(tv, params);
and to move it base on MotionEvent me:
AbsoluteLayout.LayoutParams p = new AbsoluteLayout.LayoutParams(
AbsoluteLayout.LayoutParams.WRAP_CONTENT,
AbsoluteLayout.LayoutParams.WRAP_CONTENT,(int)me.getX(), (int)me.getY());
mTV.setLayoutParams (p);
I think you are making a game and for this you should look into SurfaceView here is an good example then
1...if you look into code there is onDraw method where you will get the width of screen and height
2...Now taking this width and height as seed for random generator get x and y position.
3...Iterate through point 2 100 times and you will get the desired result
You can use a FrameLayout for this. Set each TextView's background to transparent and add it to the FrameLayout. Make each TextView, and the FrameLayout, fill their parent. The FrameLayout places all its child views at (0,0). To move letters around, just change the top and left padding of the corresponding TextView.
In android positioning child views is the responsibility of the layout class.
You need to create a custom.layout and overide the onLayout method. In this method you can iterate through all the child views calling View.layout(left,top,right,bottom) on each child.
i found this example code whilst trawling the net :
https://gist.github.com/882650
You should also check out view.setTranslationX (and Y) which might be exactly what you need
I'm not entirely sure how you'd go about doing this in code, but you need to use an absolute layout as your root element. (edit: Do not use absolute layout, as it was pointed out that it is deprecated. The closest alternative seems to be RelativeLayout.)
The properties in the XML format for the absolute layout coordinates are layout_x and layout_y.
edit: A little research is saying you need to be using setLayoutParams, but my Eclipse IDE is not working properly, so unfortunately I can't test exactly what you're looking for.

Categories

Resources