ImageButtons with Layerlist xml: Howto change the shape color of a single instance



I am new to Android graphics and currently I am using this tutorial to learn about it. The result of the tutorial is a basic drawing app.


To select the color ImageButtons are used at the bottom of the application. One drawable in file "paint.xml" is used for the design of the ImageButtons. Inside the "paint.xml" a LayerList is created. When a color is selected the drawable of the clicked ImageButton is changed to "paint_pressed.xml" which has basically the same conetent as "paint.xml" except the color.


Now I want to change the code. Instead of changing the whole drawable I just want to change the color of the selected ImageButton's drawable. To be able to access the shapes in the "paint.xml" I added two android:id lines:



<layer-list xmlns:android="http://ift.tt/nIICcg" >

<item
android:id="@+id/outerShape"> <-- this one is added
<shape android:shape="rectangle" >
<stroke
android:width="4dp"
android:color="#FF999999" />
<solid android:color="#00000000" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
</shape>
</item>
<item
android:id="@+id/innerShape"> <-- and this one too
<shape xmlns:android="http://ift.tt/nIICcg" >
<stroke
android:width="4dp"
android:color="#FF999999" />
<solid android:color="#00000000" />
<corners android:radius="10dp" />
</shape>
</item>

</layer-list>


I changed two places in the source. The initial color is set in onCreate. Instead of setting the above mentioned paint_pressed drawable, I retrieve the drawable from the ImageButton and cast it to a LayerDrawable. Then I get the Shape (R.id.outerShape) and change its color.



@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_icon_drawer);

drawView = (IconDrawingView)findViewById(R.id.drawing);

//set the initial colour for the brush by retrieving the first Button
//in the layout and use its color
LinearLayout paintLayout = (LinearLayout) findViewById(R.id.paint_colours);
currPaint = (ImageButton)paintLayout.getChildAt(0);
//currPaint.setImageDrawable(getResources().getDrawable(R.drawable.paint_pressed));

//see http://ift.tt/1jz0SVi
// http://ift.tt/1BUu4Qq
// http://ift.tt/1qp4g81
// http://ift.tt/1BUu6I6
LayerDrawable layers = (LayerDrawable) currPaint.getDrawable();//getResources().getDrawable(R.drawable.paint);
layers.mutate();
GradientDrawable shape = (GradientDrawable) (layers.findDrawableByLayerId(R.id.outerShape));
shape.setStroke(
(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 4, getResources().getDisplayMetrics()),
0xFFFF0000);

}


So far, this works fine.


Now, I wanted to change the method that is invoked when a color is selected. It is called paintClicked and shown below.



public void paintClicked(View view){
//clicked colour != current colour
if(view!=currPaint){
ImageButton imgView = (ImageButton)view;
String colour = imgView.getTag().toString();
drawView.setColour(colour);
//change the appearance of the clicked button so that it looked pressed
//imgView.setImageDrawable(getResources().getDrawable(R.drawable.paint_pressed));

//get the drawable and change the color
LayerDrawable layers = (LayerDrawable) imgView.getDrawable();
layers.mutate();
GradientDrawable shape = (GradientDrawable) (layers.findDrawableByLayerId(R.id.outerShape));
shape.setStroke(
(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 4, getResources().getDisplayMetrics()),
0xFFFFFF00);

//now change the former pressed button back to normal appearance
//currPaint.setImageDrawable(getResources().getDrawable(R.drawable.paint));
layers = (LayerDrawable) currPaint.getDrawable();
layers.mutate();
shape = (GradientDrawable) (layers.findDrawableByLayerId(R.id.outerShape));
shape.setStroke(
(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 4, getResources().getDisplayMetrics()),
0xFF00FF00);
//override current colour
currPaint = imgView;
}
}


After I retrieved the pressed ImageButoon I try exactly the same: I get the LayerDrawable, then the shape and set its color. But it is not working. The complete shape is not visible anymore. I just see the background color of the ImageButton.


Only for the ImageButton I initilize in the onCreate-method it is working as expected. The color of the outerShape is changed to yellow when clicked and changed two green when another ImageButton is clicked.


Does anybody know how I can change the colour of a shape in a LayerList that is used multiple times?


Thank you very much!


No comments:

Post a Comment