I'm developing the memory card game that has twelve cards, three rows made up of four cards.
To do this, the layout consists of three linear layouts that contain four textview each.
How can I do in another way using a grid layout?
This is my layout xml to create the cards rows:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="4">
<ImageView
android:id="#+id/iv_a"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="centerInside"
android:src="#drawable/card" />
<ImageView
android:id="#+id/iv_b"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="centerInside"
android:src="#drawable/card" />
<ImageView
android:id="#+id/iv_c"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="centerInside"
android:src="#drawable/card" />
<ImageView
android:id="#+id/iv_d"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="centerInside"
android:src="#drawable/card" />
</LinearLayout>
You can use GridView for this situation. I put my very simplified codes here, so you can use them and change them as you need. This GridView has just 12 ImageViews.
Create an Adapter class for GridView:
MyGridViewAdapter.java
public class MyGridViewAdapter extends BaseAdapter {
private Context context;
private List<Integer> drawables;
MyGridViewAdapter(Context context) {
this.context = context;
}
void setDrawables(List<Integer> drawables)
{
this.drawables = drawables;
}
public int getCount() {
return drawables.size();
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// create new ImageViews for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
// main layout of each item of gridView:
RelativeLayout relativeLayout=new RelativeLayout(context);
relativeLayout.setLayoutParams(new GridView.LayoutParams((int)dpToPx(context, 100),
(int)dpToPx(context, 100)));
// images:
ImageView imageView = new ImageView(context);
imageView.setImageResource(R.drawable.ic_launcher_background);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,
RelativeLayout.LayoutParams.MATCH_PARENT));
relativeLayout.addView(imageView);
return relativeLayout;
}
private float dpToPx(Context context, float dp) {
return dp * context.getResources().getDisplayMetrics().density;
}
}
Add GridView to your activity layout:
activity_test.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".TestActivity"
android:orientation="vertical">
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/gridView"
android:numColumns="auto_fit"
android:gravity="center"
android:columnWidth="100dp"
android:stretchMode="columnWidth"
android:choiceMode="singleChoice"
android:drawSelectorOnTop="true"
android:focusable="true"
android:clickable="true"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:layout_margin="10dp"/>
</LinearLayout>
Use these codes in your activity:
TestActivity.java
public class TestActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test);
// list of 12 images:
List<Integer> drawables=new ArrayList<>();
for(int i=0; i<12; i++)
{
drawables.add(R.drawable.ic_launcher_background);
}
// gridView adapter:
MyGridViewAdapter adapter = new MyGridViewAdapter(this);
adapter.setDrawables(drawables);
// gridView:
GridView gridView = findViewById(R.id.gridView);
gridView.setAdapter(adapter);
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
// what happen when you click on each item
}
});
}
}
and the result:
Good luck!
<GridLayout 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:columnCount="4"
android:rowCount="3" >
<ImageView
android:id="#+id/iv_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:src="#drawable/card" />
<ImageView
android:id="#+id/iv_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:src="#drawable/card" />
.
.
.
</ GridLayout>
Read: https://medium.com/google-developer-experts/android-grid-layout-1faf0df8d6f2
Related
So I have cardview which contains a textview and linearlayout, and inside the linearlayout I want to add variable number of image views (These views will be holding app icons). How can I achieve this inside RecyclerView's onBindViewHolder.
Code for CardView (Here the linearlayout will hold imageviews):
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_margin="3dp"
android:orientation="horizontal"
card_view:cardCornerRadius="5dp"
card_view:cardUseCompatPadding="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground">
<TextView
android:id="#+id/profile_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_margin="4sp"
android:gravity="center"
android:textColor="#android:color/black"
android:textSize="12sp" />
<LinearLayout
android:id="#+id/profile_app_icons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true">
</LinearLayout>
<ToggleButton
android:id="#+id/main_page_toggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_margin="5sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
Code for Adapter (Which I am trying to implement):
public class ProfileListAdapter extends RecyclerView.Adapter<ProfileListAdapter.ProfileViewHolder>{
private List<ProfileContentsFull> pcf;
ProfileListAdapter(List<ProfileContentsFull> pcf) {
this.pcf = pcf;
}
#Override
public ProfileViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_view_main_page, parent, false);
return new ProfileViewHolder(v);
}
#Override
public void onBindViewHolder(ProfileViewHolder holder, int position) {
holder.profileName.setText(pcf.get(position).getProfileName());
holder.linearLayout.set
}
#Override
public int getItemCount() {
return 0;
}
public static class ProfileViewHolder extends RecyclerView.ViewHolder {
public TextView profileName;
public LinearLayout linearLayout;
public ToggleButton toggle;
public ProfileViewHolder(View itemView) {
super(itemView);
profileName = (TextView) itemView.findViewById(R.id.profile_name);
linearLayout = (LinearLayout) itemView.findViewById(R.id.profile_app_icons);
toggle = (ToggleButton) itemView.findViewById(R.id.main_page_toggle);
}
}
}
Layout containing the recyclerview:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content_main"
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.retr0spect.quit.social.media.addiction.MainActivity"
tools:showIn="#layout/app_bar_main">
<android.support.v7.widget.RecyclerView
android:id="#+id/main_page_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"/>
</RelativeLayout>
Thanks in advance!
You can add ImageView dynamically into LinearLayout like below.
ImageView imageView = new ImageView(holder.linearLayout.getContext());
holder.linearLayout.addView(imageView);
And you can add multipal ImageView by putting above lines within Loop. ImageViews are added only in vertical or Horizontally.
#Override
public void onBindViewHolder(ProfileViewHolder holder, int position) {
holder.profileName.setText(pcf.get(position).getProfileName());
LayoutInflater layoutinflater=(LayoutInflater)getActivity().getSystemService(getActivity().LAYOUT_INFLATER_SERVICE);
holder. linearLayout.removeAllViews();
for (int j = 1; j < pcf.get(position).getImageArray().size(); j++) {
Log.d(TAG, "&& J :" + j);
// inflate the layout
convertView = layoutinflater.inflate(R.layout.adapter_images, null, false);
convertView.setId(j);
ImageView imageView = (ImageView) convertView.findViewById(R.id.iv_image);
//set image here
holder.linearLayout.addView(convertView);
}
}
adapter_images.xml
<ImageView
android:id="#+id/iv_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
I have a GridView which has a ViewFlipper in each tile. Each view in the ViewFlipper has a different size, but when the tile is flipped, both views are forced to the same size as the GridView column. What i've tried:
Googled
Set android:measureAllChildren to false on ViewFlipper(only works with ListView)
Left android:columnWidth unspecified
Made ViewFlipper root tag in grid tile layout file
grid_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="180dp" android:layout_height="150dp">
<ViewFlipper
android:layout_width="match_parent"
android:layout_height="match_parent"
android:measureAllChildren="false"
android:id="#+id/view_flipper_3"
>
<RelativeLayout
android:layout_width="180dp"
android:layout_height="150dp"
android:id="#+id/front2"
android:background="#088980"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/commitmentNumber"
android:textSize="25dp"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="220dp"
android:layout_height="190dp"
android:background="#000000"
android:id="#+id/back_2"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:id="#+id/commitmentPartOne"
android:paddingBottom="5dp"
android:textSize="25sp"
android:text="Part One"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/commitmentPartTwo"
android:textSize="25sp"
android:text="Part Two"
android:paddingBottom="5dp"
android:layout_below="#+id/commitmentPartOne"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/commitmentPartThree"
android:textSize="25sp"
android:text="Part Three"
android:layout_below="#+id/commitmentPartTwo"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>
</ViewFlipper>
</RelativeLayout>
fragment_with_gridview.xml:
<?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">
<GridView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/sixCommitmentsGridView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:numColumns="2"
android:gravity="center"
android:columnWidth="179dp"
android:stretchMode="columnWidth"
/>
</RelativeLayout>
GridViewAdapter.java:
public class SixCommitmentsGridAdapter extends BaseAdapter {
Context context;
String[] numbers;
public SixCommitmentsGridAdapter(Context context, String[] numbers) {
this.context = context;
this.numbers = numbers;
}
#Override
public int getCount() {
return numbers.length;
}
#Override
public Object getItem(int position) {
return numbers[position];
}
#Override
public long getItemId(int position) {
return 0;
}
#Override
public View getView(final int position, View convertView, ViewGroup parent) {
View view;
final ViewFlipper flipper;
TextView commitmentNumber;
if(convertView == null){
LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflater.inflate(R.layout.six_commitments_grid_item, parent, false);
}else{
view = convertView;
}
flipper = (ViewFlipper) view.findViewById(R.id.view_flipper_3);
commitmentNumber = (TextView) view.findViewById(R.id.commitmentNumber);
commitmentNumber.setText(numbers[position]);
flipper.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if(position % 2 == 0 || position == 0){
AnimationFactory.flipTransition(flipper, AnimationFactory.FlipDirection.RIGHT_LEFT, 200);
}else {
AnimationFactory.flipTransition(flipper, AnimationFactory.FlipDirection.LEFT_RIGHT, 200);
}
}
});
return view;
}
}
Managed to achieve the same grid-style layout with my intented ViewFlipper effect using a StaggeredGridLayoutManager and a RecyclerView.
In Main RelativeLayout contain ViewFlipper, you set height and width!
set them "wrap_content"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
maybe worked.
good luck.
Update
Use this library:
https://github.com/etsy/AndroidStaggeredGrid
I have followed the example at https://developer.android.com/guide/topics/ui/layout/gridview.html and used other resources on SO to make it at least not crash given I'm using the grid view in a fragment.
I'm trying to just get a list of images to show in the grid view (for simplicity I've just put the same image twice in mThumbIds in ImageAdapter).
But when I run the app, no GridView at all is showing in the fragment. Other views in the fragment load fine, but it's like the gridview isn't even there. I'm not really sure how to debug this.
Any help is appreciated, thanks.
ImageAdapter.java:
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return mThumbIds.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
// if it's not recycled, initialize some attributes
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
// references to our images
private Integer[] mThumbIds = {
R.drawable.placeholder, R.drawable.placeholder
};
}
PlaceholderFragment:
public static class PlaceholderFragment extends Fragment
{
...
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
View rootView = inflater.inflate(R.layout.fragment_items, container, false);
TextView textView = (TextView) rootView.findViewById(R.id.items_subheading);
textView.setText(getString(R.string.section_format, getArguments().getInt(ARG_SECTION_NUMBER)));
GridView allImages = (GridView) rootView.findViewById(R.id.items_all_images);
allImages.setAdapter(new ImageAdapter(rootView.getContext()));
allImages.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v, int position, long id)
{
// empty
}
});
return rootView;
}
fragment_items.xml
<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.myapp.ItemsActivity$PlaceholderFragment">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="top|left"
android:orientation="vertical">
<ImageView
android:id="#+id/items_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/placeholder"
android:scaleType="fitStart"
style="#style/ItemsImage" />
<GridView
android:id="#+id/items_all_images"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnWidth="20dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:gravity="center"
android:background="#000000"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="vertical"
android:background="#drawable/items_border">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- About 10 text views -->
</LinearLayout>
</LinearLayout>
</LinearLayout>
Edit
Aiming for:
Edit 2
Solution: Figured it out! Needed android:adjustViewBounds="true" on the ImageView. Without that attribute it seemed to be taking unlimited space below its position.
I think that you have an issue with the LinearLayout who wraps the GridView your LinearLayout is a vertical linear layout so if you use weight the height of the GridView should be 0dp and in your code the height is wrap_content and the width is 0dp so please change the height to 0dp and the width to wrap_content or match_parent
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="2"
android:gravity="top|left"
android:orientation="vertical">
<GridView
android:id="#+id/items_all_images"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="20dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:gravity="center"
/>
UPDATE
According to your mock i think this is what i would do:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:text="text1"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:text="text1"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:text="text1"
android:layout_height="wrap_content" />
<!-- If the number of textviews is dynamic and not fixed then it's better to use ListView
with adapter
-->
<!--<ListView-->
<!--android:id="#android:id/list"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="wrap_content" />-->
</LinearLayout>
<GridView
android:id="#+id/items_all_images"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_green_dark"
android:layout_marginTop="5dp"
android:columnWidth="20dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp" />
</LinearLayout>
Please notice if your textviews are not fixed (can be 3 or more ...) then you will need to use ListView with adapter. So each line item in the ListView will be a TextView
I am trying to incorporate 2 lists "sections" into a LinearLayout via height weights. The issue that I am having is that, though the container for the "section" is displayed with the proper height (where the background is sub_gray), and the adapter count is correct, the height of my actual list rows is 0 which makes my list appear invisible.
LIST ITEM
Below is the code that my list rows/items directly work with. To avoid the wall of code getting too long, I will include my code for one of the lists seeing as they are both behaving the same.
layout_quick_guide_checklist_item
<?xml version="1.0" encoding="utf-8"?>
<com.my_project.project.QuickGuideChecklistListItemView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:background="#color/sub_gray"
android:orientation="horizontal" >
<CheckBox
android:id="#+id/checkbox_checklist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_gravity="center"
android:checked="true"
android:clickable="false" />
<TextView
android:id="#+id/text_field"
style="#style/default_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="#string/height_wrap_string"/>
</com.my_project.project.QuickGuideChecklistListItemView>
QuickGuideChecklistListItemView
public class QuickGuideChecklistListItemView extends LinearLayout{
private TextView listText;
public QuickGuideChecklistListItemView(Context context) {
super(context);
}
public QuickGuideChecklistListItemView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public QuickGuideChecklistListItemView(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
}
public static QuickGuideChecklistListItemView inflate(ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) parent.getContext().
getSystemService(Context.LAYOUT_INFLATER_SERVICE);
QuickGuideChecklistListItemView itemView = (QuickGuideChecklistListItemView)
inflater.inflate(R.layout.layout_quick_guide_checklist_item, parent, false);
return itemView;
}
#Override
public void onFinishInflate(){
super.onFinishInflate();
listText = (TextView) findViewById(R.id.text_field);
}
public void setText(String text){
listText.setText(text);
}
}
COMPLETE LIST
Now I take the above code and use it within my activity to create a list (recall; there are actually two lists in my activity, constructed similarly, and both resulting in row heights of 0).
QuickGuideDetailActivity
public class QuickGuideDetailActivity extends NavigationDrawerActivity implements OnClickListener{
private final String TAG = getClass().getSimpleName();
private QuickGuideModel selectedQuickGuide;
private QuickGuideChecklistAdapter checklistAdapter;
private QuickGuideTipAdapter tipsAdapter;
private TextView quickGuidesTitle, quickGuidesDescription, inflaterButton;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
selectedQuickGuide = QuickGuidesActivity.selectedQuickGuide;
buildLists();
}
#Override
protected int getLayoutId(){
return R.layout.sub_activity_quick_guide;
}
public void checkAdapterSize(View v){
String checklistString = (checklistAdapter == null)? "null": "" + checklistAdapter.getCount();
String tipString = (tipsAdapter == null)? "null": "" + tipsAdapter.getCount();
Toast.makeText(this, checklistString + " : " + tipString,
Toast.LENGTH_SHORT).show();
}
private void buildLists(){
TextView checklistTitle = (TextView) findViewById(R.id.checklist_title_bar);
checklistTitle.setText(getResources().getString(R.string.title_checklist));
ArrayList<String> checklistStrings = new ArrayList<String>();
for(Object guide : selectedQuickGuide.checklist){
checklistStrings.add((String) guide.toString());
}
checklistAdapter = new QuickGuideChecklistAdapter(checklistStrings);
ListView checklist = (ListView) findViewById(R.id.checklist_list);
checklist.setAdapter(checklistAdapter);
Log.d(TAG, "List Size - Checklist = " + selectedQuickGuide.checklist.length);
TextView tipsTitle = (TextView) findViewById(R.id.tips_title_bar);
tipsTitle.setText(getResources().getString(R.string.title_tips));
tipsAdapter = new QuickGuideTipAdapter(selectedQuickGuide.topTips);
ListView tips = (ListView) findViewById(R.id.tips_list);
tips.setAdapter(tipsAdapter);
Log.d(TAG, "List Size - Tips = " + selectedQuickGuide.topTips.length);
}
}
sub_activity_quick_guide
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/nav_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
style="#style/default_container"
android:layout_margin="15dp"
android:orientation="vertical" >
<include
android:id="#+id/expandable_section"
layout="#layout/section_expandable_details" />
<LinearLayout
style="#style/default_container"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:id="#+id/checklist_section"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginBottom="8dp"
android:background="#color/sub_gray"
android:onClick="checkAdapterSize" >
<View
android:layout_width="1dp"
android:layout_height="15dp" />
<TextView
android:id="#+id/checklist_title_bar"
style="#style/default_label_text_view"
android:background="#color/random_blue"
android:text="#string/loading" />
<ListView
android:id="#+id/checklist_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#color/off_white"
android:dividerHeight="1dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/tips_list_section"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="7dp"
android:background="#color/sub_gray"
android:onClick="checkAdapterSize" >
<View
android:layout_width="1dp"
android:layout_height="15dp" />
<TextView
android:id="#+id/tips_title_bar"
style="#style/default_label_text_view"
android:background="#color/random_blue"
android:text="#string/loading" />
<ListView
android:id="#+id/tips_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#color/off_white"
android:dividerHeight="1dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView
android:id="#+id/nav_drawer_list_view"
android:layout_width="#dimen/drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white" />
</android.support.v4.widget.DrawerLayout>
QuickGuideChecklistAdapter
public class QuickGuideChecklistAdapter extends BaseAdapter{
private ArrayList<String> guides;
private List<Boolean> checklistItemTicked = new ArrayList<Boolean>();
public QuickGuideChecklistAdapter(ArrayList<String> guides){
this.guides = guides;
for(int i = 0; i < guides.size(); i++)
checklistItemTicked.add(false);
}
#Override
public int getCount() {
return guides.size();
}
#Override
public String getItem(int position) {
if(position < 0 || position >= guides.size())
throw new IndexOutOfBoundsException("Position is out of range of list with size " + guides.size());
return guides.get(position);
}
#Override
public long getItemId(int position) {
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
QuickGuideChecklistListItemView itemView = (QuickGuideChecklistListItemView)convertView;
if (null == itemView)
itemView = QuickGuideChecklistListItemView.inflate(parent);
itemView.setText(guides.get(position));
Log.d(getClass().getSimpleName(), "Setting text to " + guides.get(position) + " in position " + position);
return itemView;
}
}
Sorry for the wall of code, but I have tried adjusting everything and just can't seem to get anything to work. So just as a final bit:
The adapters are set, getCount() returns the valid count of items in the list and clicking on the layouts in order to call checkAdapterSize() also results in a Toast with the proper values.
The first view is "inflated" but results in a view height of 0.
The container layouts for my list "sections" (checklist_section in sub_activity_quick_guide for example) have a height which can be seen by the sub_gray background.
I have tried changing height attributes from match_parent to wrap_content and vice versa with no luck. I have tried explicitly declaring a minHeight for my list items and all that good stuff. I just can't seem to ever get a list row item to actually inflate.
Funny how I always manage to figure out an answer to my own questions right after I post a question on SO after days of trying :P
Anyway, the issue was in placing my ListViews inside of LinearLayouts with heights determined by weight. I removed the LinearLayout wrappers for my "sections" and applied the weights to my ListViews directly, voila... good to go.
New complete working Activity layout
sub_activity_quick_guide
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/nav_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
style="#style/default_container"
android:layout_margin="15dp"
android:orientation="vertical"
android:weightSum="2" >
<include
android:id="#+id/expandable_section"
layout="#layout/section_expandable_details" />
<View
android:layout_width="1dp"
android:layout_height="15dp" />
<TextView
android:id="#+id/checklist_title_bar"
style="#style/default_label_text_view"
android:background="#color/random_blue"
android:text="#string/loading" />
<ListView
android:id="#+id/checklist_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:divider="#color/off_white"
android:dividerHeight="1dp" />
<View
android:layout_width="1dp"
android:layout_height="15dp" />
<TextView
android:id="#+id/tips_title_bar"
style="#style/default_label_text_view"
android:background="#color/random_blue"
android:text="#string/loading" />
<ListView
android:id="#+id/tips_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:divider="#color/off_white"
android:dividerHeight="1dp" />
</LinearLayout>
<RelativeLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView
android:id="#+id/nav_drawer_list_view"
android:layout_width="#dimen/drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white" />
</android.support.v4.widget.DrawerLayout>
Hope it helps someone in the future, didn't realize weights would mess with it like that but apparently ListViews don't like weighted containers.
I've got a GridView inside a scrollview and the GridView has 4 images loaded into it (via an ImageAdapter). My issue is I can get 3 of the images to show but the 4th doesn't. After further investigation, I've found that the height of the gridview is only the height of the row, so if I set the gridview height in xml to 700dp, then it shows up.
Here's a screenshot:
As you can see, I've set the background of the GridView to HotPink to illustrate where the GridView is.
Here's the XML for the main_menu:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/llLayoutContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<!-- <LinearLayout android:id="#+id/llMiddle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"> -->
<LinearLayout
android:id="#+id/llLeft"
android:layout_width="400dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/layout_left"
android:paddingLeft="5dp"
android:paddingRight="5dp">
<ScrollView
android:id="#+id/svMenu"
android:layout_width="400dp"
android:layout_height="match_parent"
>
</ScrollView>
</LinearLayout>
<LinearLayout
android:id="#+id/llRight"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#drawable/layout_right"
android:padding="0dp">
</LinearLayout>
<!-- </LinearLayout> -->
</LinearLayout>
The LinearLayout "llLeft" is the layout where the menu items get loaded (inside the ScrollView). layout_left is only a shape which draws the dark outline around the greenish background.
Here's the main_menu_header.xml which contains the GridView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="5dp">
<TextView
android:id="#+id/tvDashboardHeader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Dashboard Main Menu"
android:textSize="20dp"
style="#style/TextShadow"
android:paddingTop="5dp"
android:gravity="left"
android:background="#drawable/menu_item_bg"
/>
<GridView
android:id="#+id/gvMenuItems"
android:layout_width="400dp"
android:layout_height="match_parent"
android:columnWidth="110dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:background="#color/HotPink"
android:gravity="center" >
</GridView>
</LinearLayout>
And here's how I populate the GridView:
ScrollView sv = (ScrollView)findViewById(R.id.svMenu);
LayoutInflater liInflater = getLayoutInflater();
ViewGroup vg = (ViewGroup)liInflater.inflate(R.layout.main_menu_header, sv, false);
sv.addView(vg);
//Setup the Main Menu items on the left side.
GridView gvMenuItems = (GridView) findViewById(R.id.gvMenuItems);
gvMenuItems.setAdapter(new ImageAdapter(this));
ImageAdapter class:
ImageAdapter class:
public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return mThumbIds.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
// if it's not recycled, initialize some attributes
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(parent.getLayoutParams().width, 125)); //new GridView.LayoutParams(400, 125));
//imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
imageView.setMaxHeight(50);
imageView.setMaxWidth(50);
//imageView.setPadding(30, 0, 0, 0);
//imageView.setPadding(40, 30, 20, 30);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
// references to our images
private Integer[] mThumbIds = {
R.drawable.home,
R.drawable.open_folder,
R.drawable.paper_pen,
R.drawable.person
};
}
I thought the gridview property of android:layout_height="match_parent" would work but it's not. Any ideas as to how I can get the GridView to take up the whole left side, inside the scrollview?
My best guess is that scrollview is giving you problem.
Why do u need scrollview for?
Grid View will handle the scrolling. It is kind of redundant.So please remove it and add inflated view directly to llLeft directly. That shall solve the problem.
In fact, it would be more elegant just to use xml to solve your UI problem. Use <include> tag in your main_menu.xml. Here is how
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/llLayoutContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<!-- <LinearLayout android:id="#+id/llMiddle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"> -->
<LinearLayout
android:id="#+id/llLeft"
android:layout_width="400dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/layout_left"
android:paddingLeft="5dp"
android:paddingRight="5dp">
<include
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/main_menu_header" />
</LinearLayout>
<LinearLayout
android:id="#+id/llRight"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#drawable/layout_right"
android:padding="0dp">
</LinearLayout>
<!-- </LinearLayout> -->