How to create imageviews dynamically? - android

Hello everyone. I need to create something like this,displayed in a picture. I have no idea how should I implement it?.
If I press camera button and add photo - it must be added to that list.
I think to create a row of invisible ImageView and initialize them when it needed, but I think it is bad solution.

you can use this way to create the imageviews dynamically:
ImageView iv=new ImageView(context);
iv.setId(id);
iv.layout(l, t, r, b);
l,t,r and b specify the padding from left,top,right and bottom respectively
then you can add this imageview to your respective layout

There is lots of ways to do. Use first portion as ListView and second portion as customized GridView if any data changes update both listview and gridview adapter.

Use this after image get captured
//LinearLayOut Setup
LinearLayout linearLayout= new LinearLayout(this);
linearLayout.setOrientation(LinearLayout.HORIZONTAL);
linearLayout.setLayoutParams(new LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT));
//ImageView Setup
ImageView imageView = new ImageView(this);
//setting image resource
imageView.setImageResource(R.drawable.play);
//setting image position
imageView.setLayoutParams(new LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT));
//adding view to layout
linearLayout.addView(imageView);
//make visible to program
setContentView(linearLayout);

You can add views dynamically that you defined default values in xml for using an inflater. The "parent" in the code below should be a ViewGroup like a Linear or RelativeLayout, or even a GridLayout.
You can probably use a LinearLayout with horizontal orientation to get the effect you are looking for.
LayoutInflater inflater = getActivity().getLayoutInflater();
final ImageView iv = (ImageView) inflater.inflate(R.layout.imageview_thumb, parent, false);
//Zero means its in the back;
parent.addView(iv, 0);
Layout Code:
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/imageview_fc"
android:layout_width="142dp"
android:layout_height="142dp"
android:scaleType="fitCenter"
android:layout_marginLeft="5dp"
android:background="#android:color/transparent"
/>

create a gallery to show the image horizontally. when you capture image, write it to a folder and read all files from that folder. each time when you capture image you need to refresh gallery data. if you want a image with cross button then create a separate xml file like below
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF8825">
<ImageView
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF2225"/>
<ImageButton
android:id="#+id/crossButton"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:background="#android:color/transparent"
android:layout_gravity="top|right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/btn_dialog_normal"/>
and inflate it for each gallery item

Related

Adding a few TextViews on RelativeLayout

I'm trying to programmatically add many TextView to a RelativeLayout but I am unable to do that when TextView reach the end of the display right next TextView inflate in a new line.
RelativeLayout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/tag_cloud"
android:padding="10dp">
</RelativeLayout>
Code:
if (categoriesCursor.moveToFirst()){
do {
TextView tagElement = (TextView) getLayoutInflater().inflate(R.layout.tag, null);
tagElement.setText(categoriesCursor.getString(2));
LinearLayout.LayoutParams llp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
llp.setMargins(0, 0, pixels, pixels); // llp.setMargins(left, top, right, bottom);
tagElement.setLayoutParams(llp);
tagCloudLayout.addView(tagElement);
} while (categoriesCursor.moveToNext());
}
tag.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffffff"
android:textColor="#ff000000"
android:textStyle="bold"
android:paddingLeft="5dp"
android:paddingRight="5dp"/>
Thanks
It´s not really clear what You are asking, but If I understand You the right way, You want to have only one line with textViews, or? Also, You are using wrong Layout Params, if You want to add some views to a relativeLayout side by side, I think You will get it with:
RelativeLayout.LayoutParams param = new RelativeLayout.LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT, 1.0f);
Where the last parameter stands for the layout weight attribute. With LayoutWeight and MATCH_PARENT, all views will be drawn with equal size.
Consider using a ListView which contains TextView, and that way you'll be able to take advantage of cell re-use etc. Here's a good tutorial
Finally I put one LinearLayout vertical oriented and inside LinearLayouts horizontal oriented with three TextView inside. Isn't the best solution but it works for me.

