title: Span two columns of gridview over three
body: <p>I hope someone can help me, I have a grid layout populated by an adapter with 8 items. There are three columns in the grid, this leaves me with two rows with three full columns and on with two and an empty gap at the end. I have attached images to detail what I'm trying to achieve.  I want to be able to stretch the last row rows columns to fill the width of the gridview. This is being populated by an adapter.</p>
  
  <p>Below is how the app is now, I have content in 8 cells, there is no ninth cell in case there's confusion with my image.
  <img src="https://i.stack.imgur.com/yB5af.jpg" alt="How the application is now"></p>
  
  <p>Here is how I would like it to look.
  <img src="https://i.stack.imgur.com/WyBVq.png" alt="enter image description here">
  So I would like to stretch the two cells across three columns.</p>
  
  <p>Below is my code for what I have implemented so far </p>
  
  <pre><code>public class channels_fragment extends Fragment {
  
      private View view;
      private GridView channelsGridView;
      protected Handler handler;
      //protected GridAdapter gridAdapter;
      private Main_Activity main;
      private final ChannelsModel model = new ChannelsModel();
  
      static final String[] channelTitles = new String[]{"test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"};
  
  
      public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  
          main = (Main_Activity) this.getActivity();
          view = inflater.inflate(R.layout.channels_fragment_layout, null);
  
          channelsGridView = (GridView)view.findViewById(R.id.channelsGrid);
  
          channelsGridView.setAdapter(new ImageAdapter(this.getActivity(), channelTitles));
          channelsGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
              @Override
              public void onItemClick(AdapterView&lt;?&gt; parent, View view, int position, long id) {
  
              }
          });
  
  
          return view;
      }
  
  
      public static int convertDpToPixels(float dp, Context context){
          Resources resources = context.getResources();
          return (int) TypedValue.applyDimension(
                  TypedValue.COMPLEX_UNIT_DIP,
                  dp,
                  resources.getDisplayMetrics()
          );
      }
  
  class ImageAdapter extends BaseAdapter{
  
      private Context context;
      private final String[] channelTitles;
  
      public ImageAdapter(Context context, String[] channelTitles){
          this.context = context;
          this.channelTitles = channelTitles;
      }
  
      public View getView(int position, View convertView, ViewGroup parent) {
  
          LayoutInflater inflater = (LayoutInflater) context
                  .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  
          View gridView;
  
          if (convertView == null) {
  
              gridView = new View(context);
  
              // get layout from mobile.xml
              gridView = inflater.inflate(R.layout.grid_item_layout, null);
  
              // set value into textview
              TextView textView = (TextView) gridView
                      .findViewById(R.id.grid_item_text);
              textView.setText(channelTitles[position]);
  
              // set image based on selected text
              ImageView imageView = (ImageView) gridView
                      .findViewById(R.id.grid_item_image);
  
              ImageView iv = (ImageView) gridView.findViewById(R.id.ver_border_dark);
  
              String channelTitle = channelTitles[position];
  
              if (position == 6 ){
  
                  gridView.setBackgroundResource(R.drawable.background_bottom_dark);
                  textView.setTextColor(Color.WHITE);
  
              }
              if (position ==7)
  
              {
                  gridView.setBackgroundResource(R.drawable.background_bottom_dark);
                  textView.setTextColor(Color.WHITE);
                  iv.setVisibility(View.VISIBLE);
                  iv.setImageResource(R.drawable.grid_line_ondark_vert);
              }
  
              if (channelTitle.equals("test1")) {
                  imageView.setImageResource(R.drawable.icon_events);
              } else if (channelTitle.equals("test2?")) {
                  imageView.setImageResource(R.drawable.icon_whats_nearby);
              } else if (channelTitle.equals("test3")) {
                  imageView.setImageResource(R.drawable.icon_top_tips);
              } else if (channelTitle.equals("test4")) {
              imageView.setImageResource(R.drawable.icon_plan_my_trip);
              } else if (channelTitle.equals("test5")) {
                  imageView.setImageResource(R.drawable.icon_special_offers);
              } else if (channelTitle.equals("test6")) {
                  imageView.setImageResource(R.drawable.icon_explore_more);
              } else if (channelTitle.equals("test7")) {
                  imageView.setImageResource(R.drawable.icon_city_plus);
              } else if (channelTitle.equals("test8")) {
  
                  imageView.setImageResource(R.drawable.icon_audio_guides);
              }
  
          } else {
              gridView = (View) convertView;
          }
  
          return gridView;
      }
  
      @Override
      public int getCount() {
          return channelTitles.length;
      }
  
      @Override
      public Object getItem(int position) {
          return null;
      }
  
      @Override
      public long getItemId(int position) {
          return 0;
      }
  
  }
  </code></pre>
  
  <p>Here is the code for my fragment layout including the gridview</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;Relative xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"&gt;
  
      &lt;ImageView
          android:id = "@+id/dub_photo"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:background="@drawable/photo"/&gt;
  
      &lt;GridView
          android:id="@+id/channelsGrid"
          android:background="@drawable/light_background"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:columnWidth="100dp"
          android:numColumns="auto_fit"
          android:gravity="center"
          android:stretchMode="columnWidth"
          android:layout_below="@+id/dub_photo"&gt;
      &lt;/GridView&gt;
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>and finally the layout for my grid item</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"&gt;
  
      &lt;RelativeLayout
          android:id="@+id/gridItem"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_centerHorizontal="true"
          android:padding="10dp"&gt;
  
          &lt;ImageView
              android:id ="@+id/grid_item_image"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_centerHorizontal="true" /&gt;
  
          &lt;TextView
              android:textColor="#000000"
              android:id = "@+id/grid_item_text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textSize="12dp"
              android:layout_centerHorizontal="true"
              android:layout_below="@+id/grid_item_image"
              android:layout_marginTop="10dp" /&gt;
      &lt;/RelativeLayout&gt;
  
      &lt;RelativeLayout
          android:id="@+id/horizontal_border"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_below="@+id/gridItem"&gt;
  
          &lt;ImageView
              android:id = "@+id/hor_border"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:background="@drawable/grid_line_horizontal"/&gt;
      &lt;/RelativeLayout&gt;
  
      &lt;RelativeLayout
          android:layout_width="wrap_content"
          android:layout_alignStart="@id/horizontal_border"
          android:layout_height="wrap_content"
          android:layout_above="@+id/horizontal_border"&gt;
  
          &lt;ImageView
              android:id = "@+id/ver_border"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:background="@drawable/grid_line_vertical"/&gt;
  
          &lt;ImageView
              android:id = "@+id/ver_border_dark"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:background="@drawable/grid_line_ondark_vert"
              android:visibility="gone"/&gt;
      &lt;/RelativeLayout&gt;
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>If anyone could help me with this i'd appreciate it greatly.  I have researched the forums and I've come across suggestions of using gridlayout, there are supported from api 14 and up but I'm developing for api 9 and up.</p>
  
  <p>Thanks!</p>