Android design game card UI - android

I need help with the design of my card game.
I having a Vector of cards (player cards), each item appers in ImageView (Already done and working).
private Vector<Card> myCards;
I having a LinearLayout that holding 5 imageView's.
<LinearLayout
android:id="#+id/myCardsLayout"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:paddingBottom="10dip">
<ImageView
android:id="#+id/my_card_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="goToMainMenu"
/>
<ImageView
android:id="#+id/my_card_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="goToMainMenu"
/>
<ImageView
android:id="#+id/my_card_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="goToMainMenu"
/>
<ImageView
android:id="#+id/my_card_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="goToMainMenu"
/>
<ImageView
android:id="#+id/my_card_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="goToMainMenu"
/>
</LinearLayout>
I want to choose the cards that i want to drop by click on the card, And that the player will see this by jumping the card slightly up (or another recommended way).
I will implement that on android:onClick function (goToMainMenu is a temporary statement).
Any idea ? Thanks!
UPDATE1
public void myCard1OnClick(View view) {
view.setSelected(true);
if(view.isSelected()) {
int y = view.getTop();
view.setTop(y - 30);
}
else{
int y = view.getTop();
view.setTop(y + 30);
}
}

You can make an onclick function on cards that moves and give them a function that takes their x and y cordinates and then you just inflate y to move up.

try to use setX() and setY() view properties to move across a space.
And about the issue of moving the card and after that it get back to its original position, maybe its because the set selected its not working, and then enters to the else statement.

Related

Button click is not working after Animation

