Creating TwoView in Android

Question

I want to create two view, where left hand side view should contains a images and right side view should extends the runtime view which is used for creating dots in on draw method.

FrontPage::

ActivityB.java

public class ActivityB extends Activity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(new EventViewB(this, null));
   }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.activity_b, menu);
    return true;
  }

}

Runtime View Content:

EventViewB.java

public class EventViewB extends View {

   private Paint paint = new Paint();
   private Path path = new Path();
   int c1=0,c2=0,c3=0,c4=0,c5=0,c6=0,c7=0,c8=0,c9=0,c10=0,c11=0,c12=0,c13=0,c14=0,c15=0;
   int counterIncrement=0;

public EventViewB(Context context, AttributeSet attrs) {
   super(context, attrs);

   paint.setAntiAlias(true);
   paint.setStrokeWidth(10f);
   paint.setColor(Color.BLACK);
   paint.setStyle(Paint.Style.STROKE);
   paint.setStrokeJoin(Paint.Join.ROUND);
}

@Override
protected void onDraw(Canvas canvas) {
   canvas.drawPath(path, paint);
   canvas.drawPoint(200, 100, paint);
   canvas.drawPoint(200, 150, paint);
   canvas.drawPoint(200, 200, paint);
   canvas.drawPoint(200, 250, paint);
   canvas.drawPoint(200, 300, paint);
   canvas.drawPoint(200, 350, paint);
   canvas.drawPoint(200, 400, paint);
   // first curve
   canvas.drawPoint(250, 100, paint);
   canvas.drawPoint(300, 100, paint);
   canvas.drawPoint(340, 140, paint);
   canvas.drawPoint(360, 175, paint);
   canvas.drawPoint(340, 210, paint);
   canvas.drawPoint(300, 250, paint);
   canvas.drawPoint(250, 250, paint);

   // Second Curve
   canvas.drawPoint(340, 290, paint);

   canvas.drawPoint(360, 325, paint);
   canvas.drawPoint(340, 360, paint);
   canvas.drawPoint(300, 400, paint);
   canvas.drawPoint(250, 400, paint);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    float eventX = event.getX();
    float eventY = event.getY();


    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
        path.moveTo(200,100);
        return true;

    case MotionEvent.ACTION_MOVE:
        if(eventX>195 && eventX<202)
            if(eventY>100 && eventY<150)
                if(c1==0)
                {
                path.lineTo(200, 150);
                counterIncrement++;
                c1++;
                }
        if(eventX>195 && eventX<202)
            if(eventY>150 && eventY<200)
                if(c2==0 && counterIncrement==1)
                {
                path.lineTo(200, 200);
                counterIncrement++;
                c2++;
                }

        if(eventX>195 && eventX<202)
            if(eventY>200 && eventY<250)
                if(c3==0 && counterIncrement==2)
                {
                path.lineTo(200, 250);
                counterIncrement++;
                c3++;
                }
        if(eventX>195 && eventX<202)
            if(eventY>250 && eventY<300)
                if(c4==0 && counterIncrement==3)
                {
                path.lineTo(200, 300);  
                counterIncrement++;
                c4++;
                }
        if(eventX>195 && eventX<202)
            if(eventY>300 && eventY<350)
                if(c5==0 && counterIncrement==4)
                {
                path.lineTo(200, 350);
                counterIncrement++;
                c5++;
                }

        if(eventX>195 && eventX<202)
            if(eventY>350 && eventY<400)
                if(c6==0 && counterIncrement==5)
                {
                path.lineTo(200, 400);
                counterIncrement++;
                c6++;
                }

        // first Curve
        if(eventX>200 && eventX<250)
            if(eventY>99 && eventY<101)
                if(c7==0 && counterIncrement==6)
                {
                path.moveTo(200, 100);
                path.lineTo(250, 100);
                counterIncrement++;
                c7++;
                }

        if(eventX>250 && eventX<300)
            if(eventY>99 && eventY<101)
                if(c8==0 && counterIncrement==7)
                {
                path.moveTo(250, 100);
                path.lineTo(300, 100);
                counterIncrement++;
                c8++;
                }
        if(eventX>300 && eventX<340)
            if(eventY>100 && eventY<140)
                if(c9==0 && counterIncrement==8)
                {
                path.moveTo(300, 100);
                path.lineTo(340, 140);
                counterIncrement++;
                c9++;
                }
        if(eventX>340 && eventX<360)
            if(eventY>140 && eventY<175)
                if(c10==0 && counterIncrement==9)
                {
                    path.moveTo(340, 140);
                    //
                path.lineTo(360, 175);
                counterIncrement++;
                c10++;
                }
        if(eventX>340 && eventX<360)
            if(eventY>175 && eventY<210)
                if(c11==0 && counterIncrement==10)
                {
                    path.moveTo(360, 175);
                path.lineTo(340,210);
                counterIncrement++;
                c11++;
                }

        if(eventX>300 && eventX<340)
            if(eventY>210 && eventY<250)
                if(c12==0 && counterIncrement==11)
                {
                    path.moveTo(340, 210);
                path.lineTo(300,250);
                counterIncrement++;
                c12++;
                }

        if(eventX>250 && eventX<300)
            if(eventY>249 && eventY<251)
                if(c13==0 && counterIncrement==12)
                {
                    path.moveTo(300, 250);
                path.lineTo(250,250);
                counterIncrement++;
                c13++;
                }
        if(eventX>200 && eventX<250)
            if(eventY>249 && eventY<251)
                if(c14==0 && counterIncrement==13)
                {
                    path.moveTo(250, 250);
                path.lineTo(200,250);
                counterIncrement++;
                c14++;
                }

        if(eventX>300 && eventX<340)
            if(eventY>250 && eventY<290)
                if(c15==0 && counterIncrement==14)
                {
                    path.moveTo(300, 250);
                path.lineTo(340,290);

                counterIncrement++;
                c15++;
                }



        break;
    case MotionEvent.ACTION_UP:
        path.moveTo(250,400);
        break;
    default:
        return false;
    }
    invalidate();
    return true;

   }
}

