Android: swapping two overlapping views - android

Can anyone tell me what's wrong with this implementation? All I want to do here is have two overlapping views that swap places when you tap the screen. Unless I'm just using it wrong, View.bringToFront() does nothing?
Below is all the code in my app. Note that I added padding to the 'backView' just to make sure the two were actually overlapping. Indeed I could see both on the screen. While tapping the top view does indeed trigger the onClick method, nothing visibly changes in response to the calls to bringToFront.
public class MainActivity extends Activity implements OnClickListener {
private ImageView frontView;
private ImageView backView;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
frontView = (ImageView) findViewById(com.example.R.id.FrontView);
backView = (ImageView) findViewById(com.example.R.id.BackView);
frontView.setOnClickListener(this);
backView.setOnClickListener(this);
backView.setPadding(10,0,0,0);
}
private boolean flag;
public void onClick(View v) {
if (!flag) {
backView.bringToFront();
}
else {
frontView.bringToFront();
}
flag = !flag;
}
}
and the corresponding layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/FrontView"
android:src="#drawable/front"
/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/BackView"
android:src="#drawable/back"
/>
</RelativeLayout>
Maybe it's the layout I'm using? I'm not sure... I've tried FrameLayout and LinearLayout as well.

I would try swapping content views instead of ImageViews.
Put each imageView in a different layout and then it is easy:
public void onClick(View v) {
if (!flag) {
setContentView(R.layout.main_front);
frontView = (ImageView) findViewById(com.example.R.id.FrontView);
frontView.setOnClickListener(this);
}
else {
setContentView(R.layout.main_back);
backView = (ImageView) findViewById(com.example.R.id.BackView);
backView.setOnClickListener(this);
}
flag = !flag;
}

There are a couple of Components that you can use that do this for you.
ViewAnimator, ViewFlipper and ViewSwitcher. You can set the animations you require etc and they hand the rest.
here's one example.
http://www.androidpeople.com/android-viewflipper-example/
Given your example, do you have to call invalidate() on the parent after you've called bringToFront() ?

Related

2 images that swap when I tap on either one

