Android: ImageButton with a dynamic size and fixed position - android

In my app I want set an ImageButton in a position in this way
and I want adapt this button in this way for all screen, is there a strategy to obtain it?

It depends on how many screens you have that should have this button, how they interact with each other and whether the button should have the same funtion in every screen, but one option would be to have only one Activity with a layout, where you have the button on the bottom and an empty Layout above the button that works as fragment-container. Instead of starting new activities for a new "screen" change the Fragment in this container. The Button is always at the same place and you can handle its onClick centrally in the Activity...

Use
android:align = "Center"
or
android:width ="0dp"
android:weight = "1"

BPut ImageView in RelativeLayout and set attrs for image view like that:
<RelativeLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/previewImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>

Related

Android: placing an ImageView on an exact location on the screen

I would like to use getLocationOnScreen to get the location of an ImageView, and then I would like to place another ImageView exactly at that place.
Assume they both are in the same layout. When the app starts only imgv1 is visible. The user can move and rotate that image. Then the user can press a button and second image, imgv2 should be placed exactly on top of imgv1 so it covers it. Both imgv1 and imgv2 have the same size.
For example, assume I have imgv1 and imgv2 as:
ImageView imgv1, imgv2;
int[] img_coordinates = new int[2];
imgv1.getLocationOnScreen(img_coordinates);
I wanted to use something like:
imgv2.setX(img_coordinates[0]);
imgv2.setY(img_coordinates[2]);
but this doesn't do what I need to do, which is to place the top left corner of imgv2 on the top left corner of imgv1.
Any other method that helps me to do so is fine too.
** Update **
This is the layout I have:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/tools_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<ImageView
android:id="#+id/imgv1"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_gravity="center_vertical|center_horizontal"
android:visibility="gone"
app:cameraCropOutput="true"
app:cameraPlaySounds="false" />
<ImageView
android:id="#+id/imgv2"
android:layout_width="300dp"
android:layout_height="200dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:visibility="gone" />
</FrameLayout>
The javadoc for view says that setX and setY will offsett the image from it's original location. It looks like what you want to use is setLeft and setTop.
https://developer.android.com/reference/android/view/View#setleft
If i have overlapping views I generally put them in layout and show/hide them. However if you want to dit via code try setting layout params of second image like:
lp.addRule(RelativeLayout.ALIGN_LEFT, image1.getId());
lp.addRule(RelativeLayout.ALIGN_TOP, image1.getId());
...something like it.
Positioning depends a lot on parent of Image views. Relative Layout would be correct choice.
Step #1: Put imgv1 in a FrameLayout
Step #2: Put imgv2 in that same FrameLayout, with android:visibility="gone"
Step #3: When the user presses the button, call imgv2.setVisibility(View.VISIBLE)
<FrameLayout android:id="combined">
<ImageView android:id="imgv1" android:layout_width="match_parent" android:layout_height="match_parent" />
<ImageView android:id="imgv2" android:visibility="gone" android:layout_width="match_parent" android:layout_height="match_parent" />
</FrameLayout>
Missing are sizing/positioning rules for the FrameLayout, which would be whatever you are presently using for your starting conditions for imgv1, presumably.
Alternatively, have one ImageView, rather than two, and change the image on the button click. For example, you could use a LayerDrawable (or the equivalent resource) to layer two drawables on top of each other, and show that.

Fill Parent on Horizontal List Row with Margin

Okay so I have a horizontal Relative Layout on a ListView and I want a margin between the different Rows on the ListView but I have one problem. I have a button that is being pushed to the far right and I want the click zone to be as big as possible. If there was no margin on the root element of relative layout I would be fine and my button would take up the entire height of the row. But the problem is because there is margin there is an opportunity for the user to click above and below the button where the margin is to trigger the OnItemClick event which isn't the desired functionality of the button which could get frustrating at times.
Example:
<RelativeLayout android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="5dp">
<ImageButton
android:id="#+id/list_button"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/btn"
android:background="#android:drawable/list_selector_background" />
</RelativeLayout>
Any help would be greatly appreciated obviously its possible I just can't see it sadly.
One way around this is to wrap the ImageButton in a transparent layoutview (relative, linear, frame - depending on your needs) that does take up the whole space (i.e. android:layout_width and android:layout_height are fill_parent). Then add the same click handler to the outer layout as you do for the button.

Which of layout should i use?

