Floating button in Android application (Paging View) - android

I have an iPhone application which pages through a series of images. I use the following code to place a floating help button in my view controller, it stays in the same position on the screen as the user pages through the images:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:#"Help.png"] forState:UIControlStateNormal];
[button addTarget:self
action:#selector(viewHelp)
forControlEvents:UIControlEventTouchDown];
if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad){
button.frame = CGRectMake(60.0, 60.0, 210.0, 80.0);
CGRect buttonFrame = button.frame;
buttonFrame.size = CGSizeMake(70, 70);
button.frame = buttonFrame;
NSLog(#"IPAD");
}
else {
button.frame = CGRectMake(30.0, 30.0, 60.0, 40.0);
CGRect buttonFrame = button.frame;
buttonFrame.size = CGSizeMake(45, 45);
button.frame = buttonFrame;
}
[self.view addSubview:button];
I'm wondering how one can achieve the same functionality in an Android app? Below is my current layout xml:
<?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:screenOrientation="portrait"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/myfivepanelpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Can anyone give me any pointers?
EDIT: I would like to place the button just off-set of the top-left corner.

I would always recommend using a Relative Layout. Inside a RelativeLayout you can freely place Views, and they also can overlap.
Try something 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:screenOrientation="portrait" >
<android.support.v4.view.ViewPager
android:id="#+id/myfivepanelpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:alignParentTop="true"
android:alignParentRight="true" />
</RelativeLayout>
This layout shows the ViewPager and a button floating in the upper right corner.

You can use a relative layout, which will place the ImageButton on top of the ViewPager something 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:screenOrientation="portrait"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/myfivepanelpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/help" />
</RelativeLayout>

Related

How can I have one unique button in multiple components of a layout in android?

So I have an xml that consists of a linear layout containing a Button and a TextView like this:
<?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="100dp"
android:orientation="vertical">
<Button
android:id="#+id/btnCell"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:paddingLeft="40dp"
android:text="Button"
android:textColor="#color/blueText" />
<View
android:height="wrap_content"
android:width="wrap_content"
android:background="#drawable/Test"/>
</LinearLayout>
And I want to use this same layout inside other layouts in a different xml. I need the same button at every time, so I reuse it by including it in the two layouts (both layouts are in the same xml, but ones is hidden):
First one
<?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:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/image"
/>
<include layout="#layout/buttonLayout"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Second One:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/image"
/>
<include layout="#layout/buttonLayout"/>
<CheckBox
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
So I show the first layout and hide the second one at the beginning of the app , as the user moves within the interface, the layouts exchange so that the other one is shown and the first one hidden.
The thing is that I declare the Button in my java activity class like this:
btnCell = (Button) thirdView.findViewById(R.id.btnCell);
btnCell.setOnClickListener(this);
And implemented the listener.
#Override
public void onClick(View v) {
if (v == btnCell) {
System.out.println("entered if");
}
System.out.println("entered function");
}
The problem is that when I click the button when the first view is shown and the second hidden, the button works just fine, but when I unhide the second layout, hide the first one, and proceed to click the button, that should be the same as the first one but in a different layout, nothing happens. I searched and find out, that this happens because the id is assigned only to the button shown in the first layout because of view hierarchy, but not the one in the second layout. How can I make both buttons react to the same action, without declaring a new button in each layout but instead reusing it?
I have used this type of layout. you can create Id different for both and inflate that view and give different name so You can differentiate both thing.
<?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:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/image"
/>
<include android:id="+id/firstOne" layout="#layout/buttonLayout"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
android second one is
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/image"
/>
<include android:id="+id/secondTwo" layout="#layout/buttonLayout"/>
<CheckBox
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
The Problem is both the layout are include in same layout file and the id of that
button are same so whenever you click on any of the button at the same time event will fire on both button like both are clicked.
So, you have to give the different id for both the button I hope it works fine..
You can add a different Id for each included layout:
<include android:id="+id/layout_a" layout="#layout/buttonLayout"/>
and
<include android:id="+id/layout_b" layout="#layout/buttonLayout"/>
and then use two findViewById to reach them:
btnCellA = (Button)thirdView.findViewById(R.id.layout_a).findViewById(R.id.btnCell);
btnCellB = (Button)thirdView.findViewById(R.id.layout_b).findViewById(R.id.btnCell);

How to enable SwipeRefreshLayout and initial loading ListView ProgressBar at same time

I have the following main.axml file
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/refresher"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:choiceMode="singleChoice"
android:id="#+id/myListView" />
<RelativeLayout
android:id="#+id/loadingPanel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true" />
</RelativeLayout>
</android.support.v4.widget.SwipeRefreshLayout>
I require the ability to swipe down on my listview to refresh and also I require a "spinning circle loading animated icon" on initial load. However
if the Listview is above the relative layout as shown i do not get the spinning circle on initial load, but do get my Listview/refresh.
But if i change the RelativeLayout to be above the Listview i get the spinning circle on load but my Listview is not shown after?
In my onCreate method on the acitivity.
protected async override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
// Find view components
blogListView = FindViewById<ListView>(Resource.Id.myListView);
listViewRefresher = FindViewById<SwipeRefreshLayout>(Resource.Id.refresher);
loadingPanel = FindViewById<RelativeLayout>(Resource.Id.loadingPanel);
blogListView.Adapter = new FeedAdapter(this, _blogPosts);
//Register events
listViewRefresher.Refresh += HandleRefresh;
blogListView.ItemClick += OnListItemClick;
// Populate views
await PoplulateBlogPostsFromExternalWebUrl();
loadingPanel.Visibility = ViewStates.Gone;
}
According to the android docs SwipeRefreshLayout can only host one child. As a result the second view is always being hidden. To get this to work you will have to wrap the ListView and RelativeLayout in another RelativeLayout. It's also worth noting that the RelativeLayout wrapping the ProgressBar can probably be removed if an id is put on the ProgressBar.
The OP discovered (in the comments above) that this caused the SwipeRefreshLayout to be triggered when the list was scrolled up. To address this you would need to disable the layout when the list view is not at the top.
Sample Code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/refresher"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:id="#+id/loadingContainer"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:choiceMode="singleChoice"
android:id="#+id/myListView" />
<RelativeLayout
android:id="#+id/loadingPanel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true" />
</RelativeLayout>
</RelativeLayout>
</android.support.v4.widget.SwipeRefreshLayout>

