Android: replace one view with another - android

What I need in general: replace(hide) one view with another by a button click
Let's go deep in details:
I use ViewPager, which consists of 100 images.
Layout of ViewPager
<?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="wrap_content"
android:layout_height="wrap_content"
>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#ffffff" >
</android.support.v4.view.ViewPager>
<ImageButton
android:id="#+id/imagePlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageRight"
android:layout_alignTop="#+id/imageList"
android:src="#drawable/list" />
</RelativeLayout>
Layout of Image
<?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"
android:padding="1dip"
android:background="#ffffff">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>
It works - no problems. But I need to add button to the viewpager and after tapping image in the viewpager should be changed to the gif. It looks like gifs preview and after onclick play - gif starts to play.
Custom layout for gifs:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageList"
android:layout_marginRight="28dp"
android:layout_toLeftOf="#+id/imageRight" >
<com.basv.gifmoviewview.widget.GifMovieView
android:id="#+id/gif1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
How it should be resolved? It's pretty simple for me to open another activity after tapping to the button, but the issue is to play gif in the same Fragment
Any ideas?

I'd simply add your com.basv.gifmoviewview.widget.GifMovieView somewhere to your root RelativeLayout (perhaps you may need to wrap both ViewPager and GifMovieView in additional FrameLayout) and simply show/hide it when needed using ordinary setVisibility().
EDIT
I suppose it's not the best solution for phones' memory usage
I quickly looked into the sources and there's no much code really. So if you bother memory usage you can always dynamically create widget prior showing it (and destroy once hidden) or, as I cannot see the method to "unload" a GIF, you can always use "1x1 px" empty Gif to ensure last one you just stopped showing is no longer occupying precious memory if not needed.

Here is an idea. Make that layout with both view pager and gif but the gif visibility set to invisible so that initially its there but not visible. But when someone click the button you should put that gif to life in code by setting it to visible while also changing view pager to invisible or gone in case you dont even want its initial boundary being present!!

Related

How to efficiently switch out the parent layout between linear to relative depending on a condition?

I have a condition that says if it's a textview then use a relative layout to hold it, however, if it is a youtubeplayersupportfragment, then use a linear layout. The reasoning behind this is because the youtube player api "doesn't allow view overlays" -_-*. Anyway, I enjoy having the view overlay in any other case besides the youtubeplayersupportfragment, and I just want to use weighting in the case of the youtubeplayer, so that it will comply with the terms of service, and balance the views so that none are overlaying.
My real question is: is it possible to efficiently interchange parent layouts holding items without causing too much overhead? I understand that this is a very specific case, so there probably is no way to do this, and I will probably end up being forced to always use a linear layout to comply with TOS :(
Please help a new androiddev out!
Also, is there a way to force it so that there is no overlay in a relative layout?
edit:
Ok so, here's my layout so far. Don't mind the surfaceview, it's helping a youtube glitch...
I'd like to change the HackyViewPager, to delete the layout_above parameter when there is a youtube fragment loaded into the viewpager. Is there a way to delete a parameter like that? If there is not, then is there a way to say 'Layout_above="bottom of the screen"?'
<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="${packageName}.${activityClass}"
android:background="#000000"
android:orientation="vertical">
<asdfsdf.adfaf.asfdfa.HackyViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="false"
android:layout_above="#id/popupMenuButton"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
<SurfaceView
android:layout_width="0px"
android:layout_height="0px"
android:visibility="gone"
android:id="#+id/surfaceView" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/popupMenuButton"
android:layout_gravity="end"
style="?android:attr/borderlessButtonStyle"
android:src="#drawable/popupmenubutton"
android:background="#null"
android:onClick="showPopupMenu"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>

How can I achieve this view?

I've tried using an HorizontalScrollView with a linearLayout inside. It looked exactly like the picture, but I don't want to use that ScrollView because on the launch, the scrolling bar is shown, and this is not what I want.
I've also tried a relativeLayout with every view aligned with each other, but the last view is scaled down, to fit the small space left.
Any tip?
Try this, You can enable or disable scrolling bar using this setHorizontalScrollBarEnabled()
Scrool.setHorizontalScrollBarEnabled(true)
Gallery is being deprecated. So, the recommended way to achieve this would be HorizontalScrollView. You can turn on/off the scrollbars if you want them not to be shown during launch, and then, after launch turn them on.
This class was deprecated in API level 16. This widget is no longer
supported. Other horizontally scrolling widgets include
HorizontalScrollView and ViewPager from the support library.
Why don't you give a try to andoid Gallery View. That I guess would suffice your need as far as I can visualize it.
Found out a solution:
Created a RelativeLayout with a Horizontal LinearLayout inside. The RelativeLayout (the highest parent) with a width of 1500dp. Then nothing is scalled.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="1500dp"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#ffffffff">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/techinc_splash_1" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/techinc_splash_1" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/techinc_splash_1" />
</LinearLayout>
</RelativeLayout>

allow user to add/delete buttons and buttons automatically shifts positions

i would like to create a flexible user interface for the android platform.
basically my layout would consist of a image button with at "plus" sign at the beginning.
when teh user clicked it. another layout is called where the user is prompt to name the image button that is suppose to be created.When the user clicks confirm, he'll e brought back to the 1st layout and the newly added image button would replace the position of the "plus" sign image button and the plus sign image button would shift to the right.
i know how to create the layout initially but i dunno how to programmed it to function the way i described above.
ok so now i have my main layout file set this way:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
android:fillViewport="true" >
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000" >
<ImageButton
android:id="#+id/addRoom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="25dp"
android:layout_marginTop="38dp"
android:background="#80000000"
android:src="#drawable/plus" />
<TextView
android:id="#+id/textView1"
android:layout_width="#+id/addRoom"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/addRoom"
android:layout_alignRight="#+id/addRoom"
android:layout_below="#+id/addRoom"
android:text="#string/add_room"
android:gravity="center"
android:textColor="#FFFFFF" />
</RelativeLayout>
</ScrollView>
would i have any issues when i include the fragments to shift the image button and textview when the alignment instructions to both of it.
When you want to manipulate your activity's UI in real time by the user it's recommended to use Fragments and Fragment Manager to change diffident parts of your activity's view.
You can find great information in the docs:
http://developer.android.com/guide/components/fragments.html
or
http://marakana.com/s/post/1250/android_fragments_tutorial
in your case you would do some thing like that:
fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.remove(plusButtonFragment)
.add(R.id.containerForFragments,userNewFragment)
.add(R.id.containerForFragments, plusButtonFragment)).commit();
after you have created the plusButtonFragment and the userNewFragment.
Update:
For managing the fragments location in a relative layout check out the next post:
How to add fragments programmatically in relativelayout

