Custom LinearLayout

Question

I want to make layout like following :

enter image description here

For that i will need three backgrounds like this:

This is one layout

this is another layout

this is another

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);

instead of using images, you should make use of canvas and draw shapes over it using fill colors. — Amrut Bidri, Mar 14 '15 at 11:38
Thanks Amrut for reply. Can you suggest some code and also can you suggest me how to draw? — kiturk3, Mar 14 '15 at 12:31
Why don't you join these images vertically in photoshop and use it as background. — Apurva, Mar 14 '15 at 13:58
@Apurva: i can't do this as i have to change color of each runtime. — kiturk3, Mar 17 '15 at 05:35
@kiturk3 I don't know any other way to do it. I also tried making using relativeLayout but it doesn't work — Apurva, Mar 17 '15 at 08:28

score 1 · Answer 1 · answered Mar 13 '15 at 06:27

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.

answered Mar 13 '15 at 06:27

Sayem

4,891
3
28
43

Hi @Sayem.... I tried with Relative Layout but problem is same... I have to change color of each view dynamically and there will be textview also on each views. :( – kiturk3 Mar 14 '15 at 07:05
Use colorfilter to change color of image dynamically. If relative layout creates problem then try framelayot – Sayem Mar 14 '15 at 07:31
i hgave done this:button1 = (Button) findViewById(R.id.button1); rl_1 = (RelativeLayout)findViewById(R.id.rl_1); button1.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub Drawable d= getApplicationContext().getResources().getDrawable(R.drawable.panel_test1); // d.mutate(); // d.setColorFilter(0xCC66FF, Mode.MULTIPLY); d.setColorFilter(new PorterDuffColorFilter(0xCC66FF, Mode.DARKEN)); // d.setColorFilter(cf); rl_1.setBackground(d); } }); – kiturk3 Mar 14 '15 at 07:32

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

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.

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.

edited May 23 '17 at 12:06

Community

1
1

answered Mar 14 '15 at 13:24

Suragch

484,302
314
1,365
1,393

my first thought was doing the same you suggested but it may be time consuming and if there is no option other than that i have to use this solution only. :) – kiturk3 Mar 17 '15 at 11:06
See my second option if you don't want to make a custom view. – Suragch Mar 17 '15 at 12:27
yes but how to change color in remoteview as i mentioned that i want it for widget view – kiturk3 Mar 17 '15 at 12:30
I don't understand what you want to do. Please update your question with more details about what exactly it is you want to accomplish. – Suragch Mar 17 '15 at 12:33
I have already mentioned in question itself that i want to set this layout in widget and also want to change color dynamically. – kiturk3 Mar 17 '15 at 12:37
I didn't see anything about widgets in your question, but widgets can use RelativeLayouts, too. You can change the color of the images dynamically with setColorFilter. Have you tried that yet? You can update your question with why that didn't work. – Suragch Mar 17 '15 at 12:55
yup i tried relative layout. and updating question. ty :) – kiturk3 Mar 17 '15 at 12:57
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/73164/discussion-between-kiturk3-and-suragch). – kiturk3 Mar 17 '15 at 13:01

Custom LinearLayout

2 Answers2

Linked