I have two button in one LinearLayout and inside this LinearLayout i have two button. When i animate LinearLayout then working fine but when tried to click on Button which is inside LinearLayout, click of button is not working.
I already searched a lot but not able get rid this issue.
Below code to animate LinearLayout
an = new RotateAnimation(angleRightHead, getRotateAngleRightEdgehead (), Animation.RELATIVE_TO_SELF, 1, Animation.RELATIVE_TO_SELF, 0.33f);
an.setRepeatMode(Animation.REVERSE);
an.setDuration(1000);
an.setRepeatCount(0);
an.setFillAfter(true);
an.setFillEnabled(true);
head_neck_ll.startAnimation(an);
and this code of XML
<LinearLayout
android:id="#+id/head_neck_idll"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/head"
android:layout_width="70dp"
android:layout_height="20dp"
android:background="#drawable/roundcorner"
android:clickable="true"
android:onClick="clickhander" />
<!-- </RelativeLayout> -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:padding="3dp"
android:layout_height="16dp" >
<Button
android:id="#+id/lumber"
android:layout_width="49dp"
android:layout_marginLeft="3dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_marginBottom="-10dp"
android:background="#drawable/roundcorner"
android:clickable="true"
android:onClick="clickhander" />
</RelativeLayout>
<Button
android:id="#+id/backupper"
android:layout_width="80dp"
android:layout_height="20dp"
android:background="#drawable/roundcorner"
android:clickable="true"
android:onClick="clickhander" />
</LinearLayout>
</LinearLayout>
and code for onClickListener
public void clickhander(View v){
if(v.getId() == R.id.head){
textv = head;
v1right = mapRight.get(head);
v1right = mapLeft.get(head);
head.setBackgroundResource(R.drawable.clickroundcorner);
lumber.setBackgroundResource(R.drawable.roundcorner);
backupper.setBackgroundResource(R.drawable.roundcorner);
backlower.setBackgroundResource(R.drawable.roundcorner);
legside.setBackgroundResource(R.drawable.roundcorner);
angle =0;
} else if(v.getId() == R.id.backupper){
textv = backupper;
v1right = mapRight.get(backupper);
v1right = mapLeft.get(backupper);
backupper.setBackgroundResource(R.drawable.clickroundcorner);
head.setBackgroundResource(R.drawable.roundcorner);
lumber.setBackgroundResource(R.drawable.roundcorner);
backlower.setBackgroundResource(R.drawable.roundcorner);
legside.setBackgroundResource(R.drawable.roundcorner);
angle =0;
}
}
Check the image:
Note: 1 and 2 both are in same layout. I want click listener on each with layout animation
Your help would be appreciated.
Yes, this is normal behavior. This is because animation just rerenders View's pixels, but it's position on the display remains the same.
If you want to relocate your View to the place where your animation ends, you need to call View.layout() method and pass these 4 parameters, which describe Views new position on its layout.
Keep in mind that View.layout() gets params relative to `View's parent.

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

Right Slide In Panel like WunderList App

I would like to see if anyone knows how WunderList did this? See picture:
Basically, if you click on any List Item you add, this drawer pops out to show the item details. In this case I randomly added an item, apparently called "Rgh". Clicked on it, and it slides out from the right. You can swipe it and it goes back to whence it came from.
I thought it was a SliderMenu library, perhaps one like jfeinstein10's, but Wunderlist already has a slider on the left. The one on the right (in picture) acts totally different. Its bigger, instead of pushing content, it just goes over the previous Activity (or Fragment?). And its not openable from swiping (only closing). I know with jfeinstien's, you can't do any of that - Right and LEft ahve to be very similar (unless you sublcass it).
I know there was something called the SlidingDrawer, but I hardly see this used anymore, could this be it? What is the most preferred way to implement this?
LinearLayout plus Animation. I've done similar in my app.
Not even using Fragments. Using an Animation class, the code is here:
/*
This class is responsible for showing the sliding animation
*/
public class SlideAnim extends Animation {
int targetWidth;
View slideView;
ImageView imageView;
boolean close;
public SlideAnim(View _v, boolean _close, int _maxWidth, ImageView imageView) {
this.slideView = _v;
this.imageView = imageView;
targetWidth = _maxWidth;
close = _close;
}
protected void applyTransformation(float interpolatedTime, Transformation t) {
int newWidth;
if (!close) {
newWidth = (int) (targetWidth * interpolatedTime);
} else {
newWidth = (int) (targetWidth * (1 - interpolatedTime));
}
slideView.getLayoutParams().width = newWidth;
slideView.requestLayout();
imageView.setImageResource(slideView.getWidth() > 0 ? R.drawable.purple_arrow_right : R.drawable.purple_arrow_left);
}
public void initalize(int width, int height, int parentWidth, int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
}
public boolean willChangeBounds() {
return true;
}
}
Here is how I am invoking the animation from another Activity:
SlideAnim slideAnim = new SlideAnim(trendingListLayout, false, maxListWidth, imageView);
slideAnim.setDuration(500);
slideAnim.reset();
trendingListLayout.clearAnimation();
trendingListLayout.startAnimation(slideAnim);
I am animating a LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/top_container"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.eazyigz.views.EazyigzImageView
android:id="#+id/whole_screen"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<View
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" />
<LinearLayout
android:id="#+id/explore_expander"
android:layout_width="30dp"
android:layout_height="fill_parent"
android:background="#color/eazyigz_bg_primary"
android:orientation="horizontal"
android:visibility="invisible" >
<ImageView
android:id="#+id/explore_expander_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/purple_arrow_left" />
</LinearLayout>
<!-- List Layout -->
<LinearLayout
android:id="#+id/explore_list_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:paddingTop="50dp"
android:background="#color/eazyigz_bg_secondary"
android:orientation="vertical"
android:visibility="invisible" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="0dp"
android:layout_marginTop="10dp"
android:gravity="center_horizontal|center_vertical"
android:singleLine="true"
android:ellipsize="marquee"
android:focusable="true"
android:fadingEdge="horizontal"
android:marqueeRepeatLimit ="marquee_forever"
android:scrollHorizontally="true"
android:text="#string/top_trending"
android:textColor="#color/eazyigz_green"
android:textSize="30sp" />
<ProgressBar
android:id="#+id/explore_spinner"
android:layout_width="50dp"
android:layout_height="45dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:indeterminateDrawable="#drawable/progress_spinner"
android:visibility="visible"
android:layout_gravity="center_horizontal|center_vertical"/>
<ListView
android:id="#+id/explore_list"
style="#style/EazyigzListView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:cacheColorHint="#00000000"
android:divider="#0000"
android:layout_marginLeft="10dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingBottom="50dp"
android:paddingLeft="20dp" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" />
<Button
android:id="#+id/eazyigz_play"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:background="#drawable/eazyigz_button"
android:drawablePadding="0dp"
android:gravity="left|center_vertical"
android:padding="5dp"
android:text="#string/playing"
android:textColor="#color/eazyigz_white"
android:textSize="36sp"
android:visibility="gone"/>
<Button
android:id="#+id/eazyigz_create"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:background="#drawable/eazyigz_button"
android:drawablePadding="0dp"
android:gravity="left|center_vertical"
android:padding="5dp"
android:text="#string/create"
android:textColor="#color/eazyigz_white"
android:textSize="36sp" />
<Button
android:id="#+id/eazyigz_explore"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:background="#drawable/eazyigz_button"
android:drawablePadding="0dp"
android:gravity="left|center_vertical"
android:padding="5dp"
android:text="#string/explore"
android:textColor="#color/eazyigz_white"
android:textSize="36sp" />
<Button
android:id="#+id/eazyigz_listen"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/eazyigz_button"
android:drawablePadding="0dp"
android:gravity="left|center_vertical"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="50dp"
android:paddingTop="5dp"
android:text="#string/stations"
android:textColor="#color/eazyigz_white"
android:textSize="36sp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" />
</LinearLayout>
</merge>
The explore_list_layout is what gets animated.
See video of what the screen looks like: Sliding Animation
Hello KickingLettuce
Hi Igor
We needed a panel coming from the right, on top of the rest of the application, and we wanted it to be "swipeable" including the basic "nearest-point" opening or closing and acceleration tracking to decide what to do if the swiping was done half-way.
We tried initially with Android's SlidingDrawer but firstly its deprecation and then the ability to swipe just from a knob in the side + its not-so-perfect performance made us to think about doing something else.
We call it SlidingLayer and we are shortly planning to open-source it very soon. We just want to make sure to add a pair of tweaks that give you some flexibility without having to dive deep into unnecessary parts of the code (ie.: adding shadow easily).
In the meantime and if it helps you, we based a huge part of it on the SlidingMenu operation (we love how it works).
It's basically a container (extends from a RelativeLayout that might turn into a ViewGroup - I'd love to debate that - RelativeLayout -> pro: versatile, avoid extra views. con: you might need a different layout). That is being scrolled (with scrollTo) following the moves of your finger -> by overriding and analyzing touch in onInterceptTouchEvent and onTouchEvent.
It's relatively easy. I'd cheer you to go for it. There are already good tutorials and code examples around this two methods.
Nevertheless and if you prefer to not to get into the burden, I'll let you know whenever we are ready.
I'll make a brief follow up here in case you decide to go for it.
All the best.

Button Inside Android ListView doesnt respond to clicks

I have a default ListView that i have added my custom views for the list items, but the buttons inside of these views are not clickable most of the time. I output a Log.v when the button receives a click event, but i have to tap the button almost a dozen times before it will register the click.
The other problem related tot his that i am having is that when the button is pressed i want an animation to happen revealing a menu sliding out from beneath it. At the moment i have tried several different methods like making a custom class for the views versus just using a layout inflater to get the relativeLayout object for the view, but nothing is working properly. I have even tried using listview.getAdapter().notifyDataSetChanged(); but that only has a pop-into-place for the extended view when i want an animation.
I have searched everywhere and it seems like the only possible solutions are to either rewrite my own custom listview or to use a linearlayout with a scrollview. The latter seems easier but i dont think it is nearly as optimized as the listview is.
Any suggestions would be greatly appreciated, if you need to see some code, please let me know...
Thanks!
UPDATE:
the getView() contains this:
Holder hold;
convertView = friends.get(position);
hold = new Holder();
hold.pos = position;
convertView.setTag(hold);
return convertView;
basically i pass an ArrayList<RelativeLayout>, at the moment, to the Adapter so that i dont have to create a new view each time and so that the animation will stay animated when i scroll down...
inside the OnCreate() for this activity i set that ArrayList<RelativeLayout> with this next code, but this is only temporary as i plan to use another method later, like an Async task or something so that this view contains some data...
RelativeLayout temp;
for(int i=0; i<30; i++){
temp = (RelativeLayout) inflater.inflate(R.layout.list_item, null);
final LinearLayout extraListItemInfo = (LinearLayout) temp.findViewById(R.id.extraListItemInfo);
Button infoBtn = (Button) temp.findViewById(R.id.infoBtn);
infoBtn.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v) {
Log.v("ListItem", "Button has been clicked... ");
extraListItemInfo .setVisibility(View.VISIBLE);
ExpandAnimation closeAnim = new ExpandAnimation(extraListItemInfo , animHeight);
closeAnim.setDuration(750);
closeAnim.setFillAfter(true);
if(extraListItemInfo .getTag() == null || !extraListItemInfo .getTag().equals("expanded")){
extraListItemInfo .getLayoutParams().height = 0;
friendInfoList.startAnimation(closeAnim.expand());
extraListItemInfo .setTag("expanded");
}else if(extraListItemInfo .getTag().equals("expanded")){
extraListItemInfo .startAnimation(closeAnim.collapse());
extraListItemInfo .setTag("closed");
}
//((BaseAdapter) listview.getAdapter()).notifyDataSetChanged(); i tried it here once but then left it
//as the only action inside the listview's onitemclick()
}
});
listItems.add(temp);
}
this is the list item that i am using:
<?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="wrap_content"
android:background="#color/darkgrey"
android:paddingBottom="5dp" >
<LinearLayout
android:id="#+id/extraListItemInfo "
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/listItemInfo"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="-10dp"
android:background="#color/grey"
android:orientation="vertical"
android:visibility="gone" >
<RelativeLayout
android:id="#+id/RelativeLayout04"
android:layout_width="match_parent"
android:layout_height="#dimen/activity_list_height"
android:layout_marginTop="5dp" >
<ImageView
android:id="#+id/ImageView04"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_margin="5dp"
android:src="#drawable/logo_d" />
<TextView
android:id="#+id/TextView04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/ImageView04"
android:text="TextView"
android:textColor="#color/black"
android:textSize="17dp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/RelativeLayout03"
android:layout_width="match_parent"
android:layout_height="#dimen/activity_list_height" >
<ImageView
android:id="#+id/ImageView03"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_margin="5dp"
android:src="#drawable/logo_d" />
<TextView
android:id="#+id/TextView03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/ImageView03"
android:text="TextView"
android:textColor="#color/black"
android:textSize="17dp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/RelativeLayout02"
android:layout_width="match_parent"
android:layout_height="#dimen/activity_list_height" >
<ImageView
android:id="#+id/ImageView02"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_margin="5dp"
android:src="#drawable/logo_d" />
<TextView
android:id="#+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/ImageView02"
android:text="TextView"
android:textColor="#color/black"
android:textSize="17dp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="#dimen/activity_list_height" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_margin="5dp"
android:src="#drawable/logo_d" />
<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="TextView"
android:textColor="#color/black"
android:textSize="17dp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="match_parent"
android:layout_height="#dimen/activity_list_height">
<ImageView
android:id="#+id/ImageView01"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_margin="5dp"
android:src="#drawable/logo_d" />
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/ImageView01"
android:text="TextView"
android:textColor="#color/black"
android:textSize="17dp" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/listItemInfo"
android:layout_width="wrap_content"
android:layout_height="95dp"
android:background="#drawable/friend_cell_background2x"
android:clickable="true" >
<RelativeLayout
android:id="#+id/leftLayout"
android:layout_width="90dp"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imgCompany"
android:layout_width="60dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:scaleType="centerInside"
android:src="#drawable/user2x" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:src="#drawable/online_indicator2s" />
</RelativeLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/leftLayout"
android:background="#android:color/transparent"
android:gravity="left|center"
android:orientation="vertical"
android:paddingLeft="5dp" >
<TextView
android:id="#+id/lblCompanyName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Contact Name"
android:textColor="#color/white"
android:textSize="18dp"
android:textStyle="bold" >
</TextView>
<TextView
android:id="#+id/lblReawrdDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Last Played Offer"
android:textColor="#color/white"
android:textSize="17dp" >
</TextView>
</LinearLayout>
<ImageView
android:id="#+id/imageView4"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="5dp"
android:src="#drawable/facebook_btn2x" />
<Button
android:id="#+id/infoBtn"
style="?android:attr/buttonStyleSmall"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_alignRight="#+id/imageView4"
android:background="#drawable/info_btn2x"
android:clickable="true" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="13dp"
android:layout_toLeftOf="#+id/infoBtn"
android:text="Follows 30+"
android:textColor="#color/white"
android:textSize="11dp" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="75dp"
android:layout_height="20dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:layout_toLeftOf="#+id/textView2"
android:background="#drawable/fan_btn2x"
android:text="Fans 30+"
android:textColor="#color/white"
android:textSize="11dp" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/imageView4"
android:src="#drawable/google_btn2x" />
</RelativeLayout>
</RelativeLayout>
sorry for any layout problems that may make things difficult to read... but i hope this helps you guys to understand my problem... Thanks
UPDATE 2:
All of these answers have been helpful in some way, but i think the main issue that i must first fix is why the buttons do not receive click events until i have first scrolled away from that listItem, then back to it, then clicked the button again... If someone can help find a solution to THAT i think that everything else will be much easier to solve...
Thanks...
A screenshot as requested, but remember that this shot was taken on a samsung galaxy tab 10.1 and due to me using the same layout for this larger screen, it looks much different from what it does on the phone i usually test with (Motorola droid x that isnt rooted and cant take screenshots...)
Another Update:
I managed to get the clicking and animation working nicely by Extending ArrayAdapter instead of base adapter. Sadly i am still experiencing problems as only the bottom half of the list is clickable. The top half of the list still behaves as before with the very glitchy click events... Any ideas as to what is happening this time? Thanks...
Well this isn't really an answer, but after rewriting this a few times I managed to fix it so that it functions exactly the way I wanted.
This time I left all of the data separate from each view and had each list item be a custom class inheriting RelativeLayout and also implementing its own OnClickListener for its specific infoBtn.
My adapter now simply extends ArrayAdapter<> and overrides this getView() method:
public View getView(int position, View convertView, ViewGroup parent) {
if(convertView != null && (convertView instanceof FriendListItem2))
((FriendListItem2) convertView).setFriendInfo(friends.get(position));
else
convertView = new FriendListItem2(getContext(), friends.get(position));
return convertView;
}
Finally, in the main activity for this page I simply set the ListView with an adapter that I passed the data to.
This is all much cleaner than I had before and I wish it hadn't taken several rewrites of the code to get it right. Hopefully someone can benefit from this, though I still have no clue why I was getting a problem before.
Thanks for all previous suggestions.
try using this property in the top level layout in which your child views are placed.
android:descendantFocusability="blocksDescendants"
Its a bit tricky but I would suggest that if the above line does not work, try toggling between the removing of focusable=true and focusable="false" from the buttons. It should work.
Cheers!
That is a complex layout to create for every row...
Anyway, when you use the new keyword you are creating a different scope. In short your onClickListener does not see the 30 different extraListItemInfo references you expect it to see.
Try something like this:
#Override
public void onClick(View v) {
LinearLayout extraListItemInfo = v.getParent();
...
add android:onClick="onClick" to your button xml, it'll make it call the onClick() method
I had the same problem. Try taking the "android:clicable="true" " from the Relative Layout. When you do that the activity expects you to do make setOnClickListener to that RelativeLayout . It worked for me
you can fire click event on button from getView() method of ListViewAdapter Class.
See this question
Android : How to set onClick event for Button in List item of ListView.

Which layout to use for a 2x2 image-based menu?

I am trying to create a screen (in portrait mode) that shows 4 images (same size, intended to scale down to fit screen), taking up the entire screen, breaking up the screen into quadrants (a tall, 2x2 grid). This will act as a main menu type of activity and each image should be clickable, in order to take the user to a different activity.
I have tried using a GridView inside a LinerLayout (using a lot from Google's GridView tutorial) but cannot get the images to all scale properly to fill the entire screen. I get extra margins around the images and/or scrolling of the entire screen.
I have also tried using a TableLayout, placing 2 images in each of the 2 rows. Visually, that worked perfectly. Unfortunately when using that, I cannot seem to reference the ImageView items in the TableLayout in my activity code (findViewById always returns null).
I feel like a TableLayout is really not the "right thing to do" but I would like to hear what others have to say. Either way, what should be done to accomplish my desired functionality?
Thanks.
Edit 1.1:
The relative layout works much better for getting things lined up. Now I'm just left with the issue where findViewById always returns null. Here is my code so far:
<?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"
android:background="#color/homescreen_bgcolor"
>
<ImageView id="#+id/one"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:src="#drawable/item1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView id="#+id/two"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:src="#drawable/item2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView id="#+id/three"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:src="#drawable/item3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView id="#+id/four"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/item4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
public class HomeScreenActivity2 extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.homescreen2);
ImageView imageView = (ImageView) findViewById(R.id.one);
imageView.setClickable(true);
imageView.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Log.i("Test", "test");
}
});
}
}
Here is a sample layout showing how you can achieve a 2 X 2 grid that covers the entire screen using just a RelativeLayout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<View
android:id="#+id/centerVerticalShim"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_centerVertical="true"
android:visibility="invisible" />
<View
android:id="#+id/centerHorizontalShim"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:visibility="invisible" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/centerVerticalShim"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/centerHorizontalShim"
android:background="#42A5F5"
android:gravity="center"
android:text="#string/one"
android:textColor="#FFFFFF" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/centerVerticalShim"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/centerHorizontalShim"
android:background="#EF5350"
android:gravity="center"
android:text="#string/two"
android:textColor="#FFFFFF" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/centerVerticalShim"
android:layout_toLeftOf="#+id/centerHorizontalShim"
android:background="#66BB6A"
android:gravity="center"
android:text="#string/three"
android:textColor="#FFFFFF" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/centerVerticalShim"
android:layout_toRightOf="#+id/centerHorizontalShim"
android:background="#5C6BC0"
android:gravity="center"
android:text="#string/four"
android:textColor="#FFFFFF" >
</TextView></RelativeLayout>
The above layout results in this:
I think a TableLayout could work for you, but I'd recommend trying out RelativeLayout as well. You can basically pin your images to the four quadrants by using combinations of
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"`
on your images.
I'm doing something similar in my app where I have multiple buttons on a homepage that can launch corresponding activities. RelativeLayout works fine, and it avoids nested Layout objects, which can hamper performance during render and layout procedures (if it gets out of hand).

Categories

Resources