how to fix this imageview error?

Allow me to explain. I have :
a button with picture (located at #drawable/pic),
linear layout (id=linear1)
the button xml is below :
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginRight="10dp"
android:scaleType="fitXY"
android:src="#drawable/pic"
android:maxWidth="80dp"
android:maxHeight="80dp"
tools:ignore="ContentDescription" />
the linear layout xml is as follow :
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="80dp"
android:gravity="center"
android:orientation="horizontal"
tools:ignore="UselessLeaf" >
what i want is, when i click the button i want to create/generate imageview programatically inside the linearlayout and i want to fill it with the same picture for the button (pic). The code is below :
//initiate imageview
ImageView img=new ImageView(this);
//get drawable from button
Drawable blabla=btn1.getDrawable();
//set drawable to imageview
img.setImageDrawable(blabla);
//set height and width of imageview to 50dp
LinearLayout.LayoutParams parms = new LinearLayout.LayoutParams(50,50);
img.setLayoutParams(parms);
img.setScaleType(ScaleType.FIT_XY);
//place imageview to linearlayout
layoutTempat.addView(img);
The code works fine with displaying the imageview with the same image as the button have.
however the problem is : when i set the imageview to 50dp programatically, the image inside button changed too.. how can it happened ? i am so confused as iam a newbie..
Thanks before.
The two views are sharing the same drawable.
It's plausible your manipulations on one view are being sent to the underlying drawable, effecting how its displayed in the other view -- frankly I don't know. But assuming the case is as you described, this problem is easily fixed by cloning the drawable as follows:
Drawable dr = btn1.getDrawable().getConstantState().newDrawable();
img.setImageDrawable(dr);

Drag and Drop component on ImageView

Can any one help me to know how to add TextField on ImageView Dynamically. And drag them to any position on that ImageView as we want...
I think the Drag and Drop Blog will help you. In which i have dragged image as well as text both on touch event of fingure.
Check out the Code HERE
You can create a relative layout as container of your imageView (or directly set your image as relativeLayout background) like in this manner:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/relativeLayout">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:src="#drawable/your_image"
android:layout_centerHorizontal="true" />
<RelativeLayout>
and programatically, you get your imageView and add the textView to that:
RelativeLayout relativeLayout = (relativeLayout) findViewById(R.id.relativeLayout);
ImageView iv_myImage = (ImageView) findViewById(R.id.imageView);
// Create new textView
TextView textView = new TextView(context);
// Here set style on textView
// Finally add textView to imageView
relativeLayout.addView(textView);
About drag and drop there's plenty topics about.. see
http://www.techrepublic.com/blog/software-engineer/try-androids-useful-drag-and-drop-api/
drag and drop textview

Android layouts not displaying as intended

I need to create one full screen android activity programatically as shown in the image below:
The two buttons should remain at the bottom of the screen.
Dummy content will consist of different components (textviews, radio buttons, checkboxes...) and will be populated dynamically.
This is the code I have so far:
//Main Layout
FrameLayout lLayout = new FrameLayout(this);
lLayout.setBackgroundColor(Color.parseColor("#0099cc"));
lLayout.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
//Navigation layout
LinearLayout l = new LinearLayout(this, null, R.style.ButtonBar);
LayoutParams bottomLayout = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);
l.setLayoutParams(bottomLayout);
l.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL);
l.setBackgroundColor(Color.parseColor("#66000000"));
l.setOrientation(LinearLayout.HORIZONTAL);
LayoutParams buttLayout = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
//previous section button
previousButton = new Button(this);
previousButton.setLayoutParams(buttLayout);
previousButton.setText("Previous section");
previousButton.setOnClickListener(this);
l.addView(previousButton);
//next section button
Button nextButton = new Button(this);
nextButton.setLayoutParams(buttLayout);
nextButton.setText("Next section");
nextButton.setOnClickListener(this);
l.addView(nextButton);
//add components
TextView tView = new TextView(this);
tView.setText("Dummy text");
tView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT));
lLayout.addView(tView);
lLayout.addView(l);
setContentView(lLayout);
Here is what the code produces:
Tthere are several points that do not work as intended:
1. Buttons are at the top and not the bottom.
2. Buttons do not spread out nicely
3. TextView I added as a test is shown behind the buttons. I will have many different widgets on the screen and expect them to be larger than one screen. I would like to have a scroll option but with all those widgets not to be seen behind the two buttons that are supposed to be at the bottom of the screen.
The following xml is exactly what you would need:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/dynamiclayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/navigationlayout"
android:orientation="vertical" >
</LinearLayout>
<RelativeLayout
android:id="#+id/navigationlayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Previous Section" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Next Section" />
</RelativeLayout>
</RelativeLayout>
Now programatically inflate dynamiclayout and add all your dynamic views into it.
Your root view is a FrameLayout, which is intended for only one child View. It is also frequently used to create overlapping Views, as all of a FrameLayout's children will be drawn in the same place on screen.
Replace your FrameLayout with a RelativeLayout. Make sure you update your LayoutParams references to use RelativeLayout.LayoutParams. You will also need to set the navigation LinearLayout to align with the parent View's bottom like so:
RelativeLayout.LayoutParams lps = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
lps.addRule(RelativeLayout.LayoutParams.ALIGN_PARENT_BOTTOM, true);
Though I really would suggest using XML. It will make your life far simpler.

