What is the correct layout for this structure? - android

What is the structure of such a layout? The text in the left column aligned to the right, the text of right column aligned to the left. Also rows are separated with a line. Thank you for hints!

You could make a ListView of your own items. That would give you a separator between all rows.
To set your own layout for ListView's item, you have to prepare your layout's xml file and set it like this:
yourListView.setAdapter(new ArrayAdapter<String>(this, android.R.layout.layout_file_for_your_item, items));
Item's layout (LinearLayout) could consist of 2 LinearLayouts. In first one (left) you'd have TextView that would be aligned right in parent. Second one (right) would have TextView aligned left in parent and margin-left set to some specific value to make a gap between two layouts.
Blue: ListView
Red: ListView's item (LinearLayout)
Green: First LinearLayout
Yellow: Second LinearLayout

You can try create listview field in your layout (with empty inside, not textviews or images) and then create another layout something like that:
Main layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="bla bla" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="bla bla 2" />
<!-- listview with populated items -->
<ListView
android:id="#+id/mylist"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
Populated items:
<TextView
android:id="#+id/itemleft"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:textStyle="bold"
android:gravity="right|center_vertical"
android:text="Location" />
<TextView
android:id="#+id/itemright"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:gravity="left|center_vertical"
android:text="Los Angeles, US" />
</LinearLayout>
Here is a preview of this settings:
There is of course only one item but it will be populated then. It's just a preview.
(Populated items will be used in listView later) Then try use for example base adapter implementation in you code, check here example: link. I hope you will understand it, however using custom listview wasn't the problem in this title :)

Related

Add Padding top in a Linear Layout

This is my linear layout:
It is too close to the top. I am trying to add some space to the top. I have tried using android:paddingTop but that does not work. How do I add space at top in linear layout?
XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:orientation="vertical"
android:paddingLeft="20dp"
android:paddingTop="200dp"
android:paddingRight="20dp"
android:paddingBottom="20dp">
<TextView
android:id="#+id/pNameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/comfortaa_bold"
android:textColor="#000000"
android:textSize="18sp" />
<TextView
android:id="#+id/pDescriptionTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/comfortaa_bold"
android:textColor="#000000"
android:textSize="18sp" />
<TextView
android:id="#+id/pTypeTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/comfortaa_bold"
android:textColor="#000000"
android:textSize="18sp" />
<TextView
android:id="#+id/pPriceTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/comfortaa_bold"
android:textColor="#000000"
android:textSize="18sp" />
<TextView
android:id="#+id/pQuantityTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/comfortaa_bold"
android:textColor="#000000"
android:textSize="18sp" />
</LinearLayout>
Given what you show in your image, it looks likely that you've already specified android:padding to give padding to all four edges. If that is the case, adding android:paddingTop won't do anything; the system will ignore that attribute in favor of the generic android:padding.
If, for example, you currently have android:padding="16dp", you'll have to delete that and replace it with something like this:
android:paddingTop="32dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingBottom="16dp"
If you are using ListView and want to add only some spacing above the very first item, then the situation is different. Instead of adding paddingTop to your item view, you have some choices.
Padding on the ListView
Add these two attributes to your ListView or RecyclerView tag:
android:paddingTop="32dp"
android:clipToPadding="false"
This is by far the easiest solution, but it will affect how the scrollbar is drawn, which you may not like.
Add a header view to the ListView
Create a layout file for a header view. I suggest using a <Space> tag if you just want some extra space at top:
<Space
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="32dp"/>
Then inflate this and add it to your ListView:
val header = inflater.inflate(R.layout.list_header, listView, false)
listView.addHeaderView(header)
By default, a divider will still appear between this header and your first list item. If you don't want that, you can disable it:
listView.setHeaderDividersEnabled(false)
Dynamic padding in getView()
In your adapter's getView() method, you can programmatically set the padding based on the item's position. First, define two dimen resources like this:
<dimen name="extra_padding">32dp</dimen>
<dimen name="normal_padding">16dp</dimen>
Then, in getView(), add code like this:
val paddingTop = when (position) {
0 -> resources.getDimensionPixelSize(R.dimen.extra_padding)
else -> resources.getDimensionPixelSize(R.dimen.normal_padding)
}
view.setPadding(view.paddingLeft, paddingTop, view.paddingRight, view.paddingBottom)

How to change the property of first content of List View in Android

