Search code examples
androidandroid-linearlayoutmarginandroid-gridlayoutlayoutparams

Android - How to set margin to custom LinearLayouts in GridLayout?


I have problems with setting margin to a custom made linear layout class that I use multiple times in a GridLayout. The Gridlayout is placed in a fragment. This is the code of fragment_grid.xml:

<FrameLayout 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"
tools:context="app_a_tize.expressme.Fragment.GridFragment"
android:layout_gravity="center">

<GridLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/orange"
    android:layout_margin="5dp"
    android:id="@+id/gridlayout_grid"></GridLayout>
</FrameLayout>

This is the code of the GridFragment.java:

public class GridFragment extends Fragment {
public GridFragment() {
    // Required empty public constructor
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment_grid, container, false);
}

@Override
public void onStart() { 
    super.onStart();
    GridLayout grid = (GridLayout) getView().findViewById(R.id.gridlayout_grid);
    grid.setRowCount(3);

    int tileHeight = (CategoryTileActivity.gridContentHeight -3 * 10) / 3;
    int amountofColumns = (int) CategoryTileActivity.gridContentWidth / tileHeight;
    grid.setColumnCount(amountofColumns);
    grid.setMinimumWidth((amountofColumns * tileHeight) + (5 * 20 ));

    for (int i = 0; i < 3 * amountofColumns; i++) {
    //fill the grid with the custom LinearLayout:
        grid.addView(new TileClass(getActivity(), tileHeight, tileHeight, "ToBeImplemented", "Button"));
    }

}
}

This is the code of the custom LinearLayout:

public class TileClass extends LinearLayout {
public TileClass(Context context, int height, int width, String image, String text) {
    super(context);
    this.setBackgroundResource(R.drawable.tile_button); //creates rounded layouts
    this.setMinimumHeight(height);
    this.setMinimumWidth(width);
    this.setOrientation(LinearLayout.VERTICAL);

    ImageView tileImage = new ImageView(context);

    Bitmap bMap = BitmapFactory.decodeResource(getResources(), R.drawable.tilephoto);
    Bitmap bMapScaled = Bitmap.createScaledBitmap(bMap, 100, 100, true);
    tileImage.setImageBitmap(bMapScaled);

    tileImage.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));

    TextView tileText = new TextView(context);
    tileText.setText(text);
    tileText.setTextColor(Color.WHITE);
    tileText.setGravity(Gravity.CENTER);

    addView(tileImage);
    addView(tileText);
}
}

When I run the Activity, I get this as result: Here you can see there is no margin on every button in the orange area.

The code I showed above is responsible for the orange area in the middle.

What I need: the blue "buttons"/LinearLayouts, in the orange area in the middle, to have a margin of 5dp. So the rest of the orange space is be taken by the custom LinearLayouts.

I don't know how to fix that, I tried a lot of options but they don't seem to work out for me.. Everything from MarginLayoutParams to params.setMargins(5,5,5,5); On almost every layout in my code.

I use Android Studio 2.1.2, supporting minimum of API 15.

Every help is appreciated!
For your imagination, this must be the end result, I need the margin like this: This is the endresult of the GridLayout in the middle


Solution

  • You have to make custom view of gridview item as below:-

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="@dimen/categoryHeight"
        android:layout_marginLeft="@dimen/margin_5dp"
        android:layout_marginRight="@dimen/margin_5dp"
        android:layout_marginTop="@dimen/margin_7dp"
        android:background="@drawable/rounded_bg"
    >
    
        <ImageView
            android:id="@+id/llRowItem"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:scaleType="fitXY"
            android:gravity="bottom"/>
    
            <TextView
                android:id="@+id/item_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/black_light"
                android:padding="@dimen/margin_5dp"
                android:layout_gravity="bottom"
                android:singleLine="true"
                android:textColor="@color/white"
                android:textSize="@dimen/font_size_16sp" />
    </FrameLayout>
    

    and inside adapter set color of text view, background, text or image of imageview whatever you want to set.