I am using a LinearLayout with an edittext and then an image. On a button click I animate my image out of the screen thus giving space to the edittext. But the edittext resizes its width suddenly without animating.
How can I achieve this that the edittext resizes with animation. Pls help
Thanks in advance!!!!
Edit1: My xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/search_parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ImageView
android:id="#+id/hj_back_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/empty_string"
android:scaleType="centerCrop"
android:src="#drawable/ic_action_navigation_arrow_back_grey" />
<EditText
android:id="#+id/hj_search_edittext"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/apptheme_edit_text_holo_light"
android:gravity="left|center_vertical"
android:hint="#string/hj_search_text"
android:includeFontPadding="false"
android:paddingLeft="#dimen/hj_margin_small"
android:textColor="#color/hj_search_text_color"
android:textColorHint="#color/hj_search_bar_border_color"
android:textSize="#dimen/hj_font_small" />
<ImageView
android:id="#+id/my_cart_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|center_vertical"
android:scaleType="centerCrop"
android:src="#drawable/ic_action_shopping_cart_grey" />
In the above xml my_cart_icon moves to the right. I want my edittext to scale it smoothly to fill the left space.
You can achieve a simple animation effect of hiding/removing one of the views and stretching the others using android:animateLayoutChanges="true". Hope it helps!
Related
I need a button on bottom of an image with the parameter android:adjustViewBounds="true".
This is what I'm looking for:
But this is what I'm getting:
This is the code I'm using:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/idImg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true" //i really need this parameter because the height of each image is different
android:src="#drawable/homero" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="See more"/>
</RelativeLayout>
If you want your ImageView and Button to be overlapping, they either need to reference each other, or have the same layout alignment.
In this example, aligning your Button to the bottom of your ImageView will resolve this.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/idImg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/homero" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/idImg"
android:text="See more"/>
</RelativeLayout>
The way you currently have it, your button is trying to get to the bottom of your RelativeLayout. Because your RelativeLayout has a height of wrap_content, it just keeps growing as the button tries to get to the bottom, eventually filling the screen!
I have a relative layout that has a background image. I set the height and width to wrap_content. Everything works fine. I want to place an image at the topRight corner of the relative layout. So I use alignParentRight = true. The problem that the relative layout now stretches horizontally to fill the screen.
I have done so much reading and I came across this "circular dependency pitfall"
From the RelativeLayout doc:
Class Overview
A Layout where the positions of the children can be described in
relation to each other or to the parent.
Note that you cannot have a circular dependency between the size of
the RelativeLayout and the position of its children. For example, you
cannot have a RelativeLayout whose height is set to WRAP_CONTENT and a
child set to ALIGN_PARENT_BOTTOM
Here is my XML sample
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/popup_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:id="#+id/ibCloseDialog"
android:background="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alignParentRight="true"
android:src="#drawable/close" />
</RelativeLayout>
And that's exactly what I am facing. Is there any recommendation or a way to achieve what I want? I want the the Relativelayout to be as big as the background image and the image at the top right corner of that.
Thank you so much
Have you tried setting gravity to right?
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/popup_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right" >
<ImageButton
android:id="#+id/ibCloseDialog"
android:background="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alignParentRight="true"
android:src="#drawable/close" />
</RelativeLayout>
I have already faced these problem and i have been solved this way.
try this may help u.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/backGroundimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/backGroundimage" >
</ImageView>
<ImageView
android:id="#+id/ibCloseDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/backGroundimage"
android:background="#drawable/ibCloseDialog" >
</ImageView>
</RelativeLayout>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/popup_b"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageButton
android:id="#+id/ibCloseDialog"
android:background="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alignParentRight="true"
android:src="#drawable/close" />
Try using this code.
Here I height and width of RelativeLayout is set to fill_parent.
How can i achieve a layout with 2 images in android, one image overlaying another image at the top right?
an image overlapping another image at the top right
http://i.imgur.com/uT3L2wl.jpg
I tried using relative layout, but i could position the overlay image by giving layout margin, but if i do that i cant support all screen sizes with that design.
and also i couldnt position the overlay image with respect to the underimage.
i want to design my layout like the pic i have shared.
I could get this working from the below code,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/c1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
<ImageButton
android:id="#+id/addnewcustomer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/c1"
android:layout_toRightOf="#id/c1" >
</RelativeLayout>
<ImageButton
android:id="#+id/hover1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/c1"
android:layout_alignLeft="#+id/c1"
android:layout_marginBottom="23dp"
android:layout_marginLeft="22dp"
android:background="#null"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
Try look at FrameLayout. It will do the job.
http://www.learn-android-easily.com/2013/05/frame-layout-in-androis.html
I want to have a button on top of ImageView using my xml file. When I run this code, the button appears to the left hand side of the screen on top of other buttons.
Does anyone have any idea on what to do to have a button on TOP of ImageView but at the bottom of the screen.
So far I have the following:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
......
<ImageView
android:id="#+id/filter_image_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/filter_linear_layout" />
//this is the button I want to have on top of the ImageView
<Button
android:id="#+id/display_RGB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/button_blue_red_transluscent"
android:text="#string/display_RGB"
android:textColor="#android:color/white" />
</RelativeLayout>
Not too fussy as long as its somewhere at the bottom of the screen but in the center.
You can put them in their own RelativeLayout, then you can manipulate the location of the button relative to the ImageView quite easily.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/filter_linear_layout" >
<ImageView
android:id="#+id/filter_image_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<Button
android:id="#+id/display_RGB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_blue_red_transluscent"
android:text="#string/display_RGB"
android:textColor="#android:color/white"
android:layout_centerHorizontal="true"
android:layout_below="#id/filter_image_view"
/>
</RelativeLayout>
If this is not what you are looking, you'll need to post a sample image of how it currently looks and how you wants it to look.
[Edit]
Edited the XML layout. If you want the ImageView to center horizontally, add this to ImageView:
android:layout_centerHorizontal="true"
And you'll probably want to add some spacing between ImageView and Button by adding this to Button:
android:layout_marginTop="8dp"
Try this.
<Button
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:padding="16dip"
android:text="hi"
android:textColor="#color/black"
/>
I have posted the exact layout below. I want to show an image and text vertically centered inside the footer. I have applied:
android:gravity="center_vertical|center"
To both the LinearLayout containing these elements and the TextView inside but nevertheless the whole line image and text appears way too far towards the top of the footer. I want it centered vertically but instead it is in the top 30 % of the footer at all times.
<?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="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/someMessageMessage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_margin="10dip"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical|center"
android:paddingBottom="2dip"
android:paddingTop="16dip" >
<ImageView
android:id="#+id/myImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dip"
android:paddingTop="3dip"
android:src="#drawable/picimg" >
</ImageView>
<TextView
android:id="#+id/myMessage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:gravity="center_vertical|center"
android:text="This message appears way to close to the top of the footer. It should be along with the image in the center:"
android:textStyle="bold"/>
</LinearLayout>
<Button
android:id="#+id/myButton"
style="#style/mybuttonstyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:text="#string/lbl_send"
android:visibility="gone" />
</LinearLayout>
After seeing your layout it seems you haven't given android:paddingTop to your TextView. Thats why its appearing to the top.
Moreover you can also remove android:paddingTop from ImageView if that suits to your layout.
Hope that helps.
How big is the image? I think the problem is in your second LinearLayout. You're setting the height to be "wrap_content" so that means that it will only be as big as the biggest child. If the image and the text are about the same height, then it won't seem as if anything is getting centered. You can test this theory by forcing the height to be something big enough.