How to add space between custom spinner items? - android

I've followed this tutorial Android Widgets: Custom Spinner in Android and made a custom Spinner that has an image and a text view as items, but for some reason there is no space between the items.
At the moment it looks like that when it's not clicked (which is fine):
And when I click it, it looks like that:
While the default one has plenty of space between the items:
This is the xml code for the spinner:
<Spinner
android:id="#+id/languageSpinner"
style="#android:style/Widget.Holo.Light.Spinner"
android:layout_width="110dp"
android:layout_height="40dp"
android:layout_marginStart="30dp"
android:prompt="#string/select"
android:spinnerMode="dropdown"/>
And this is the xml for the custom row layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/language"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_gravity="center_vertical"
android:textColor="#color/black"
android:layout_marginStart="10dp"
android:layout_marginBottom="2dp"/>
</LinearLayout>
Does anybody have an idea what I do wrong?
EDIT: After some of the suggestions, the space between the items is added but then the item that is selected in the spinner cannot be seen properly, I am attaching an image:

custom row layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp">
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/language"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_gravity="center_vertical"
android:textColor="#color/black"
android:layout_marginStart="10dp"
android:layout_marginBottom="2dp"/>
</LinearLayout>
</LinearLayout>

You only need add the attribute lineSpacingExtra in your textview.
Example:
<TextView
android:id="#+id/language"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_gravity="center_vertical"
android:textColor="#color/black"
android:layout_marginStart="10dp"
android:layout_marginBottom="2dp"
android:lineSpacingExtra="3dp/>
--> android:lineSpacingExtra="3dp

try this way
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:layout_marginBottom="10dip"
android:layout_marginLeft="15dip"/>
<TextView
android:id="#+id/country"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:layout_marginBottom="10dip"
android:layout_marginTop="10dip"
android:textColor="#000000" />
</LinearLayout>

Related

Android ListView inside ListView Cut the data

In android application I use listview inside listview,
But the list view cut the data
the item is cut of
the other items I don't see at all
Here is the image shown that the single item is cut of, and the second item does not shown at all.
Any idea how can I change the height to be dynamic with the content
Thanks
First List View Item
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
android:padding="10dp">
<ImageView
android:id="#+id/approvedIcon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_marginTop="5dp"
android:layout_marginRight="15dp"
android:layout_marginBottom="5dp"
android:gravity="center_vertical"
app:srcCompat="#android:drawable/btn_star_big_on" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/travelLocation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:textStyle="bold"
android:textSize="20sp"
android:layout_weight="1"
android:text="TextView" />
<TextView
android:id="#+id/travelDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<TextView
android:id="#+id/countCompanies"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/companiesListView"
/>
</LinearLayout>
</LinearLayout>
Second list view item
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal">
<TextView
android:id="#+id/cidTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="11sp"
android:layout_marginRight="3dp"
android:layout_weight="1"
android:text="TextView" />
<TextView
android:id="#+id/companyName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:text="TextView" />
<TextView
android:id="#+id/comapnyAddedDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:text="TextView" />
<Button
android:id="#+id/confirmButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
style="#style/Widget.MaterialComponents.Button.TextButton"
android:text="Accept" />
</LinearLayout>
First use RecyclerView.
If you show the XML it will be helpful.
For the dynamic height use wrap_content for the text

How to create correctly the following design

So the design that i want is similar to this
enter image description here
What i have done so far is this :
<?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="horizontal"
android:paddingTop="20dp"
android:paddingStart="20dp"
android:paddingEnd="20dp">
<ImageView
android:layout_width="120dp"
android:layout_height="180dp" />
<LinearLayout
android:layout_width="200dp"
android:layout_height="180dp"
android:orientation="horizontal"
android:background="#FFF"
android:layout_marginStart="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Article Title"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:layout_marginStart="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_gravity="end"
android:gravity="end"
android:text="10/11/2017"
android:paddingTop="10dp"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TEXT"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
I don't undesrtand how can i make the same ui usingLinearLayout.
I'm using LinearLayout so that i can use it with recyclerView later on, this design will be a list, can some one tell me what am i doing wrong?
Anyone have a clue about this ?
You don't have to use LinearLayout for RecyclerView items. You can use any layout for that.

Align checkbox right most side in a listview

