Develop Reference

How to dinamically add ImageView/textView at the right of others ImageView/textView in a same layout

So in my code I have 6 arrays (the 5 last could be empty) of objects. Each objects has a name and the array could have many of each object (every array are sorted so every item are grouped).
First, I have this xml file:
<LinearLayout 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"
android:background="#drawable/fond4"
android:orientation="vertical"
tools:context="${relativePackage}.${activityClass}" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:background="#color/white"
android:gravity="center"
android:text="#string/commentOpti"
android:textSize="20sp" />
<Button
android:id="#+id/choisirTroupe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:onClick="soumission"
android:text="#string/lancer" />
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context="${relativePackage}.${activityClass}" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:background="#color/white"
android:gravity="center"
android:text="#string/casernes"
android:textSize="20sp" />
<!-- Caserne 1 -->
<LinearLayout
android:id="#+id/caserne1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#color/white"
android:orientation="horizontal" >
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:background="#drawable/caserne" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="#string/deuxPoints"
android:textSize="25sp" />
</LinearLayout>
//Then 5 other like this 1st linearLayou
//The ids are incremented each time like caserne2 for the 2nd etc...
</ScrollView>
It look like this: https://gyazo.com/17a1276dfff5521d540fb6dc953df424
What I want to do is, for each object in each array (one array: one linear layout), to add a textView with the number of Item and an imageView which represent the object.
Next, you will find how I sort everything, that's not really important I think, but if you want to understand everything you'll have to give a look :p
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_optimisation);
LinearLayout caserne1 = (LinearLayout) findViewById(R.id.caserne1);
//...Doing this for the 5 others...
Intent intent = getIntent();
//Instanciation of my object
OptiClashOfClans o = new OptiClashOfClans();
//In fact, the number of linearLayout i'll have to work with
o.setNbCasernes(this.nbCaserne);
if (this.nbBarbares > 0)
o.ajouterFormation(1, this.nbBarbares);
//...Adding each object in on array...
o.setAFormer(o.triTroupe());
//And finally here i'll put each object in the good array
o.orgaCaserne(o);
Now we go for my problem, this portion of code is just next to the one I put previously, here is how I pick up the number of the same object in each array
for (int cptCaserne = 0; cptCaserne < this.nbCaserne; cptCaserne++) {
// Here I pick up the array of object I'll work with
Caserne casTmp = o.getCaserneNum(cptCaserne);
// Here I pick every object which are in the previous array
ArrayList<Troupe> enFormTmp = new ArrayList<Troupe>();
enFormTmp = casTmp.getEnFormation();
// To count where I am in the array of object
int cptAFormer = 0;
//To know if the next object is different from the one I'm working with
Troupe troupTmp = enFormTmp.get(cptAFormer);
int cptTroupTmp = 0;
//For the object t in the array of object
for (Troupe t : enFormTmp) {
cptTroupTmp = 0;
//While the object is the same from the one we're working with
while (!troupTmp.equals(t)) {
//Incrementing the previous counter
cptTroupTmp++;
cptAFormer++;
}
And finally here is how I don't really know how to do:
ImageView iView = new ImageView(Optimisation.this);
//To know which background i'll add to the image view
//I'll do this for each different object
if (t.getNom().equals("Barbare"))
iView.setImageResource(R.drawable.barbare);
//...
//The text view with the number of object I found
TextView tView = new TextView(Optimisation.this);
tView.setText("" + cptTroupTmp);
//And now it's here where I want to add the different views
switch (cptCaserne) {
case 0:
caserne1.addView(tView);
caserne1.addView(iView);
case 1:
caserne2.addView(tView);
caserne1.addView(iView);
case 2:
caserne3.addView(tView);
caserne1.addView(iView);
case 3:
caserne4.addView(tView);
caserne1.addView(iView);
}
troupTmp = enFormTmp.get(cptAFormer);
}
}
With this code I have an insane black screen when I'm going on this activity.
Here is what I want to do with in red the textView with the number of objet and in green the imageView of the object...
https://gyazo.com/31b16982ce30b66391bafdd2cd4d86fc
I've found some stuff to do with LayoutInflater but I haven't been successfull with these... Thanks a lot if you could help me.
PS: sorry for the mistakes, I think there are a lot, but in long post like this one, my school english isn't very effective ^^
Thanks again :)

