I want to create zig-zag layout same as following attached image:
I tried a lot by creating diagonal lines and arranging them with icon but couldn't make it same.
I implemented diagonal lines with the help of accepted answer from following questions:
Diagonal line across view
How rotate line in Android XML?
However I'm stuck to arrange lines with icons exactly same as in image.
I created this custom ZigZagLayout.java file to cater your requirement. You just have to update the package name in the 1st line.
It basically extends RelativeLayout, so you can use it in your layout-xmls just like any other ViewGroup class. Once you have instantiated this layout, just add child-views to it like it is done for RelativeLayout via addView(View child).
Example code snippet with dynamically created view:
ZigZagLayout zigZagLayout = (ZigZagLayout) findViewById(R.id.layout_zigzag);
Button btn = new Button(this);
btn.setText("Test Button");
btn.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT));
zigZagLayout.addView(btn);
I've also added few interfaces to this ZigZagLayout for your easy interaction like ability to set the connector-line stroke width, visibility, color, margins, etc.
Try it out and let me know if it suffices your requirement. Cheers.
If you have layout for each circular item , you may use relative layout to align them, using align_below, align_left with margin, align_right with margin tags.
Please provide further detail, what are the lines connecting them and exactly what all are requirements for UI and functionality.
Related
I'm using a table layout to arrange some buttons. As long as I use the same font for all the labels they are properly aligned in each row.
For some buttons I'd like to use icons from a custom ttf font.
When I use such an icon, the button is placed slightly higher, like so:
(This image is scaled up to make the the problem more evident.)
I took measurements - the buttons appear to be of same height, regardless of the used font.
Why are the buttons not aligned properly?
Does anyone have a suggestion to get them aligned?
Thanks.
Following CommonsWare's advice (thanks for the quick replies!), I tried this:
final LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.gravity = Gravity.CENTER_VERTICAL;
row.setLayoutParams(layoutParams);
This did not work. Will try the base alignment comment next.
Add the following attribute to your TableRow:
android:baselineAligned="false"
By default, the button labels' base lines are vertically aligned which causes the offset you experience.
I have a relative layout and some textviews in it...
I defined this relative layout in the java, and add a view to it.
but in the result I just have the view that I added to layout .. and it doesn't show any text boxes..
SampleView sample= new SampleView(this);
rl=(RelativeLayout) findViewById(R.id.rl);
rl.addView(sample);
how can I fix it? (in this code, it just shows the sample view's object ... not textviews that I have in the layout)
Debugging is your solution.
Make sure that the view that you are adding does not overlap your textView.
Make sure your textview has text. Try checking its size in run time.
And finally use Android Studio layouting tool, to have a preview of your layout. You can use tools to generate something suitable for preview.
I solved it. my mistake was:
canvas.drawColor(Color.WHITE);
in the onDraw ...
I've seen many of questions for how to add TextView in a RelativeLayout programatically, but everybody adding it in LinearLayout with orientation vertical. Can any one suggest me or give me a link that how to add multiple TextView in RelativeLayout at right until it has space and then change the line.
I want a layout like this..
May be this works for you !
You can customize chips-edittext-library for your need. Customizing by setting background to transparent, and editable to false.
-> Or you can use any other library which is used for displaying emoticon in EditText and customize it according to your need. Like android-emoticon-edittext-spike
You can use the Flow Layout library that manages the view arrangement itself.
When there is no space left the added View is moved to the next line
I have a LinearLayout called mySlab inside another RelativeLayout. I need to make the mySlab and its children views transparent programmatically. Do I have to make each child transparent explicitly or is there a way such that if I turn mySlab transparent the children will follow?
A bit of clarification
The layout view in question has a number of children each with its own color or image background. I am hoping to be able to dial the transparency of mySlab without actually changing the colors and backgrounds of each child per se. iOS does that very well.
Also mySlab is actually a RelativeLayout, not Linear, though I don't think that should matter.
its easy in android, use this property
android:background="#00FFFFFF";
where 00 is for tansparency, and rest for rgb color.
Have you tried this:
LinearLayout ll = (LinearLayout)findViewById(R.id.myLayout);
for (int x=0;x<ll.getChildCount();x++)
ll.getChildAt(x).setBackgroundColor(Color.TRANSPARENT);
ll.setBackgroundColor(Color.TRANSPARENT);
this will change the LinearLayout and its childrens
I'm building a very simple online chat room App. What I have achieved is something like below right now:
Robert:blah..
Tom: yes blah..
David(You): That sounds cool!
Lily: Do you know blah...
Robert:blah..
Robert:blah..
David(You): Wow! Blah...
The new feature/problem I'm facing is that I want current user's talks to show on the right.
Like below(this is what David see on his screen):
Robert:blah..
Tom: yes blah..
That sounds cool! : David(You)
Lily: Do you know blah...
Robert:blah..
Robert:blah..
Wow! Blah... : David(You)
Each line above is a TextView, and I'm dynamically creating TextView whenever there's new message, then adding them to the LinearLayout that contains these TextView. In order to make David(current user)'s talk on the right, I tried to set align right and I change the LinearLayout to RelativeLayout. But then I realize once I use RelativeLayout, all talks are in the same line overlapping each other since I didn't set their height.. Can anyone shed some light on how to achieve this please? My codes below:
...
//new messages are stored in lines[]
for (int i = 0; i < lines.length; i++) {
TextView newLine = new TextView(getBaseContext());
newLine.setText(lines[i]);
// check if the speaker of this line is user himself
if (speakerName.equals(userName)) {
//change the layout of this textView to make it align right..
}
myLinearView.addView(newLine);//add to linearView that contains these talks
}
You definitely need to use a ListView, as Chor WaiChun mentioned. However, the way you would do this with a relative layout would be to set the RelativeLayout.layoutParams for the view with a rule that sets it to layout_below the previous view. Just like you would in XML.
Also, even if you insist on adding 1 view per line (which as previously stated is wrong, use a ListView), there's no reason not to use the LinearLayout. You can have a LinearLayout with right justified text, just set the gravity to right.