I have open the runtime view information by clicking the button which have intent to open another activity class which is shown above.. now i want to do this in two view , one view for alphabet s and view contains this runtime view???

hi,, i want to create two view , one for loading images of Alphabet. i already have a some content in runtime view and this runtime view should be placed in the second view.... but now i have code for the information which is displayed in the runtime view, so now i have add a two view , one for this and other for images . — Ashok, Jul 14 '14 at 11:18

score 0 · Answer 1 · answered Jul 14 '14 at 11:27

Use fragments. (Sort of like the Master Detail form)

You can declare a fragment like this in Java (this would go in your MainActivity class):

Fragment newFragment = new FragStart(); // the name of the class for the fragment, not the current class
    FragmentTransaction transaction = getFragmentManager().beginTransaction();
    transaction.replace(R.id.mainFragment, newFragment);
    transaction.addToBackStack(null);
    transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
    transaction.commit();

Then your FragStart() class would look like this:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    return inflater.inflate(R.layout.frag_start, container, false);
}

and your frag_start layout could be anything you want in it, but your main layout (for MainActivity would look like this:

<LinearLayout 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:orientation="horizontal" >

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:layout_weight="1"
    android:background="#777777"
    android:weightSum="3" >

    <Button
        android:id="@+id/btnDiary"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Diary"
        android:background="#777777"
        android:textColor="#FFFFFF"  />

    <Button
        android:id="@+id/btnPatients"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Patients"
        android:background="#777777"
        android:textColor="#FFFFFF" />

    <Button
        android:id="@+id/btnTools"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Tools"
        android:background="#777777"
        android:textColor="#FFFFFF"  />
</LinearLayout>

<LinearLayout
    android:id="@+id/mainFragment"
    android:layout_weight="3"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
</LinearLayout>

The fragment layout would be:

<?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" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="This is the fragment"
    android:textSize="40sp" />

</RelativeLayout>

Giving you the following result:

thanks ,, this should only possible in fragments ah.. or any other? — Ashok, Jul 14 '14 at 11:33
@user3208981 I would only do it in fragments, I have only done it in fragments — , Jul 14 '14 at 11:35
you just click the left side button it should display the content of that in the right hand side , but i want to know the when a button is clicked in the previous page or activity it will load two views in the single view , left side should contain alphabet and right side it should be runtime view — Ashok, Jul 14 '14 at 11:38
@user3208981 You are not clear enough. If you click a button on the previous activity, why dont you open up this activity with the 2 views? Do you want 3 fragments then? — , Jul 14 '14 at 11:41
[link](https://docs.google.com/file/d/0B_modKDkygByeXQ4N2h2Sm42TDA/edit?pli=1) please press the "link" button and see the diagram. In that second page(second activity) explains which view i need it. — Ashok, Jul 14 '14 at 16:35
@user3208981 then use an `imageview` on the left and a `canvas` on the right - `http://developer.android.com/guide/topics/graphics/2d-graphics.html` — , Jul 14 '14 at 17:42

score 0 · Accepted Answer · edited May 23 '17 at 11:50

You need to create two view, one half of the view is run time view and another half u need a image you wanna show it.. this is your que. rit..?

I'm also new to android ,I searched up to some extend . My solution is instead of creating a new view why don't you add image in your existing canvas itself. I referred this Drawable image on a canvas link shows how to add image in canvas view and I tried it work for me.

Here is the code which I added to display image in canvas(with the help of that link).

//ADD THIS PIECE OF CODE UNDER THE CLASS WHICH EXTENDS VIEW
Resources res = getResources();
Bitmap bitmap = BitmapFactory.decodeResource(res, R.drawable.yourimage);
//Set the height of the image 
private int dstHeight=100;
//Set the width of the image
private int dstWidth=100;
private boolean filter;
Bitmap mBitmap = Bitmap.createScaledBitmap(bitmap, dstWidth, dstHeight, filter);

//"ADD THIS LINE OF CODE IN UR DRAW METHID"
//10 & 200 represent ur image placement in X , Y axis 
canvas.drawBitmap(mBitmap, 10, 200, mBitmapPaint);

hope this piece of code add the image in ur canvas. Please pardon me if any mistake I did. Thanks :)

Creating TwoView in Android

2 Answers2