CODEWITHSUNDEEP
android-layoutandroid
Vicky
Vicky

Reputation: 170

Creating UI dynamically in android

I want to make UI for tablet like shown in images.This UI will repeat according to number of items. And the position of each block (i.e small or big block) can change dynamically. Please give me suggestion which view,layout i should use. Any suggestion would be appreciated...thanks in advance.

enter image description here

Upvotes: 2

Views: 1484

Answers (6)

Salman khan
Salman khan

Reputation: 1255

It is also possible through table layout with its row span property

Upvotes: 1

Vicky
Vicky

Reputation: 170

With the help of StaggeredGridView I sloved my requirement. Thanks to all for help and support.

Upvotes: 0

user2259824
user2259824

Reputation: 135

Using LinearLayout where each category is added and using RelativeLayout for each category is a good option. You should customize onlayout method of the relative layout as a function of number of products it contains.

You can use fragments, listview as well.

EDIT after image change: You can just extend relativelayout and override onLayout method. This will perform better than nested layouts and I can't think of anything else you can get away with less effort.

EDIT for elaboration:

Here is an example class I use. Basically in the onlayout method you make every decision and tell all the child views to lay them in a rectangle by calling layout method of each of them and passing the parameters of the rectangle. See how I use layout method of child view to dictate the rectangle.

public class KnockPile extends  HandPile
{

private static final String TAG = "KnockPile";

static final int EXPECTED_CARDS = 3;

int mColoring; // this is the coloring group this pile is associated with.
// every card added to this pile should be set with this color.


public KnockPile(Context context, GameActivity ref , int ingroup)
{
    super(context );
    mColoring = ingroup;
    mActivityReference = ref;

    setWillNotDraw(false);
    setClickable(true);
    setOnDragListener(this);
    mCardBorders = new ArrayList<Integer>(); 

    final LayoutTransition transition  = new LayoutTransition();
    setLayoutTransition(transition );
    //transition .enableTransitionType(LayoutTransition.CHANGING);
    //transition .disableTransitionType(LayoutTransition.CHANGE_APPEARING);

}



/**
 * this overrides the card ordering of handpile. This method lays the cards in a linear fashion.
 * Possibly overlapping fashion. This is not dependent to orientation of screen.
 *
 * @see com.kavhe.kondi.gin.layouts.HandPile#onLayout(boolean, int, int, int, int)
 */
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {   


    int availablewidth = getMeasuredWidth() ;//this is the maximum availlable  
    int distance = availablewidth /Math.max(getChildCount(), 1) ; // the horizontal distance between two cards
    Log.v(TAG,"available width onlayout is :" + availablewidth +"and distance is  " + distance);
    int cardheight = getHeight();
    int cardwidth  = cardheight*3/4; 
    if(distance > cardwidth) distance = cardwidth;
    mCardBorders.clear();
    for(int i = 0 ; i < mCards.size() ; i++)
    {     
        //save this border into a global variable so that it can be used when one of the cards dragged
        //by user to show that user can insert to that location
        mCardBorders.add( i*distance);
        mCards.get(i).layout(  i*distance ,  0 , cardwidth+ i*distance ,   cardheight); 
    }

}
}

and this is from documentation

protected void onLayout (boolean changed, int left, int top, int right, int bottom)

Called from layout when this view should assign a size and position to each of its children. Derived classes with children should override this method and call layout on each of their children.

Parameters

changed This is a new size or position for this view

left Left position, relative to parent

top Top position, relative to parent

right Right position, relative to parent

bottom Bottom position, relative to parent

Upvotes: 1

evaristokbza
evaristokbza

Reputation: 872

If you are targeting a API v14 or above, you can use GridLayout: http://developer.android.com/reference/android/widget/GridLayout.html

Upvotes: 2

Steve
Steve

Reputation: 385

To design such UIs for Tablets you should use Fragments and inside the fragment add/remove your respective layouts. If you are taking Relative Layouts then proper usage of RelativeLayout.LayoutParams is required.

If you are looking for a best example which uses Fragments try Google IO app source. It uses various dynamic UI features.

Hope it helps !

Upvotes: 0

Ali Rasim Kocal
Ali Rasim Kocal

Reputation: 540

Are the "products" always going to fit nicely on lines as you have drawn? If then, you can use LinearLayouts (Vertical and Horizontal) nested in each other.

Upvotes: 0

Related Questions