Develop Reference

Which LayoutManager for the animations of a 2048 game?

For training purposes, I am currently replicating the 2048 game. I got the logic and interaction done, but print (and simply refresh) it inside a single TextView which looks ridiculous, of course.
When thinking about how to build a UI for the game, I am uncertain which LayoutManager to choose. What I need to be doing in the game's 4 x 4 grid is to merge and add cells inside rows and columns with animation. It seems to me that:
GridLayout won't work since it is dealing with the full dataset (16 tiles in four rows/columns) when I need to be able to deal with single rows and columns. However, I am not sure about this. I have worked with GridLayout before, but never manipulated the number of items (add, remove) and never used animation with that manipulation. Is there a way of manipulating single rows and columns?
LinearLayout won't work since I get in trouble when I want to manipulate columns, but have four horizontal LinearLayouts, or rows, but have four vertical LinearLayouts.
RelativeLayout or ConstraintLayout would be possible - maybe. Here the trouble seems to be that I have to keep track of my 16 views, TextViews probably, and programmatically construct full layouts so I can tell animation what to do. Certainly viable, but challenging.
CustomLayout is a choice, but on which superclass should I build it and why?
Am I missing the easy solution? If not, what would be the most "natural" LayoutManager for my data structure (which is currently an array of 16 integers, but could easily be changed to a 4 x 4 array of integers).

Update: Included demo of a tile appearing and two tiles being combined.
I suggest that you go with ConstraintLayout. It will allow you to position your views efficiently and can provide you with some easy animation. I have mocked up a quick sample below to demonstrate this approach.
Here is a video of the results:
The XML layout uses ConstraintLayout as the view group. The two boxes are simply text views but could easily be image views or another type of view.
The two boxes simply move vertically between horizontal guidelines at 24dp (gdln0) and 520dp (gdln100) for textView1 and 148dp (gdln25) and 520dp (gdln100) for textView2. These movement are animated using ConstraintSet and TransitionManager through a click handler attached to the "animate" button. Here is the XML followed by the code:
activity_main.xml
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.constraint.Guideline
android:id="#+id/gdln0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="24dp" />
<android.support.constraint.Guideline
android:id="#+id/gdln25"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="148dp" />
<android.support.constraint.Guideline
android:id="#+id/gdln50"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="272dp" />
<android.support.constraint.Guideline
android:id="#+id/gdln75"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="396dp" />
<android.support.constraint.Guideline
android:id="#+id/gdln100"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="520dp" />
<TextView
android:id="#+id/textView1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="24dp"
android:background="#android:color/darker_gray"
android:gravity="center"
android:text="2"
android:textColor="#android:color/white"
android:textSize="72sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/gdln0" />
<TextView
android:id="#+id/textView2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="24dp"
android:background="#android:color/darker_gray"
android:gravity="center"
android:text="4"
android:textColor="#android:color/white"
android:textSize="72sp"
app:layout_constraintStart_toEndOf="#+id/textView1"
app:layout_constraintTop_toBottomOf="#id/gdln25" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:text="Animate"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
private int mSquareSide;
private int mMargin;
private int mBoardState = 0;
private TextView mNewView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Resources r = getResources();
mSquareSide = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100, r.getDisplayMetrics());
mMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 24, r.getDisplayMetrics());
findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
ConstraintLayout layout = (ConstraintLayout) findViewById(R.id.layout);
ConstraintSet newSet = new ConstraintSet();
mBoardState = (mBoardState + 1) % 3;
switch (mBoardState) {
case 0: // Just reset the board to its starting condition.
setContentView(R.layout.activity_main);
findViewById(R.id.button).setOnClickListener(this);
break;
case 1: // Move tiles down and insert new tile.
mNewView = new TextView(layout.getContext());
mNewView.setId(View.generateViewId());
mNewView.setBackgroundColor(getResources().getColor(android.R.color.darker_gray));
mNewView.setTextSize(72);
mNewView.setTextColor(getResources().getColor(android.R.color.white));
mNewView.setText("2");
mNewView.setVisibility(View.INVISIBLE);
mNewView.setGravity(Gravity.CENTER);
ConstraintLayout.LayoutParams lp = new ConstraintLayout.LayoutParams(mSquareSide, mSquareSide);
mNewView.setLayoutParams(lp);
layout.addView(mNewView);
newSet.clone(layout);
newSet.connect(mNewView.getId(), ConstraintSet.TOP,
R.id.gdln0, ConstraintSet.BOTTOM);
newSet.connect(mNewView.getId(), ConstraintSet.START,
ConstraintSet.PARENT_ID, ConstraintSet.START, mMargin);
newSet.clear(R.id.textView1, ConstraintSet.TOP);
newSet.clear(R.id.textView2, ConstraintSet.TOP);
newSet.connect(R.id.textView1, ConstraintSet.BOTTOM,
R.id.gdln100, ConstraintSet.BOTTOM);
newSet.connect(R.id.textView2, ConstraintSet.BOTTOM,
R.id.gdln100, ConstraintSet.BOTTOM);
TransitionManager.beginDelayedTransition(layout);
newSet.applyTo(layout);
mNewView.setVisibility(View.VISIBLE);
break;
case 2: // Move tiles up and combine two tiles.
newSet.clone(layout);
newSet.clear(R.id.textView1, ConstraintSet.BOTTOM);
newSet.clear(R.id.textView2, ConstraintSet.BOTTOM);
newSet.connect(R.id.textView1, ConstraintSet.TOP,
R.id.gdln0, ConstraintSet.BOTTOM);
newSet.connect(R.id.textView2, ConstraintSet.TOP,
R.id.gdln0, ConstraintSet.BOTTOM);
Transition transition = new AutoTransition();
transition.addListener(new Transition.TransitionListener() {
#Override
public void onTransitionStart(Transition transition) {
}
#Override
public void onTransitionEnd(Transition transition) {
mNewView.setText("4");
// Here you would remove the overlapped view
// with layout.removeView(View);
}
#Override
public void onTransitionCancel(Transition transition) {
}
#Override
public void onTransitionPause(Transition transition) {
}
#Override
public void onTransitionResume(Transition transition) {
}
});
TransitionManager.beginDelayedTransition(layout, transition);
newSet.applyTo(layout);
break;
}
}
});
}
}