I want to allign the checkboxes in a list view to right most part of the screen.
my Layout is shown below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="9"
android:orientation="vertical">
<TextView
android:id="#+id/nameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:textSize="30sp" />
<TextView
android:id="#+id/numberTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Number"
android:textSize="25sp" />
</LinearLayout>
<CheckBox
android:id="#+id/checkBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right|center"
android:layout_weight="2"
android:gravity="right|center" />
But When i run this i get the output as checkboxes right next to the textview
Found mistake.. its in mainactivity.. i have put the the width of listview as wrap content instead of fill parent
Use RelativeLayout for ChechBox Section and Add android:layout_alignParentRight="true" .Try this way ,Let me inform .
Okay,You can set 2 Textview and ChechBox on same row using layout weight (Linear Layout). And set gravity,layout gravity right for ChechBox.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/nameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:textSize="30sp" />
<TextView
android:id="#+id/numberTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Number"
android:textSize="25sp" />
</LinearLayout>
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
Check this one
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/nameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:textSize="30sp" />
<TextView
android:id="#+id/numberTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Number"
android:textSize="25sp" />
</LinearLayout>
<CheckBox
android:id="#+id/checkBox"
android:layout_width="25dp"
android:layout_height="wrap_content"
android:layout_gravity="right|center"
android:layout_marginRight="2dp"
android:gravity="right|center" />
</LinearLayout>

Android - LinearLayout like a table

I have a ListFragment that fills a LinearLayout with data.
In this layout I'm trying to make them looking like a table.
Here is my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#color/text_primary" >
<ImageView
android:id="#+id/homeImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/home"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="25dp" />
<TextView
android:id="#+id/score"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="20dp" />
<TextView
android:id="#+id/visitor"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="25dp" />
<ImageView
android:id="#+id/visitorImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"/>
</LinearLayout>
</LinearLayout>
But I would like to make something like this:
Where the images, the teams and the score will show perfectly aligned and centered.
I'm new in android, and I'm having problems to make this working.
My question is how can I make this working like the picture?
I have modified your xml to the below. Since you need list of them, use List view and give the below layout as each list item layout. Tutorial to make list view is here. All the elements within the layout are simple view (you can modify this to ImageView with your image), TextView and hence this will not be editable by the user (to give the picture kind of effect).
Will this be useful to you?
<?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="100dp"
android:orientation="horizontal" >
<View
android:id="#+id/homeImage"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright"/>
<TextView
android:id="#+id/home"
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="25dp"
android:text="TEAM ONE"/>
<TextView
android:id="#+id/score"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="20dp"
android:text="X - X"
/>
<TextView
android:id="#+id/visitor"
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="25dp"
android:text="TEAM TWO"/>
<View
android:id="#+id/visitorImage"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#android:color/holo_blue_bright"/>
</LinearLayout>

List view item layout

I have this layout which is a row item of a ListView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:clickable="true"
android:gravity="center" >
<ToggleButton
android:id="#+id/taskActiveToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="ToggleButton" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/taskNameTextView"
android:layout_width="200dp"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/taskScheduleTextView"
android:layout_width="200dp"
android:layout_height="wrap_content" />
</LinearLayout>
<Button
android:id="#+id/taskMenuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="..." /></LinearLayout>
I am having troubles adding another button to left of the (...) button.
I want to add the button so the row will keep its proportions (take all width of the line)
Any ideas?
As far as I can see, you are using horizontal LinearLayout as a root layout for your items. I would change it to RelativeLayout. Also if you need your layout occupy the whole width - you need to get rid of 200dip hardcoding and replace it with match_parent
Here is what I got using RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ToggleButton
android:id="#+id/taskActiveToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_alignParentLeft="true"
android:text="ToggleButton" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/taskActiveToggleButton"
android:layout_toLeftOf="#+id/anotherButton"
android:layout_centerVertical="true"
android:orientation="vertical" >
<TextView
android:id="#+id/taskNameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text" />
<TextView
android:id="#+id/taskScheduleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sub Text"/>
</LinearLayout>
<Button
android:id="#+id/anotherButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_toLeftOf="#+id/taskMenuButton"
android:text="But2" />
<Button
android:id="#+id/taskMenuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="5dp"
android:text="..." />
</RelativeLayout>

Categories

Resources