Correct me if I'm wrong. But from what I understood you just need to accomplish what is being shown here https://gyazo.com/31b16982ce30b66391bafdd2cd4d86fc?
Base on your code you just have to add an additional LinearLayout having an horizontal orientation on each LinearLayout before adding the TextView and Image View.
Here's an example using your code:
LinearLayout innerLayout = new LinearLayout(Optimisation.this)
innerLayout.setOrientation(LinearLayout.HORIZONTAL);
ImageView iView = new ImageView(Optimisation.this);
//To know which background i'll add to the image view
//I'll do this for each different object
if (t.getNom().equals("Barbare"))
iView.setImageResource(R.drawable.barbare);
//...
//The text view with the number of object I found
TextView tView = new TextView(Optimisation.this);
tView.setText("" + cptTroupTmp);
innerLayout.addView(tView);
innerLayout.addView(iView);
//And now it's here where I want to add the different views
switch (cptCaserne) {
case 0:
caserne1.addView(innerLayout);
case 1:
caserne2.addView(innerLayout);
case 2:
caserne3.addView(innerLayout);
case 3:
caserne4.addView(innerLayout);
}
Feel free to adjust it if the Layout that I'm adding the innerLayout in is wrong. But basically, that's the idea.

Android ExpandableListView item images disappear

