How do I programmatically add multiple ImageView into a CardView in Android? - android

I'd like to programmatically create ImageViews inside a RecyclerView list of CardViews in my app. At the moment, each CardView had a + button which upon onClick adds the item in the CardView to a database.
I'd like to replace the + button with a checkmark image, to indicate to the user that the item in question has been added to the database. I'd also like to include two other ImageViews on an added CardView item: a delete button and and edit button, to allow the user to delete or edit the item respectively.
Is this something I'll need to do in my custom adapter? Should I be creating a separate XML layout file with the edit/delete buttons and inflate that layout within a new, programatically-created ImageView?
I've already replaced the + image with a checkmark, using the setImageResource() method within my item's setOnClickListener() method, but I know this isn't the correct solution: this just replaces the image within the existing ImageView.

LayoutParams params = new LayoutParams(
LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT
);
ImageView img = new ImageView(this);
img.setLayoutParams(params);
card.addview(img);

Related

Set Custom layout inside ListView as non-scrollable in android

I have a ListView which contains a custom layout.
Each row of the list View look like this:
The row contains 2 LinearLayouts, one for Date and one for Progress details. The progress Details Layout consits of 2 TextViews(Heading and data below it) and 1 Button (View More).
When the user clicks 'View More' button the data below the heading expands to 10-12 lines.
My problem is that when the TextView expands, a scrollbar comes at the edge and the user has to scroll to read. The width of the row does not change i.e the row does not expand.
I want the row width to expand so that the user does not have to scroll to read the text.
I did read a lot and have already tried the following options but they did not work
1. android:scrollbar="none"
2. View.setOverScrollMode(View.OVER_SCROLL_NEVER);
3. View.setScrollContainer(false);
Please help me with this.
You have to use exapanding listview animation for that you can use this lib for that
https://github.com/nhaarman/ListViewAnimations
Use a expandable List View such that the normal view of your list will have the image that you provided and on clicking that view it will expand to reveal the details that you wanted to show by clicking the view more option(in your image)
Here is a tut link for more info.
Try to use LayoutParams and change the height programatically inside the listener for you Button.
LayoutParams should derive from the type of layout containing your LinearLayout. If for instance it is a RelativeLayout, it will look something like that:
int heightForRow = 100;
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
params.height = heightForRow;
yourLinearLayout.setLayoutParams(params);
Please note that your LinearLayout must then be inside another layout (RelativeLayout in the example)

How to combine dynamic an ImageView with TextView

I'd like to fill dynamic ImageViews in a LinearLayout. In addition i like to include at the top of every ImageView a TextView. Implemeting this in a static way with the xml file is no problem but I don't got any idea how to implement this problem?
For example I select 5 pictures out of the gallery and show all pics side by side. At the top of every pic you can see the name of the pic.
[EDIT]
LayoutInflater inflatter=(LayoutInflater)this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
LinearLayout myLayout = (LinearLayout)findViewById(R.id.mylinlayout);
// AbsoluteLayoute has got an ImageView and a TextView
AbsoluteLayout test = (AbsoluteLayout)inflatter.inflate(R.layout.test2, null, false);
TextView texttest = (TextView)test.findViewById(R.id.name);
ImageView image=(ImageView)test.findViewById(R.id.image);
texttest.setText("test");
myLayout.addView(test);
Sounds like you're trying to make a scrollabe list, where each item in the list is a picture and a title text, right?
Have you thought about using an ArrayAdapter in a ListView and in the adapter's getView() you can inflate a layout file that contains an ImageView and a TextView?
You could create a custom layout in xml with the ImageView and TextView arranged the way you want for each item.
AbsoluteLayout
TextView (above ImageView)
ImageView
Then, as you dynamically get the images, you inflate this custom layout using a LayoutInflater and assign the TextView with the desired text and the ImageView with the desired image. Next, you take the inflated view and add it as a child to the LinearLayout. Iterate through your images and do this and you should have what the desired appearance.
Edit: If you have many images that might require scrolling, you would have to wrap the LinearLayout in a ScrollView to allow scrolling if the LinearLayout gets too large.
As someone else just mentioned, a ListView will take custom xml layouts and inflate them the same way using adapters and such, and it will handle scrolling for you. ListView link and example.

Android Overlapping Image Views