I'm confused. I want to show the map and on below of map show 5 buttons. I use RelativeLayout, but the program just show Product button. Why? I'm confused which layout i use (Linear,Relative,Frame or absolute )!! Please help me. and How can i correct this code?
location.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/frame"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.google.android.maps.MapView
android:id="#+id/mapView"
android:apiKey="0cPRv243zM1_S3ydsNg8MJP9_6BfCp642jOhPvQ"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background"
android:layout_gravity="bottom"
android:orientation="horizontal" >
<Button
android:id="#+id/button_home"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/home_icon"
android:text="#string/button_home"
android:textColor="#color/text_home" />
<Button
android:id="#+id/button_product"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/product_icon"
android:onClick="Product"
android:text="#string/button_product"
android:textColor="#color/text_product" />
</LinearLayout>
</LinearLayout>
To answer your specific problem: Instead of saying that the home button is to the left of the product button, you should say that the product button is to the right of the home button. When a RelativeLayout is inflated, the layout is parsed in a linear way so if view A it positioned relative to view B, view B must come first.
<Button
android:id="#+id/button_home"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/home_icon"
android:text="#string/button_home"
android:textColor="#color/text_home"/>
<Button
android:id="#+id/button_product"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button_home"
android:drawableTop="#drawable/product_icon"
android:onClick="Product"
android:text="#string/button_product"
android:textColor="#color/text_product" />
Add this to the product button and delete the layout_toLeftOf from the home button.
android:layout_toRightOf="#id/button_home"
You can use gravity and alignment to position the home button and then have the other four buttons following it, each one positioned to the right of the one before it.
Good luck
RelativeLayout by default places these 2 buttons together, so you can just see the latter.
And the line
android:layout_toLeftOf="#+id/button_product"
is wrong. #+id creates an id, use #id in such cases.
I would recommend LinearLayout for the situation. Place these buttons in it, and adjust them with some margin.
LinearLayout : LinearLayout is used when we need to arrange the
widgets/views in a horizontal or vertical manner.
The direction of arrangement can be set to horizontal or vertical,
by default it is being horizontal.
TableLayout : If the Layout's widgets/views need to be arranged
in the form of rows and columns, we use this layout object.
This is similar to html tables. The cells can span columns.
The TableLayout do not display its border. We can be made to
shrink and stretch by setting the respective properties of the columns,
"TableRow" is another helper widget which should be used in conjunction
with the TableLayout.
RelativeLayout : Here the position of each of the widgets/view is
in relative/dependent to each other. For example, when a layout is needed
such that it has a text view just to the left of an Edit Textbox, and a button
just below the EditText. The relation between the views are taken care in
one iteration, hence if view B’s position is dependent on view A’s position,
view A must come first in the layout.
FrameLayout : This is a very simply layout which is used to hold a section
of the screen blank, for displaying an item or group of items at run time. All the
elements added in the framelayout will be added to the top left of the screen.
AbsoluteLayout : When there is a need is to specify exact x and y co-ordinate
position of the view, then AbsoluteLayout need to be used. This layout is
difficult to maintain.

How to place fixed button below listview?

Is there any way to have a button directly below a listview, so that as the listview grows, the button moves down BUT the button is never pushed off screen. IE, once the listview has outgrown the screen, the button is still always visible, and the listview is scrollable.
I have managed to make the button ALWAYS at the bottom of the screen, but i want it to sit up directly below the listview while the listview is smaller than the screen.
I have tried using various arrangements of relative and linear layouts and using the weight property, and things that seem like they should work simply don't, so it might be worth checking any answers before posting.
CLARIFICATION:
To phrase it in a different way: I want a button to sit below a listview, moving down as it grows, but i dont want the button to be pushed offscreen
This previous post does exactly what you want to do. What it does basically is that it keeps the button at the bottom of the list at all times. But when the list grows out of the screen area, its height gets limited by the weight parameter.
This way, the list's bottom edge is just above the button's LinearLayout and you get the same behavior that you were looking for.
If You Want to show this button in the end of list item. Then use this code
final Button btnAddMore = new Button(this);
btnAddMore.setText(R.string.art_btn_moreIssues);
exArticlesList = (ExpandableListView) this.findViewById(R.id.art_list_exlist);
exArticlesList.addFooterView(btnAddMore);
OR If you show button in your layout end then use this code.
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/listView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/btn_New" >
</ListView>
<Button
android:id="#+id/btn_New"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginBottom="20dp"
android:text="#string/New"
android:width="170dp"
android:layout_alignParentBottom="true" />
</RelativeLayout>

Extend UI of an View

I would like to extend the UI of AutoCompleteTextView. The Functionality is fine, all I need is to add an button to the right that looks like a drop-down button. Sadly AutoCompleteTextView has a 'natural' margin that I can't reduce to 0.
What can I do now?
Dose I have to overwrite onDraw() & onMeasure() to archive my goal (is there an easier way)?
You could put both AutoCompleteTextView and button onto FrameLayout, add some extra margin right to AutoCompleteTextView to make FrameLayout slightly bigger, and align button to parent right. In fact, these 2 views will interfere, but for user they will appear one next to the other w/o any margin.
Another option could be to set custom background to AutoCompleteTextView (probably modified original one taken from Android source with removed margin).
Just remembered that you can supply negative margin. You can put both views onto LinearLayout and set left margin of button to -5dp for example. However, you will still have to supply custom marginless background for button.
you can use RelativeLayout to put Button to the right of AutoCompleteTextView
Sample
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn_close_pressed"
android:layout_alignParentRight="true"
android:id="#+id/myBtn"
></Button>
<AutoCompleteTextView android:id="#+id/myautocomplete"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:completionThreshold="1"
android:layout_toLeftOf="#+id/myBtn"
/>
</RelativeLayout>

Categories

Resources