Android how can you add a custom view programmatically without affecting rest of layout

Question

I'm creating a guitar app. It has an relative layout holding an image view to display the guitar fretboard and at the bottom a linear layout holding some Buttons. The issue occurs when I want to highlight the note on the fretboard. I've created a customer drawable view and when I add it to the relative layout holding an image view, it highlights, BUT the linear layout holding some buttons disappears. Why? What do I need to do?

Layout

<?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">
  <!-- Top line -->
    <LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:background="@drawable/bg_black"
      android:orientation="horizontal"
      android:id="@+id/appHeader">
        <TextView android:id="@+id/headerText" android:text="@string/app_name" 
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textColor="@android:color/white" android:textSize="17dip" android:textStyle="bold"
            android:gravity="center" android:paddingTop="2dip" android:paddingBottom="2dip"
            android:layout_weight="1" />      
        <SeekBar android:layout_height="wrap_content" 
               android:id="@+id/seek_bar" 
               android:layout_width="300dip" 
               android:paddingTop="2dip"
               android:paddingBottom="2dip"
               android:paddingRight="4dip"
               android:saveEnabled="true" 
               android:max="100"
               android:progress="50">
               </SeekBar>                   
  </LinearLayout>
  <!-- Middle Guitar to scroll left-right-->
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/fretboard_layout"
        android:orientation="horizontal"
        android:layout_width="2040dip"
        android:layout_height="wrap_content"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/guitar_fretboard"
            android:scaleType="center"
            android:background="@drawable/bg_black"
            android:src="@drawable/mina_fretboard_1951x218"
        />
  </RelativeLayout>
  <!-- Bottom Buttons-->
  <LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:background="@drawable/bg_black"
      android:gravity="center_horizontal|center_vertical"
      android:orientation="horizontal">
            <LinearLayout
          xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:paddingTop="2dip"
          android:orientation="horizontal">
                <Button 
                android:id="@+id/choose_tune_button"
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:drawableTop="@drawable/music"
                android:minWidth="96dip"
                android:text="@string/choose_tune"
                />          
                <Button  
                android:id="@+id/play_tune_button"
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:drawableTop="@drawable/play_stop"
                android:minWidth="96dip"
                android:text="@string/play_tune"
                />  
                <Button  
                android:id="@+id/check_button"
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:minWidth="96dip"
                android:drawableTop="@drawable/check"
                android:text="@string/check_notes"
                />  
                <Button  
                android:id="@+id/note_count_button"
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:minWidth="96dip"
                android:drawableTop="@drawable/number"
                android:text="@string/note_count"
                />  
                <Button  
                android:id="@+id/options_button"
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:minWidth="96dip"
                android:drawableTop="@drawable/options_32"          
                android:text="@string/options"
                />                              

    </LinearLayout>             
    </LinearLayout>
</LinearLayout>

CustomDrawableView class for highlighting

package com.veitch.learntomaster.grp.ui.activities;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.view.View;

public class CustomDrawableView extends View {
    private ShapeDrawable mDrawable;
    private int x;
    private int y;
    private int drawableWidth;
    private int drawableHeight;


    public CustomDrawableView(Context context, int x, int y, int drawableWidth, int drawableHeight) {
        super(context);

        this.x = x;
        this.y = y;
        this.drawableWidth = 30;
        this.drawableHeight = 15;

        mDrawable = new ShapeDrawable(new OvalShape());
        mDrawable.getPaint().setColor(0xff74AC23);//Green

        mDrawable.setAlpha(128);//50% opacity?
        mDrawable.setBounds(this.x, this.y, this.x + this.drawableWidth, this.y + this.drawableHeight);
    }

    protected void onDraw(Canvas canvas) {
        mDrawable.draw(canvas);
    }    

    public int getX() {
  return x;
 }

 public void setX(int x) {
  this.x = x;
 }

 public int getY() {
  return y;
 }

 public void setY(int y) {
  this.y = y;
 }


 public void setDrawableWidth(int drawableWidth) {
  this.drawableWidth = drawableWidth;
 }

 public int getDrawableWidth() {
  return drawableWidth;
 }


 public void setDrawableHeight(int drawableHeight) {
  this.drawableHeight = drawableHeight;
 }

