Develop Reference

Adding items to the ScrollView dynamically make it doesn't scroll

I have a simple layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:padding="15dp">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/scrollLayout">
</LinearLayout>
</ScrollView>
</RelativeLayout>
Now, I inflate the outer RelativeLayout to retrieve the inner LinearLayout to put items in it.
RelativeLayout relative = (RelativeLayout) LayoutInflater.from(activity).inflate(R.layout.gradient_pick_view, null);
LinearLayout view = (LinearLayout) relative.findViewById(R.id.scrollLayout);
After that I created a method to add some buttons to it:
for(int i=0;i<10;i++){
LinearLayout wrapper = (LinearLayout) LayoutInflater.from(activity).inflate(R.layout.button_wrapper, null);
Button button = (Button)wrapper .findViewById(R.id.button);
view.addView(layout);
}
Everything works fine, but it doesn't scroll.
What am I doing wrong here?
Here's the screenshot (displaying 7 of 10 buttons):
I forgot to mention - I'm using a MaterialDialog library and add this RelativeLayout as a custom view to a dialog.

Try to set the following attribute to your scrollview,
android:fillViewport="true"
above attribute is used to make your scrollview to use entire screen of your application.

I had a false parameter passed to a customView in a MaterialDialog.
dialog = new MaterialDialog.Builder(activity)
.title(R.string.about)
.customView(view, true)
.positiveText(R.string.changing_fragments)
.show();
As doc says:
If wrapInScrollView is true, then the library will place your custom view inside of a ScrollView for you. This allows users to scroll your custom view if necessary (small screens, long content, etc.). However, there are cases when you don't want that behavior. This mostly consists of cases when you'd have a ScrollView in your custom layout, including ListViews, RecyclerViews, WebViews, GridViews, etc. The sample project contains examples of using both true and false for this parameter.
Now it's working.

Adding ImageView to LinnearLayout dynamically goes wrong

I wrote a small function
private void addTabIndicators(int tabCount){
LinearLayout indicatorsContainer = (LinearLayout)findViewById(R.id.indicators_container);
for(int i = 0; i<tabCount; i++){
ImageView indicator = (ImageView)this.getLayoutInflater().inflate(R.layout.tab_indicator, null);
indicatorsContainer.addView(indicator);
}
}
that is supposed to add circles to the linearlayout in my activity based on how many tabs are in the pager adapter. Everything would be cool BUT, the imageviews i add instead of beeing the size declared in the xml layout, are being resized to 1x1px... Any ideas where i could go wrong? Here are the layouts for the indicator and linear layout
tab_indicator.xml:
<?xml version="1.0" encoding="utf-8"?>
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_margin="8dp"
android:src="#drawable/floating_button_background"/>
The indicators container:
<LinearLayout
android:layout_marginBottom="16dp"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:id="#+id/indicators_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>

The fault might be here
ImageView indicator = (ImageView)this.getLayoutInflater().inflate(R.layout.tab_indicator, null);
You need to pass the root view of your image view to provide the layouts defined in your XML. If you pass null instead, default layoutparams are set.
Place
ImageView indicator = (ImageView)this.getLayoutInflater().inflate(R.layout.tab_indicator, your root view of image view,false);
This is a very common mistake. Never pass null except you really know what you are doing.
Read more here:
http://developer.android.com/reference/android/view/LayoutInflater.html
Hope it helps

Align a Button with an Image inside another Layout

Apologies for the confusing header. My problem is explained better in the following image:
I need the green Button to be aligned with the top of the Image, but the Image is inside another Layout. Is this possible?
It can be done in code if necessary; XML is not required. I am targeting Android 2.2 and newer.
EDIT:
My current implementation is to simply set the MarginTop-property of the Button, but this is inconvenient when I need to change the sizes of the text inside the LinearLayout, which I plan to do depending on the screen size.
I think it can be solved by somehow finding the Y coordinate of the Image, perhaps by adding the heights of the TextViews, and then setting this as the MarginTop for the Button, but this sounds cumbersome. Is there really no other option?
The LinearLayout is going to be placed inside a ViewPager (with multiple views, all having an image in the same position), which is why I can't do it the way preeya explains.

It's possible but more complicated than including the button into the same layout. If you definitely don't want to do that, you can't use XML (which is always faster). You have to do 3 steps in your code:
1.) Wait until the view is drawn
private void waitForViewToBeDrawn(){
// get your layout
final RelativeLayout mainLayout = (RelativeLayout) findViewById(R.id.mainLayout);
ViewTreeObserver vto = mainLayout.getViewTreeObserver();
// add a listener
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
public void onGlobalLayout() {
// you also want to remove that listener
mainLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
// go on to next step
getPositionOfImageView();
}
});
}
That approach works best for me, but if you have troubles - here are some alternatives.
There are also [more solutions][2] out there when you use API level 11 and higher...
2.) Get the top-position of your imageView
private void getPositionOfImageView(){
ImageView imageView = (ImageView) findViewById(R.id.imageView);
// Top position view relative to parent (Button and ImageView have same parent)
int topCoordinate = imageView.getTop();
adjustButton(topCoordinate);
}
3.) Add or adjust the button in order to be aligned with the image
public void adjustButton(int topCoordinate){
Button button = (Button) findViewById(R.id.button);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params.topMargin = topCoordinate;
button.setLayoutParams(params);
}
This step would be smoother by using API 11: button.setTop(topCoordinate)
Of course you can shorten all of it and put it in a singele method, just thought that 3 steps are better to explain. Hope that code helps to get started!

