Develop Reference

ScrollView makes content disappear

I am trying to put a custom listView into a scrollView and when I scroll down and up I lose the top items in the listView which are a TextView and a CheckBox for some reason.
Here's my code:
activity_program.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/tv_program_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.10"
android:text="Program name"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/tv_program_info"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_weight="0.20"
android:text="program info, talk abt sets, reps, weight etc..." />
<ListView
android:id="#+id/android:list"
android:layout_width="match_parent"
android:layout_height="395dp" >
</ListView>
<Button
android:id="#+id/bt_savework"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.10"
android:text="Save Workout" />
</LinearLayout>
My custom listView contains these:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp" >
<TextView
android:id="#+id/tv_exercice_title"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/cb_exercicedone"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:text="Exercice title"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_below="#+id/tv_exercice_title"
android:orientation="horizontal" >
<CheckBox
android:id="#+id/cb_setdone"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="7dp"
android:text="Set" />
<TextView
android:id="#+id/tv_set_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="3dp"
android:text="1" />
<TextView
android:id="#+id/tv_reps"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:text="Reps x" />
<EditText
android:id="#+id/et_reps_number"
android:layout_width="47dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number" />
<TextView
android:id="#+id/tv_weight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:text="Weight" />
<EditText
android:id="#+id/et_weight_number"
android:layout_width="65dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number" />
<TextView
android:id="#+id/tv_kgorlbs"
android:layout_width="59dp"
android:layout_height="wrap_content"
android:text="kg/lbs"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
<CheckBox
android:id="#+id/cb_exercicedone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/linearLayout1" />
</RelativeLayout>
In my ListActivity I use a custom adapter to fill the ListView with the above template and only edit the tv_set_number (for now) then set the tv_exercice_title's visibility to "gone" to add more sets.
If you think the problem could be in my java code let me know in the comment and I will post it.
Please tell me what's the problem.
Here's some screenshots:
Before I scroll:
image 1
After I scroll:
image 2

