GridView with image and text - android

I'm very new in android and need a little help with this task.
I have gridview witch pull images and text from database and display them. Currently is displayed like image and on the right of the image is text. I want to make text under the image. Can you help me with this task. This is the gridview.xml
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1" >
<GridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:horizontalSpacing="5dp"
android:verticalSpacing="5dp"
android:numColumns="2" >
</GridView>
</LinearLayout>
And this is how I display image and text in it table_column.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bckimageviw"
>
<ImageView
android:id="#+id/ColPhoto"
android:layout_width="0dp"
android:layout_height="0dp"
/>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:id="#+id/ColName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:text="Name"
/>
</LinearLayout>
</LinearLayout>
And if need getView()
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
convertView = inflater.inflate(R.layout.table_column, null);
}
// ColPhoto
ImageView imageView = (ImageView) convertView.findViewById(R.id.ColPhoto);
imageView.getLayoutParams().height = 80;
imageView.getLayoutParams().width = 80;
imageView.setPadding(10, 10, 10, 10);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
try
{
imageView.setImageBitmap((Bitmap)MyArr.get(position).get("ImageThumBitmap"));
} catch (Exception e) {
// When Error
imageView.setImageResource(android.R.drawable.ic_menu_report_image);
}
// ColName
TextView txtName = (TextView) convertView.findViewById(R.id.ColName);
txtName.setPadding(5, 0, 0, 0);
txtName.setText("" + MyArr.get(position).get("name").toString());
return convertView;
}

u can use relative layout and set align textview to imageview.
try this.
<?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"
android:background="#ff0000"
android:gravity="center" >
<ImageView
android:id="#+id/ColPhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/ColName"
android:layout_alignRight="#+id/ColName"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/ColName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/ColPhoto"
android:gravity="center"
android:text="Name name" />
</RelativeLayout>

I don't know why add a single element LinearLayout in another LinearLayout.
if grid item need to be put in correct position, I'd like use RelativeLayout instead.
`
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="#+id/ColPhoto"
android:layout_width="0dp"
android:layout_height="0dp"
/>
<TextView android:id="#+id/ColName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/ColPhoto"
android:text="Name"
/>
</RelativeLayout>
`

Try to change your orientation to "vertical".
EDIT:
Like, Tr4X said you don't need second LinearLayout. You can put both in one.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bckimageviw" >
<ImageView
android:id="#+id/ColPhoto"
android:layout_width="0dp"
android:layout_height="0dp"/>
<TextView
android:id="#+id/ColName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name" />
</LinearLayout>

Related

Android: Unable to setText in Custom ListView

I have created a custom ListView with 2 ImageView and a TextView.
In the Adapter, I'm doing setText in TextView, but it is not visible in the app.
Here is my List:
<?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"
android:background="#ffffff">
<View
android:layout_width="fill_parent"
android:layout_height="5dp"
android:background="#289FA5"/>
<RelativeLayout
android:layout_marginTop="7dp"
android:layout_marginLeft="7dp"
android:layout_marginBottom="15dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#289FA5">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Popular products"
android:textSize="23sp"
android:padding="7dp"/>
</RelativeLayout>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="120dp">
<LinearLayout
android:id="#+id/pop_pro_men"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
</HorizontalScrollView>
<RelativeLayout
android:layout_marginTop="15dp"
android:layout_marginLeft="7dp"
android:layout_marginBottom="15dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#289FA5">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Catagories"
android:textSize="23sp"
android:padding="7dp"/>
</RelativeLayout>
<ListView
android:id="#+id/cata_men"
android:layout_width="fill_parent"
android:layout_height="wrap_content"></ListView>
Here is my Custom List:
<LinearLayout
android:id="#+id/custom_list"
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:background="#ffffff">
<ImageView
android:layout_gravity="left"
android:id="#+id/imageView2"
android:layout_height="130dp"
android:layout_marginLeft="7dp"
android:layout_width="120dp"
android:src="#drawable/clothing_men"/>
<TextView
android:id="#+id/cata_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Clothing"
android:layout_marginTop="35dp"
android:textStyle="bold"
android:textSize="27sp"
android:padding="10dp"
android:layout_weight="1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/forward_arrow"
android:layout_marginTop="42dp"/>
And Here is the getView method of my Adapter:
public View getView(final int position, View convertView, ViewGroup parent) {
final Holder holder = new Holder();
View rowView;
rowView = inflater.inflate(R.layout.custom_subcatagory_list, null,true);
TextView sub_catagory= (TextView) rowView.findViewById(R.id.cata_name);
ImageView pic = (ImageView) rowView.findViewById(R.id.imageView2);
sub_catagory.setText(catagory[position]);
pic.setImageResource(image[position]);
Log.d("Strings========", sub_catagory.getText().toString());
rowView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(context, "You Clicked " + catagory[position], Toast.LENGTH_LONG).show();
}
});
return rowView;
}
Please Help as i am unable to find what is wrong in this.
Remove your layout_weight attribute from your TextView. If you remove sub_catagory.setText(catagory[position]); does "Clothing" appear when you run your app?
I got the answer now. I don't know how my textColor was set to White, because i didn't mentioned it. So, change the color to something else and it worked.And it wasted my whole day.
Sorry to disturb you all.