What is wrong with this RelativeLayout?

I want to have three images in one row, and a Video or two below them.
So far, I am unable to correctly position the three images via Relative Layout.
It gets quite different behaviour from what I expect it to be... it shows only one picture, as though it is a FrameLayout.I can assure you the images are in place. And the java code is nothing but straightforward OnCreate - super.OnCreate, setContentView(R.layout.component_name) .
What is wrong with this relative layout?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/previous_frame"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/previous_frame" />
<ImageView
android:id="#+id/catch_frame"
android:layout_toLeftOf="#+id/previous_frame"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/catch_frame"
/>
<ImageView
android:id="#+id/next_frame"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/next_frame"
android:layout_toLeftOf="#id/catch_frame"
/>
</RelativeLayout>
Check the code use android:toRightOf instead of android:toLeftOf..

How to set the absolute position of an image or button so that it is consistent across multiple screen sizes?

After searching for a few hours, I was unable to find the exact answer to my situation. I'm currently using a RelativeLayout and all I have is a background image and a button. The problem I'm having is placing the button in the exact location I want it to be (a little offset from the center).
My first attempt was to modify the layout_margins of the button. While this worked for the current emulator I was working with (3.7in WVGA), the positioning of the button was slightly/way off for a different screen size (such as 3.2in HVGA).
I then attempted to modify the padding of the parent layout but got the same issue. My XML looks like this:
<?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:paddingLeft="98dip" android:paddingBottom="68dip" android:background="#drawable/background">
<Button android:id="#+id/starttimer"
android:background="#drawable/button"
android:layout_width="wrap_content" android:clickable="true" android:layout_height="wrap_content" android:layout_alignParentBottom="true"/>
</RelativeLayout>
Please let me know if I'm completely off with my approach. It seems like an extremely simple problem, and I'm bummed out that it's taken me so long to try to get it. Thanks for any help!
I take it that you want to center the button on the bottom of the parent with a little offset, try layout_centerHorizontal then add your preferred margin.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="98dip" android:paddingBottom="68dip" android:background="#drawable/background">
<Button android:id="#+id/starttimer"
android:background="#drawable/button"
android:layout_width="wrap_content" android:clickable="true" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android_marginLeft="5dp"/>
</RelativeLayout>
Absolute Layout is used for absolute positions of the control.

Categories

Resources