I want to create this sort of a view where the cross should be separate image view as I want it to be clickable. How can I achieve this ?
It would be great If I can create this view programatically as I am a dynamic list of images and I am programatically creating the image Views. All I need now is to add the overlapping imageview as well.
Thanks in advance
Use FrameLayout and you can overlay views on top of each other
Ex:
FrameLayout frame = (FrameLayout) findViewById(R.id.frame);
ImageView image = new ImageView(this);
iv.setImageResource(R.drawable.image);
ImageView cross = new ImageView(this);
i.setImageResource(R.drawable.cross);
FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
layoutParams.gravity = Gravity.RIGHT | Gravity.TOP;
i.setLayoutParams(layoutParams);
frame.addView(image);
frame.addView(cross);
Create a RelativeLayout programmatically, which contains two ImageViews. Place your image in the first one, and your second image in the second one. Adjust the margins accordingly to place it in the top right corner.
First create a completely new layout to use as an placeholder for example "partial_layout.xml". Then in your code first make a LayoutInflater with something like this:
LayoutInflater mInflater = (LayoutInflater) this.getSystemService(this.LAYOUT_INFLATER_SERVICE);
then try to get a fresh copy of this layout with something like this:
View convertView = mInflater.inflate(R.layout.partial_layout, null);
now put your current data to this view, and finally add this view to your content view.
If you create a list of views, you can still use XML by inflating it only when needed - just watch the lecture "the world of listView" in order to do it correctly. Using ListView is much more efficient than creating as many views as the number of items to show (for example, if there are 100 images to show, only those that are on screen need to be created).
Anyway, the xml can contain either FrameLayout or RelativeLayout as the root view, and you just put the 2 imageViews according to the right position you wish to have. You can use the UI designer for this, or edit the XML itself by adding margin-top for the larger image. also, make sure the larger image is written there before the small one.
as for the clicking, you can use setOnClickListener on the small imaveView.
BTW, if it's just images, you should probably use GridView instead of ListView.

Placing multiple ImageButtons in List View in Android Activity

I am new to Android and working on an app that needs to make use of a ListView such that each row of the list view has 3 clickable images. There could be several rows but each row must have 3 ImageButtons. Each ImageButton will have an onClick event which will be used to determine which image was selected by the user. The image below depicts what I need:
I am creating the ListView and the ImageButtons on-the-fly and adding them to my activity's layout. I have named all images like bigavatar1, bigavatar2, bigavatar3 (42 in total) and so no, to be able to use them in a loop.
In the OnCreate function of my activity, this is what I have been able to come up with so far:
LinearLayout mainScreen = (LinearLayout) findViewById(R.id.mainAvatarScreen);
mainScreen.setOrientation(LinearLayout.VERTICAL);
String PACKAGE_NAME = getApplicationContext().getPackageName();
int[] imgId = new int[42];
String fnm = "bigavatar"; // this is image file name
ListView avatarListView = (ListView) findViewById(R.id.membersListView);
for(int i=0; i<42; i++) {
imgId[i] = getResources().getIdentifier(PACKAGE_NAME+":drawable/"+fnm+(i+1) , null, null);
//ImageView img = new ImageView(this);
ImageButton img = new ImageButton(this); //create new ImageButton
//Set ImageButton's Properti es
img.setMaxHeight(64);
img.setMaxWidth(64);
img.setImageBitmap(BitmapFactory.decodeResource(getResources(),imgId[i])); //src
img.setBackground(getResources().getDrawable(R.drawable.arrow_imagebutton_selector));
mainScreen.addView(img);
}
Obviously, the above code is incomplete and is able to only create the images but not make use of the ListView yet.
I need help at this stage. How should I:
Add the ImageButtons to the ListView
Would it be a good idea to create a LinearLayout for each row, set it's orientation to Horizontal to organize my buttons neatly within each row?
Will I have to create a custom adapter for the ListView? I have tried adding Strings from an ArrayList but the requirement here is to add a set of 3 ImageButtons to each row of the ListView.
I need an onClick event on each ImageButton that will return be the name/id of the button clicked. This will not create a conflict with the ListView and will work as intended?
It would be great if someone can help me with the code and the strategy here. I am not very experienced so pardon me if I am using or suggesting incorrect designing strategies, I want to learn and get this activity ready asap. Please do explain your answers. Thanks :)

How to make a gallery with Image and text for android

I wanna make a Gallery, with a picture in the background and a textfield with invisible background... So I can see the text and the Image behind.
I already made the Gallery but i cant figure out how to put text in the foreground.
You create a custom adapter to use for your gallery view, see Hello Gallery tutorial
In the method getView() you have two different ways to achieve the same result:
A. Make an ImageView and a TextView and set the image and text:
ImageView iv = new ImageView(context); //and so on, remember to set the LayoutParams etc to fit your design.
Make a RelativeLayout and add the ImageView and TextView to it
Return the RelativeLayout.
B. Declare a layout in xml, with a RelativeLayout containing a TextView and an ImageView
In getView, inflate this layout, and using
inflatedLayout.findViewById(R.id.myTextView); //and so on
set the text and image and return the layout.

Categories

Resources