I want my image buttons to start from top of the screen and reach end of screen followed by another image button behind it and this goes on forever like white strips on a road. As one button reaches end of screen the portion which is not visible must be visible at the top of the screen and this should be applicable for each button.
See the image for the last image button for clear view.
Screenshot
This is the code for my XML file
<?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:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context="com.ash432.itguesses.options"
android:background="#040404">
<ImageButton
android:layout_width="5dp"
android:layout_height="40dp"
android:id="#+id/im1"
android:layout_marginLeft="29dp"
android:layout_marginStart="29dp"
android:background="#f9f6f6"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layoutAnimation="#anim/layout_anim"
/>
<ImageButton
android:layout_width="5dp"
android:layout_height="40dp"
android:id="#+id/im2"
android:background="#f9f6f6"
android:layout_marginTop="26dp"
android:layout_below="#+id/im1"
android:layout_alignLeft="#+id/im1"
android:layout_alignStart="#+id/im1" />
<ImageButton
android:layout_width="5dp"
android:layout_height="40dp"
android:id="#+id/im3"
android:background="#f9f6f6"
android:layout_marginTop="26dp"
android:layout_below="#+id/im2"
android:layout_alignLeft="#+id/im2"
android:layout_alignStart="#+id/im2" />
<ImageButton
android:layout_width="5dp"
android:layout_height="40dp"
android:id="#+id/im4"
android:background="#ffffff"
android:layout_marginTop="26dp"
android:layout_below="#+id/im3"
android:layout_alignLeft="#+id/im3"
android:layout_alignStart="#+id/im3" />
<ImageButton
android:layout_width="5dp"
android:layout_height="40dp"
android:id="#+id/im5"
android:background="#ffffff"
android:layout_marginTop="26dp"
android:layout_below="#+id/im4"
android:layout_alignLeft="#+id/im4"
android:layout_alignStart="#+id/im4" />
<ImageButton
android:layout_width="5dp"
android:layout_height="40dp"
android:id="#+id/im6"
android:background="#ffffff"
android:layout_marginTop="26dp"
android:layout_below="#+id/im5"
android:layout_alignLeft="#+id/im5"
android:layout_alignStart="#+id/im5" />
<ImageButton
android:layout_width="5dp"
android:layout_height="40dp"
android:id="#+id/im7"
android:background="#ffffff"
android:layout_marginTop="26dp"
android:layout_below="#+id/im6"
android:layout_alignLeft="#+id/im6"
android:layout_alignStart="#+id/im6" />
<ImageButton
android:layout_width="5dp"
android:layout_height="40dp"
android:id="#+id/im8"
android:background="#ffffff"
android:layout_marginTop="26dp"
android:layout_below="#+id/im7"
android:layout_alignLeft="#+id/im7"
android:layout_alignStart="#+id/im7" />
And here is the java code
public class options extends AppCompatActivity
{
private ImageButton im1,im2,im3,im4,im5,im6,im7,im8;
private Animation mAnimation;
//private Button b;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_options);
im1 = (ImageButton)findViewById(R.id.im1);
im2 = (ImageButton)findViewById(R.id.im2);
im3 = (ImageButton)findViewById(R.id.im3);
im4 = (ImageButton)findViewById(R.id.im4);
im5 = (ImageButton)findViewById(R.id.im5);
im6 = (ImageButton)findViewById(R.id.im6);
im7 = (ImageButton)findViewById(R.id.im7);
im8 = (ImageButton)findViewById(R.id.im8);
mAnimation = new TranslateAnimation(
TranslateAnimation.ABSOLUTE, 0f,
TranslateAnimation.ABSOLUTE, 0f,
TranslateAnimation.RELATIVE_TO_PARENT, 0.0f,
TranslateAnimation.RELATIVE_TO_PARENT, 1.0f);
mAnimation.setDuration(2000);
mAnimation.setRepeatCount(-1);
mAnimation.setRepeatMode(Animation.INFINITE);
mAnimation.setInterpolator(new LinearInterpolator());
mAnimation.getStartTime();
im1.setAnimation(mAnimation);
im2.setAnimation(mAnimation);
im3.setAnimation(mAnimation);
im4.setAnimation(mAnimation);
im5.setAnimation(mAnimation);
im6.setAnimation(mAnimation);
im7.setAnimation(mAnimation);
im8.setAnimation(mAnimation);
}
}
UPDATE-
For those who cannot understand the question properly.
1)At first I want nothing on the screen just the background.
2)Then after sometime a white strip should be seen coming from top of the screen.
3)Then when it has fully come, after some time second white strip should be seen coming.
4)Same procedure for all the Eight Image Buttons.
5)Now when the first image button reaches the bottom of the screen . Its size should be decreasing while at the top of the screen its size should be increasing.Similarly for all the buttons when they reach the bottom of the screen
6)The gap between the strips should be constant.
Here is the image showing the steps-
Image
I hope I have made my question clear.
Your question is not very clear but I assume you want to recycle those white stripes.
You should use RecyclerView for this.
compile 'com.android.support:recyclerview-v7:23.1.1'
in your XML:
<?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:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context="com.ash432.itguesses.options"
android:background="#040404">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" />
</RelativeLayout>
Then create another xml layout for those stripes and connect them using an Adapter.
Edit:
RecyclerView is an advanced version of ListView with better performance.It's a view, previously used to display data for a specific adapter position may be placed in a cache for later reuse to display the same type of data again later.
Adapter is a subclass of RecyclerView.Adapter responsible for providing views that represent items in a data set.
here is a great source that you can learn how to implement recyclerview.
Related
I have two button in one LinearLayout and inside this LinearLayout i have two button. When i animate LinearLayout then working fine but when tried to click on Button which is inside LinearLayout, click of button is not working.
I already searched a lot but not able get rid this issue.
Below code to animate LinearLayout
an = new RotateAnimation(angleRightHead, getRotateAngleRightEdgehead (), Animation.RELATIVE_TO_SELF, 1, Animation.RELATIVE_TO_SELF, 0.33f);
an.setRepeatMode(Animation.REVERSE);
an.setDuration(1000);
an.setRepeatCount(0);
an.setFillAfter(true);
an.setFillEnabled(true);
head_neck_ll.startAnimation(an);
and this code of XML
<LinearLayout
android:id="#+id/head_neck_idll"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/head"
android:layout_width="70dp"
android:layout_height="20dp"
android:background="#drawable/roundcorner"
android:clickable="true"
android:onClick="clickhander" />
<!-- </RelativeLayout> -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:padding="3dp"
android:layout_height="16dp" >
<Button
android:id="#+id/lumber"
android:layout_width="49dp"
android:layout_marginLeft="3dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_marginBottom="-10dp"
android:background="#drawable/roundcorner"
android:clickable="true"
android:onClick="clickhander" />
</RelativeLayout>
<Button
android:id="#+id/backupper"
android:layout_width="80dp"
android:layout_height="20dp"
android:background="#drawable/roundcorner"
android:clickable="true"
android:onClick="clickhander" />
</LinearLayout>
</LinearLayout>
and code for onClickListener
public void clickhander(View v){
if(v.getId() == R.id.head){
textv = head;
v1right = mapRight.get(head);
v1right = mapLeft.get(head);
head.setBackgroundResource(R.drawable.clickroundcorner);
lumber.setBackgroundResource(R.drawable.roundcorner);
backupper.setBackgroundResource(R.drawable.roundcorner);
backlower.setBackgroundResource(R.drawable.roundcorner);
legside.setBackgroundResource(R.drawable.roundcorner);
angle =0;
} else if(v.getId() == R.id.backupper){
textv = backupper;
v1right = mapRight.get(backupper);
v1right = mapLeft.get(backupper);
backupper.setBackgroundResource(R.drawable.clickroundcorner);
head.setBackgroundResource(R.drawable.roundcorner);
lumber.setBackgroundResource(R.drawable.roundcorner);
backlower.setBackgroundResource(R.drawable.roundcorner);
legside.setBackgroundResource(R.drawable.roundcorner);
angle =0;
}
}
Check the image:
Note: 1 and 2 both are in same layout. I want click listener on each with layout animation
Your help would be appreciated.
Yes, this is normal behavior. This is because animation just rerenders View's pixels, but it's position on the display remains the same.
If you want to relocate your View to the place where your animation ends, you need to call View.layout() method and pass these 4 parameters, which describe Views new position on its layout.
Keep in mind that View.layout() gets params relative to `View's parent.
I have a view in which I'm creating a PopupWindow. In this PopupWindow, I have a text box (EditText). When clicking to edit the text, the keyboard opens and the whole view goes up, but the top of the view goes under the action bar view smoothly. So far so good.
I now have added an empty GridView without any further configuration to the PopupWindow, and now the same scenario happens but the whole top part of the view goes on top of the action bar view and not smooth (the popup becomes a mess, when keyboard disappears the popup location changes for couple of seconds and there are "leftovers" from the keyboard for a second). It also happens with ListView.
I want the top part of the view to go under the 'ActionBar` smoothly, as it should.
Any ideas?
UPDATE: By adding the GridView programatically I partially solved it on a couple of devices, but on some devices it's still happens.
Displaying the popupwindow:
pView=inflater.inflate(R.layout.activity_packbuild, (ViewGroup)mainActivity.findViewById(R.layout.activity_main));
pw = new PopupWindow(
pView,
ma.f.getView().getMeasuredWidth(),
ma.f.getView().getMeasuredHeight(),
true);
pw.showAtLocation(mainActivity.getWindow().getDecorView().findViewById(android.R.id.content), Gravity.BOTTOM, 0, 0);
GOOD:
BAD:
Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/lID">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/rID"
android:background="#drawable/back5">
<ImageView
android:layout_width="125px"
android:layout_height="200px"
android:id="#+id/mImageView"
android:background="#drawable/com_facebook_picker_default_separator_color"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:layout_centerHorizontal="true"
android:layout_marginTop="300dp" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:layout_below="#+id/mImageView"
android:layout_marginTop="22dp"
android:layout_toRightOf="#+id/lButton"
android:layout_toLeftOf="#+id/rButton" />
<ImageView
android:layout_width="125px"
android:layout_height="200px"
android:id="#+id/imageViewRR"
android:background="#drawable/com_facebook_picker_default_separator_color"
android:layout_alignTop="#+id/mImageView"
android:layout_toRightOf="#+id/mImageView"
android:layout_marginLeft="20dp" />
<ImageView
android:layout_width="125px"
android:layout_height="200px"
android:id="#+id/imageViewLL"
android:background="#drawable/com_facebook_picker_default_separator_color"
android:layout_alignTop="#+id/mImageView"
android:layout_toLeftOf="#+id/mImageView"
android:layout_marginRight="20dp" />
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/lButton"
android:layout_below="#+id/editText"
android:layout_alignLeft="#+id/imageViewLL"
android:layout_alignStart="#+id/imageViewLL" />
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/rButton"
android:layout_alignTop="#+id/lButton"
android:layout_alignRight="#+id/imageViewRR"
android:layout_alignEnd="#+id/imageViewRR"
android:layout_marginTop="5dp" />
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/picButton"
android:layout_alignTop="#+id/galleryButton"
android:layout_alignLeft="#+id/editText"
android:layout_alignStart="#+id/editText"
android:background="#drawable/camera2" />
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/videoButton"
android:background="#drawable/video"
android:layout_alignTop="#+id/galleryButton"
android:layout_centerHorizontal="true" />
<ImageView
android:layout_width="125px"
android:layout_height="200px"
android:id="#+id/imageViewR"
android:background="#drawable/com_facebook_picker_default_separator_color"
android:layout_above="#+id/editText"
android:layout_alignRight="#+id/sendButon"
android:layout_alignEnd="#+id/sendButon" />
<ImageView
android:layout_width="125px"
android:layout_height="200px"
android:id="#+id/imageViewL"
android:background="#drawable/com_facebook_picker_default_separator_color"
android:layout_alignTop="#+id/mImageView"
android:layout_alignLeft="#+id/editText" />
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/galleryButton"
android:background="#drawable/gallery"
android:layout_alignTop="#+id/rButton"
android:layout_alignRight="#+id/imageViewR" />
<ImageButton
android:layout_width="100px"
android:layout_height="100px"
android:id="#+id/toButton"
android:layout_above="#+id/imageViewR"
android:layout_alignLeft="#+id/picButton"
android:layout_alignStart="#+id/imageViewL"
android:background="#drawable/fbfriends2"
android:layout_alignRight="#+id/imageViewLL"
android:layout_alignEnd="#+id/imageViewLL"
android:layout_marginBottom="20dp" />
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/sendButon"
android:background="#drawable/go"
android:layout_alignTop="#+id/toButton"
android:layout_alignRight="#+id/editText"
android:layout_alignEnd="#+id/editText" />
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/plusButtonL"
android:background="#drawable/plusp"
android:layout_alignTop="#+id/videoButton"
android:layout_toRightOf="#+id/imageViewLL" />
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/minusButtonR"
android:background="#drawable/minusp"
android:layout_alignTop="#+id/videoButton"
android:layout_toLeftOf="#+id/imageViewRR" />
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/plusButton"
android:background="#drawable/plusp"
android:layout_alignTop="#+id/videoButton"
android:layout_centerHorizontal="true" />
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/minusButton"
android:background="#drawable/minusp"
android:layout_alignTop="#+id/videoButton"
android:layout_centerHorizontal="true"
android:layout_marginTop="300dp" />
</RelativeLayout>
I'm adding the GridView programmatically:
gv=new GridView(ma);
List<Student> hhh=new ArrayList<Student>();
if (FriendPickerApplication.selectedUsers!=null) {
if (FriendPickerApplication.selectedUsers.size() > 0) {
for (GraphUser gu : FriendPickerApplication.selectedUsers) {
hhh.add(new Student("name", gu.getId()));
}
}
}
StudentAdapter sta=new StudentAdapter(ma,hhh);
//gv=(GridView)pView.findViewById(R.id.gridView2);
gv.setVisibility(View.VISIBLE);
MainActivity.wantedPicSize=ma.screenWidth/12; //6
int wantedSize=MainActivity.wantedPicSize+2; //10
RelativeLayout.LayoutParams relativeParams = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT,
RelativeLayout.LayoutParams.MATCH_PARENT);
relativeParams.addRule(RelativeLayout.LEFT_OF, btnSend.getId());
relativeParams.addRule(RelativeLayout.RIGHT_OF,picFriends.getId());
relativeParams.addRule(RelativeLayout.ALIGN_TOP, picFriends.getId());
relativeParams.addRule(RelativeLayout.ALIGN_BOTTOM, picFriends.getId());
gv.setLayoutParams(relativeParams);
gv.setPadding(5,0,5,0);
((RelativeLayout)pView.findViewById(R.id.rID)).addView(gv);
ViewGroup.LayoutParams layoutParams = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.FILL_PARENT,
RelativeLayout.LayoutParams.FILL_PARENT);//gv.getLayoutParams();
relativeParams.height = wantedSize+(int)(wantedSize/5); //this is in pixels
relativeParams.width = (int)(ma.screenWidth/3.0);//gv.getLayoutParams().width; //(int)( ( ((ma.screenWidth*3)/4)/wantedSize )*wantedSize );
gv.setColumnWidth(wantedSize); //+width betwen profiles
gv.setVerticalSpacing(5);
//gv.setNumColumns((int)((screenWidth/2)/100));
gv.setNumColumns((relativeParams.width/wantedSize));
System.out.print("COLUMNSSSSSSSSSS- "+(relativeParams.width/wantedSize));
gv.setLayoutParams(relativeParams);
gv.setVisibility(View.VISIBLE);
gv.setAdapter(sta);
Your problem here is the popup window.
There is no way to make it go under the actionbar since the actionbar is displayed in another window that is below the new window you are creating. moreover using a popup window for that complex layout is never going to perform efficiently. Have you thought of wrapping your map and the layout you are putting in the popup window in a custom layout? That would probably be the easier solution
I agree with the answer posted by Pasquale Anatriello. Though u can
You can try different methods :
mPopUpWindow.showAsDropDown(anchor);
mPopUpWindow.showAsDropDown(anchor, xoff, yoff);
mPopUpWindow.showAtLocation(parent, gravity, x, y);
I suggest you should let popUp draw only after Action Bar, take y axis offset and gravity top, say: yOffset is Equivalent to actionbar height, if you have action bar ~ height x 10% of device height , [layout_weight = 1.0].
Even if it didn't work out create a custom View [say Linear Layout] that appears and disappears and acts like popup a window and give u flexibility as u want,handle clicks by yourself, make it like a toggle, see code for animation::
Animation fadeInAnimation = AnimationUtils.loadAnimation(v.getContext(), android.R.anim.fade_in);
fadeInAnimation.setDuration(10);
v.startAnimation(fadeInAnimation);
Animation fadeOutAnimation = AnimationUtils.loadAnimation(v.getContext(), android.R.anim.fade_out);
fadeOutAnimation.setDuration(10);
v.startAnimation(fadeOutAnimation);
I have an activity where the bottom half of the page is a scrollable results view. At the top of the results view, is a relativelayout with some text and a button. This button will make new items appear in this relative layout to refine the search. This part is all working. However, below this relative layout, I need to add a list of search results. I had this working with a listview, but since I need the entire bottom of the portion of the page (including that header relative layout) scrollable and since you cant have a listview in a scrollview, this wont work.
So, I was hoping I could do something like make another view, populate it with the result data for each result item, and programatically add them below the relative layout. Perhaps just having a linearlayout beneath that header relative layout.
Am I on the right track with this thinking? What is the right way to do this?
If it matters, my app has a min sdk version of 8. I am using the support libraries.
EDIT: here is my current code:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DealerFragment"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
android:background="#drawable/background">
<ImageView
android:id="#+id/topBar"
android:background="#000000"
android:layout_width="match_parent"
android:layout_height="45dp"
/>
<ImageView
android:id="#+id/logoImageView"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:contentDescription="#string/CD_logo"
android:src="#drawable/logo" />
<fragment
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
class="com.google.android.gms.maps.SupportMapFragment" />
<ScrollView
android:id="#+id/scrollBox"
android:layout_width="match_parent"
android:layout_height="220dp"
android:layout_alignParentBottom="true"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:background="#00000000" >
<RelativeLayout
android:id="#+id/scrollViewRelativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000">
<RelativeLayout
android:id="#+id/searchHeaderBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#c0000000">
<TextView
android:id="#+id/near"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="#string/near"
android:textColor="#ffffff" />
<TextView
android:id="#+id/nearZip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/near"
android:layout_marginLeft="4dp"
android:layout_centerVertical="true"
android:text="78749"
android:textColor="#ffffff" />
<ImageView
android:id="#+id/narrowSearchImage"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/filter"
android:contentDescription="#string/CD_Narrow_Results"/>
<TextView
android:id="#+id/narrowSearchText"
android:layout_toLeftOf="#+id/narrowSearchImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="#string/narrow_results"
android:textColor="#ffffff"/>
</RelativeLayout>
<LinearLayout
android:id="#+id/resultsLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/searchHeaderBox"
android:layout_marginTop="1dp"
android:orientation="vertical"
android:background="#00000000">
</LinearLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Basically, I want to know if I should just try to add my result items (which I currently have as a seperate .XML file) and if so how I do that. Or if there is some other device I should be using to accomplish this. My goal, is to have everything in that scrollview to scroll. I don't know how many result items I will have until the page is loaded.
How about, we actually put the ListView in a ScrollView!
I know people say you can't, but I found a way.
1. Wrap the layout that contains your ListView, with a ScrollView.
2. Add this to the class with the layout containing your ListView. Make sure to place it after you set your adapter. The only thing you need to change is dp to the height of your ListView row layout.
int listViewAdapterSize = yourListView.getAdapter().getCount();
LayoutParams listViewParams = yourListView.getLayoutParams();
final float scale = getContext().getResources().getDisplayMetrics().density;
int pixels = (int) ((listViewAdapterSize * dp) * scale + 0.5f);
params.height = pixels;
Let me know if you have any problems!
I m sliding down the Layout (which has different ImageView), from top to bottom using TranslateAnimation, but when it get slide, its Touchable area still stick to previous position, it doesnt move downwards along with ImageView, it is showing visually that its Y axis get moved from some value, but its touchable area still at original place.
Please help me in solving this problem.
I have used this for sliding animation :
TranslateAnimation t =new TranslateAnimation(0, 0,0,35);
t.setDuration(200);
t.setFillAfter(true);
t.setInterpolator(new LinearInterpolator());
menuSlideBgId.startAnimation(t);
inFram.startAnimation(t);
This is my lyaout file
<?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="fill_parent"
android:gravity="left|right"
android:orientation="vertical"
android:background="#drawable/bg_android"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="150dp"
android:layout_height="68dp"
android:layout_gravity="center"
android:layout_marginTop="15dp"
android:src="#drawable/thinknsay" />
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rLay"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/menuSlideBg"
android:layout_width="339dp"
android:layout_marginLeft="130dp"
android:layout_marginTop="452dp"
android:layout_height="35dp"
android:src="#drawable/menu_slide3" />
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/slideNavLayout"
android:layout_width="match_parent"
android:layout_height="550dp" >
<ImageView
android:id="#+id/bubbleMenu"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_gravity="left"
android:layout_marginLeft="180dp"
android:layout_marginTop="455dp"
android:src="#drawable/buble_icon" />
<ImageView
android:id="#+id/shareMenuId"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_gravity="left"
android:layout_marginLeft="225dp"
android:layout_marginTop="455dp"
android:onClick="shareMenu"
android:src="#drawable/share_icon" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
TranslateAnimation just re-draws the view at different positions over time, it doesn't really moves the View. You need to change its layout position also, ObjectAnimator can be used to change View properties.
I am trying to create a screen (in portrait mode) that shows 4 images (same size, intended to scale down to fit screen), taking up the entire screen, breaking up the screen into quadrants (a tall, 2x2 grid). This will act as a main menu type of activity and each image should be clickable, in order to take the user to a different activity.
I have tried using a GridView inside a LinerLayout (using a lot from Google's GridView tutorial) but cannot get the images to all scale properly to fill the entire screen. I get extra margins around the images and/or scrolling of the entire screen.
I have also tried using a TableLayout, placing 2 images in each of the 2 rows. Visually, that worked perfectly. Unfortunately when using that, I cannot seem to reference the ImageView items in the TableLayout in my activity code (findViewById always returns null).
I feel like a TableLayout is really not the "right thing to do" but I would like to hear what others have to say. Either way, what should be done to accomplish my desired functionality?
Thanks.
Edit 1.1:
The relative layout works much better for getting things lined up. Now I'm just left with the issue where findViewById always returns null. Here is my code so far:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/homescreen_bgcolor"
>
<ImageView id="#+id/one"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:src="#drawable/item1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView id="#+id/two"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:src="#drawable/item2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView id="#+id/three"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:src="#drawable/item3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView id="#+id/four"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/item4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
public class HomeScreenActivity2 extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.homescreen2);
ImageView imageView = (ImageView) findViewById(R.id.one);
imageView.setClickable(true);
imageView.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Log.i("Test", "test");
}
});
}
}
Here is a sample layout showing how you can achieve a 2 X 2 grid that covers the entire screen using just a RelativeLayout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<View
android:id="#+id/centerVerticalShim"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_centerVertical="true"
android:visibility="invisible" />
<View
android:id="#+id/centerHorizontalShim"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:visibility="invisible" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/centerVerticalShim"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/centerHorizontalShim"
android:background="#42A5F5"
android:gravity="center"
android:text="#string/one"
android:textColor="#FFFFFF" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/centerVerticalShim"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/centerHorizontalShim"
android:background="#EF5350"
android:gravity="center"
android:text="#string/two"
android:textColor="#FFFFFF" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_below="#+id/centerVerticalShim"
android:layout_toLeftOf="#+id/centerHorizontalShim"
android:background="#66BB6A"
android:gravity="center"
android:text="#string/three"
android:textColor="#FFFFFF" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/centerVerticalShim"
android:layout_toRightOf="#+id/centerHorizontalShim"
android:background="#5C6BC0"
android:gravity="center"
android:text="#string/four"
android:textColor="#FFFFFF" >
</TextView></RelativeLayout>
The above layout results in this:
I think a TableLayout could work for you, but I'd recommend trying out RelativeLayout as well. You can basically pin your images to the four quadrants by using combinations of
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"`
on your images.
I'm doing something similar in my app where I have multiple buttons on a homepage that can launch corresponding activities. RelativeLayout works fine, and it avoids nested Layout objects, which can hamper performance during render and layout procedures (if it gets out of hand).