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.
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.
Here is how I would like it to look.
So I would like to stretch the two cells across three columns.
Below is my code for what I have implemented so far
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<?> 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;
}
}
Here is the code for my fragment layout including the gridview
<?xml version="1.0" encoding="utf-8"?>
<Relative xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id = "@+id/dub_photo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/photo"/>
<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">
</GridView>
</RelativeLayout>
and finally the layout for my grid item
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="@+id/gridItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:padding="10dp">
<ImageView
android:id ="@+id/grid_item_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
<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" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/horizontal_border"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/gridItem">
<ImageView
android:id = "@+id/hor_border"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/grid_line_horizontal"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_alignStart="@id/horizontal_border"
android:layout_height="wrap_content"
android:layout_above="@+id/horizontal_border">
<ImageView
android:id = "@+id/ver_border"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/grid_line_vertical"/>
<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"/>
</RelativeLayout>
</RelativeLayout>
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.
Thanks!