View overlapping another view in LinearLayout

I have a wierd problem.
I define a LinearLayout with vertical orientation.
I define an ImageView and another custom View.
if I add the custom one and then the image, all is fine and I see both of them.
if I add the image one first, I see only the image.
I try any variation of LayoutParams and nothing worked.
what I'm doing wrong here?
Edit - I even tried some default button to check its not my custom view that causing this
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
layout = new LinearLayout(getApplicationContext());
layout.setOrientation(LinearLayout.VERTICAL);
layout.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
ImageView image = new ImageView(getApplicationContext());
image.setImageDrawable(getResources().getDrawable(R.drawable.image_strip));
Button button = new Button(getApplicationContext());
button.setText("test");
layout.addView(image, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
layout.addView(button, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
setContentView(layout);
}
I found a way, but its still has an issue.
I used RelativeLayout, and aligned the button to the bottom of the parent (the layout) and I set the image to be above the button.
now I see both of them, but the problem now is that the image width also shrinks
How big is your image? If its bigger than the view area, its going to push the button off screen. If the button is first, you'll see it. If the button is after the image, you won't. That would be my first guess. You could wrap the whole thing (the parent LinearLayout) in a ScrollView to see if its doing that. If so, you'll need to clip the image somehow.
If the image is bigger than the screen size, try the following. Create the parent LL as you have it, then create a ScrollView and add the image inside that. Set the layout_weight of the ScrollView to 1 (or whatever), and DON'T set the layout_weight of the button. This should force the ScrollView to take up as much space as possible, but leave room for the button, and allow you to scroll to see the image.
I don't have good code off hand for doing this in code. I do most layout in XML (and not to pontificate, but I'd suggest the same for you ;)
<ProgressBar
android:layout_height="50dp"
android:layout_width="50dp"
android:id="#+id/myprogress"
android:layout_gravity="center_horizontal"
android:visibility="gone"
style="#android:style/Widget.Holo.Light.ProgressBar.Small"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_below="#+id/title" />
<ImageView
android:layout_height="165dp"
android:id="#+id/imageView1"
android:layout_width="125dp"
android:scaleType="fitXY"
android:visibility="invisible"
android:layout_marginTop="-30dp"
android:layout_gravity="center_horizontal"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"/>
Check for the above layout of progressbar and imageview. What I wanted was to overlap the imageview over progressbar and I achieved the same by setting android:layout_marginTop="-30dp" to imageview

Categories

Resources