I have a list of images that I need to show on the page one after another and all that bellow some text. I have LinearLayout in xml of the file where I added the part related to that text (some TextViews). As I need to call service to get image urls I add images to that LinearLayout in code. I use this code to get image using its url and to add it to the layout (in the onPostExecute part of the AsyncTask implementation).
/**
* Download image using image url and show it in ImageView
*/
private class DownloadImageTask extends AsyncTask<Void, Void, Bitmap> {
public DownloadImageTask() {
super();
}
protected Bitmap doInBackground(Void... arg0) {
String urlDisplay = mDocumentUrls.get(mDocumentIdx);
mDocumentIdx = mDocumentIdx + 1;
Bitmap bmp = null;
try {
InputStream in = new java.net.URL(urlDisplay).openStream();
bmp = BitmapFactory.decodeStream(in);
} catch (Exception e) {
e.printStackTrace();
}
return bmp;
}
protected void onPostExecute(Bitmap result) {
// We add a new ImageView to the LinearLayout of the page and set it
// source to the downloaded image
ImageView newImageView = new ImageView(getActivity());
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
params.setMargins(convertDpToPx(20), convertDpToPx(5), convertDpToPx(20), 0);
newImageView.setImageBitmap(result);
mDocumentDetailsLayout.addView(newImageView, params);
//Next image
if(mDocumentIdx < mDocumentUrls.size())
new DownloadImageTask().execute();
}
}
And this is the xml of the page (the part related to LinearLayout)
<ScrollView
android:id="#+id/details_form"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/splashScreenGray
android:visibility="gone" >
<LinearLayout
android:id="#+id/details_form_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/splashScreenGray"
android:clickable="false"
android:orientation="vertical" ...
Images are shown on the page, but I have two problems:
1. I can't center them horizontally (prtsc1.png)
2. When my phone is in portrait mode I have this margins (top margin on the first image and margins between images) that I don't have when my phone is in portrait mode (I don't need them) - compare prtsc1.png and prtsc2.png.
I tried everything, but I am not sure what I am doing wrong.
Hope this could help...for u r imageView to getCentrally Aligned...
img.setScaleType(ImageView.ScaleType.CENTER_CROP);
Any problem persist please let me know...
I suggest you try Relative layout instead of LinearLayout. LinearLayout has a brain of its own, that is good otherwise but sometimes it can mess things up.
You should change the parameters of the image to align itself below the text
for the second one, if you are using a linearlayout, you should make the width match_parent and padding.
Related
I've got a bit of a problem here ( as you could probably figure... :D)
This is the code in question:
var imageView = new ImageView(context);
param = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MatchParent, LinearLayout.LayoutParams.MatchParent);
imageView.LayoutParameters = param;
imageView.SetImageResource(treeCatalog[position].imageId);
var viewPager = container.JavaCast<ViewPager>();
viewPager.AddView(imageView, param);
return imageView;
So, as you can see, I have an imageView, that I need to adjust programatically. I then set LayoutParams and handed them over (2x!) to the ImageView. However, no matter how I set them - nothing happens. The ImageView still is the same as before. This is driving my crazy.
Any help?
THANKS!
Based on your code viewPager.AddView(imageView, param);, you want to add image to your ViewPager, then the LayoutParams should be ViewPager.LayoutParams, which should be supplied for views added to a ViewPager.
But I don't think set the LayoutParams of ImageView here should fix your problem, I guess that you want to fill the whole item of ViewPager with image. Then you need to stretch the image.
So, you can try to change your code like this:
var imageView = new ImageView(context);
imageView.SetImageResource(treeCatalog[position].imageId);
imageView.SetScaleType(ScaleType.FitXy);
// Add the image to the ViewPager:
var viewPager = container.JavaCast<ViewPager>();
viewPager.AddView(imageView);
return imageView;
I'm new to picasso.using it i want to dynamically fetch images and be able to update the images whenever some new link has been updated. currently i'm only able to do this for a single Image. the code that i'm using is :
picasso.with(this).load(url).into(image1)
where url is the url to the image and image1 is an imageview. i want to diaplay 5 images into 5 different imageviews, iteratively. how can i do that ?
also i wan to delete the cached images of picasso, so that i can update it with newer images. any help would be appreciated.
In your xml just add only this,
<ViewFlipper
android:id="#+id/flipper"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</ViewFlipper>
lets Say your URL Images Array like this.
String ImgAry[] = {"url1","url2","url3","url4","url5"}
In your onCreate()
viewFlipper = (ViewFlipper) findViewById(R.id.flipper);
for(int i=0;i<ImgAry.length;i++)
{
// create dynamic image view and add them to ViewFlipper
setImageInFlipr(ImgAry[i]);
}
method in Your Activity file
private void setImageInFlipr(String imgUrl) {
ImageView image = new ImageView(getApplicationContext());
picasso.with(this).load(imgUrl).into(image);
viewFlipper.addView(image);
}
private void setImageInFlipr(String imgUrl) {
ImageView image = new ImageView(getApplicationContext());
picasso.get().load(imgUrl).into(image);
viewFlipper.addView(image);
}
I want to display instruction activity when user opens the app for the first time. I am using shared preference for that. Whatever I am doing so far is working. But I think my way of achieving this is not right.
What I am following:
I am drawing a transparent instruction image(with instructions) in photoshop.
Checking if user is opening that page for the first time(using shared preference).
Displaying that particular image in an activity with translucent theme
private void showFrontPageGuideIfFirstTime(){
if(!prefKeeper.getBoolean(PreferenceKey.FRONT_GUIDE)){
Intent intent = new Intent(this, ShowGuide.class);
intent.putExtra(BACKGROUND_KEY, R.drawable.front_page_png);
this.startActivity(intent);
prefKeeper.putBoolean(PreferenceKey.FRONT_GUIDE, true);
}
}
And my instruction page looks something like(made in photoshop):
The Instruction Image
But I think by this way it would not work in all smart phone screens.
Where am I wrong, and what would be the best way of doing this?
Implementation as below
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:id="#+id/framelayout"
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="in.excogitation.example_mvptdd.MainActivity">
<!-- Include your layout here-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello World!"/>
</FrameLayout>
In your activity.java
public class MainActivity extends AppCompatActivity {
FrameLayout frameLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Parent FrameLayout
frameLayout = (FrameLayout) findViewById(R.id.framelayout);
// Dynamically create a relativelayout which will be appended to framelayout
final RelativeLayout relativeLayout = new RelativeLayout(getApplicationContext());
relativeLayout.setLayoutParams(new RelativeLayout.LayoutParams(ViewGroup.LayoutParams
.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
relativeLayout.setBackgroundColor(Color.DKGRAY);
relativeLayout.setAlpha(0.7f);
relativeLayout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// remove the whole relativelayout on click
frameLayout.removeView(relativeLayout);
}
});
RelativeLayout.LayoutParams params;
// Place 1st 30x40 ImageView at (50,60) coordinates
params = new RelativeLayout.LayoutParams(100, 100);
params.leftMargin = 20;
params.topMargin = 50;
final ImageView imageView1 = new ImageView(getApplicationContext());
imageView1.setImageDrawable(getResources().getDrawable(R.drawable.ic_action_star));
// Add 1st imageview to relative layout
relativeLayout.addView(imageView1, params);
// Place 2nd 30x40 ImageView at (100,60) coordinates
params = new RelativeLayout.LayoutParams(120, 120);
params.leftMargin = 800;
params.topMargin = 450;
final ImageView imageView2 = new ImageView(getApplicationContext());
imageView2.setImageDrawable(getResources().getDrawable(R.drawable.ic_action_star));
// Add 2nd imageview to relative layout
relativeLayout.addView(imageView2, params);
// finally add it ot the framelayout
frameLayout.addView(relativeLayout);
}
}
Ofcourse you should modify this code with your own images and colors and interactions. Its just a simple working version that is better than loading a whole image upfront when you all you want is smaller helper images on a translucent background for the instructions.
Also you in this way you make things more Android-ish and editable. You can add more children to the relative layout like a textview to include instructions.
Screenshot on load of app and hence the relative layout as an overlay.
Screenshot on click/touch , the relative layout is removed.
There is scroll view between header(at the top of screen) and Tabs(Bottom of the screen). I want to know that whether the ImageView which is inside the ScrollView is fully visible or not on phone screen window.
I would suggest to do the following way (the approach is similar to one in this question).
E.g. You have the following xml (I'm not sure what are header and tabs so they are missed):
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/scroller">
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:id="#+id/image"
android:src="#drawable/image001"
android:scaleType="fitXY" />
</ScrollView>
Then activity might look like the following:
public class MyActivity extends Activity {
private static final String TAG = "MyActivity";
private ScrollView mScroll = null;
private ImageView mImage = null;
private ViewTreeObserver.OnGlobalLayoutListener mLayoutListener = new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
final Rect imageRect = new Rect(0, 0, mImage.getWidth(), mImage.getHeight());
final Rect imageVisibleRect = new Rect(imageRect);
mScroll.getChildVisibleRect(mImage, imageVisibleRect, null);
if (imageVisibleRect.height() < imageRect.height() ||
imageVisibleRect.width() < imageRect.width()) {
Log.w(TAG, "image is not fully visible");
} else {
Log.w(TAG, "image is fully visible");
}
mScroll.getViewTreeObserver().removeOnGlobalLayoutListener(mLayoutListener);
}
};
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Show the layout with the test view
setContentView(R.layout.main);
mScroll = (ScrollView) findViewById(R.id.scroller);
mImage = (ImageView) findViewById(R.id.image);
mScroll.getViewTreeObserver().addOnGlobalLayoutListener(mLayoutListener);
}
}
In case of small image it will log: image is fully visible.
However, You should be aware about the following inconsistency (as per my understanding): if You have big image, but doing scaling to it (e.g. you set android:layout_width="wrap_content") when it will look scaled, but actual ImageView height will be as full height of the image (and ScrollView will be even scrolling), so adjustViewBounds might be needed. The reason for that behavious is that FrameLayout doesn't care about layout_width and layout_height of childs.
I am facing a problem in my android app. I have to dynamically find the height of the text description coming from parsing the xml and show it on an imageview(background image).
I have to repeat the backround image by finding the total height of the text.
So, Please help me that how can we find the text height dynamically and repeat the background image according to that height.
Thanks.
Since there is no answer for this question.
I tried and almost did it in the following way:
public class MainActivity extends Activity
{
String description="hello how r u this project is meant for android to calculate " +
"the size of text and can dyanamically set the image height according to the text";
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
int length_count=description.length();
int window_width=getWindowManager().getDefaultDisplay().getWidth();
int lines=(length_count*14)/(window_width-30);
Log.v("length",""+length_count);
Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.project_dess_box_mid);
BitmapDrawable bitmapDrawable = new BitmapDrawable(bmp);
bitmapDrawable.setTileModeXY(Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
LinearLayout layout = (LinearLayout)findViewById(R.id.linear1);
TextView tv=(TextView)findViewById(R.id.text01);
tv.setLines(lines);
tv.setText(description);
layout.setBackgroundDrawable(bitmapDrawable);
}
}
I posted this as it may be helpful for others too.