I have created an expandable listView where I am showing text side by side more likely I wanna show a table of 2 columns there. For that, I have used the expandable list view and so far it looks like this(The image below).
But I want to change the color of the first line of this list. something like this(image below).
As for code, I have used two text views in a horizontal Linear Layout and with a custom adapter I am showing the data in the view. here's the XML.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/itemText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="end"
android:maxLines="1"
android:textSize="16sp"
android:text="item"/>
<TextView
android:id="#+id/itemText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="end"
android:maxLines="1"
android:textSize="16sp"
android:text="Item2"/>
</LinearLayout>
Can anyone suggest what should I do to achieve this?
In your adapter if position = 0
itemText.setBackgroundColor(int colour);
Also you should use RecyclerView instead of ListView

Decision: ListView or ScrollView

I need an Android Activity, which should show a field like a headline with an image and several dynamic generated items (1 to 100 I think) below it.
If I would not want the headsection to scroll, I would use a LinearLayout and put the headsection layout in it. Below this, I would add a ListView for scrolling the items, but I want the headsection to be scrolled to, as a top of the list.
Should I just put the stuff in a ScrollView or is there a better idea?
should show a field like a headline with an image and several dynamic generated items (1 to 100 I think) - use a ListView as it can recycle views (efficiency reason). Also, it's easier to change and maintain a list adapter than a complex UI structure.
If I would not want the headsection to scroll, I would use a LinearLayout and put the headsection layout in it. - Why not use a RelativeLayout that has the header on top and tha list occupies the rest of the height. This way you have the expected result.
but I want the headsection to be scrolled to, as a top of the list - then set the list header, or use different views in your listview and make your first item look different. More on this topic - search android listview different views in Google.
Either way to put it - use a ListView!
Have a ScrollView with a LinearLayout as it's child, and put your stuff into the LinearLayout. Remember ScrollViews can only have one child layout. That should work fine. Something like this:
ScrollView android:id="#+id/ScrollView02"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/aboutFormLinearLayout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF">
<TextView android:id="#+id/aboutFormVersionDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:singleLine="true"
android:text ="Version: "
android:textSize="15sp"
android:textColor="#000000"/>
<TextView android:id="#+id/aboutFormVersion"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:singleLine="false"
android:textSize="20sp"
android:textColor = "#000000"
android:layout_marginBottom ="20sp"/>
<TextView android:id="#+id/aboutFormCompanyDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:singleLine="true"
android:textSize="15sp"
android:text ="Company: "
android:textColor="#000000"/>
<TextView android:id="#+id/aboutFormCompany"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:singleLine="false"
android:textSize="20sp"
android:textColor = "#000000"
android:layout_marginBottom ="20sp"
/>
</LinearLayout>

Adding elements to a ListView expands it below other elements using RelativeLayout

In my activity i hava a ListView which has an ArrayAdapter as its adapter, and is updated dynamically. I am using RelativeLayout. At first, the ListView is empty, but I can see that it takes up space on the screen compared to before i added it. As soon as one element is added, it is expanded and shows this element. As soon as I add a second element, I only see the top of the second element and then it goes behind the message text element under. How can I solve this?
<Button
android:id="#+id/btnAddAttachment"
android:layout_marginTop="7dp"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_below="#id/sprType"
android:text="Add attachment"/>
<!--ATTACHMENTS LIST-->
<ListView
android:id="#+id/lstAttachments"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/btnAddAttachment">
</ListView>
<!-- MESSAGE TEXT -->
<EditText
android:id="#+id/txtMessage"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:layout_below="#id/lstAttachments"
android:layout_marginTop="7dp"
android:lines="10"
android:maxLines="10"
android:maxLength="500"
android:hint="Message text"
android:gravity="top|left"/>
What is the android:layout_height value of the RelativeLayout?
Try changing the ListView to have:
android:layout_height="fill_parent"
and do the same for the RelativeLayout that contains it.
You can then align the EditText below it to the bottom of the ListView, and make sure the list view is layout_above that EditText

TableRow in ListView Item

I have a ListView which each row of which has the following
1. TextView
2. Button
The TextViews can contain text of multiple lengths. So the list appears in an awkward way. I thought the way out will be to set each List item to a Table Row with 2 cells(TextView and Button) . Is there a way to do this? Or may be there is a better solution to this?
You could use Relative Layout to display the row. In the Relative Layout put a button on the right with align parent right as true, and then set the TextView to the left of the Button to match parent. Also you could specify the TextView to be single line and ellipsize as true at end. This is just an example
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:gravity="center_vertical"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:singleLine="true"
android:ellipsize="end"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_toLeftOf="#+id/button1"
android:text="This is your textView with a very long text. I hope this code serves your problem" />
</RelativeLayout>
You could also use 2 TextViews, that totally depends upon the text that you want to display.
LinearLayout and it's weight attribute. More in official docs http://developer.android.com/guide/topics/ui/layout/linear.html

Categories

Resources