Seems to me you are using the ListView to generate different kinds of rows and you're missing some steps. You could also consider to rethink the structure, as maybe this would better fit into a ExpandableListView: from the screenshots you post seems like you'd have a set of rows that hierarchically belong to a group view.
The ExpandableListView would fit this purpose, and also allow to collapse/expand the groups. I'd take a look at it, it's really easy, you'd only have to make the adapter descend from ExpandableListViewAdapter and provide methods to obtain the Group views (Your title & checkbox) and the item views (the sets with reps, weight, etc...)
If, on the contrary, you want to make it with a ListView, there are some issues to care about (I'll call TITLE ROWS to those with the title & checkbox, and regular rows to the regular ones)
What is happening now is, when you create a view and this view is not a TITLE ROW, you are setting the visibility of the title to GONE. But if you scroll, ie., DOWN and a TITLE row has to appear from the upper edge, the View you are given to recycle is the one that just left the screen by the lower edge, that was probably a REGULAR ROW. So in getView() you not only have to set Visibility to GONE for regular rows, but also back to VISIBLE for Title Rows. Google an explanation on how View recycling works for ListView and you'll understand it right away.
ListView provides a mechanism to help in these cases: The View Types:
You declare 2 "row types" overriding getViewTypeCount() and getItemViewType(int position) in your adapter. Type 0 will be TITLE ROWS, and Type 1 would be REGULAR ROWS.
In getView / convertView you'll generate / reuse the 2 different views separately based on the type.
.
#Override
public int getViewTypeCount() {
return 2; // you have 2 different types
}
#Override
public int getItemViewType(int position) {
if (position IS A TITLE ROW) return 0; else return 1;
}
... and then in getView() {
if (getItemViewType(position) == 0) {
// it's a TITLE ROW, create / reuse it accordingly
} else {
// it's a REGULAR ROW, create / reuse it accordingly
}
This has the advantage that ListView does some of the dirty work for you, so you'll be given the correct view type to recycle.

Animate Textviews within elements of a listview separately

I’ve got a layout which consists of multiple views arranged in a relative layout. This layout will be inflated within an adapter of a listview.
Now I want to animate each element of my listview separately (not the element itself, but a textview within it), for instance on an onClick event. The animation should consist of a transition of a textview, and a fading of another one.
I don’t really have an idea here. I’ve got my ArrayList of Objects which holds the data for the elements of my listview. This ArrayList is given to the adapter which fills the textviews.
I guess I need a way now to approach the textviews. But how do I do that? I fiddled around with the getView Method of the Adapter class, without any success. To get the position of the clicked element within the adapter/arraylist is no problem at all.
Any ideads/different approaches?
I tried to attach an ObjectAnimator in my Adapter, which looks like this:
ObjectAnimator animation = ObjectAnimator.ofFloat(holder.txtPlayerPoints,"x", 200);
animation.setDuration(2000);
holder.txtPlayerPoints.setTag(R.id.tag_animation_in,animation);
And in my onClick I tried to start it like so:
((ObjectAnimator ) textView.getTag(R.id.tag_animation_in)).start();
The reference to the textView is correct, but it didn't move. The Debugger also says that the "mTag" porperty of my textView is "null". Any suggestions?
Edit: Here's the layout of each element:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp">
<TextView
android:layout_width="fill_parent"
android:layout_height="#dimen/bar_upper_height"
android:paddingLeft="#dimen/bar_name_padding"
android:text="Hendrik"
android:textSize="#dimen/font_player_name"
android:id="#+id/txtNamePlayer"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#color/txt_default"
android:textStyle="bold"
android:textColor="#android:color/white"
android:gravity="center_vertical" />
<TextView
android:layout_width="#dimen/bar_rank_width"
android:layout_height="#dimen/bar_rank_height"
android:layout_marginLeft="#dimen/bar_upper_margin"
android:layout_marginBottom="#dimen/bar_upper_margin"
android:textSize="#dimen/font_bar_info"
android:text="1"
android:id="#+id/txtRankPlayer"
android:layout_alignLeft="#id/txtNamePlayer"
android:layout_alignBottom="#id/txtNamePlayer"
android:background="#android:color/white"
android:textStyle="bold"
android:textColor="#color/txt_default"
android:gravity="center_vertical|center_horizontal" />
<ImageView
android:layout_width="#dimen/bar_arrow_width"
android:layout_height="#dimen/bar_rank_height"
android:id="#+id/imgActivePlayer"
android:layout_toRightOf="#id/txtRankPlayer"
android:layout_marginLeft="#dimen/bar_upper_margin"
android:layout_alignBottom="#id/txtNamePlayer"
android:layout_marginBottom="#dimen/bar_upper_margin"
android:background="#drawable/active_player" />
<TextView
android:layout_width="#dimen/bar_rank_height"
android:layout_height="#dimen/bar_rank_height"
android:layout_marginRight="#dimen/bar_upper_margin"
android:layout_marginBottom="#dimen/bar_upper_margin"
android:text="12"
android:id="#+id/txtPointsPlayer"
android:layout_alignRight="#id/txtNamePlayer"
android:layout_alignBottom="#id/txtNamePlayer"
android:background="#android:color/white"
android:textStyle="bold"
android:textColor="#color/txt_default"
android:textSize="#dimen/font_bar_info"
android:gravity="center_vertical|center_horizontal" />
<TextView
android:layout_width="#dimen/bar_rank_height"
android:layout_height="#dimen/bar_rank_height"
android:layout_marginRight="#dimen/bar_upper_margin"
android:layout_marginBottom="#dimen/bar_upper_margin"
android:layout_toLeftOf="#id/txtPointsPlayer"
android:layout_alignBottom="#id/txtNamePlayer"
android:text="0"
android:id="#+id/txtCurrScorePlayer"
android:background="#color/txt_disabled"
android:textColor="#android:color/white"
android:textSize="#dimen/font_bar_info"
android:gravity="center_vertical|center_horizontal" />
<LinearLayout
android:orientation="horizontal"
android:id="#+id/aheadBehindPlayer"
android:layout_width="fill_parent"
android:layout_height="#dimen/bar_lower_height"
android:layout_below="#+id/txtNamePlayer"
android:layout_centerHorizontal="true"
android:background="#color/txt_disabled"
android:gravity="center_vertical"
android:paddingLeft="20dp"
android:paddingRight="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/ahead"
android:textSize="#dimen/font_bar_info"
android:textColor="#android:color/white"
android:id="#+id/textView2"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="15"
android:textSize="#dimen/font_bar_info"
android:textColor="#android:color/white"
android:id="#+id/txtPlayerAhead"
android:layout_weight="5"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="15"
android:textColor="#android:color/white"
android:textSize="#dimen/font_bar_info"
android:id="#+id/txtPlayerBehind"
android:textStyle="bold"
android:gravity="right"
android:layout_weight="5" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/behind"
android:textColor="#android:color/white"
android:textSize="#dimen/font_bar_info"
android:id="#+id/textView5"
android:gravity="right"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>
I want to animate txtPointsPLayer and txtCurrScorePlayer.

Just attach an ObjectAnimator to each view (using setTag()) and then retrieve it later during onClick. To create an animator you can do something like:
// Animate X from 0 to 200
ObjectAnimator animation2 = ObjectAnimator.ofFloat(myview,"x", 200);
animation2.setDuration(2000);
myview.setTag(animation2)
And then during onClick you get a reference to it and start it
((ObjectAnimator ) myview.getTag()).start()
Hope it helps.

I guess this is pretty much opinion based. Even though, I'm not an android expert, I believe that whatever approach you choose you will still need to get a reference of each TextView inside the ListView, specify the OnClickListener and start the animation. So, I'd approach this in such a way that I don't keep my activity/fragment polluted with child-views-specific logic by creating a custom view that extends from the TextView class where I would define everything related to this TextViews. So, basically, the activity/fragment only needs to know how the ListView...it doesn't care about the items inside it or what the items are doing...this is from an architecture-specific perspective

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.

How to hide listview dividers dynamically?

I have this ListView whose items i'd like to hide depending on the selection of a RadioGroup. Currently I'm passing a boolean to the ListAdapter due to the RadioGroup having only two options. My items contain a checkbox and i want to either show the entire list or just the ones with the check boxes checked. I'm succeeding at hiding the items but the dividers still show, how can i fix this?
Look how it looks like
http://www.mediafire.com/i/?wa2s0ngq027vjwr
http://www.mediafire.com/i/?9i6ggj2fdsns2da
(I'm new, so i can't upload images here)
The xml for my row would be:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:padding="1dip" android:gravity="center_vertical"
android:background="#FFF">
<CheckBox android:id="#+id/dispositivo_tv"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textColor="#000000" android:textSize="15dip"
android:layout_alignParentLeft="true" />
<LinearLayout android:id="#+id/botones"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:layout_alignParentRight="true" android:gravity="center_vertical">
<ImageButton android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/button_foto"
android:src="#drawable/camera" android:background="#FFF"
android:paddingRight="15dip" android:visibility="invisible"></ImageButton>
<ImageButton android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/button_comentario"
android:src="#drawable/comment_add" android:background="#FFF"
android:paddingRight="15dip"></ImageButton>
</LinearLayout>
</RelativeLayout>
and the xml block for the ListView would be:
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="horizontal"
android:padding="5dip" android:background="#layout/list_box">
<ListView android:id="#android:id/list" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:cacheColorHint="#00000000"
android:headerDividersEnabled="false" android:footerDividersEnabled="false
</ListView>
</LinearLayout>
and what i use to hide the row when the boolean i told you about is set FALSE is:
wrapper.getDispositivo().setVisibility(View.GONE);
wrapper.getFoto().setVisibility(View.GONE);
wrapper.getComentario().setVisibility(View.GONE);
PS: wrapper is the instance of the class where i have all the elements of the row, i.e. the checkbox (getDispositivo()), and a couple of image buttons (getFoto(), getComentario())
Thanks in advance...

How about using custom dividers in your relative layout and setDivider(null); so once you hide the layout the dividers are hidden as well. I wanted to actually add this as a comment. But it comes only after 50 reps so had to put it as a answer.

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).