Develop Reference

Android: How to add Image and then text below it in scroll view?

Hi guys I am trying to build a layout but I am not able to understand how to build it
what I am trying to do is to add a Image whose height and width will be of screen size and below it will be a description about the Image which the users can view when they scroll it but the whole screen will be consisting of image only until the user scrolls the text below will not be displayed
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scrollView"
android:fillViewport="true"
>
<RelativeLayout
android:layout_weight="1"
android:id="#+id/relativla"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/hamburger"
android:id="#+id/navi"
android:padding="10dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:background="#drawable/dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/descrpitiondietplan"
android:id="#+id/textView5"
android:layout_below="#+id/imageView"
/>
</RelativeLayout>
</ScrollView>
you can see in the below link the way i want the layout to be
http://postimg.org/image/avgmk6pi3/
please feel free to drop in comments if you need any additional details
EDIT 1
After trying rachel solution I am getting this
http://postimg.org/image/tdb02gu9l/
now as you can see in the image the image view is taking whole width of the screen which is fine but it doesn't take the whole height of the screen if i write match_parent to the imageview layout_height the image takes the whole screen but it doesn't allow me to scroll

It sounds like you'll need to do some work to get the screen size of the device, then set the image view's size programatically using that.
See the accepted answer here for more details on calculating the device screen size: Android Layout, view height is equal to screen size

