android customize tablerow with imageview overflow tablerow

Question

i am trying to create a tablelayout to show one user's profile picture and his name.Everything works fine except the layout is wired. the image view overflow the tablerow. i set the tablerow layout_height="70dp" and iamgeview layout_height ="50dp" and layout_margin="10dp" in order to vertically centrallize the image. tablerow xml:

<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="70dp"
    android:orientation="horizontal"
    android:layout_marginBottom="1dp"
    android:background="#fff">
    <ImageView
        android:layout_height="50dp"
        android:layout_width="50dp"
        android:id="@+id/pic"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:background="#f00"/>
    <TextView
        android:layout_height="20dp"
        android:layout_width="wrap_content"
        android:layout_marginTop="25dp"
        android:layout_marginRight="25dp"
        android:id="@+id/value"
        android:textColor="#000"
        android:layout_alignParentRight="true"
        android:layout_weight="3.0"
        android:textAlignment="gravity"
        android:gravity="right"
        />
</TableRow>

tablelayout xml:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#fff">
        <TableLayout android:id="@+id/contact_table"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#aaa">
        </TableLayout>
</ScrollView>

java code:

table =(TableLayout)findViewById(R.id.contact_table);
                    LayoutInflater inflater = getLayoutInflater();
                    TableRow row = (TableRow)inflater.inflate(R.layout.profilerow, table, false);
                    ImageView tag = (ImageView)row.findViewById(R.id.pic);
                    new DownloadImageTask(tag).execute(me.getDp_address());
                    TextView value = (TextView)row.findViewById(R.id.value);
                    value.setText(me.getFirst_name()+" "+me.getLast_name());
                    table.addView(row);

                    TableRow row2 = (TableRow)inflater.inflate(R.layout.centertextrow,table ,false);
                    table.addView(row2);



private class DownloadImageTask extends AsyncTask<String,Void,Bitmap>{
        ImageView img;
        public DownloadImageTask(ImageView bmImage){
            this.img = bmImage;
        }
        @Override
        protected Bitmap doInBackground(String... urls) {
            String url_string = urls[0];
            Bitmap micoin = null;
            try {
                InputStream in = new java.net.URL(url_string).openStream();
                micoin = BitmapFactory.decodeStream(in);
            } catch (IOException e) {
                Log.i("michaellog","error a");
                //Log.e("michaellog",e.getMessage());
                e.printStackTrace();
            }
            return micoin;
        }

        @Override
        protected void onPostExecute(Bitmap bitmap) {
            super.onPostExecute(bitmap);
            img.setImageBitmap(bitmap);
        }
    }

here is an image of how it looks like:link

the image shift down.

score 0 · Accepted Answer · edited May 23 '17 at 12:06

Aloha!

I ran into the same type of problem when creating a list of youtube feeds that was put into a table view for our university app. The only difference I see from my layout and yours is I have added a android:scaleType="centerCrop" to the tableview cell that is created. This should scale your image to fit in the correct area. I am also using a linear layout instead of the tableRow type for each cell in the table that gets populated. I would also check out the answer here as well. https://stackoverflow.com/a/15832564/877568

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/semesterButtonLL"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView android:layout_width="50dip" 
        android:id="@+id/image" 
        android:src="@drawable/icon72" 
        android:layout_height="50dip" 
        android:scaleType="centerCrop">
    </ImageView>
    <TextView android:text="TextView"
        android:id="@+id/text" 
        android:textColor="@color/usu_blue"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="left|center_vertical"
        android:textSize="20dip"
        android:layout_marginLeft="10dip">
    </TextView>
</LinearLayout>

As for the code you provided everything looks ok on how you are bringing the data in and if it is displaying the image on the link you provided then it may be as simple as adding the centerCrop to the line in your xml. I hope this helps.

hey, thz for the suggestion. i opened the link. I realized that they used ListView instead of tablelayout and scrollview. what did you use? tablelayout or listview? — m_____ilk, Sep 22 '15 at 06:12
ListView. I personally used the code above for the cell and then the parent container was a Relative layout with the listview as a child. The same as what is suggested in the example. This method of creating a table is the older way of doing it. The TableLayout does basically the same thing in its own layout but I know that the listview method works well. — Big Kahuna, Sep 22 '15 at 16:22

android customize tablerow with imageview overflow tablerow

1 Answers1