Here is my problem. I have 6 LinearLayouts wich are all in centerVertical and centerHorizontal. And now I want them move, when the Activity starts, to all corners and sides, each. ( In each corner should be one Layout and on the left center and on the right center ). I achieve this, for Example, with this TranslateAnimation :
xbox360animation = new TranslateAnimation(0.0f, distanceWidth,
0.0f, 0.0f);
xbox360animation.setDuration(1500);
xbox360animation.setFillAfter(true);
xbox360Layout.startAnimation(xbox360animation);
animationxboxone = new TranslateAnimation(0.0f, -distanceWidth,
0.0f, 0.0f);
animationxboxone.setDuration(1500);
animationxboxone.setFillAfter(true);
xboxOneLayout.startAnimation(animationxboxone);
animationps3 = new TranslateAnimation(0.0f, distanceWidth,
0.0f, -distanceHeight);
animationps3.setDuration(1500);
animationps3.setFillAfter(true);
ps3Layout.startAnimation(animationps3);
animationps4 = new TranslateAnimation(0.0f, -distanceWidth,
0.0f, -distanceHeight);
animationps4.setDuration(1500);
animationps4.setFillAfter(true);
ps4layout.startAnimation(animationps4);
animationwiiu = new TranslateAnimation(0.0f, distanceWidth,
0.0f, distanceHeight);
animationwiiu.setDuration(1500);
animationwiiu.setFillAfter(true);
wiiuLayout.startAnimation(animationwiiu);
animationpc = new TranslateAnimation(0.0f, -distanceWidth, 0.0f, distanceHeight);
animationpc.setDuration(1500);
animationpc.setFillAfter(true);
pcLayout.startAnimation(animationpc);
My XML File:
<RelativeLayout
android:layout_width="match_parent"
android:layout_below="#id/header"
android:layout_above="#id/nextBtn"
android:layout_marginLeft="36dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:layout_marginRight="36dp"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:id="#+id/xboxOneLayout"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_height="wrap_content">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/xboxOne"
android:padding="10dp"
android:duplicateParentState="true"
android:background="#drawable/icon_background_not_selected"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/xbox"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Xbox One"
android:id="#+id/xboxOnetv"
android:visibility="invisible"
android:duplicateParentState="true"
android:textColor="#fff"
android:layout_marginTop="5dp"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:id="#+id/xbox360Layout"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_height="wrap_content">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/xbox360"
android:padding="10dp"
android:duplicateParentState="true"
android:background="#drawable/icon_background_not_selected"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/xbox"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Xbox 360"
android:id="#+id/xbox360tv"
android:textColor="#fff"
android:duplicateParentState="true"
android:visibility="invisible"
android:layout_marginTop="5dp"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:id="#+id/ps3Layout"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_height="wrap_content">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/ps3"
android:padding="10dp"
android:duplicateParentState="true"
android:background="#drawable/icon_background_not_selected"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/playstation"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ps3"
android:duplicateParentState="true"
android:id="#+id/ps3tv"
android:textColor="#fff"
android:visibility="invisible"
android:layout_marginTop="5dp"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:id="#+id/ps4Layout"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_height="wrap_content">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/ps4"
android:duplicateParentState="true"
android:padding="10dp"
android:background="#drawable/icon_background_not_selected"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/playstation"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ps4"
android:duplicateParentState="true"
android:id="#+id/ps4tv"
android:textColor="#fff"
android:visibility="invisible"
android:layout_marginTop="5dp"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:id="#+id/wiiuLayout"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_height="wrap_content">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/wiiu"
android:duplicateParentState="true"
android:padding="10dp"
android:background="#drawable/icon_background_not_selected"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/wii"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WiiU"
android:duplicateParentState="true"
android:id="#+id/wiiutv"
android:visibility="invisible"
android:textColor="#fff"
android:layout_marginTop="5dp"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:id="#+id/pcLayout"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_height="wrap_content">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/pc"
android:duplicateParentState="true"
android:padding="10dp"
android:background="#drawable/icon_background_not_selected"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/desktop"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PC"
android:duplicateParentState="true"
android:textColor="#fff"
android:id="#+id/pctv"
android:visibility="invisible"
android:layout_marginTop="5dp"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
</RelativeLayout>
I can't click on them after the animation. When I click on the position where it should be before the Animation, I get the onclick on one of the Layouts.
How can I set the Layouts to the new position, so I recieve the onClick Event from the right Layout?
Here i am showing you example of Gesture Listener in Code i have using image View but you can change it into Linear Layout
public class MainActivity extends Activity {
private ImageView iv;
private Matrix matrix = new Matrix();
private float scale = 1f;
private ScaleGestureDetector SGD;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
iv=(ImageView)findViewById(R.id.imageView);
SGD = new ScaleGestureDetector(this,new ScaleListener());
}
public boolean onTouchEvent(MotionEvent ev) {
SGD.onTouchEvent(ev);
return true;
}
private class ScaleListener extends ScaleGestureDetector.
SimpleOnScaleGestureListener {
#Override
public boolean onScale(ScaleGestureDetector detector) {
scale *= detector.getScaleFactor();
scale = Math.max(0.1f, Math.min(scale, 5.0f));
matrix.setScale(scale, scale);
iv.setImageMatrix(matrix);
return true;
}
}
}
TranslateAnimation only moves the pixels on the screen, and does not really move your LinearLayouts, it only makes it look like it is moving, so an OnClickListener will not animate with it. You still should be able to click at the old position before the animation.
Try ObjectAnimator or ViewPropertyAnimator.
Example with ViewPropertyAnimator for your xbox 360 layout:
xbox360Layout.animate().translationX(distanceWidth).setDuration(1500);
Now your layout really moves on the screen and your OnClick should work on the new position.
Related
I would like to create a Seekbar, above which there will be text label on each Seekbar step, what it should look like is shown in below image
this is the expected result, for which what i have done,
<RelativeLayout
android:id="#+id/layout_font_size"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txtFont_size_hint"
style="#style/textStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Aa" />
<LinearLayout
android:id="#+id/layout_seekbar_interval_holder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/txtFont_size_hint"
android:layout_marginLeft="16dp"
android:layout_marginRight="#dimen/margin_16dp"
android:orientation="horizontal"
android:weightSum="5">
<TextView
android:id="#+id/txtSize_14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="#dimen/font_size_14" />
<TextView
android:id="#+id/txtSize_18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="#dimen/font_size_18sp" />
<TextView
android:id="#+id/txtSize_24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="#dimen/font_size_24sp" />
<TextView
android:id="#+id/textSize_30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="#dimen/font_size_30sp" />
<TextView
android:id="#+id/txtSize_36"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="#dimen/font_size_36sp" />
</LinearLayout>
<SeekBar
android:id="#+id/seekBarSetting_font_size"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_below="#id/layout_seekbar_interval_holder"
android:layout_marginLeft="#dimen/margin_16dp"
android:layout_marginRight="#dimen/margin_16dp"
android:max="4"
android:theme="#style/seekBarYelloStyle" />
</RelativeLayout>
Output of this is
the Layout looks similar to what is expected but, while moving the seekbar thumb, the thumb is not vertically aligned with the TextView so the problem here is the seekbar thumb is not vertically aligend with the text indicating the steps of seekBar.
I had also tried calculating the exact position of TextView by dividing the seekbars width by steps (Here we have 5 steps but first one is on 0th position so i divided the total seekbar Width by 4 and then placed each text accordingly) but didn't got the expected solution.
I am bit confused here, and want a simple solution as soon as possible.
P.S: ScreenShot of output of view created dynamically is also attached for reference
layout for this :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="android.sample.MainActivity">
<TextView
android:id="#+id/txtFont_size_hint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sizes"/>
<LinearLayout
android:id="#+id/ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:weightSum="5">
<LinearLayout
android:id="#+id/ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="5">
<TextView
android:id="#+id/txtSize1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="15sp"/>
<TextView
android:id="#+id/txtSize_18"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="20sp"/>
<TextView
android:id="#+id/txtSize_24"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="25sp"/>
<TextView
android:id="#+id/textSize_30"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="30sp"/>
<TextView
android:id="#+id/txtSize_36"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="35sp"/>
</LinearLayout>
<SeekBar
android:id="#+id/seekBarSetting_font_size"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="4"/>
Now what i have done is aligned the width of Seekbar till the center of the last TextView which in this case is txtSize_36
and have set the ems as android:max="4" so there are five possible values(you can change this to as much as you want)
Code for Activity is :
public class MainActivity extends AppCompatActivity {
SeekBar seekBar;
private LinearLayout bar, ll;
TextView txtSize_14, txtSize_36;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
seekBar = (SeekBar) findViewById(R.id.seekBarSetting_font_size);
txtSize_14 = (TextView) findViewById(R.id.txtSize1);
txtSize_36 = (TextView) findViewById(R.id.txtSize_36);
ll = (LinearLayout) findViewById(R.id.ll);
}
float density;
#Override
protected void onResume() {
super.onResume();
ViewTreeObserver vto = ll.getViewTreeObserver();
//****old code (may not work on all orientations)****
/*vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
ll.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
ll.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
int width = ll.getMeasuredWidth();
int height = ll.getMeasuredHeight();
ViewGroup.LayoutParams params = seekBar.getLayoutParams();
density = getResources().getDisplayMetrics().density;
int newwidth = (int) (txtSize_14.getLeft() / density);
newwidth = newwidth+ (txtSize_36.getLeft() + txtSize_36.getRight()) / 2;
params.width = newwidth;
seekBar.setLayoutParams(params);
}
});*/
//****new code (should work on all orientations)****
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
ll.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
ll.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
seekBar.setPadding(15, 0, 15, 0);
seekBar.setX(((txtSize_14.getLeft() + txtSize_14.getRight()) / 2) - 15);
ViewGroup.LayoutParams params = seekBar.getLayoutParams();
int centerwidth = ((txtSize_36.getLeft() + txtSize_36.getRight()) / 2) - ((txtSize_14.getLeft() + txtSize_14.getRight()) / 2) + 15;
params.width = centerwidth;
seekBar.setLayoutParams(params);
}
});
}
}
Here is screenshot for reference (I have clubbed for all positions of seekbar):
Frankly speaking it took me a while to sort this out using XML only.
The first and last label are differently positioned than the others....
In case you will change the size of the thumb from 15dp - you must also change the margin of first and last TextView and size of Spaces (margin + Space = thumb size)
preview
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingRight="0dp"
android:paddingLeft="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="0dp">
<TextView
android:text="7 days"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="left|center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="0.5"
android:layout_marginLeft="5dp"/>
<Space
android:layout_width="10dp"
android:layout_height="match_parent"/>
<TextView
android:text="1 month"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="1"
android:layout_marginRight="0dp"
android:id="#+id/textView" />
<TextView
android:text="3 months"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="1"
android:layout_marginRight="0dp"/>
<TextView
android:text="1 year"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="1"
android:layout_marginLeft="0dp"/>
<TextView
android:text="3 years"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="1"
android:layout_marginLeft="0dp"/>
<Space
android:layout_width="10dp"
android:layout_height="match_parent"/>
<TextView
android:text="5 years"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="right|center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="0.5"
android:layout_marginRight="5dp"/>
</LinearLayout>
</RelativeLayout>
trying to make showing LinarLayout from GONE state to VISIBLE with "roll down" animation. On this Layout exist TextView. Seems to all work fine but, a TextView not shown after animation.
What I do wrong?
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:id="#+id/ll_info">
<TextView
android:id="#+id/bayer_note"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:text="#string/buyer_note"/>
<RelativeLayout
android:id="#+id/button_continue"
android:layout_width="match_parent"
android:layout_height="54dp"
android:layout_centerHorizontal="true"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:background="#drawable/button_register"
android:drawableEnd="#drawable/ic_arrow_forward_white_24dp">
<TextView
android:id="#+id/btn_cont_caption"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Войти"
android:textColor="#android:color/white"
android:textSize="20sp"
android:fontFamily="fonts/SF-UI-Display-Regular.ttf"
android:layout_centerInParent="true" />
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:id="#+id/imageView"
android:layout_centerVertical="true"
android:layout_alignParentEnd="false"
android:src="#drawable/ic_door"
android:layout_toRightOf="#+id/btn_cont_caption"
android:layout_marginLeft="10dp"
android:scaleType="fitCenter" />
</RelativeLayout>
</LinearLayout>
And animation code:
final LinearLayout ll_info = (LinearLayout)findViewById(R.id.ll_info);
class scaleAnimation extends Animation {
public LinearLayout ll;
public int newHeight;
public void scaleTopHeight(int height)
{
newHeight = height;
}
public void setLayout(LinearLayout layout) {
ll = layout;
}
}
final LinearLayout ll_info = (LinearLayout)findViewById(R.id.ll_info);
scaleAnimation h = new scaleAnimation() {
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
ll.getLayoutParams().height = interpolatedTime == 1
? LinearLayout.LayoutParams.WRAP_CONTENT
: (int)(newHeight * interpolatedTime);
ll.requestLayout();
}
};
h.setDuration(300);
h.setLayout(ll_info);
ll_info.setVisibility(View.VISIBLE);
ll_info.measure(View.MeasureSpec.makeMeasureSpec(((LinearLayout)ll_info.getParent()).getWidth(), View.MeasureSpec.AT_MOST), View.MeasureSpec.makeMeasureSpec(((LinearLayout)ll_info.getParent()).getHeight(), View.MeasureSpec.AT_MOST));
h.scaleTopHeight(ll_info.getMeasuredHeight());
ll_info.getLayoutParams().height=1;
ll_info.startAnimation(h);
<RelativeLayout
android:id="#+id/button_continue"
android:layout_width="match_parent"
android:layout_height="54dp"
**android:layout_centerHorizontal="true"** /////
remove this
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:background="#drawable/button_register"
android:drawableEnd="#drawable/ic_arrow_forward_white_24dp">
<TextView
android:id="#+id/btn_cont_caption"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Войти"
android:textColor="#android:color/white"
android:textSize="20sp"
android:fontFamily="fonts/SF-UI-Display-Regular.ttf"
android:layout_centerInParent="true" />
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:id="#+id/imageView"
android:layout_centerVertical="true"
android:layout_alignParentEnd="false"
android:src="#drawable/ic_door"
android:layout_toRightOf="#+id/btn_cont_caption"
android:layout_marginLeft="10dp"
android:scaleType="fitCenter" />
</RelativeLayout>
i think this is your xml file issue ,your relativelayout in center_horizontal and all the childs are in center in parent.so textview hides over imageview. Try it and let me know.
I have seen the questions in the stack over flow, even I tried,
Android Translate Animation like Swapping Two Views
But nothing worked for my scenario, I want to swap swap_above linear layout and swap_below linear layouts when click on swap image button. If possible I would like to apply animation for swap imagebutton also, when the views are being swapped.
Thank you,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/from"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingBottom="25dp"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:paddingTop="15dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="From"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/swap_above"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/from_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<TextView
android:id="#+id/from_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/seek_thumb_pressed"
android:drawablePadding="5dp"
android:text="BANGALORE"
android:textSize="20dp" />
<TextView
android:id="#+id/from_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text=" (BLR)"
android:textSize="15dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="0.5dp"
android:layout_marginLeft="20dp"
android:layout_weight="1"
android:background="#FFF" />
<View
android:layout_width="60dp"
android:layout_height="0dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/to"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingBottom="25dp"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:paddingTop="15dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="To"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/swap_below"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/to_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<TextView
android:id="#+id/to_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/seek_thumb_normal"
android:drawablePadding="5dp"
android:text="Hyderabad"
android:textSize="20dp" />
<TextView
android:id="#+id/to_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text=" (HYD)"
android:textSize="15dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<ImageButton
android:id="#+id/swap"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_vertical|end"
android:background="?android:attr/selectableItemBackground"
android:src="#drawable/seek_thumb_disabled" />
</FrameLayout>
</LinearLayout>
First - set the below xml attributes for each target view's parent which may be blocking the animation :
android:clipChildren="false"
android:clipToPadding="false"
You need to set this attributes at 3 places in your case.
Read more about clipChildren & clipToPadding here -
http://developer.android.com/reference/android/view/ViewGroup.html#attr_android:clipChildren
http://developer.android.com/reference/android/view/ViewGroup.html#attr_android:clipToPadding
If your minSDK >=12
Use this for swap animation :
findViewById(R.id.swap).setOnClickListener(new View.OnClickListener() {
boolean isAnimating;
#Override
public void onClick(View v) {
if(isAnimating)
return;
isAnimating=true;
View v1 = findViewById(R.id.swap_above);
View v2 = findViewById(R.id.swap_below);
float x1, y1, x2, y2;
x1 = getRelativeX(v1);//Use v1.getX() if v1 & v2 have same parent
y1 = getRelativeY(v1);//Use v1.getY() if v1 & v2 have same parent
x2 = getRelativeX(v2);//Use v2.getX() if v1 & v2 have same parent
y2 = getRelativeY(v2);//Use v2.getY() if v1 & v2 have same parent
float x_displacement = (x2-x1);
float y_displacement = (y2-y1);
v1.animate().xBy(x_displacement).yBy(y_displacement);
v2.animate().xBy(-x_displacement).yBy(-y_displacement);
long anim_duration = v1.animate().getDuration();
//Wait till animation is over to set isAnimating to false
//take 10 ms as buffer time to ensure proper functioning
//If you remove this timer & isAnimating variable, the animation will function improperly when user rapidly clicks on swap button
new CountDownTimer(anim_duration + 10, anim_duration + 10) {
#Override
public void onTick(long millisUntilFinished) {
}
#Override
public void onFinish() {
isAnimating=false;
}
}.start();
}
//returns x-pos relative to root layout
private float getRelativeX(View myView) {
if (myView.getParent() == myView.getRootView())
return myView.getX();
else
return myView.getX() + getRelativeX((View) myView.getParent());
}
//returns y-pos relative to root layout
private float getRelativeY(View myView) {
if (myView.getParent() == myView.getRootView())
return myView.getY();
else
return myView.getY() + getRelativeY((View) myView.getParent());
}
});
Read about View Property animator here -
http://developer.android.com/reference/android/view/ViewPropertyAnimator.html
http://developer.android.com/guide/topics/graphics/prop-animation.html
Also, you should try to minimize the number of views in your layout.
Read about layout optimization here -
http://developer.android.com/training/improving-layouts/optimizing-layout.html
I have an activity with three fragments placed in a ViewPager. On the first two fragments I have a list that drops down, kind of like an animated ExpandableListView but it is a simple RelativeLayout containing a TextView and ImageView, when pressed slides down a LinearLayout containing some elements. On clicking the RelativeLayout the followig actions are taken:
change the background color of the clicked RelativeLayout (works every time for every layout in every fragment)
change the color of the text in TextView (works every time for the first element I'll explain below)
animate the image, an arrow to change color and rotate (also works but for the first element)
The problem is as follows:
the first fragment contains only one list (a RelativeLayout that shows or hides a LinearLayout) and it works fine the background, text color and image change and the image rotates and the Linearlayout slides up and down correspondingly. The second fragment contains 4 such groupings (RelativeLayout controlling LinearLayout) and on the first time this fragment is shown only the first grouping seems to work. The other three change background and slide the Linearlayout but as far as i can tell it keeps the same color and the same image (there are two colors a white and an orange that change and since the background changes from orange to white i assume the text stays white instead of changing to orange, same goes for the image).
The punchline:
when I leave it for a few seconds and click it again it works fine, everything changes accordingly, and if i for instance flip to the third fragment and back to the second it works. On the other hand if I start the app, got to the second fragment, back to the first, and to the second again it doesn't work.
I don't know if this has something to do with the GC and recycling views or something else.
XML:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/nutritionList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/aboutWetFood"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:clickable="false"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/wetSub"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dp"
android:orientation="vertical"
android:visibility="gone" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginBottom="1dp"
android:background="#EDEDED" >
<TextView
android:id="#+id/TextView04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:text="SUB MENU 1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/my_yellow" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginBottom="1dp"
android:background="#EDEDED" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:text="SUB MENU 1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/my_yellow" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/wetLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/my_yellow"
android:clickable="true"
android:onClick="openNutrition"
android:tag="wet" >
<TextView
android:id="#+id/wetTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:text="#string/wet_food"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white" />
<ImageView
android:id="#+id/wetArrow"
android:layout_width="12dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="30dp"
android:src="#drawable/arrow_right_white" />
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/aboutDryFood"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:clickable="false"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/drySub"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dp"
android:orientation="vertical"
android:visibility="gone" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginBottom="1dp"
android:background="#EDEDED" >
<TextView
android:id="#+id/TextView06"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:text="SUB MENU 1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/my_yellow" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginBottom="1dp"
android:background="#EDEDED" >
<TextView
android:id="#+id/TextView05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:text="SUB MENU 1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/my_yellow" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/dryLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/my_yellow"
android:clickable="true"
android:onClick="openNutrition"
android:tag="dry" >
<TextView
android:id="#+id/dryTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:text="#string/dry_food"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white" />
<ImageView
android:id="#+id/dryArrow"
android:layout_width="12dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="30dp"
android:src="#drawable/arrow_right_white" />
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/whyMixedFeeding"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:clickable="false"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/mixedSub"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dp"
android:orientation="vertical"
android:visibility="gone" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginBottom="1dp"
android:background="#EDEDED" >
<TextView
android:id="#+id/TextView08"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:text="SUB MENU 1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/my_yellow" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginBottom="1dp"
android:background="#EDEDED" >
<TextView
android:id="#+id/TextView07"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:text="SUB MENU 1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/my_yellow" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/mixedLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/my_yellow"
android:clickable="true"
android:onClick="openNutrition"
android:tag="mixed" >
<TextView
android:id="#+id/mixedTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:text="#string/mixed_feeding"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white" />
<ImageView
android:id="#+id/mixedArrow"
android:layout_width="12dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="30dp"
android:src="#drawable/arrow_right_white" />
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/nutritionOralCare"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:clickable="false"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/oralSub"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dp"
android:orientation="vertical"
android:visibility="gone" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginBottom="1dp"
android:background="#EDEDED" >
<TextView
android:id="#+id/TextView09"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:text="SUB MENU 1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/my_yellow" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginBottom="1dp"
android:background="#EDEDED" >
<TextView
android:id="#+id/TextView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:text="SUB MENU 1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/my_yellow" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/oralLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/my_yellow"
android:clickable="true"
android:onClick="openNutrition"
android:tag="oral" >
<TextView
android:id="#+id/oralTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:text="#string/oral_care_caps"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white" />
<ImageView
android:id="#+id/oralArrow"
android:layout_width="12dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="30dp"
android:src="#drawable/arrow_right_white" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
</ScrollView>
Methods for changing and animating the views:
public void openNutrition(View view) {
String viewTag = view.getTag().toString();
if (viewTag.equals("wet")) {
nutrition = (RelativeLayout) findViewById(R.id.wetLayout);
nutritionSub = (LinearLayout) findViewById(R.id.wetSub);
nutritionTitle = (TextView) findViewById(R.id.wetTitle);
nutritionArrow = (ImageView) findViewById(R.id.wetArrow);
animate();
}
else if (viewTag.equals("dry")) {
nutrition = (RelativeLayout) findViewById(R.id.dryLayout);
nutritionSub = (LinearLayout) findViewById(R.id.drySub);
nutritionTitle = (TextView) findViewById(R.id.dryTitle);
nutritionArrow = (ImageView) findViewById(R.id.dryArrow);
animate();
}
else if (viewTag.equals("mixed")) {
nutrition = (RelativeLayout) findViewById(R.id.mixedLayout);
nutritionSub = (LinearLayout) findViewById(R.id.mixedSub);
nutritionTitle = (TextView) findViewById(R.id.mixedTitle);
nutritionArrow = (ImageView) findViewById(R.id.mixedArrow);
animate();
}
else if (viewTag.equals("oral")) {
nutrition = (RelativeLayout) findViewById(R.id.oralLayout);
nutritionSub = (LinearLayout) findViewById(R.id.oralSub);
nutritionTitle = (TextView) findViewById(R.id.oralTitle);
nutritionArrow = (ImageView) findViewById(R.id.oralArrow);
animate();
}
else if (viewTag.equals("changeMix")) {
nutrition = (RelativeLayout) findViewById(R.id.changeMixLayout);
nutritionSub = (LinearLayout) findViewById(R.id.foodTypeLayout);
nutritionTitle = (TextView) findViewById(R.id.changeMixText);
nutritionArrow = (ImageView) findViewById(R.id.changeMixArrow);
animate();
}
}
private void animate() {
if (nutritionSub.getVisibility() == View.GONE) {
nutritionSub.setVisibility(View.VISIBLE);
nutrition.setBackgroundColor(getResources().getColor(R.color.white));
nutritionTitle.setTextColor(getResources().getColor(
R.color.my_yellow));
nutritionArrow.setImageDrawable(getResources().getDrawable(
R.drawable.arrow_right_orange));
r = new RotateAnimation(currentPos, degrees,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
/* Setting arrow animation properties */
setArrowAnimation();
Animation slideDown = AnimationUtils.loadAnimation(
getApplicationContext(), R.anim.slide_down);
nutritionArrow.startAnimation(r);
nutritionSub.startAnimation(slideDown);
} else {
nutrition.setBackgroundColor(getResources().getColor(
R.color.my_yellow));
nutritionTitle.setTextColor(getResources().getColor(R.color.white));
nutritionArrow.setImageDrawable(getResources().getDrawable(
R.drawable.arrow_right_white));
r = new RotateAnimation(degrees, currentPos,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
/* Setting arrow animation properties */
setArrowAnimation();
Animation slideUp = AnimationUtils.loadAnimation(
getApplicationContext(), R.anim.slide_up);
slideUp.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
nutritionSub.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
nutritionArrow.startAnimation(r);
nutritionSub.startAnimation(slideUp);
}
}
private void setArrowAnimation() {
r.setInterpolator(new LinearInterpolator());
r.setDuration(500);
r.setFillEnabled(true);
r.setFillAfter(true);
}
nutrition,nutritionSub,nutritionTitle,nutritionArrow are declared as global private variables
Update
Running a log on my fragment class that extends Fragment and on OnPageChangeListener's method onPageSelected() shows that tags are set properly and visible. The issue seems to be related to the lifecycle of fragments since the changes to the text and image only occur when I flip through ALL three fragments and then return to the second.
Setting the pager:
List<Fragment> fragments = getFragments();
pageAdapter = new NutritionPageAdapter(getSupportFragmentManager(),
fragments);
ViewPager pager = (ViewPager) findViewById(R.id.viewpager);
pager.setAdapter(pageAdapter);
getFragments()
private List<Fragment> getFragments() {
List<Fragment> fList = new ArrayList<Fragment>();
fList.add(NutritionFragment.newInstance("Menu"));
fList.add(NutritionFragment.newInstance("Nutrition"));
fList.add(NutritionFragment.newInstance("Transition"));
return fList;
}
My Fragment class
public static final String FRAGMENT_TITLE = "FRAGMENT_TITLE";
private View v;
public static final NutritionFragment newInstance(String string) {
NutritionFragment f = new NutritionFragment();
Bundle b = new Bundle(1);
b.putString(FRAGMENT_TITLE, string);
f.setArguments(b);
return f;
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
String screen = getArguments().getString(FRAGMENT_TITLE);
if (screen.equals("Menu")) {
v = inflater.inflate(R.layout.nutrition_menu_activity_layout,
container, false);
} else if (screen.equals("Transition")) {
v = inflater.inflate(R.layout.nutrition_transition_activity_layout,
container, false);
} else {
v = inflater.inflate(R.layout.nutrition_nutrition_activity_layout,
container, false);
}
return v;
}
I want to create a custom view like this.
I tried the following
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/customView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/sample_image" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|top"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:text="Button" />
</FrameLayout>
How can i create a view like this? How can i place buttons over imageview like this?
Thanks in Advance
you can try to use relative layout to do this,
for btn1;
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
for btn1;
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
[EDIT 1]
to give space for button use margin, android:layout_margin="20dp"
Example layout
<RelativeLayout android:layout_width="300dp"
android:layout_height="300dp">
<ImageView
android:id="#+id/img"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffaadd"
android:layout_margin="20dp" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:text="btn1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="btn2" />
</RelativeLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:padding="60dp"
android:src="#drawable/abs__ab_stacked_solid_dark_holo" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_alignParentLeft="true"
android:layout_marginLeft="30dp"
android:background="#drawable/ic_launcher" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="32dp"
android:layout_marginTop="102dp"
android:background="#drawable/ic_launcher" />
</RelativeLayout>
Use a RelativeLayout. This will allow you to have different Views overlap on the screen.
Here is a tutorial I always use http://www.learn-android.com/2010/01/05/android-layout-tutorial/
You should find what you need. It is good explained, so you shouldn't have any problems.
This solved for me
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src = "#drawable/basic"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/button1"
android:layout_alignEnd="#+id/button1" />
<ImageButton
android:id="#+id/button1"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:text="btn1"
android:background="#drawable/ic_cancel_black"/>
</RelativeLayout>
This is my solution programatically, for diferent size of devices.
I have three buttons that i have to positioning in the right place of an image 1080x1920
on positions (157,927), 387,927), (617,927)
final ImageView iv = (ImageView)findViewById( R.id.imageView );
iv.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
public void onGlobalLayout() {
// Once data has been obtained, this listener is no longer needed, so remove it...
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
iv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
} else {
iv.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
RectF bounds = new RectF();
Drawable drawable = iv.getDrawable();
if (drawable != null) {
iv.getImageMatrix().mapRect(bounds, new RectF(drawable.getBounds()));
}
float x = bounds.left;
float y = bounds.top;
float new_width = bounds.right - x;
float new_height = bounds.bottom - y;
int original_width = 1080;
int original_height = 1920;
int x1 = (int) (x + (new_width*157/original_width));
int x2 = (int) (x + (new_width*387/original_width));
int x3 = (int) (x + (new_width*617/original_width));
int newY = (int) (y + (new_height*927/original_height));
enroll.setX(x1);
ccfront.setX(x2);
verify.setX(x3);
enroll.setY(newY);
ccfront.setY(newY);
verify.setY(newY);
}
});