I am working on a Android Project in which I need to design a User Interface like below image-
I need to show some text on top as Student App, then below that there will be different objects of a Student. Suppose if I have 10 Students then there will be 10 rows for each student. And in each row there will be image on left hand side, then in the middle some text will be there and then on the right hand side there will be another three text.
I made some progress and I have below code. But it's not exact the way I am looking for in the image.
<ImageView
android:id="#+id/icon"
android:src="#drawable/action_eating"
android:layout_width="60dp"
android:layout_height="60dp" />
<LinearLayout
android:orientation="vertical"
android:layout_gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp" >
<TextView
android:id="#+id/text1"
android:text="test"
android:textColor="#333"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp" />
<TextView
android:id="#+id/text2"
android:text="test2"
android:textColor="#6699CC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp" />
</LinearLayout>
And I need to make that list scrollable.
Can anyone help me out with this? Thanks for the help.
Using Table view how you can create column
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<!-- 2 columns -->
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<TextView
android:id="#+id/textView1"
android:text="Column 1"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/button1"
android:text="Column 2" />
</TableRow>
<!-- edittext span 2 column -->
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<EditText
android:id="#+id/editText1"
android:layout_span="2"
android:text="Column 1 & 2" />
</TableRow>
<!-- just draw a red line -->
<View
android:layout_height="2dip"
android:background="#FF0000" />
<!-- 3 columns -->
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<TextView
android:id="#+id/textView2"
android:text="Column 1"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/button2"
android:text="Column 2" />
<Button
android:id="#+id/button3"
android:text="Column 3" />
</TableRow>
<!-- display this button in 3rd column via layout_column(zero based) -->
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<Button
android:id="#+id/button4"
android:layout_column="2"
android:text="Column 3" />
</TableRow>
<!-- display this button in 2nd column via layout_column(zero based) -->
<TableRow
android:id="#+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<Button
android:id="#+id/button5"
android:layout_column="1"
android:text="Column 2" />
</TableRow>
</TableLayout>
You need a ListView for your students list, and create a custom class that derives from ArrayAdapter<Student> and override getView(). The list of student objects gets passed to the adapter and the adapter gets passed to the ListView. If you're doing this for a class and your intention is to learn, this is great stuff to get familiar with and is very practical for professional Android development. For extra credit, find a video on YouTube called "World of ListView" from Google I/O 2012 and make your lists faster than the rest of your classmates.
Related
Basically I need a TableLayout which contains multiple rows and in every row there must be a different counter (which I can add or subtract 1 by pressing one of the two buttons in the row).
Here you can see a clear example:
content_main.xml
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="55dp">
<TextView
android:text="Pizza Margherita"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView27"
android:layout_weight="10"
android:layout_column="1" />
<Button
android:text="-"
android:layout_height="wrap_content"
android:id="#+id/minusButton"
android:layout_weight="1"
android:layout_column="1"
android:layout_width="50dp" />
<TextView
android:text="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/result"
android:layout_weight="5"
android:layout_column="1"
android:textAlignment="center" />
<Button
android:text="+"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:id="#+id/plusButton"
android:elevation="0dp"
android:layout_weight="0.5"
android:layout_column="1" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="10dp">
<TextView
android:text="Pizza Salame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView27"
android:layout_weight="10"
android:layout_column="1" />
<Button
android:text="-"
android:layout_height="wrap_content"
android:id="#+id/minusButton2"
android:layout_weight="1"
android:layout_column="1"
android:layout_width="50dp" />
<TextView
android:text="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/result2"
android:layout_weight="5"
android:layout_column="1"
android:textAlignment="center" />
<Button
android:text="+"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:id="#+id/plusButton2"
android:elevation="0dp"
android:layout_weight="0.5"
android:layout_column="1" />
</TableRow>
</TableLayout>
I have no idea how to work on MainActivity.java.
By far I tried to implement an array (without success) and write a separate class for every single counter (but it resulted too redundant).
Any tips?
If I understood correctly your question, I'd suggest to you to implement a custom view logic for your counter and and adapter to turn it more scalable.
Basically you'll have:
counter_layout.xml - Declare the components
CounterView.java - Inflate the layout and control the logic of counter
CounterAdapter.java - Instantiate a multiple intances of a CounterView
Then, you could use an ListView in your Activity that will show the adapter's content.
Ofcourse that you will need manage the state of each CounterView. But it is easy and maybe it'd be a next step of your project.
This is the layout
As you can see, I'm trying to stretch the text box so it will be next to the "NOPE" button. I'm being restricted by the column's size, and the text box's size, which I don't know how to change.
XML:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1" >
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/editBtn"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:layout_column="2"
android:onClick="editEvent"
android:text="EDIT" />
<TextView
android:id="#+id/attendingEventInListviewRow"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_column="38"
android:height="30sp"
android:tag="Events2goName"
android:text="Events2go"
android:textColor="#000000"
android:textSize="22sp"
android:textStyle="normal" />
<Button
android:id="#+id/cancel_arrive"
style="?android:attr/buttonStyleSmall"
android:layout_width="130dp"
android:layout_height="36dp"
android:layout_column="37"
android:layout_gravity="right"
android:layout_weight="0.08"
android:onClick="selectCancelArrive"
android:text="Nope" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent" >
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent" >
</TableRow>
If you set width with hard code using dp it will not work properly with multiple screen. I don't know which screen size you testing you app .. you can set TextView android:layout_width="100dp" it will work for you I hope..
But best is
You can set android:weightSum in TableRow and set android:layout_weight Views under TableRow ... below code is done for you. And it will fit with all screen size..
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="10">
<Button
android:id="#+id/editBtn"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="36dp"
android:layout_column="2"
android:layout_weight="2"
android:onClick="editEvent"
android:text="EDIT" />
<TextView
android:id="#+id/attendingEventInListviewRow"
android:layout_width="0dp"
android:layout_weight="6"
android:layout_height="wrap_content"
android:layout_column="38"
android:height="30sp"
android:tag="Events2goName"
android:text="Events2go"
android:textColor="#000000"
android:textSize="22sp"
android:textStyle="normal" />
<Button
android:id="#+id/cancel_arrive"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="36dp"
android:layout_column="37"
android:layout_gravity="right"
android:layout_weight="0.08"
android:onClick="selectCancelArrive"
android:text="Nope" />
</TableRow>
try this...
<TextView
android:id="#+id/attendingEventInListviewRow"
android:layout_width="0dp"
android:layout_weight=""
android:layout_height="wrap_content"
android:layout_column="38"
android:height="30sp"
android:tag="Events2goName"
android:text="Events2go"
android:textColor="#000000"
android:textSize="22sp"
android:textStyle="normal" />
For example, if you have 3 columns (100% weight) and you want the first column use a 40% of the total weight, put android:layout_weight="0.4",if the second column use a 50% put android:layout_weight="0.5" and the 3rd and last column uses 10% default android:layout_weight="0.1"
I think it might have something to do with tablelayout, but there are 2 buttons in the layout and neither one of them I can change the width of, they fill up the screen but one of them is really small, the other takes up about 80% of the screens width. I've tried padding, layout_width, width, fill parent and changing other things but nothing works.
I can freely change the height but the width is uncontrollable, and the handles on the buttons don't resize it either.
this is what it looks like
http://postimg.org/image/b1f77b44v/
<TextView
android:id="#+id/lblName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/name"
android:textColor="#color/field_title" />
<EditText
android:id="#+id/editName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="3dip"
android:textColor="#color/field" >
<requestFocus android:layout_width="match_parent" />
</EditText>
<TextView
android:id="#+id/lblDesc"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/description"
android:textColor="#color/field_title" />
<EditText
android:id="#+id/editDesc"
android:layout_width="match_parent"
android:layout_height="80dp"
android:inputType="textMultiLine"
android:maxWidth="180dp"
android:padding="3dp"
android:singleLine="false"
android:textColor="#color/field" />
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="50dp"
android:layout_height="500dp" >
<TextView
android:id="#+id/lblStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/status"
android:textColor="#color/field_title" />
<Button
android:id="#+id/StatusChangeButton"
android:layout_width="30dp"
android:layout_height="fill_parent"
android:background="#drawable/ButtonTest"
android:maxWidth="50dip"
android:text="#string/change"
android:textColor="#color/button_text"
android:width="40dp" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="50dp"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/lblduedate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/due_date"
android:textColor="#color/field_title" />
</TableRow>
<TableRow
android:id="#+id/tableRow5"
android:baselineAligned="true" >
<Button
android:id="#+id/btnCancel"
android:layout_width="fill_content"
android:layout_height="wrap_content"
android:text="#string/cancel"
android:textColor="#color/button_text" />
<Button
android:id="#+id/btnSave"
android:layout_width="60dp"
android:layout_height="50dp"
android:text="#string/save"
android:textColor="#color/button_text" />
</TableRow>
</TableLayout>
</LinearLayout>
You can use weight to specify the in ratio the portion of each button would take from the whole table raw width.
But I am not sure why you choose to use Table. the better approach is to use linear layouts.
<TableRow
android:id="#+id/tableRow5"
android:baselineAligned="true" >
<Button
android:id="#+id/btnCancel"
android:layout_width="fill_content"
android:layout_height="wrap_content"
android:text="#string/cancel"
android:textColor="#color/button_text"
android:layout_weight="1"/>
<Button
android:id="#+id/btnSave"
android:layout_width="fill_content"
android:layout_height="wrap_content"
android:text="#string/save"
android:textColor="#color/button_text"
android:layout_weight="1"/>
</TableRow>
try this instead of tableRow
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:id="#+id/l1" >
<Button
android:id="#+id/btnCancel"
android:layout_width="fill_content"
android:layout_height="wrap_content"
android:text="#string/cancel"
android:layout_heigh="1"<!---add this-->
android:textColor="#color/button_text" />
<Button
android:id="#+id/btnSave"
android:text="#string/save"
android:layout_heigh="1"<!---add this-->
android:textColor="#color/button_text" />
</LinearLayout>
I am trying to display a single list item after the user clicks on an item. However, I have noticed that the layout is messed up when there is too much text. Sometimes it's pushed half way, sometimes it's completely to the right side of the screen. I don't understand why this is happening. How can I resolve this issue? Please note I have the exact same layout in a popup dialog with no problems.
This is my XML code:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableLayout
android:id="#+id/add_spot_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="1"
android:stretchColumns="1" >
<TableRow
android:layout_marginBottom="1sp"
android:layout_marginTop="2sp" >
<TextView
android:id="#+id/nameDetails"
android:layout_width="fill_parent"
android:textSize="25sp"
android:textStyle="bold" />
</TableRow>
<!-- separator -->
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray" />
<TableRow
android:layout_marginBottom="2sp"
android:layout_marginTop="2sp" >
<TextView
android:layout_marginLeft="5sp"
android:text="#string/distance"
/>
<TextView android:id="#+id/distanceDetails" />
</TableRow>
<TableRow
android:layout_marginBottom="2sp"
android:layout_marginTop="2sp" >
<TextView
android:layout_marginLeft="5sp"
android:text="#string/address"
/>
<TextView android:id="#+id/addrDetails" />
</TableRow>
<TableRow
android:layout_marginBottom="2sp"
android:layout_marginTop="2sp" >
<TextView
android:layout_marginLeft="5sp"
android:text="#string/type"
/>
<TextView android:id="#+id/typeDetails" />
</TableRow>
<TableRow
android:layout_marginBottom="2sp"
android:layout_marginTop="2sp" >
<TextView
android:layout_marginLeft="5sp"
android:text="#string/terrain" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RatingBar
android:id="#+id/terrainDetails"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:isIndicator="true"
android:max="5"
android:numStars="5"
android:stepSize="1" />
</RelativeLayout>
</TableRow>
<TableRow>
<TextView
android:layout_marginLeft="5sp"
android:text="#string/difficulty" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RatingBar
android:id="#+id/difficultyDetails"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:isIndicator="true"
android:max="5"
android:numStars="5"
android:stepSize="0.1" />
</RelativeLayout>
</TableRow>
<TableRow
android:layout_marginBottom="2sp"
android:layout_marginTop="2sp" >
<TextView
android:layout_marginLeft="5sp"
android:text="#string/description" />
<TextView
android:id="#+id/descDetails"
android:gravity="top"
android:lines="2"
android:maxLines="2"
android:scrollHorizontally="false" />
</TableRow>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray" />
</TableLayout>
</ScrollView>
Here are some screenshots to show you what I mean:
What it should be:
What it shouldn't be:
Pushed to the right side of the screen
Too much text in description. Goes off the screen
Pushed only half way.
The size of a column in a TableLayout is given by its largest content.
The way you organized your layout, the title nameDetails is in the first column.
You'll notice that, in the cases you don't like, the second column is neatly aligned with the end of your title.
To solve this, either move the title out of the table layout, or use the android:layout_span attribute to span it on 2 columns
I believe this is happening because you have your title #+id/nameDetails as the first row of the table. It is including the length of this <textview> cell when it determines the size of the left hand side of the table.
Can you move that textview out of the tableview?
i've got a layout that looks like below. But ideally I want the buttons Save and Cancel to be 50% width each, next to each other. Can't quite seem to get them to work though.
Any suggestions?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<Button
android:id="#+id/btnMinus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="-" />
<EditText
android:id="#+id/txtCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btnPlus"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/btnPlus"
android:layout_toRightOf="#+id/btnMinus"
android:ems="10"
android:inputType="number" >
<requestFocus />
</EditText>
<Button
android:id="#+id/btnPlus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="+" />
<Button
android:id="#+id/btnGo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/btnMinus"
android:layout_toRightOf="#+id/button1"
android:maxWidth="100dp"
android:text="Save"
android:width="100dp" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/btnMinus"
android:text="Cancel" />
</RelativeLayout>
You shouldn't be using a RelativeLayout for this design. You should be using a LinearLayout.
Something like this outline (very stripped-down):
<LinearLayout android:orientation=vertical>
<LinearLayout android:orientation=horizontal>
<Button android:layout_width=100 /> <!-- Minus -->
<EditText android:layout_width=0 android:layout_weight=1 />
<Button android:layout_width=100 /> <!-- Plus -->
</LinearLayout>
<LinearLayout android:orientation=horizontal>
<Button android:layout_width=0 android:layout_weight=1 /> <!-- Cancel -->
<Button android:layout_width=0 android:layout_weight=1 /> <!-- Save -->
</LinearLayout>
</LinearLayout>
Your looking for android:layout_weight="0.5". This only works with LinearLayouts, though.
So what you could do is add a LinearLayout that contains your two buttons and set the weights then.
You should use a LinearLayout, inside the RelativeLayout, only for buttons, and give them the same android:layout_weight (1 and 1, 2 and 2, as you wish).