CODEWITHSUNDEEP
javaandroidgridviewgrid-layoutandroid-gridlayout
Auro
Auro

Reputation: 1628

How to add multiple views as a single View to a GridLayout in Android?

So I have a GridLayout that I want to display both, ImageView & TextView in each of its cells. Each TextView should be placed right under the ImageView in the Grid cell.

Problem here is, a GridLayout only accepts a single View for each addition, unlike GridView where an Adapter does the job.

Please note that I cannot use GridView here as there's a constraint to restrict the number of Rows, so GridView is not an option for me.

I was wondering if there was any way in which I could create a custom view that would contain two different views within & add it to the GridLayout.

Thank you for your time!

Upvotes: 0

Views: 2711

Answers (3)

Karen Forde
Karen Forde

Reputation: 1127

Yes, you can create a custom view.

Create an XML layout file in res/layout with the layout you want for the view (most likely a vertical LinearLayout with an ImageView and TextView).

Then create a class for your custom view which inflates the layout.

public class CustomView extends LinearLayout {
    public CustomView(Context context) {
        super(context);

        LayoutInflater inflater = (LayoutInflater)this.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        if(inflater != null){       
            inflater.inflate(R.layout.my_layout, this);         
        }
    }
}

Then this can be accessed in your GridLayout as follows:

<GridLayout>
    <com.yourpackage.CustomView android:id="@+id\id"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.yourpackage.CustomView>
</GridLayout>

Upvotes: 1

Miroslav
Miroslav

Reputation: 453

You are right, you can create your own View.

First you need to create your layout file that could look like this

my_linear_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

  <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageView1"
      android:src="@android:drawable/sym_def_app_icon"
      android:layout_gravity="center_horizontal" />

  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="New Text"
      android:id="@+id/textView1"
      android:layout_gravity="center_horizontal" />
</LinearLayout>

Then you create your own class for this view and inflate it

MyView.java

package com.example.stack.test38526476;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MyView extends LinearLayout {

    private TextView text;
    private ImageView image;

    public MyView(Context context) {
        super(context);
        init();
    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        inflate(getContext(), R.layout.my_linear_layout, this);
        this.text = (TextView)findViewById(R.id.textView1);
        this.image = (ImageView)findViewById(R.id.imageView1);
    }
}

Finally, you can use it in your GridLayout

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.stack.test38526476.MainActivity">

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <com.example.stack.test38526476.MyView/>

        <com.example.stack.test38526476.MyView/>

        <com.example.stack.test38526476.MyView/>

    </GridLayout>


</RelativeLayout>

Upvotes: 0

petin
petin

Reputation: 700

In your place I would use RecyclerView with GridLayoutManager.

You can set it:

recyclerView.setLayoutManager(new GridLayoutManager(this, 2));

where the number indicates the row count. For every item in the RecyclerView you can have custom layout (as in all adapters), which don't need to be single View

Upvotes: 0

Related Questions