I am developing an Android app and the layout I am currently working on is a ConstraintLayout.
I need to place three elements below one "top" element, like this:
How it should be
Using horizontal and vertical chains I managed to do it like this:
How it currently looks like
However, I don't know how to place the first and the third small box also directly below the big box. I understand that I somehow need a vertical chain, but I don't know how to do it because I only have one big box I can chain them to and I already used it for the small box in the middle.
The only thing I can think of is to add e.g. TextViews without a text to both sides of the big box and then chain the other two boxes to them, but is there maybe a more elegant solution to this?
Thanks
You can follow something like the following code snippet to achieve your desired UI,
<ConstraintLayout>
<View android:id="#+id/topView" />
<View
android:id="#+id/bottomView1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/topView" />
<View
android:id="#+id/bottomView2"
app:layout_constraintEnd_toStartOf="#id/bottomView3"
app:layout_constraintStart_toEndOf="#id/bottomView1"
app:layout_constraintTop_toBottomOf="#id/topView" />
<View
android:id="#+id/bottomView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/topView" />
</ConstraintLayout>
Related
Why all my controls(buttons, textfields) are all in upper left of my emulator when I test run it?
When you first add widgets to your App, it automatically goes to the Top-Left of the screen. Try adding some Constraints to your widgets.
To make a View position in the center of your App, add these lines of code to the bottom of a widget in your XML:
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
Example:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
/>
It Looks like you may be using a constraintLayout. Make sure that in your layout you have a vertical and horizontal constraint set on each control.
Your views are not setup up correctly in your layout. First of all, if you could give the code for your layout (activity_main.xml or something similar) it will be easier to solve your problem.
The likely culprit is either that you are using a RelativeLayout and haven't set the view to be in relative position to another or, more likely, that you are using a ConstraintLayout and haven't linked your views correctly.
If you are using constraint layout the easiest way to link your views is from the Design tab, looking at the UI of your app. Click your TextView/EditText/etc and drag from the little squares that appear on the sides to literally link to either the side of the screen or to another view.
The texts can be entered into them . Only these two text widgets are possible in the given activity. I would want to know the structure , I would have to employ to get result as such.
I am still in learning phase.
There's a lot of ways how to achieve that. I suggest you to start with reading this thoroughly to learn how to build layouts on Android.
In general, you can add spacing among views by adding some margin and/or padding.
If you want to replicate the particular design quickly, do this:
Have vertical LinearLayout as your root layout (with gray background).
Add two CardViews (one for each box). That will add the
background and spacing.
Add other views to those CardViews.
To give you something to work on
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> //Elements inside this will be added vertically on the screen
<EditText
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="10dp"
android:hint="First edittext"/>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:hint="Second edittext"/>
</LinearLayout>
This is the basic structure on the image you showed. Expirement with it. Add your desired borders by using shapes and etc.
I am trying to create a table/grid for some items within my app and I would like to have a border around each cell to divide the items up and have a coherent association of the setting with the item. This app will be used in an industrial setting where there may be people unfamiliar with Android that need to use this, thus trying to make it as easy as possible.
The table/grid will contain TextView, EditText, Spinner, and Button, and will also be scrollable (via ScrollView parent).
I read about the GridView and found that it (seems) to only be able to get items programmatically, please correct me if I am wrong. I felt that this was unnecessary since I know what items I want and where. Also, I have not tried adding items to a layout programmatically yet so I figured I would try the other options first. Also, the GridView documentation does not say one way or the other if border lines are automatically shown, or if you can have them shown at all.
I started with a TableLayout and was able to get everything except the border lines to work. I tried android:divider to get the lines but that didn't work. One thought I had was to create a bunch of TextViews with black backgrounds and ~2dp widths/heights to make my own border lines. This feels like a huge waste though. Then I also read the TableLayout documentation and found this: "TableLayout containers do not display border lines for their rows, columns, or cells."
I then tried the GridLayout and had the same results as the TableLayout. I tried padding and margins, neither worked. Also, the GridLayout documentation states: "The grid is composed of a set of infinitely thin lines that separate the viewing area into cells."
My questions are:
Is there an attirbute that I missed in TableLayout or GridLayout that will give me border lines via the xml?
If no, then will the GridView give me the lines I want?
Will I be able to add all the perviously mentioned items I want to the GridView?
I was actually able to achieve the desired look by setting the android:background="#000000" within the GridLayout view and then in the child items I set the android:background="#8CDD81" (just some green color) and combined with android:layout_margin="2dp" I was able to get the "grid" lines that I wanted. Thanks to CommonsWare though for getting me thinking in a new direction that turned into a solution.
EDIT:
This does not work quite as anticipated. You need the android:layout_alignLeft/Right which are only available via RelativeLayout in order to get just the right width on the child items. Haven't tested this yet using this idea, child items within RelativeLayout within GridLayout.
Is there an attirbute that I missed in TableLayout or GridLayout that will give me border lines via the xml?
No.
If no, then will the GridView give me the lines I want?
No.
Will I be able to add all the perviously mentioned items I want to the GridView?
Yes, though how well something like a Spinner will work, I can't say.
The simplest way, off the top of my head, to give you the lines you seek is to have each cell of the TableLayout or GridLayout be some container containing the widget(s) for that cell, where you give the container a background that is your line. A ShapeDrawable could be defined in XML for that background, which will be nicely resizeable based upon the actual requirements of the cell.
For future visiters this is how I did it with TableLayout:
table.xml
<TableLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#969696">
<!-- table heading -->
<TableRow>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:background="#d2d2d2"
android:layout_margin="1dp"
/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Address"
android:background="#d2d2d2"
android:layout_margin="1dp"
/>
</TableRow>
<!-- table data -->
<TableRow>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ahtisham"
android:layout_margin="1dp"
android:background="#f1f1f1"
/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kashmir"
android:layout_margin="1dp"
android:background="#f1f1f1"
/>
</TableRow>
</TableLayout>
I am developing an android app, where the entire UI is being developed in Java, since there's alot of dynamic stuff involved, like i might have to add buttons and checkboxes, depending on the user interaction.
I want to know how to position 2 different views relative to one another?
if i was using XML, i would've written like this:
<RelativeLayout ...
<EditText android:id="#+id/text1" .... />
<Button android:id="#+id/button1"
android:layout_toRightOf="#id/text1" .... />
</RelativeLayout>
Now how do i do the same thing using Java?
This is similar: How to lay out Views in RelativeLayout programmatically?
And this looks exactly like your question: Setting parameters on child views of a RelativeLayout
I'm trying to put together an Android view that has several elements stacked on top of one another. Some of these elements need to have HTML formatting applied, and I plan to stack enough of them that they will run off the screen, requiring a ScrollView. As an example, I would expect the layout to look something like this:
<ScrollView>
<LinearLayout vertical>
<TextView />
<Button />
<Html />
<TextView />
<Button />
<Html />
Etc...
</LinearLayout>
</ScrollView>
The obvious choice up front for the HTML portion is a WebView, since it renders everything exactly as I would want to see it, but the problem is that the WebView begins to fall apart when used in a ScrollView. It's difficult to get it to even show up without some manual refreshing.
Given that, what would be the most effective way to display this type of content?
Option #1: As Sameer Segal indicates, use Html.fromHtml() and TextView.
Option #2: Render the whole thing in HTML. There is nothing particularly magic about Android TextView and Button.
Option #3: Choose some other UI model that would eliminate the need for the ScrollView.