What the title says. At first, I created a method to swap from one image to the other one, and it works. When I add the 2nd method though, to reverse the action and swap back to the first one, nothing changes. It does not even revert from the first image to the second one. Below is the code:
public void fade(View view) {
ImageView laxus = (ImageView) findViewById(R.id.laxus_shirt);
ImageView laxos2 = (ImageView) findViewById(R.id.laxus2);
laxus.animate().alpha(0f).setDuration(1000);
laxos2.animate().alpha(1f).setDuration(1000);
}
public void fadetoblack(View view) {
ImageView laxusius = (ImageView) findViewById(R.id.laxus_shirt);
ImageView laxosios2 = (ImageView) findViewById(R.id.laxus2);
laxosios2.animate().alpha(0f).setDuration(1000);
laxusius.animate().alpha(1f).setDuration(1000);
}
Thank you in advance.
You need to call start() to trigger the animation.
laxus.animate().alpha(0f).setDuration(1000).start();
laxos2.animate().alpha(1f).setDuration(1000).start();
I would suggest you to use Util method to perform crossfading. Something like below
public static void crossFade(View incomingView, View outGoingView, int outGoingViewVisibility) {
outGoingView.setAlpha(1);
ViewCompat.animate(outGoingView).alpha(0).setListener(new ViewPropertyAnimatorListener() {
#Override
public void onAnimationStart(View view) {
}
#Override
public void onAnimationEnd(View view) {
view.setVisibility(outGoingViewVisibility);
}
#Override
public void onAnimationCancel(View view) {
}
}).start();
incomingView.setVisibility(View.VISIBLE);
incomingView.setAlpha(0);
ViewCompat.animate(incomingView).setListener(null).alpha(1).start();
}
Maybe it will be an option to use ViewSwitcher.
Add a viewSwitcher with 2 ImageViews.
<ViewSwitcher xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/switcher"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/laxus"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<ImageView
android:id="#+id/laxus2"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</ViewSwitcher>`
On Activity onCreate add code
ViewSwitcher viewSwitcher=(ViewSwitcher)findViewById(R.id. switcher); // initiate a ViewSwitcher
Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left); // load in animation
Animation out = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right); // load out animation
viewSwitcher.setInAnimation(in); // set in Animation for ViewSwitcher
viewSwitcher.setOutAnimation(out); // set out Animation for ViewSwitcher
When you want to switch between ImageViews call method viewSwitcher.showNext(); or viewSwitcher.showPrevious();
To verify which view is displayed use viewSwitcher.getCurrentView();

android handle both scroll and click events on a TextView

I have a problem with my android app. I'm using a simple Textview with a vertical scrollBar to display lyrics from a song. The problem is that in my activity I set a Onclick event on this same Textview. So when I scroll the lyrics in the textview, the activity registers a click event when I release my finger from the screen. I don't want the onClick event to happen after I scroll.
Here is what I have done so far but it does not work really well since im using a onLongClick event wich is not precise enough:
public class NowPlayingActivity extends Activity implements ckListener,OnLongClickListener
{
private TextView lyrics;
private static final String TAG_LYRICS = "LYRICS";
#Override
protected void onCreate(Bundle savedInstanceState)
{
this.lyrics = (TextView) this.findViewById(R.id.now_playing_Lyrics);
this.lyrics.setOnClickListener(this);
this.lyrics.setMovementMethod(new ScrollingMovementMethod());
this.lyrics.setOnLongClickListener(this);
}
public void onClick(View v)
{
String tag = (String) v.getTag();
if (tag.equals(NowPlayingActivity.TAG_LYRICS))
{
if (this.scrolled) //this way, the click action doesnt occur after a scroll
{
this.scrolled = false;
}
else
{
this.scrolled = false;
this.artwork.setVisibility(View.VISIBLE);
this.lyrics.setVisibility(View.GONE);
}
}
public boolean onLongClick(View arg0)
{
this.scrolled = true;
return this.scrolled;
}
what can I do to make it more "accurate" (so I dont have to make a longClick for it to work)
thanks!
Put your textview inside scrollview.
<ScrollView
android:id="#+id/content_scroll"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_margin="7dip"
android:scrollbars="none" >
<TextView
android:id="#+id/fileContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dip" />
</ScrollView>
Then it should work properly. Hope it helps

I want to start another activity when it is clicked?

Well I have an activity which contains nothing but a relative layout with brown background,
and I want to start another activity if the users clicks anywhere on the screen, how would i do that ??
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.mainscreen);
}
First, give ID to your RelativeLayout by putting android:id="#+id/relativeLayout" in your layout file then.
RelativeLayout l = (RelativeLayout) findViewById(R.id.relativeLayout1);
l.setOnClickListener(new View.OnClickListener()
{
public void onClick(View v)
{
// startActivity here
}
});
or without using your RelativeLayout just implement the onTouchEvent(MotionEvent) of activity
public boolean onTouchEvent(MotionEvent event)
{
if(event.getAction() == MotionEvent.ACTION_UP)
{
// start activity
}
return super.onTouchEvent(event);
}
Note: Not yet tried this code.
Add onClick attribute to your layout xml, and implement onClick method in your activity to start a new activity.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:onClick="onClick"
android:orientation="vertical" >
In your activity add an onClick method.
public void OnClick(View v) {
startActivity(new Intent(this,MyNewActivity.class));
}
I think your Mainscreen has Parent layout either Linear,Relative,Frame. Take reference of that and handle click listener.
Ex:
If your Parent layout is Linear.
LinearLayout linear=(LinearLayout)findViewById(R.id.linear);
linear.setOnClickListener(this);

How to Switch Views at Runtime?

I have the following code in my accounting application:
// switch View to the Customer layout, widget id's are the same on both layouts
private void hideExpenseView() {
setContentView(R.layout.customer_invoices);
}
// switch View to the Supplier layout
private void hideIncomeView() {
setContentView(R.layout.supplier_invoices);
}
The above does not work, as when you switch the ContentView, you lose all variable mappings. You have to map variables after you setContentView() unfortunately.
If this worked, this would be a beautifully simple solution for my app. See, I've named the widgets in both xml layouts the same ids. Instead of hiding elements of one xml layout based on different states, I switch the entire View to the appropriate layout - whether entering a Customer sales invoice, or a Supplier expense invoice.
By switching Views, I would have basically 6 lines of code taking care of the UI transition, very simple.
I hope this is still possible in another capacity, can someone please push me in the right direction?
Check out ViewSwitcher : see http://developer.android.com/reference/android/widget/ViewSwitcher.html
That, or base your activities layout in a framelayout that includes supplier_invoices.xml and customer_invoices.xml. Then your homegrown hide-n-show will be g2g. Tho, you might need to change the ids still.
You can wrap your views in two LinearLayouts, one for R.layout.customer_invoices and another for R.layout.supplier_invoices.
You need to implement your own findViewById.
private static final int LAYOUT_EXPENSE = 1;
private static final int LAYOUT_INCOME = 2;
private int currentLayout = LAYOUT_EXPENSE;
private LinearLayout expenseContainer, incomeContainer;
// switch View to the Customer layout, widget id's are the same on both layouts
private void hideExpenseView() {
switchLayout(LAYOUT_INCOME);
}
// switch View to the Supplier layout
private void hideIncomeView() {
switchLayout(LAYOUT_EXPENSE);
}
private void switchLayout(int layout) {
currentLayout = layout;
if (layout == LAYOUT_EXPENSE) {
expenseContainer.setVisibility(VISIBLE);
incomeContainer.setVisibility(GONE);
} else {
expenseContainer.setVisibility(GONE);
incomeContainer.setVisibility(VISIBLE);
}
}
public View findViewById(int id) {
if (layout == LAYOUT_EXPENSE) return expenseContainer.findViewById(id);
else return incomeContainer.findViewById(id);
}
I think you got my idea.
Do like this
main.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:orientation="vertical" >
<LinearLayout
android:id="#+id/customer_invoices"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- put customer_invoices related tools like TextView, Button, ImageView here -->
</LinearLayout>
<LinearLayout
android:id="#+id/supplier_invoices"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- put supplier_invoices related tools like TextView, Button, ImageView here -->
</LinearLayout>
</LinearLayout>
Java code:
public class TestActivity extends Activity {
View supplier_invoices,customer_invoices;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
supplier_invoices = findViewById(R.id.supplier_invoices);
customer_invoices = findViewById(R.id.customer_invoices);
}
// switch View to the Customer layout, widget id's are the same on both layouts
private void hideExpenseView() {
setContentView(R.layout.customer_invoices);
customer_invoices.setVisibility(View.VISIBLE);
supplier_invoices.setVisibility(View.GONE);
}
// switch View to the Supplier layout
private void hideIncomeView() {
supplier_invoices.setVisibility(View.VISIBLE);
customer_invoices.setVisibility(View.GONE);
}
}

Dynamic user interface creation problem

How to Create dynamic user interface with events...
Hi Friends i want to create a user interface. in which i will have some buttons and labels
but the number of buttons and lables will be changing time to time depending upon the data retrieved from the server...
Can any one please guide me to do solve this issue... with usefuls links and guidence..
This uses two linear layouts to achieve a grid. The higher level LinearLayout is defined in linearlayout.xml, and holds element views vertically. Within each of these vertical views, a Row (custom LinearLayout) is instanciated, and in doing so, specifies the event handler(s). This LinearLayout holds its elements horizontally.
public class YourActivity extends Activity {
#Override
public void onCreate(Bundle bundle){
super.onCreate(bundle);
setContentView(R.layout.linearlayout);
ViewGroup main = (ViewGroup) findViewById(R.id.linearlayout);
main.addView(new Row(this));
main.addView(new Row(this));
}
private class Row extends LinearLayout {
public Row(Context context) {
super(context);
TextView text = new TextView(context);
Button button = new Button(context);
text.setText("Text");
button.setText("Button");
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(v.getContext(), "Button Clicked", Toast.LENGTH_SHORT).show();
}
});
this.addView(text);
this.addView(button);
}
}
}
linearlayout.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearlayout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</LinearLayout>
Is this what you were looking for?

Categories

Resources