I have designed the red highlighted layout like the picture:
What I have used is LinearLayout with orientation. Here an ImageView and Two Textviews are repeated in four times. But as far my knowledge I designed it using LinearLayout. So I have to write every time the same design code for four times.
Is there any better way to design it so that I have to write it one time instead of four times.
My code for the highlighted portion is [here](https://pastebin.com/C9ZHDaZV).
Create one layout called for example weather_layout.xml and place your ImageView and Two Textviews inside, then just use include four times in your final LinearLayout like this:
<LinearLayout
... >
<include
id="+#/top_left"
layout="#layout/weather_layout"
... />
<LinearLayout/>
And then you can access like this:
LinearLayout topLeft = (LinearLayout) mainView.findViewbyId(R.id.top_left)
ImageView v = (ImageView) topLeft.findViewbyId(R.id.imageView)
Use Grid Layout. That way you won't need to handle the spacing and partitioning yourself. One line of of code will suffice.
Related
I'm inflating views inside a linearlayout dynamically, however once the linear layout reaches the end of the first row, it cuts off the rest and doesn't start on the second row.
for(int a = 0; a < mSkills.get(i).size(); a++){
View singleSkill = LayoutInflater.from(mContext)
.inflate(R.layout.singleskill, holder.mSkillLayout, false);
TextView skillText = singleSkill.findViewById(R.id.singleskilltext);
skillText.setText(mSkills.get(i).get(a));
holder.mSkillLayout.addView(skillText);
}
For the linear layout I have it set to wrap_content for the height:
<LinearLayout
android:id="#+id/ll_skills"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/tv_description"
android:layout_margin="16dp"/>
I've tried setting it to a defined height e.g 300dp however that doesn't work either.
How can I make the layout start on the second row, once the first is full?
Linear Layout can either fill views horizontally or vertically so the 2nd row you are expecting cant to be done with linear layout only. you can try a horizontal scroll view for that to scroll horizontally. For the exact view-like flow that you described, you can use this 3rd party https://github.com/nex3z/FlowLayout
It can manage the flow of your dynamically inflated view such as if there is no space in the first line then it will put the next view in the second line.
also, you can use material design library chips https://material.io/components/chips/#usage
LinearLayout works exactly how it has to be because you specify it as horizontal. For such behavior, you need RecyclerView With GridLayoutManager or create your own layout;).
Actually it's doing exactly as it should be, LinearLayout is Linear!, and place its subviews in a single horizontal or vertical row.
My advice to you is that create dynamic horizontal LinearLayout as you already doing with TextViews. and put every 3 or 4 textviews (depending on screen size) inside it.
and put all LinearLayouts inside one vertical LinearLayout...
Of course in your case, it's not a good idea, the best thing you can do is to use recycler view. but I consider you have problem with that.
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 would like to reproduce this layout :
The blue lists are not scrollable, but the red panel (probably LinearLayout) is.
I already tried two ListView but I don't think it is the good way to do this, it doesn't work.
I read an article that advised to add multiple items to a LinearLayout. But in doing so, how to handle events on a single item, or use a BaseAdapter ?
I know I'm a little vague, but I'm having a little trouble explaining what I really want, I started Android development a few days ago.
Thanks.
I don't think it uses any ListView.
You can probably create something like this by having the red panel be a LinearLayout or RelativeLayout that's inside a ScrollView, so that it scrolls.
Then the blue "list" is probably not a ListView if it doesn't scroll. I guess it's just a bunch of regular views. So, something like this (pseudo code)
<ScrollView>
<LinearLayout>
<whatever layout for the green cell>
<include layout="blue_cell>
<include layout="blue_cell>
...
</LinearLayout>
</ScrollView>
And then you just create a layout for your blue cell, see info here: http://developer.android.com/training/improving-layouts/reusing-layouts.html
If you have a variable number of blue cells, you can just have the ScrollView and LinearLayout in XML, and inflate the blue cells layout programatically and add them to the LinearLayout
How do I go about implementing a button bar with buttons of different shapes and heights? As an example (please excuse my poor drawing skills for this quick mockup):
The example bar has 3 buttons, with the middle button (3) a different shape and height than the other 2 buttons (1,2). The button bar will be a view that is included and merged into other views so as to seem to float on top of the parent view.
I was thinking of implementing buttons 1 and 2 into a layout, and then button 3 as another layout that I then merge with the first two button's layout.
like my previous comrades said, you need some kind of layout or container that can have a background (if you wish for button #3 to hoover above it) then use relative layout for mixing the two the disadvantage of this other than complexity is that youcannot relate to the other two buttons since they reside in a different layout.
More elegant solution may be to have a special background drawable that can:
have a method setCurrentHeight() that will specify the height the actual viewable section should have the rest will be filled with transparent color.
override it's own draw so just before it's drawing it will have a callback called, call back you can register yourself to.
then you can register the callback in your activity to take the current position of the #3 button and set the height accordingly, this way you are still with one layout with special drawable as background.
A customized LevelDrawable might do the trick.
I would layout this bar as follows:
A RelativeLayout as a container for the rest, with height set to wrap_content and alignparentbottom = true
An ImageView for the bar
2 Buttons with a transparent background (Button 1 and 2)
Button 3 is a custom Button with a custom Image of a trapezoid as background
So you will have a Layout similar to this:
<RelativeLayout
...>
<ImageView
.../>
<Button
... Button 1 />
<Button
... Button 2 />
<Button
... Button 3 />
</RelativeLayout>
I don't exactly know that this will work, and I can't test it, but you might give something like this a try; I believe it can all be done elegantly through XML.
Have a RelativeLayout (id:mainLayout) that will contain all of your views, wrap_content for both dimensions.
Have a blank View as your first child that will serve as your background bar
Set the View's background color/image to what you want; layout_width to fill_parent; layout_height to wrap_content; layout_alignTop="#id/leftButton"; layout_alignBottom="#id/leftButton".
Add an ImageButton for your center button (id:bigButton), wrap_content for both dimensions; layout_centerInParent="true".
Add an ImageButton for your left button (id:leftButton), wrap_content for both dimensions; layout_toLeftOf="#id/bigButton"; layout_centerInParent="true".
Add an ImageButton for your right button (id:rightButton), wrap_content for both dimensions; layout_toRightOf="#id/bigButton"; layout_centerInParent="true".
In my head, I believe this works, but I could be off. Regardless, something to think about, and I hope it helps you find a solution. :)
Better you can tablelayout with different button styles or relative layout for button "3"
I'm having trouble developing the UI for my first lame "game".
Here is a screenshot.
I'm using a LinearLayout that contains a TableLayout with TableRows. It seems so tedious and hard to control the position of elements.
For example, to get things to line up, I've inserted empty TextViews to "push" other elements into place.
I've also added padding to the buttons to get them to be the size I want.
Is there a better way of doing this?
Thanks!
You definitely want to be using a Relative Layout for this.
You would be able to specify where each button is in relation to other buttons.
Absolutely AVOID developing your UIs the way you are currently trying. The TextViews will be different sizes for different distributions of Android, and will likely only look right on the device you tested them for.
EDIT:
If you need empty space, use the XML attribute android:weightSum="x" in the parent view and android:layout_weight="y" in the child. This will make the child take up (y/x) of the space allotted to it in the layout_height and layout_width.
EDIT:
I think another good bit of advice for this would be to use individual layouts for things like your "direction" buttons. You'll be able to handle where they are on the screen as a group, instead of having to move each individually.
You should use RelativeLayout to solve this problem. I've gone through a similar problem once...
I didn't use the the Android's default buttons, for I had my own images for the pressed and unpressed behaviors...
Let suppose you want to place the east "button". You could use a function like:
public void addEastImageView(RelativeLayout myBackgroundLayout, ImageView center, ImageView east, int leftPadding, int topPadding, int rightPadding, int bottomPadding){
RelativeLayout.LayoutParams rightSide = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
rightSide.addRule(RelativeLayout.RIGHT_OF, center.getId());
east.setPadding(leftPadding, topPadding, rightPadding, bottomPadding);
myBackgroundLayout.addView(east, rightSide);
}
The ImageView called "center" would be the one you called "i" in your image. The padding parameters would allow you to control the distance between the ImageViews. You can create functions like this one to add the "west", "south" and "north" buttons also: you just have to change the parameter "RelativeLayout.RIGHT_OF" to "RelativeLayout.LEFT_OF", "RelativeLayout.BELLOW" and "RelativeLayout.ABOVE" accordingly.
If you want some behavior for your ImageViews, you just have to set it in the setOnClickListener. You can then change your ImageView's "image" with setBackgroundResource, for example, and set the others logic behaviors you want.
Hope it helps :D
Use an AbsoluteLayout - it lets you state exactly where to put every element
http://mobiforge.com/designing/story/understanding-user-interface-android-part-1-layouts
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<Button
android:layout_width="188px"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="126px"
android:layout_y="361px"
/>
<Button
android:layout_width="113px"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="12px"
android:layout_y="361px"
/>