Layout not appear right in runtime

I use monodevelop ti android developing. I wanna add a loading item in end of my list that is loading from internet.
I use this xml file for this propose:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="125dp">
<RelativeLayout
android:id="#+id/LoadingRealtive"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dip"
android:background="#drawable/List_Menu_Bg"
>
<ProgressBar
android:id="#+id/loadingListItems"
style="#style/GenericProgressIndicator"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<TextView
android:text="Loading..."
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/loadingListItems"
android:id="#+id/textView1"
android:layout_centerHorizontal="true"
android:textColor="#6b6b6b" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/MainRelative"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dip"
android:background="#drawable/List_Menu_Bg">...MyListItems </RelativeLayout></LinearLayout>
and in View of my list used this code:
public override View GetView (int position, View convertView, ViewGroup parent)
{
View vi = convertView;
try {
if (convertView == null)
vi = activity.LayoutInflater.Inflate (Resource.Layout.list_row, parent, false);
RelativeLayout LoadingRelative=(RelativeLayout ) vi.FindViewById (Resource .Id.LoadingRealtive);
RelativeLayout ContentRelative=(RelativeLayout ) vi.FindViewById (Resource .Id.MainRelative );
if(Data [position ] == null)
{
ContentRelative .Visibility =ViewStates.Gone ;
LoadingRelative .Visibility = ViewStates.Visible ;
}else{
ContentRelative .Visibility =ViewStates.Visible ;
LoadingRelative .Visibility = ViewStates.Gone ;<...MyListCodes...>
}
} catch (Exception ex) {
Common.HandleException (ex);
}
return vi;
}
It work fine.just problem is that the loading layout loads wrap_content while it must load fill_parent.
I don't understand why it is?
can any body help me?
when use linearlayout as a wrapperview, you should give android:weight to its chield views which has fill_parent attribute.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="125dp">
<RelativeLayout
android:id="#+id/LoadingRealtive"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dip"
android:background="#drawable/List_Menu_Bg"
android:weight="1"
>
<ProgressBar
android:id="#+id/loadingListItems"
style="#style/GenericProgressIndicator"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<TextView
android:text="Loading..."
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/loadingListItems"
android:id="#+id/textView1"
android:layout_centerHorizontal="true"
android:textColor="#6b6b6b" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/MainRelative"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dip"
android:background="#drawable/List_Menu_Bg"
android:weight="1" >
</RelativeLayout>

How to center align a textview below imageview as a title in a List view

I am not able to align a text below imageview in a listview. below is my code.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center" >
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="50dp" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/icon"
android:layout_alignParentBottom="true"
android:gravity="center"
android:singleLine="true"
android:layout_marginLeft="20dp"
android:textColor="#color/white"/>
</RelativeLayout>
and ListView is
<ListView android:id="#+id/grid_view"
android:layout_width="wrap_content"
android:layout_height="280sp"
android:layout_alignParentLeft="true"
android:layout_marginTop="20dp"
android:layout_toLeftOf="#+id/imgView"
android:scrollbars="none"
android:divider="#null"
android:gravity="center" >
</ListView>
java code to dynamically add text and image from array
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = l_Inflater.inflate(R.layout.gridview_layout, null);
holder = new ViewHolder();
holder.imageName = (TextView) convertView.findViewById(R.id.name);
holder.image = (ImageView) convertView.findViewById(R.id.icon);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.imageName.setText(name[position]);
holder.image.setImageResource(mThumbIds[position]);
return convertView;
}
not getting how to center text below imageview. please help me to solve this problem.
Simply use the layout_centerHorizontal attribute in your TextView:
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/icon"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:singleLine="true"
android:textColor="#color/white" />
In textview change
android:layout_width="wrap_content"
to
android:layout_width="match_parent"
You should use Linear layout to set orientation attribute. Set orientation to vertical for Linear layout and set imageview attribute android:layout_gravity="center"
Here is the complete code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:layout_marginBottom="#dimen/activity_horizontal_margin"
>
<ImageView
android:id="#+id/grid_item_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/home" >
</ImageView>
<TextView
android:id="#+id/grid_item_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cardiology"
android:layout_gravity="center"
android:layout_marginTop="5px"
android:textSize="20sp" >
</TextView>
</LinearLayout>
hope it will help

Android: Custom view from xml layout

