In Java, building an Android app, I need to create one or more custom views and insert them in a Layout.
Each view can have different width. The heigh is always the same. I would like to place each view side by side and if the right border of the screen is reached, the next one must go to a new line.
In fact, imagine that each view represents a word, all the words are a paragraph. So all my custom view must be placed like the words, side by side and line by line.
Is there a way to do this easily with any existing Android object ?
You can try ChipGroup and Chip. I think it will meet your requirements.
At first add ChipGroup in your view xml like this:
<com.google.android.material.chip.ChipGroup
android:id="#+id/cgWords"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
Then, to dynamically add Chip in this, sample code can be as following:
private void showTags(List<String> words) {
for (String word : words) {
Chip chip = new Chip(context);
chip.setText(word);
ChipGroup cgWords = findViewById(R.id.cgWords);
cgWords.addView(chip);
}
}
This is a screenshot after running a sample code:
Related
I have a special requirement in one of my project. I have an ArrayList of items and I want to show the Views like in the image below.
All the brown boxes are View's (TextView or LinearLayout or Button). I want to add them in the order they are numbered. Their width depends on the content inside them i.e. length of text in the case of TextView.
When I add a new view, I want it to be on the right side of the previous view if their is space otherwise it should go in the next line/row.
How can I accomplish this?
I like to use FlowLayout. Super simple to use and doesn't require you re-inventing the wheel.
Just change your root view in the xml file to this:
<org.apmem.tools.layouts.FlowLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
And thats all it takes!
I used this third party library to solve this.
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.
I'm a Xamarin Android beginner. In an app that I'm writing, I created an Activity with a RadioGroup, and a button below it.
All was fine, until my radio buttons contained so much text that the radio group ran off the phone's screen, and the button was hidden.
So, I searched on the internet, and discovered that I could make the RadioGroup scrollable, by making it a ListView, and setting the ListView to be above the button.
Furthermore, I discovered that Xamarin Android offers the BuiltInView SimpleListItemSingleChoice which is a ready-made radio group as a ListView.
So, I implemented this, and all was fine, except that the text fields in each Item of the BuiltInView get cut short (i.e my radio button options to the user).
I want to apply the property
android:layout_height="wrap_content"
so that my long text labels for the radio buttons won't get cut short.
My question is, how do I apply this to each item of the BuiltInView?
I've tried to define my own custom view, but have run into problems trying to make it checkable, so I wondered if there is a simpler way to solve the problem by using the already provided BuiltInView.
In MyListAdapter GetView, I have
view = (context.LayoutInflater.Inflate(Android.Resource.Layout.SimpleListItemSingleChoice, parent, false));
and in my Activity, I have
myListAdapter = new Adapters.MyListAdapter(this, myStrings, false);
myListView.Adapter = myListAdapter;
As the BuiltInView does not offer an xml file (or I don't know where to access it in Xamarin), I added the following code to the custom Adapter's GetView method:
var textLabel = view.FindViewById<TextView>(Android.Resource.Id.Text1);
//I added these 2 lines to set the WrapContent property on each element of the BuiltInView
AbsListView.LayoutParams layoutParams = new AbsListView.LayoutParams(AbsListView.LayoutParams.MatchParent,
AbsListView.LayoutParams.WrapContent);
textLabel.LayoutParameters = layoutParams;
So, what I'd like is: defining a component, which includes TextView-s and an ImageView. This is an item, which I'd like to add to a (for example Linear) layout, so I can display all the custom items, I added one after the other.
The point is, that these items have to be editable, because a database query result will define their text content and the image.
Your custom component should be a ViewGroup itself. You can add any number of TextViews and ImageViews to it, and access them by their ID.
MyCustomViewGroup component = (MyCustomViewGroup)linearLayout.findViewById(...);
TextView textView1 = (TextView)component.findViewById(...);
ImageView imageView = (ImageView)component.findViewById(...);
You can go for the XML approach for defining your component. For instance, you can define your component as a LinearLayout, then add all the elements (TextViews, ImageViews) you need to that layout.
As for the "editable" part, just provide your elements with an id property
android:id="#+id/my_view"; that way you may obtain them through a findViewById(R.id.my_view) call.
You cast the results to whatever View implementation you are expecting, then change it's text/content/image with the interpreted results from your query.
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.