Custom LinearLayout

Question

I want to make layout like following :

For that i will need three backgrounds like this:

I will need to combine all of them and

at runtime i have to change background color of each

so i thought to make custom linearlayout.

But I don't know how to make it like that.

I have checked some example of making triangular and parallelogram layout but i want to merge all three views also. Please give some useful links and also give code example rather than giving references.

Thank you in Advance. :)

I tried in relative layout. for remoteview, i tried this:

ColorFilter cf = new PorterDuffColorFilter(-15032095, Mode.MULTIPLY);
        Drawable d= context.getResources().getDrawable(R.drawable.panel1);
        d.mutate();
        d.setColorFilter(cf);

I tried below codes:

rv.setInt(R.id.rl_noti_main, "setColorFilter", d);
rv.setInt(R.id.rl_noti_main, "setBackgroundDrawable", -15032095);
rv.setInt(R.id.rl_noti_main, "setBackgroundResources",d);

Answer 1

try frame layout or relative layout. you need to overlap each view to achieve this which can't be done in linear layout. make each image as rectangle with transparent area which part need to overlap.

Answer 2

Option 1

Consider making a custom view. You will extend the View class and override the onDraw method. In the onDraw method you will draw your special shapes. You can also make a method to set the colors of each part. Read the documentation first. It gives a pretty thorough overview. Then look for some tutorials about drawing and creating custom views. Follow along and by the time you are done you should be ready to try yourself.

Here are a couple tutorials that came up but I'm sure you can find more.

• Android SDK: Creating Custom Views
• Tutorial: Enhancing Android UI with Custom Views

Option 2

Create your three shapes as white images (or maybe as 9-patch images depending on how you need them to resize for different layouts). The parts you don't want colored you can make transparent. I might even make the middle image as a tall rectangle (or even a simple rectangular View) and layer the other two images on top.) Then use a RelativeLayout to stack or overlap the images on each other. After that use Drawable.setColorFilter to change the color programmatically. See the links below. This seems to have been successful for a lot of people.

• Modifying the color of an android drawable
• Applying ColorFilter to ImageView with ShapedDrawable
• How to change colors of a Drawable in Android?