I think I would go with plain drawing the whole thing without using any TextView or similar.
Let me explain you why.
Assuming you have a set of 16 TextView, which is the maximum that you can have in your grid, you should manage which one is visible and which one is not, hide it or not, move it inside a layout or not. This would take up many resources and if you're using a layout like the ones you've described, a "free" transition would not be possible too.
Assume you have two tiles and you want one to slide on the other and merge them. The only usable layout I can think of is RelativeLayout because it's the one with the most easily manipulable constraints.
You'll have to deal with every TextView though, managing the gradual transition and the overlap, while making Android consider ALL the stuff a TextView can do.
Now, you'll have to do all that movement/overlapping stuff anyway, so why don't you do that by drawing each tile? You'll have to write some more code to draw an hypothetic Tile class into a canvas (note that you might change your data structure a bit).
After you have your drawing mechanism you'll have to make the same stuff you would do with TextViews, but in a different, freer, way of thinking, with fewer constraints and by using less Android resources.
I know you were asking advice about some Layout to use and I'm proposing to draw the tiles by yourself, this might not be what you needed and if I bothered you with this long talk I apologise, but if you were asking for advice in a "wider" manner I think this is a good idea to keep in mind.
And it would be a great occasion to learn about 2d drawing on Android too!
Happy coding!

Android custom component - How to automatically fix the width of columns