I have to display a list of football players in a list. No problem about that, everything works fine but the little flags for the nationality are disappearing while I scroll down my list.
Here is what it should look like : list item player OK
And here is the result I have after some scrolling : list item player NOK
I also have an Image for the portrait of the player and another one to show the shirt which are working fine.
Here is some part of my code (I only put some parts of it to reduce the size and to put away what's working but feel free to ask for more if you need) :
My item list layout (partial layout, you won't get the same result as the image show) :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="3dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="3dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/portrait"
android:layout_width="32dp"
android:layout_height="32dp"
android:background="#drawable/portrait_default" />
<LinearLayout
android:id="#+id/nationalityLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ImageView
android:id="#+id/logoNationality"
android:layout_width="13dp"
android:layout_height="13dp"
android:layout_marginRight="3dp" />
<TextView
android:id="#+id/nationality"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="13dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/shirt"
android:layout_width="40dp"
android:layout_height="32dp"
android:gravity="center_horizontal" >
<TextView
android:id="#+id/number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5dp" />
</LinearLayout>
</LinearLayout>
I have a holder for my items :
private class ChildViewHolder {
public ImageView portrait;
public ImageView logoNationality;
public TextView nationality;
public LinearLayout nationalityLayout;
public LinearLayout shirt;
public TextView number;
public void reset() {
portrait.setImageBitmap(null);
portrait.setBackgroundResource(R.drawable.portrait_default);
nationalityLayout.setVisibility(View.VISIBLE);
nationality.setText("");
number.setText("");
}
}
And the getChildView from my adapter (with flags being a map filled while putting items in the adapter list and playerShirt a BitmapDrawable loaded before) :
public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
ChildViewHolder holder;
if (convertView == null) {
convertView = LayoutInflater.from(context).inflate(R.layout.liste_item, null);
holder = new ChildViewHolder();
holder.portrait = (ImageView) convertView.findViewById(R.id.portrait);
holder.nationalityLayout = (LinearLayout) convertView.findViewById(R.id.nationalityLayout);
holder.logoNationality = (ImageView) convertView.findViewById(R.id.logoNationality);
holder.nationality = (TextView) convertView.findViewById(R.id.nationality);
holder.shirt= (LinearLayout) convertView.findViewById(R.id.shirt);
holder.number = (TextView) convertView.findViewById(R.id.number);
convertView.setTag(holder);
} else {
holder = (ChildViewHolder) convertView.getTag();
holder.reset();
}
FootPlayer player = children.get(groupPosition).get(childPosition);
// Doing nothing with portrait for now
if (player.getNationality() != null) {
holder.nationalityLayout.setVisibility(View.VISIBLE);
holder.nationality.setText(player.getNationality());
if (player.getNatImg() != null) {
holder.logoNationality.setImageDrawable(flags.get(player.getNatImg()));
} else {
holder.logoNationality.setVisibility(View.INVISIBLE);
}
} else {
holder.nationalityLayout.setVisibility(View.GONE);
}
holder.shirt.setBackgroundDrawable(playerShirt);
holder.number.setText(String.valueOf(player.getNumber()));
return convertView;
}
Right now, flags are appearing at the beginning of the list, proving me that the flags map is correctly filled with my images, but while I scroll down they start to disappear randomly and in the end none of them show up anymore.
So important points are :
My flags map is correctly filled with BitmapDrawable (and correct keys)
My playerShirt is also a BitmapDrawable but doesn't disappear as flags do
I already tried to use setBitmapImage instead of setBitmapDrawable to set the flag image (and also set the background as I'm currently doing with the shirt)
I tried with drawable res images and I have the same result
I know that I go through my if condition to show the flag correctly
Any help about this issue would be greatly appreciated.

You are not setting logoNationality visibility back to VISIBLE, as you are doing with nationalityLayout. So I guess once it's gone for the first time, it remains invisible, even if you later reuse the view setting a drawable to it.
Have a look to the fixed code:
if (player.getNationality() != null) {
holder.nationalityLayout.setVisibility(View.VISIBLE); // <- SET VISIBLE, Well done!
holder.nationality.setText(player.getNationality());
holder.logoNationality.setVisibility(View.VISIBLE); // <- Missing line: SET VISIBLE as before.
if (player.getNatImg() != null) {
holder.logoNationality.setImageDrawable(flags.get(player.getNatImg()));
} else {
holder.logoNationality.setVisibility(View.INVISIBLE); // <- OK, no logo, so hide it.
}
} else {
holder.nationalityLayout.setVisibility(View.GONE); // No nationality, hides entire layout.
}

Android, custom views don't fill the screen in a Gallery

I want to display a custom view, composed of a TextView above an ImageView in a vertical LinearLayout, one at a time in a Gallery.
The problem is that my custom view does not fill the screen. I can see a part of the other views on the sides and I don't want this issue.
Here is the xml of my custom view : gallery_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gallery_item_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:id="#+id/gallery_item_cardname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="20dp"
android:textStyle="bold"
android:text="#string/contrebandiers_lvl1"
android:textColor="#android:color/darker_gray"
/>
<ImageView
android:id="#+id/gallery_item_cardimg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerInside"
android:contentDescription="#string/app_name"
android:src="#drawable/contrebandiers_lvl1"
/>
</LinearLayout>
Here is the code of the method getVew of my adapter : GTRoundDeckAdapter
public View getView(int position, View convertView, ViewGroup parent)
{
GalleryItem galleryItem;
if(convertView == null)
{
galleryItem = new GalleryItem();
convertView = mInflater.inflate(R.layout.gallery_item, null);
galleryItem.cardName = (TextView) convertView.findViewById(R.id.gallery_item_cardname);
galleryItem.cardImg = (ImageView) convertView.findViewById(R.id.gallery_item_cardimg);
convertView.setTag(galleryItem);
}
else
{
galleryItem = (GalleryItem) convertView.getTag();
}
GTCard gtCard = (GTCard) mRoundDeck.get(position);
galleryItem.cardName.setText(gtCard.getNameId());
galleryItem.cardImg.setImageResource(gtCard.getImgId());
return convertView;
}
I thank you for your help.
Samuel

I would recommend that you use the ViewPager instead of Gallery. In my personal experience, I have found Gallery to slightly buggy. If your requirement is to show only one View at a time, then ViewPager (which lets you swipe left and right to go one by one) should suit your needs.
You will need to include the Android Support package to use ViewPager.
Link to support package: http://developer.android.com/sdk/compatibility-library.html
Link on how to use ViewPager: http://blog.stylingandroid.com/archives/537

you should use both the width of textview and imageview fillparent.then it will be fill the screen of the gallery...

Android: ImageView loses transparency

I have a list of blog posts from users with avatars. Cause of some design reasons I need to crop square avatar images into circle images.
This is my ListView xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/listViewBlogs"
style="#style/CustomListView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:divider="#drawable/divider" >
</ListView>
</LinearLayout>
<style name="CustomListView">
<item name="android:fadingEdge">none</item>
<item name="android:cacheColorHint">#android:color/transparent</item>
<item name="android:divider">#null</item>
<item name="android:listSelector">#android:color/transparent</item>
</style>
This is my ListViewItem xml (blog post content is removed from example, only author name and avatar remains)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="6dip">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageAvatar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/avatar_default2"
android:focusable="false"
android:background="#color/transparent"
android:layerType="hardware"
/>
<TextView
android:id="#+id/textAuthor"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="TextView"
android:textColor="#color/text_dark_grey"
android:textSize="20dip"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
Here is fragment from my adapter. Images are downloaded via Internet and cached into local storage. Then cropped pixels are filled with transparent
class BlogsAdapter extends ArrayAdapter<BlogItem>{
//...
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
if(v == null){
LayoutInflater inf = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = inf.inflate(R.layout.blogs_list_item_1, null);
}
BlogItem item = getItem(position);
if(item != null){
TextView textAuthor = (TextView)v.findViewById(R.id.textAuthor);
if(textAuthor != null){
textAuthor.setText(item.author_name);
}
ImageView imageAvatar = (ImageView)v.findViewById(R.id.imageAvatar);
if(imageAvatar != null){
//Load image from cache
BitmapFactory.Options op = new Options();
op.inPreferredConfig = Bitmap.Config.ARGB_8888;
Bitmap imageFromCache = BitmapFactory.decodeFile(item.imagepath, op);
//Crop round. This is not quickest one solution to do it here, but it is here to make test case clear
Bitmap bmp2 = imageFromCache.copy(Bitmap.Config.ARGB_8888, true);
int mw = bmp2.getWidth();
int mh = bmp2.getHeight();
int wc = mw/2;
int hc = mh/2;
for(int i=0; i<mw;i++){
for(int j=0; j<mh;j++){
if( Math.sqrt( (i-wc)*(i-wc) + (j-hc)*(j-hc) ) >=(wc-2) ){
bmp2.setPixel(i, j, Color.TRANSPARENT);
}
}
}
//Set cropped image into view
imageView.setBackgroundColor(0);
imageView.setImageBitmap(bmp2);
}
return v;
}
}
It works good enougth
But when I scroll listview, transparency looses
I tried:
android:cacheColorHint=#android:color/transparent is setted into ListViewStyle
imageView.setBackgroundColor(0);
Any ideas?

have you tried doing the following in your list view tag,
android:cacheColorHint="#00000000"

I've found that images I get from Internet have different Bitmap.Config - some ARGB_8888, some RGB_565, some null. Copying of this images with imageFromCache.copy() caused inconsistent config setup for cropped image. Instead of using imageFromCache.copy() I created new Bitmap with Bitmap.create(imageFromCache.getWidth(), imageFromCache.getHeight(), Bitmap.Config.ARGB_8888), than copied manually all pixels from source to dest (using forloop), cropping "circle" pixels on the fly. This worked properly.

Click Event on ImageButton not dispatched immediately

I'm having a weird problem, in my rather complex view layout. (I will try to simplify it a bit in my explanation)
Basically I have a ListView, where each item consists of a TextView and an ImageButton. I am able to either click the list item (on the textview), or the button (I set the ImageButton to non-focusable, otherwise it wouldn't work)
Now it seems to work fine, until I open another window and return to the listview.
From that point on, I can click the ImageButton without anything happening (not even the background changes during the click). But when I click on the TextView again, all the click events from the ImageButton are dispatched at once.
Why is that?
EDIT:
The List Item:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0px"
android:minHeight="40dp"
android:orientation="horizontal"
android:paddingLeft="2px"
android:paddingRight="2px"
>
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Text"
android:textSize="19dp"
android:paddingTop="4px"
android:paddingBottom="4px"
android:layout_gravity="center_vertical"/>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/open_subtree_layout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="0px"
android:orientation="horizontal"
android:padding="0px">
<View
android:layout_width="1px"
android:layout_height="match_parent"
android:background="#drawable/separator_line" />
<com.treeviewer.leveldisplay.DontPressWithParentImageButton
android:id="#+id/btn_right"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:background="#drawable/list_selector_background"
android:focusable="false"
android:focusableInTouchMode="false"
android:padding="10dp"
android:src="#drawable/arrow_right" />
</LinearLayout>
</LinearLayout>
That's how it is inflated:
[...]
LayoutInflater inflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
mView = inflater.inflate(R.layout.tree_row, null, false);
TextView textView = (TextView)mView.findViewById(R.id.text1);
LinearLayout nextNodeButtonContainer = (LinearLayout)mView.findViewById(R.id.open_subtree_layout);
if(childCount >= 0) {
titleBuilder.append(" (" + childCount + ")");
nextNodeButtonContainer.setVisibility(View.VISIBLE);
View button = nextNodeButtonContainer.findViewById(R.id.btn_right);
button.setFocusable(false);
button.setFocusableInTouchMode(false);
//button.setClickable(true);
button.setOnClickListener(clickListener);
button.setTag(tagValue);
} else {
nextNodeButtonContainer.setVisibility(View.GONE);
}
textView.setText(titleBuilder);
Let me know, if you need more code.

Ok, I finally solved this problem.
Unfortunately, in my question I didn't provide the necessary information to solve it, as the problem was somewhere I didn't expect it:
I have a ListAdapter where the getView method looks like this:
public View getView(int position, View convertView, ViewGroup parent) {
return mNodes.get(position).getView(mNodeArrowClickListener, position);
}
And the getView method of the nodes (TreeLevelElements) looked like:
public class TreeLevelElement {
private final Context mContext;
private View mView = null;
//[...] other methods
View getView(OnClickListener clickListener, final int tagValue) {
if(mView == null) {
//[...] produce a new View from XML
}
return mView;
}
}
The problem was, that I stored the Views in my elements, so I guess that conflicted somehow with android strategy to reuse old views for new items.
I don't know what exactly happened, but now that I removed mView and create a new one every time, it works.
I will also change it to reuse the convertView instead.