How do I programatically add a button to a Linear Layout

Okay, so I have my LinearLayout inside of a ScrollView which I have defined in my xml layout as shown below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ScrollView
android:minWidth="25px"
android:minHeight="25px"
android:paddingBottom="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container" />
</ScrollView>
</LinearLayout>
I then access this LinearLayout with this code which is contained in an Activity and attempt to add a button to it:
var container = FindViewById<LinearLayout>(Resource.Id.container);
var myButton = new Button(this) {
Text = "Button Text"
};
myButton .Click += delegate { /*Do stuff*/ };
container.AddView(myButton, new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.WrapContent));
My issue is that the button does not show up when I debug my application. What is it that I am missing?
I guess there was a problem with visual studio. I closed and reopened it and the button seemed to show up. Weird...

Android List Below Toggle Buttons

I have a list that is intended to be below toggle buttons. The list grabs data from a server and then parses them. My XML is as follows:
<?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="wrap_content"
android:orientation="horizontal" >
<ToggleButton
android:id="#+id/toggle_button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textOff="Apps"
android:textOn="Apps" />
<ToggleButton
android:id="#+id/toggle_button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/toggle_button1"
android:layout_weight="1"
android:textOff="VMs"
android:textOn="VMs" />
<ToggleButton
android:id="#+id/toggle_button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/toggle_button2"
android:layout_weight="1"
android:textOff="Groups"
android:textOn="Groups" />
<ListView
android:id="#+id/mylist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toggle_button1" />
</RelativeLayout>
Code for the actual fragment:
public class ProblemFragment extends SherlockListFragment
{
private SeparatedListAdapter list;
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
this.getSherlockActivity().setContentView(R.layout.problem_layout);
list = new SeparatedListAdapter(this.getSherlockActivity(), new Layout(R.layout.separated_list_adapter_two_text, R.id.two_text_title, R.id.two_text_desc));
ToggleButton b1 = (ToggleButton) this.getSherlockActivity().findViewById(R.id.toggle_button1);
ToggleButton b2 = (ToggleButton) this.getSherlockActivity().findViewById(R.id.toggle_button2);
ToggleButton b3 = (ToggleButton) this.getSherlockActivity().findViewById(R.id.toggle_button3);
setListAdapter(list);
refresh();
}
public void refresh()
{
list = new SeparatedListAdapter(this.getSherlockActivity(), new Layout(R.layout.separated_list_adapter_two_text, R.id.two_text_title, R.id.two_text_desc));
refreshStats();
}
public void refreshStats()
{
//Omitted parsing code
list.addSection(new String("Hello world!!"));
setListAdapter(list);
}
}
However, when I use setListAdapter(list), the buttons are overwritten. They are visible before the app retrieves the data and parses it, but they are overwritten after I call setListAdapter. How can i fix this?
First, remove
android:orientation="horizontal"
from your root layout. RelativeLayout doesn't have an orientation property. Also, weight is for child elements of a LinearLayout and when you use it then you should assign the width of each child view to 0dp for horizontal orientation and height="0dp" for vertical orientation.
Then wrap your ToggleButtons in a LinearLayout, vertical or horizontal orientation, and give it the property
android:layout_alignParentTop="true"
then give your ListView the property
android:layout_below="#id/idOfLinearLayout"
So it may look something like
<?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" >
<LinearLayout
android:id="#+id/toggleLL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<ToggleButton
android:id="#+id/toggle_button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Apps"
android:textOn="Apps" />
<ToggleButton
android:id="#+id/toggle_button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="VMs"
android:textOn="VMs" />
<ToggleButton
android:id="#+id/toggle_button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Groups"
android:textOn="Groups" />
</LinearLayout>
<ListView
android:id="#+id/mylist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toggleLL" />
</RelativeLayout>
I also removed the RelativeLayout properties from the ToggleButtons since they are now wrapped in a LinearLayout. And you had a circular view error there with assigning the second ToggleButton to the right of itself which may have been a copy/paste error. Hope this helps.
Note that the default orientation for a LinearLayout is horizontal so leaving that property out will give you that effect.
Oh! I can not test your XML but I think that you need scrollbars! If the list is filled with a lot of entries, it can became bigger that the screen, making the buttons disappear because they are pushed up by the list. Try to add a scroll to the whole layout.
Something like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!-- Original layout here -->
</ScrollView>
</LinearLayout>
Of course, if you just put only one layout inside the scrollview, there is no need for the outer layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Original layout here -->
</ScrollView>