Finally got it working after a bit of research on google and stackoverflow finally got a way
so here it is first your activity / fragment
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.second_frag, container, false);
img = (ImageView) v.findViewById(R.id.imageView);
Drawable drawable = getResources().getDrawable(R.drawable.dp);
Bitmap bitmap = ((BitmapDrawable)drawable).getBitmap();
float scalingFactor = this.getBitmapScalingFactor(bitmap);
Bitmap newBitmap = Util.ScaleBitmap(bitmap, scalingFactor);
// Set the bitmap as the ImageView source
this.img.setImageBitmap(newBitmap);
return v;
}
private float getBitmapScalingFactor(Bitmap bm) {
// Get display width from device
int displayWidth = getActivity().getWindowManager().getDefaultDisplay().getWidth();
// Get margin to use it for calculating to max width of the ImageView
RelativeLayout.LayoutParams layoutParams =
(RelativeLayout.LayoutParams)this.img.getLayoutParams();
int leftMargin = layoutParams.leftMargin;
int rightMargin = layoutParams.rightMargin;
// Calculate the max width of the imageView
int imageViewWidth = displayWidth - (leftMargin + rightMargin);
// Calculate scaling factor and return it
return ( (float) imageViewWidth / (float) bm.getWidth() );
}
as i am using fragment I have onCreateView onCreate will be for people using activity
and create a Utils class
public class Util {
public static Bitmap ScaleBitmap(Bitmap bm, float scalingFactor) {
int scaleHeight = (int) (bm.getHeight() * scalingFactor);
int scaleWidth = (int) (bm.getWidth() * scalingFactor);
return Bitmap.createScaledBitmap(bm, scaleWidth, scaleHeight, true);
}
if you guys have a better solution do let me know

how can i reduce the row height in a custom listview android

I created a custom listview with rowlayout.xml and custom adapter. heach row has a pair of textveiws and background, the problem is i can't reduce the height if i set the background image for the row. if quit it the height is so small.
I need create a custom row with background and reduce the height how i cant, i tried change re row.xml height, but it doesn't work. in the android's ui visor it seems is going to work, but when I run it the row never changes his size.
this is the code for the row
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:orientation="horizontal"
android:paddingLeft="#dimen/lateral_margin"
android:paddingRight="#dimen/lateral_margin"
android:background="#drawable/list_detail"
>
<TextView
android:id="#+id/textItemOnList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/textMoneyOnList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
</RelativeLayout>

You will have to resize your background image same the size of your listview row.
` public static Bitmap resizeBitmap(Bitmap photo, float x, float y) {
try {
// get current bitmap width and height
int width = photo.getWidth();
int height = photo.getHeight();
// determine how much to scale
float scaleWidth = x / width;
float scaleHeight = y / height;
// create the matrix for the manipulation
Matrix matrix = new Matrix();
// resize the bitmap
matrix.postScale(scaleWidth, scaleHeight);
// recreate the new bitmap
Bitmap resizebitmap = Bitmap.createBitmap(photo, 0, 0, width,
height, matrix, false);
return resizebitmap;
} catch (NullPointerException e) {
e.printStackTrace();
} catch (OutOfMemoryError e) {
e.printStackTrace();
System.gc();
}
return null;
}
`

Creating a Bitmap of a View

I try to create a View programaticaly by inflating an layout.
View marker = ((LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.overlay_view, null);
Now i want to convert this View to a Bitmap:
public static Bitmap createDrawableFromView(Context context, View view){
DisplayMetrics displayMetrics = new DisplayMetrics();
((Activity)context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
view.measure(displayMetrics.widthPixels, displayMetrics.heightPixels);
view.layout(0, 0, displayMetrics.widthPixels, displayMetrics.heightPixels);
Bitmap cache = Bitmap.createBitmap(view.getMeasuredWidth(), view.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(cache);
view.draw(canvas);
return cache;
}
I also tried measure(1, 1) and layout(0 ,0 ,0 ,0) without any changes.
The Bitmap looks like the filled layout.
Now the Problem: If i put something into the View thats makes the View bigger than the Displaysize in width or height (example: a TextView with a long text), the Bitmap is also bigger.
The Views XML width and height is WRAP_CONTENT but it didnt works.
I never put this View somewhere to display it (becouse i only need the Bitmap).
Question: How can i WRAP the View to a maximum of width = displayWidth?
I tried view.setLayoutParams(new LayoutParam(100, 100)) but it was also bigger than 100?! I really dont understand whats happened, when i inflate the layout and set the content of the View.
The view.getMeasuredWidth and Height is always bigger as my display?! (if i put something bigger in it)
Here is an Example of the Layout:
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/somedrawable"
android:padding="10dp"
android:clickable="true">
<TextView android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"/>
<TextView android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/name"
android:text="Description"
android:textSize="20dp"
android:textColor="#ffffff"/>
</RelativeLayout>

I found a solution:
first step: add new LayoutParams to the view. This is important, becouse without you will get a NullPointer.
view.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
Second:
view.measure(MeasureSpec.makeMeasureSpec(displayMetrics.widthPixels), MeasureSpec.AT_MOST),
MeasureSpec.makeMeasureSpec(displayMetrics.heightPixels, MeasureSpec.AT_MOST));
for view.measure() i used MeasureSpec.makeMeasureSpec(displayMetrics.heightPixels, MeasureSpec.AT_MOST));. First parameter is the display width or heigt and the second is the mode AT_MOST, this is needed to "wrap" the View.
Works great! (for me :p )

Android - setting X,Y of image programmatically

I have two ImageViews inside an AbsoluteLayout.
<AbsoluteLayout android:id="#+id/AbsoluteLayout01"
android:layout_width="fill_parent" android:background="#drawable/whitebackground"
android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:id="#+id/floorPlanBackgroundImage"
android:src="#drawable/ic_tab_lights_gray"
android:scaleType="center"
android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
<ImageView android:id="#+id/fpLight"
android:src="#drawable/ic_tab_lights_gray"
android:scaleType="center" android:layout_x="50px" android:layout_y="50px"
android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
</AbsoluteLayout>
the floorPlanBackgroundImage is dynamically set from an image that is 800x600 in size. The can scroll around it.
My second image, fpLight represents a light in a room. It's a small 20x20 image. What I need to do is change the layout_x & layout_y properties in code, but I don't see a way to set that in the ImageView.
I'd expected something like this...
fpLight.setLayoutX("55px");
Is there a way?

You should use:
AbsoluteLayout.LayoutParams param = new AbsoluteLayout.LayoutParams(int width, int height, int x, int y)
layout Parameter object with the preferred x and y and set it to your fpLight image by
fpLight.setLayoutParams(param);
AbsoluteLayout is Deprecated
You should use RelativeLayout instead
EXAMPLE:
Suppose you want a ImageView of size 50x60 on your screen at postion (70x80)
// RelativeLayout. though you can use xml RelativeLayout here too by `findViewById()`
RelativeLayout relativeLayout = new RelativeLayout(this);
// ImageView
ImageView imageView = new ImageView(this);
// Setting layout params to our RelativeLayout
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(50, 60);
// Setting position of our ImageView
layoutParams.leftMargin = 70;
layoutParams.topMargin = 80;
// Finally Adding the imageView to RelativeLayout and its position
relativeLayout.addView(imageView, layoutParams);

yourImageView.setX(floatXcoord);
yourImageView.setY(floatYcoord);

Android: how to programmatically set width of ImageView inside TableRow

How do you programmatically set the width of an ImageView inside a TableRow? I do NOT want the cell width to change, only the width of the image inside the cell.
Layout: (The ellipsis are there to reduce the code)
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<TableRow android:gravity="center_vertical">
<Button>...</Button>
<ImageView
android:id="#+id/fruit"
android:layout_width="120dp"
android:layout_height="44dp"
android:src="#drawable/apple"
android:scaleType="matrix"
></ImageView>
<Button>...</Button>
</TableRow>
<TableRow>...</TableRow>
</TableLayout>
Java:
ImageView iv = (ImageView) findViewById(R.id.fruit);
LayoutParams frame = iv.getLayoutParams();
frame.width = 100;
iv.setLayoutParams(frame);
EDIT: i want the image to be cropped inside the bounds i set and have the table cell be the original width. Below is the code example that worked for me thanks to parag's suggestion:
Bitmap bmp = BitmapFactory.decodeResource(getResources() , R.drawable.apple);
int width = 50;
int height = 44;
Bitmap resizedbitmap = Bitmap.createBitmap(bmp, iv.getScrollX(), iv.getScrollY(), width, height);
iv.setImageBitmap(resizedbitmap);

Another way that u resized the bitmap
ImageView img=(ImageView)findViewById(R.id.ImageView01);
Bitmap bmp=BitmapFactory.decodeResource(getResources(), R.drawable.sc01);
int width=200;
int height=200;
Bitmap resizedbitmap=Bitmap.createScaledBitmap(bmp, width, height, true);
img.setImageBitmap(resizedbitmap);

Do you want to scale the image? Or crop it?
To scale, try ImageView.setImageMatrix and Matrix.preScale.
If you don't want to figure out the Matrices, you could try Rects (bounding boxes). Get the original rect with ImageView.getDrawingRect and then define whatever Rect you want and use Matrix.setRectToRect to create your image matrix.
Otherwise, have you tried ImageView.setMaxWidth?