U can use linearlayout for displaying image & button as follows :
<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"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/longText"
android:gravity="center"
android:text="Some very long text" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:id="#+id/subtitle"
android:layout_below="#+id/longText"
android:text="subtitle" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_below="#+id/subtitle"
android:layout_toLeftOf="#+id/subtitle"
android:layout_height="wrap_content"
android:text="button" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/button1"
android:layout_below="#+id/subtitle"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</RelativeLayout>

What's the best way on Android to create a photo gallery (fullscreen)

I wonder what's the best way to create a photo gallery for my app. I get the pictures from an RSS feed and I want to display each of them in fullscreen. What should I use ? I tried with an ImageView but the images are resized in a bad way (they don't keep the original dimensions)
I used this answer to implement my gallery : Android Gallery fullscreen
Thank's
EDIT :
Here's the XML layout :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/galleryPager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
</LinearLayout>
And here's the code I use in my adapter to load the images :
#Override
public Object instantiateItem(View collection, int position) {
ImageView imageView = new ImageView(context);
imageView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
ImageDownloader.getInstance().download(gallery.get(position), ImageFormat.CONTENT_316, imageView);
((ViewPager) collection).addView(imageView, 0);
return imageView;
}

I would use a ViewPager with ImageViews inside of it.
You are able to specify to the ImageView how you'd like the images to be (or not to be) streched with the android:scaleType attribute in your xml. If you share some of the code that you were using with ImageViews and maybe give a little bit more info about how you wan them to appear I can try to help you get it set up properly.
Also I suggest you take a look at Displaying Bitmaps Efficiently for best practices to use when dealing with images so as to keep the performance of your app top notch.

Use an Adapter & ListView to display images slide.
Now in the adapter item's layout use ImageView with fill_parent for both width & hight as like following code:
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY" />
you may suggest the user to use the phone in landscape mode for better performance. so keep additional layout in layout-land folder

one way would be
get the image url's from the rss feed
show them as thumbnails in a custom gallery (can setup via horizontal linearlayout with a imageview in it, inside a scrollview)
use lazyloading of images to show these thumbnails
override onClickListener to get the click events
and in this onClick load the current image URL in a webview.
webview has good features of zoom, move along picture etc..

The code I used above was almost right, I just changed ImageView.ScaleType.FIT_XY to ImageView.ScaleType.CENTER_CROP
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/galleryPager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
</LinearLayout>
And here's the code I use in my adapter to load the images :
#Override
public Object instantiateItem(View collection, int position) {
ImageView imageView = new ImageView(context);
imageView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
imageView.setScaleType(**ImageView.ScaleType.CENTER_CROP**);
ImageDownloader.getInstance().download(gallery.get(position), ImageFormat.CONTENT_316, imageView);
((ViewPager) collection).addView(imageView, 0);
return imageView;
}

Custom ListView?

I have a code made by Fedor, it can be found "here".
The first image is what I have now,
and the second image is what I want to accomplish.
Can someone guide me with this. I have been struggling for days trying to solve this problem.
Please help me, Thanks in advance!

Here is an example of something similar. You have to create a custom adapter for your ListView.
http://www.softwarepassion.com/android-series-custom-listview-items-and-adapters/
You can probably use most of that example. Just change the row.xml to create tha layout you want and the getView() in the adapter.

You just need to modify the list item layout (in item.xml) to have another ImageView.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<ImageView android:id="#+id/image1" android:layout_width="50dip"
android:layout_height="50dip" android:src="#drawable/stub"
android:scaleType="centerCrop" />
<ImageView android:id="#+id/image2" android:layout_width="50dip"
android:layout_height="50dip" android:src="#drawable/stub"
android:scaleType="centerCrop" />
<TextView android:id="#+id/text" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_weight="1"
android:layout_gravity="left|center_vertical" android:textSize="20dip"
android:layout_marginLeft="10dip" />
</LinearLayout>
and modify LazyAdapter's getView() method to add support for the second ImageView.

A tutorial for creating a Custom ListView can be found here:
http://justcallmebrian.com/?p=139
Just need to change the XML layout for each item to have 2 ImageViews like Robby said. Then in your getView of your Adapter (LazyAdapter if you followed along with the other people's answers) you should have something like this:
ImageView image1 = (ImageView) findViewById(R.id.image1);
image1.setResource(R.drawable.icon1);
ImageView image2 = (ImageView) findViewById(R.id.image2);
image2.setResource(R.drawable.icon2);
TextView text = (TextView)findViewById(R.id.text);
text.setText("I have 2 images");
The tutorial I pasted earlier depicts a way to make the generation of the list dynamic (i.e. not having the resource of R.drawable.icon1/2 and not having the text for your Text images). Something like this may work (assuming you have a Model class that will hold all 3 pieces of information):
int resid1 = context.getResources().getIdentifier("com.domain.sub:drawable/" + myList.get(position).getImage1Name, null, null);
ImageView image1 = (ImageView) findViewById(R.id.image1);
image1.setResource(resid1);
int resid2 = context.getResources().getIdentifier("com.domain.sub:drawable/" + myList.get(position).getImage2Name, null, null);
ImageView image2 = (ImageView) findViewById(R.id.image2);
image2.setResource(resid2);
TextView text = (TextView)findViewById(R.id.text);
text.setText(myList.get(position).getText());
Of course the snippet above assumes you have an ArrayList called myList that also getters to get the image names and the text to display.