I created a custom component called ScrollListView, which is basically a table, extending ListView. Using the function getView below, I fill this component with the data coming from the database. It works perfectly and the result is visually that:
Obviously I would like the cells were aligned, like this:
To achieve this, currently I perform the calculations to measure all the cell sizes, and then adjust the column based on the widest cell, but GC is called several times, causing lag during scrolling, as previously reported is this thread
My question is: how to automatically fix/measure the size of the columns, without crazy calculations called in every getView call, extinguishing all those GC occurrences? I've tried to extend the GridView instead ListView, but it did not work. I´m new on Android.
(I CAN NOT use a standard component, such as GridView or GridLayout, I MUST use my custom component ScrollListView due to other more complex functions that currently operate correctly)
Thanks in advance and sorry for my bad english
Edit: Here is my code (the getView code is in the thread already mentioned):
scroll_listview.xml
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:background="#color/BackGroundColor"
android:scrollbars="none" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal">
<TableLayout
android:id="#+id/header_lv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
</TableLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<android.ListView
android:id="#+id/rows_lv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="0dip"
android:divider="#null"
android:dividerHeight="0dp"
android:padding="0dip"
android:scrollbars="horizontal"
android:gravity="center_horizontal"
android:stretchColumns="*"
/>
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
And my ScrollListView.java
public class ScrollListView extends LinearLayout
{
TableLayout header;
ListView rows;
public ScrollListView(Context context, AttributeSet attrs)
{
super(context, attrs);
LayoutInflater layoutInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view=layoutInflater.inflate(R.layout.scroll_listview,this);
if (!this.isInEditMode())
{
rows = (ListView)this.findViewById(R.id.rows_lv);
header = (TableLayout)this.findViewById(R.id.header_lv);
rows.setOnRedrawListener(new OnListViewRedraw() {
#Override
public void onBeforeRedraw() {
}
#Override
public void onAfterRedraw() {
}
});
rows.setHeader(header);
rows.setMyParent(this);
}
// (and so on...)

Check out the TableLayout.onMeasure() source code. They find the widths of the cells for all children, then adjusts all children to match accordingly. You will need some modified version of this to fit your needs.

Align a Button with an Image inside another Layout

Apologies for the confusing header. My problem is explained better in the following image:
I need the green Button to be aligned with the top of the Image, but the Image is inside another Layout. Is this possible?
It can be done in code if necessary; XML is not required. I am targeting Android 2.2 and newer.
EDIT:
My current implementation is to simply set the MarginTop-property of the Button, but this is inconvenient when I need to change the sizes of the text inside the LinearLayout, which I plan to do depending on the screen size.
I think it can be solved by somehow finding the Y coordinate of the Image, perhaps by adding the heights of the TextViews, and then setting this as the MarginTop for the Button, but this sounds cumbersome. Is there really no other option?
The LinearLayout is going to be placed inside a ViewPager (with multiple views, all having an image in the same position), which is why I can't do it the way preeya explains.

It's possible but more complicated than including the button into the same layout. If you definitely don't want to do that, you can't use XML (which is always faster). You have to do 3 steps in your code:
1.) Wait until the view is drawn
private void waitForViewToBeDrawn(){
// get your layout
final RelativeLayout mainLayout = (RelativeLayout) findViewById(R.id.mainLayout);
ViewTreeObserver vto = mainLayout.getViewTreeObserver();
// add a listener
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
public void onGlobalLayout() {
// you also want to remove that listener
mainLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
// go on to next step
getPositionOfImageView();
}
});
}
That approach works best for me, but if you have troubles - here are some alternatives.
There are also [more solutions][2] out there when you use API level 11 and higher...
2.) Get the top-position of your imageView
private void getPositionOfImageView(){
ImageView imageView = (ImageView) findViewById(R.id.imageView);
// Top position view relative to parent (Button and ImageView have same parent)
int topCoordinate = imageView.getTop();
adjustButton(topCoordinate);
}
3.) Add or adjust the button in order to be aligned with the image
public void adjustButton(int topCoordinate){
Button button = (Button) findViewById(R.id.button);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params.topMargin = topCoordinate;
button.setLayoutParams(params);
}
This step would be smoother by using API 11: button.setTop(topCoordinate)
Of course you can shorten all of it and put it in a singele method, just thought that 3 steps are better to explain. Hope that code helps to get started!

U can use linearlayout for displaying image & button as follows :
<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"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/longText"
android:gravity="center"
android:text="Some very long text" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:id="#+id/subtitle"
android:layout_below="#+id/longText"
android:text="subtitle" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_below="#+id/subtitle"
android:layout_toLeftOf="#+id/subtitle"
android:layout_height="wrap_content"
android:text="button" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/button1"
android:layout_below="#+id/subtitle"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</RelativeLayout>

Which of layout should i use?

I'm confused. I want to show the map and on below of map show 5 buttons. I use RelativeLayout, but the program just show Product button. Why? I'm confused which layout i use (Linear,Relative,Frame or absolute )!! Please help me. and How can i correct this code?
location.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/frame"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.google.android.maps.MapView
android:id="#+id/mapView"
android:apiKey="0cPRv243zM1_S3ydsNg8MJP9_6BfCp642jOhPvQ"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background"
android:layout_gravity="bottom"
android:orientation="horizontal" >
<Button
android:id="#+id/button_home"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/home_icon"
android:text="#string/button_home"
android:textColor="#color/text_home" />
<Button
android:id="#+id/button_product"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/product_icon"
android:onClick="Product"
android:text="#string/button_product"
android:textColor="#color/text_product" />
</LinearLayout>
</LinearLayout>