Loading animations with buttons in android

I have an activity in android which I set up a button under a SurfaceView. And the result looks like this:
And I'm satisfied with it except one thing, the writing on the button is astray and must be setup correctly.
For this I used animations like this:
takePhoto = (Button) findViewById(R.id.btnPhoto);
takePhoto.setText(t);
RotateAnimation ranim = (RotateAnimation)AnimationUtils.loadAnimation(this, R.anim.myanim);
ranim.setFillAfter(true);
takePhoto.setAnimation(ranim);
WHERE the res/anim/myanim looks like:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="-90"
android:pivotX="50%"
android:pivotY="50%"
android:duration="0" />
But the result is a little bit disappointing cause the whole looks like:
The text is ok, but the dimensions are reduced.
What I want is to keep the text correctly and the initial size.How could I do that???
It has nothing to do with the button's properties in the xml file cause I haven't changed them when loading the animation....Ideas?Thanks...
EDIT: xml file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"
>
<SurfaceView android:layout_width="450dip"
android:layout_height="fill_parent" android:id="#+id/surface_camera" />
<RelativeLayout android:layout_width="fill_parent"
android:layout_toRightOf="#id/surface_camera"
android:layout_height="fill_parent"
>
<Button android:layout_width="680dip"
android:layout_height="680dip"
android:id="#+id/btnPhoto"
android:layout_alignParentBottom="true"
android:text="Take Photo"
android:layout_gravity="bottom|right" />
</RelativeLayout>
</RelativeLayout>
IMPORTANT:
In the cases described below...my activity is in `LANDSCAPE` mode and the position of the phone is portrait.Another issue is that when I turn my phone in landscape mode(and here I mean the position of the phone, cause the activity is still landscape) the button doesn't go at the bottom of the phone is stays there.No matter how I turn the phone the button is in the same position!!!!
You should read this
Make two layout folders like follows ...
In both of folders your layout file name should be same.
In layout-port folder your layout file should look like this ...
android:layout_toRightOf="#id/surface_camera"
replaced by ...
android:layout_Below="#id/surface_camera"
as follows ...
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"
>
<SurfaceView android:layout_width="450dip"
android:layout_height="fill_parent" android:id="#+id/surface_camera" />
<RelativeLayout android:layout_width="fill_parent"
android:layout_toBelow="#id/surface_camera"
android:layout_height="fill_parent"
>
<Button android:layout_width="680dip"
android:layout_height="680dip"
android:id="#+id/btnPhoto"
android:layout_alignParentBottom="true"
android:text="Take Photo"
android:layout_gravity="bottom|right" />
</RelativeLayout>
</RelativeLayout>
Even this will considered as bad practice but you can also handle this manually, try this ..
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.main);
int orientation = getResources().getConfiguration().orientation;
if(orientation == Configuration.ORIENTATION_PORTRAIT) {
setContentView(R.layout.main1);
}
else {
setContentView(R.layout.main2);
}
}
Also If you are doing this way No need to make two layout folders, but needs two layout files main1 and main2 in same folder
Yet another option ...
In manifest ...
<activity android:name=".ActivityName" android:configChanges="keyboardHidden|orientation">
+
In your Activity ...
#Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
int orientation = newConfig.orientation;
if(orientation == Configuration.ORIENTATION_PORTRAIT) {
setContentView(R.layout.main2);
}
else {
setContentView(R.layout.main);
}
}
Try this XML instead:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_height="fill_parent">
<SurfaceView android:id="#+id/surface_camera"
android:layout_width="450dip"
android:layout_height="fill_parent" />
<FrameLayout android:layout_width="fill_parent"
android:layout_toRightOf="#id/surface_camera"
android:layout_height="fill_parent">
<Button android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView android:id="#+id/btnPhoto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Take Photo" />
</FrameLayout>
</RelativeLayout>
You will rotate the Text not the button.

Categories

Resources