i would like to create a custom View (subclass of the View class) and use a layout xml resource.
I want something like this:
public class CustomView extends LinearLayout {
public CustomView(Context context) {
super(context);
LayoutInflater mInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
mInflater.inflate(R.layout.tweet, this, true);
}
This actually creates a View with the right height and width (a ScrollView with a list of those has exactly the expected length and scrollbars) but they are empty (black) even though the xml layout contains a lot of TextViews.
This is my xml layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tweet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffff">
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
android:background="#ffffff">
<TextView
android:text="User"
android:id="#+id/tvusername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textStyle="bold">
</TextView>
<View
android:layout_width="5dip"
android:layout_height="1dip">
</View>
<TextView
android:text="userscreenname"
android:id="#+id/tvuserscreenname"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
<TextView
android:text="0s"
android:id="#+id/tvtime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true">
</TextView>
</RelativeLayout>
<TextView
android:text="Tweet Content"
android:id="#+id/tvcontent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000">
</TextView>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#ffffff">
</View>
<TextView
android:text="Retweet by"
android:id="#+id/tvrtby"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
This is my main layout:
<?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"
android:background="#ffffff"
>
<ScrollView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/scrollView1"
android:orientation="vertical"
android:layout_alignParentTop="true">
<LinearLayout
android:layout_width="match_parent"
android:id="#+id/timeline"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#ffffff">
<TextView
android:id="#+id/tvoutput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/hello"
/>
</LinearLayout>
</ScrollView>
</LinearLayout>
This is how I add the custom view to my main view:
Not working (what I try to achieve):
TweetView ctweet = new TweetView(getApplicationContext(),tweet);
timeline.addView(ctweet);
My current solution (works, but uses no custom view):
View vtweet = View.inflate(getApplicationContext(), R.layout.tweet,null);
TextView tvusername = (TextView) vtweet.findViewById(R.id.tvusername);
TextView tvuserscreenname = (TextView) vtweet.findViewById(R.id.tvuserscreenname);
TextView tvcontent = (TextView) vtweet.findViewById(R.id.tvcontent);
TextView tvtime = (TextView) vtweet.findViewById(R.id.tvtime);
tvusername.setText(tweet.getUser().getName());
tvuserscreenname.setText('#' + tweet.getUser().getScreenName());
tvcontent.setText(tweet.getText());
//tvtime.setText(ctweet.tvtime.getText());
timeline.addView(vtweet);
you can use this in your xml just like any other view like <TextView
try <packageName.ClassName ie something like <com.example.CustomView
Probably you have to set the Layout Params of your TweetView object.
LinearLayout.LayoutParams fieldparams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT, 1.0f);
ctweet.setLayoutParams(fieldparams);

android gridview fit the size in to screen

The gridview of my application has an image and a text below it for each grid.
I need to make sure that the complete list of grid fit in to the screen (no overflow at bottom).
Here is how i have defined my gridview
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="3"
android:stretchMode="columnWidth"
android:layout_below="#+id/text1view"
android:gravity="center"
android:background="#drawable/home_bg"
/>
and each grid item is :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/GridItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
>
<ImageView android:id="#+id/grid_item_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="0dip"
android:layout_margin="0dip"
>
</ImageView>
<TextView android:id="#+id/grid_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:padding="0dip"
android:gravity="center_horizontal"
android:layout_below="#+id/grid_item_image"
android:layout_alignParentBottom="true"
>
</TextView>
</LinearLayout>
I have tried several ways to set the grid view layout param, but i am not getting the right output. Please help me here. the gridview adapter code is
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
LayoutInflater mInflater = (LayoutInflater) mContext
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = mInflater.inflate(R.layout.griditems, null);
holder = new ViewHolder();
holder.text1 = (TextView) convertView
.findViewById(R.id.grid_item_text);
Log.i(TAG, holder.text1.toString());
holder.image = (ImageView) convertView
.findViewById(R.id.grid_item_image);
// if it's not recycled, initialize some attributes
holder.image.setImageResource(gridItemIds[position]);
holder.text1.setText(gridTitles[position]);
int h = mContext.getResources().getDisplayMetrics().densityDpi;
convertView.setLayoutParams(new GridView.LayoutParams(h-50, h-20));
//holder.image.setScaleType(ImageView.ScaleType.CENTER_CROP);
//holder.image.setScaleType(ImageView.ScaleType.FIT_XY); ......
Try this:-
grid_item.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">
<LinearLayout android:id="#+id/linearLayout1" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center">
<ImageView android:id="#+id/imgIcon" android:src="#drawable/icon" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
<TextView android:text="TextView" android:id="#+id/txtDesc" android:layout_height="wrap_content" android:layout_width="wrap_content"></TextView>
</LinearLayout>
</LinearLayout>
gridview.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/mobGrid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:numColumns="auto_fit"
android:columnWidth="60dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
</LinearLayout>
try
android:layout_width="fill_parent"
android:layout_height="fill_parent"
for your GridView instead of wrap_content!

Categories

Resources