 public int getDrawableHeight() {
  return drawableHeight;
 }

}

Main Activity, calling the CustomerDrawableView

userPlayedHighlightView = new CustomDrawableView(this,x,y,HIGHLIGHT_WIDTH,HIGHLIGHT_HEIGHT);

fretboardLayout.addView(userPlayedHighlightView);

Kirk · Accepted Answer · 2012-06-19 21:29:42Z

2

I would use another approach for your problem. I would built a FredboardView which is capable of drawing a highlighted note in its onDraw method. This View could be added in your layout xml. If you want to highglight a note the view should have a method to do this like setHihglightedNote(note) and you would not have to add something to the layout everytime the user does something.

EDIT:

Example of a custom view which draws some drawables according to a position.

public class PositionIndicator extends View {

    private static final int OFFSET = 2;
    private Drawable on, off;
    private int width, height;
    private int size = 5;
    private int position = 0;
    private Paint paint;

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

        // init
        on = context.getResources().getDrawable(R.drawable.dot_green);
        off = context.getResources().getDrawable(R.drawable.dot_grey);

        paint = new Paint();
        paint.setARGB(0, 0, 0, 0);
    }

    /**
     * Set size of indicator.
     * @param size Size.
     */
    public void setSize(int size) {
        if(size >= 0)
            this.size = size;
        this.invalidate();
    }

    /**
     * Set position of indicator.
     * @param position Position.
     */
    public void setPosition(int position) {
        if(position >= 0 && position <= size)
            this.position = position;
        this.invalidate();
    }

    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            switch(msg.what) {
                case C.POSITION_CHANGED:
                    setPosition(msg.arg1);
                    break;
            }
        }
    };

    public Handler getHandler() {
        return handler;
    }

    /**
     * {@inheritDoc}
     */
    @Override
    public void onDraw(Canvas canvas) {
        // draw transparent rectangle to clean area
        canvas.drawRect(0, 0, this.getWidth(), this.getHeight(), paint);
        for(int i = 0; i < size; i++) {
            // draw current
            if(i+1 == position) {
                on.setBounds(i*width+i*OFFSET, 0, i*width+i*OFFSET+width, height);
                on.draw(canvas);
            // draw others
            } else {
                off.setBounds(i*width+i*OFFSET, 0, i*width+i*OFFSET+width, height);
                off.draw(canvas);
            }
        }
    }

    /**
     * {@inheritDoc}
     */
    @Override
    protected void onMeasure(int width, int height) {
        super.onMeasure(width, height);
        setMeasuredDimension(this.getMeasuredWidth(), this.getMeasuredHeight());
        this.width = (this.getMeasuredWidth() - ((size-1) * OFFSET)) / size;
        this.height = this.getMeasuredHeight();
    }

}

edited Jun 19, 2012 at 21:29

Kirk

16.3k20 gold badges85 silver badges117 bronze badges

answered Aug 10, 2011 at 11:50

dbrettschneider

3,1932 gold badges31 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

TomVeitch Over a year ago

Thanks for your suggestion. I tried that, but unfortunately the fretboard image doesnt render at all :< In the layout xml, I've replaced the ImageView with a custom FretboardView. The FretboardView class, which now extends ImageView, has a setHighlightNote(note) method, which I'm calling from my main Activity. But, the fretboard image is not displayed at all. I'm wondering that do I need to do anything in the FretboardView(Context context, AttributeSet attrs) constructor to retrieve the src image?

dbrettschneider Over a year ago

One solution would be to hard code the image into the FredboardView and to draw it yourself in the onDraw. Otherwise you would need to extends ViewGroup with your FretboardView.

dbrettschneider Over a year ago

I put some exaple code in the answer above. Hope that helps. Thats how i would solve it.

TomVeitch Over a year ago

Thanks, I'll work that solution in. But I'm curious as to why my first approach had the adverse effect of making the other view disappear. After all, I followed the Android guide shown here developer.android.com/guide/topics/graphics/2d-graphics.html ?

TomVeitch Over a year ago

Just to let you know, I worked in above solution, but I'm back to the original issue...The bottom button view disappears :(

|

Collectives™ on Stack Overflow

Android how can you add a custom view programmatically without affecting rest of layout

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related