To answer your specific problem: Instead of saying that the home button is to the left of the product button, you should say that the product button is to the right of the home button. When a RelativeLayout is inflated, the layout is parsed in a linear way so if view A it positioned relative to view B, view B must come first.
<Button
android:id="#+id/button_home"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/home_icon"
android:text="#string/button_home"
android:textColor="#color/text_home"/>
<Button
android:id="#+id/button_product"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_home"
android:drawableTop="#drawable/product_icon"
android:onClick="Product"
android:text="#string/button_product"
android:textColor="#color/text_product" />
Add this to the product button and delete the layout_toLeftOf from the home button.
android:layout_toRightOf="#id/button_home"
You can use gravity and alignment to position the home button and then have the other four buttons following it, each one positioned to the right of the one before it.
Good luck

RelativeLayout by default places these 2 buttons together, so you can just see the latter.
And the line
android:layout_toLeftOf="#+id/button_product"
is wrong. #+id creates an id, use #id in such cases.
I would recommend LinearLayout for the situation. Place these buttons in it, and adjust them with some margin.

LinearLayout : LinearLayout is used when we need to arrange the
widgets/views in a horizontal or vertical manner.
The direction of arrangement can be set to horizontal or vertical,
by default it is being horizontal.
TableLayout : If the Layout's widgets/views need to be arranged
in the form of rows and columns, we use this layout object.
This is similar to html tables. The cells can span columns.
The TableLayout do not display its border. We can be made to
shrink and stretch by setting the respective properties of the columns,
"TableRow" is another helper widget which should be used in conjunction
with the TableLayout.
RelativeLayout : Here the position of each of the widgets/view is
in relative/dependent to each other. For example, when a layout is needed
such that it has a text view just to the left of an Edit Textbox, and a button
just below the EditText. The relation between the views are taken care in
one iteration, hence if view B’s position is dependent on view A’s position,
view A must come first in the layout.
FrameLayout : This is a very simply layout which is used to hold a section
of the screen blank, for displaying an item or group of items at run time. All the
elements added in the framelayout will be added to the top left of the screen.
AbsoluteLayout : When there is a need is to specify exact x and y co-ordinate
position of the view, then AbsoluteLayout need to be used. This layout is
difficult to maintain.

Detect click on screen when in landscape

I'm having some trouble with detecting screen clicks on the GUI. Works in portrait but fails in landscape, see below.
I have a GUI (Fragment) which contains some instructions + images. The user is required to tap anywhere on the screen to proceed. In order capture the click/tap event, I have put in a View(topview) that fill the entire screen and sits onto of other elements, I then listen for clicks on this view and it works fine.
The problem is when in landscape mode, the text and images take up to much room. So the whole thing is now wrapped in a ScrollView. This is where the problem begins. When the ScrollView is active, (i.e. you can scroll/scroll bars are visible), my view on top (topview) disappears. It seems that when in landscape mode the height of content in a ScrollView is being changed. As an experiment I replaced the View with a Button and the Button goes from filling the screen in portrait to being normal height in landscape mode when the ScrollView is usable.
Is there a way of me detecting the user tapping on the screen, which works with the ScrollView control as the top element. I've tried rearranging the GUI in several ways but without success, and I've tried adding onClick event handlers to the ScrollView, also without success.
My Layout is below, note my top view is semi-transparent red, so I could see the area it covered.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:clickable="true" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical" >
<TextView
android:id="#+id/txtInstructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:padding="10dp"
android:text="#string/instructions"
android:textColor="#color/blue"
android:textSize="20sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:maxWidth="250dp"
android:padding="20dp"
android:src="#drawable/main_camera" />
</LinearLayout>
<View
android:id="#+id/view_to_listen_for_touch"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#88FF0000"
android:clickable="true" />
</RelativeLayout>

One thing that works(although looks like more like a hack(pretty ugly)) is to programatically add the special View in code(in the onCreate method) and set its dimensions based on the parent RelativeLayout's exact dimensions. Here is a snippet of code:
//...
final RelativeLayout parent = (RelativeLayout) findViewById(R.id.ff);
final View layer = new View(this);
layer.setBackgroundColor(Color.parseColor("#88FF0000"));
// the ScrollView really doesn't like this View ,using this without the
// runnable will not work
layer.setLayoutParams(new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT,
RelativeLayout.LayoutParams.MATCH_PARENT));
layer.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "SDFD",
Toast.LENGTH_SHORT).show();
}
});
parent.addView(layer);
// this is required because if we use directly the getWidth/getHeight we
// will get 0/0
layer.post(new Runnable() {
#Override
public void run() {
layer.setLayoutParams(new RelativeLayout.LayoutParams(parent
.getWidth(), parent.getHeight()));
}
});
//...