I'm working on developing a basic Android app for school and am having some issues with the layout. I am using a table layout with several rows.
The problem I'm having is with the width of items. When I add buttons to the top or bottom of the page, the text views in the other rows seem to inherit the button width. I need these text views to be narrow, about the size of a single character. It seems that the items width is set to the widest item in the table. I've tried several properties but have had no luck.
Any guidance would be appreciated.
Here's a screenshot -
Here's my code -
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="fill"
android:padding="20dp"
android:shrinkColumns="1" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:height="50dp"
android:width="50dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:width="50dp"
android:height="50dp" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:width="50dp"
android:height="50dp" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:width="50dp"
android:height="50dp" />
</TableRow>
Just add layout_span to your views according to how many columns you want the particular view to span.
For example, in your code:
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start"
android:layout_span="2" />
</TableRow>
Then for each TextView give a layout_span of 1.
Related
This is my aim:
I have a linearlayout where everything is centered both vertically and horizontally
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<EditText
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/top_edittext_form_bg"
android:hint="Email or Username"
android:layout_gravity="center_horizontal"
android:layout_margin="5pt"/>
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bottom_edittext_form_bg"
android:inputType="textPassword"
android:hint="Password"
android:layout_gravity="center_horizontal"
android:layout_margin="5pt" />
...
I have been messing around trying to take out the layout_margin, but this affects all elements (even the ones underneath these two).
Is there any way for me to simply combine these two edittexts like in the picture without affecting my linearlayout?
Try this:
...
<EditText
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/top_edittext_form_bg"
android:hint="Email or Username"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5pt"
android:layout_marginLeft="5pt"
android:layout_marginRight="5pt"
/>
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bottom_edittext_form_bg"
android:inputType="textPassword"
android:hint="Password"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="5pt"
android:layout_marginLeft="5pt"
android:layout_marginRight="5pt"
/>
...
Tell me if it works. :)
I am new to StackOverflow and I am not totaly shure if this is right but I want to make an android app for my fathers company, He is the owner of a Bed&Breakfirst and he wants an app to keep track of consumptions. I planed an interface of the product list where all consumptions can be chosen like this:
http://imgur.com/cwY4YtK
Now the problem is that we need to be able to add and remove products. otherwise i whold have done it like this:
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
android:id="#+id/widget46"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="#+id/widget47"
android:layout_width="48dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="267dp"
android:layout_y="2dp" />
<Button
android:id="#+id/widget52"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="266dp"
android:layout_y="43dp" />
<TextView
android:id="#+id/widget53"
android:layout_width="253dp"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_x="9dp"
android:layout_y="10dp" />
<TextView
android:id="#+id/widget54"
android:layout_width="251dp"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_x="8dp"
android:layout_y="50dp" />
<Button
android:id="#+id/widget55"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="267dp"
android:layout_y="85dp" />
<Button
android:id="#+id/widget56"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="267dp"
android:layout_y="128dp" />
<TextView
android:id="#+id/widget57"
android:layout_width="259dp"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_x="2dp"
android:layout_y="92dp" />
<TextView
android:id="#+id/widget58"
android:layout_width="256dp"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_x="6dp"
android:layout_y="136dp" />
</AbsoluteLayout>
But that can only be done if you know the ammount of products that you have. But wee need to add and remove products (Editing isen't neccesary.).
Also if we add to many products to fit on the screen I want to make a scroll option that can scroll trough all products like that.
Is there any way to do those twoo things or is this immpossibile?
A1:
Use TableLayout (or GridLayout etc) and page change buttons.
(This is easier.)
In this pattern, table (in layout) has fixed count rows.
Set OnClickListener to next / prev button to update each cell (text views) text.
(ex: page1: product name of row 0 to 4 is shown, page2: row 5 to 9 is shown)
OnClickListeners of each buttons next to cell text views needs to be modified too.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_01"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 01" />
<Button
android:id="#+id/button_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_02"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 02" />
<Button
android:id="#+id/button_02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_03"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 03" />
<Button
android:id="#+id/button_03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_04"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 04" />
<Button
android:id="#+id/button_04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_05"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 05" />
<Button
android:id="#+id/button_05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Prev" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Next" />
</LinearLayout>
</LinearLayout>
A2:
Use ScrollView that contains TableLayout (or GridLayout etc.) inside.
In this pattern, table (in layout) row count must be changed to suit your data count.
(Create/remove TableRows in your code and add/remove them from table)
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_01"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 01" />
<Button
android:id="#+id/button_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_02"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 02" />
<Button
android:id="#+id/button_02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>
</ScrollView>
for A1 and A2:
res/values/dimens.xml
<resources>
<dimen name="text_view_width">250dp</dimen>
</resources>
You might want to use android listview or gridview, whatever suits you. Here is a good tutorial on how to use a list view.
So I have a layout, everything is fine besides this annoying button.
My layout consists of three Layouts, one being the header. And the other two displaying time and date. But in the CardView, I wish to add a Button under the time (TextView). But for some reason, it keeps going to the left? I've tried dragging it around but it doesn't seem to work.
My question is, how can I make the Button lay itself under the TextView?
The code below is the layout -
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/bg_card" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mybutton"
android:text="Button" />
<com.activelauncher.MyTextView
android:id="#+id/time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:textSize="30sp"
android:text="10:08 PM"
android:textColor="#6b6b6b"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
Set android:orientation = "vertical" in LinearLayout
and keep Button code after Your com.activelauncher.MyTextView control code.
Check the following code.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/bg_card"
android:orientation="vertical" >
<com.activelauncher.MyTextView
android:id="#+id/time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="10:08 PM"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#6b6b6b"
android:textSize="30sp" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mybutton"
android:text="Button" />
</LinearLayout>
// try this way,hope this will help you...
<FrameLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/bg_card" >
<com.activelauncher.MyTextView
android:id="#+id/time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:textSize="30sp"
android:text="10:08 PM"
android:textColor="#6b6b6b"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/mybutton"
android:layout_gravity="left|center_vertical"
android:text="Button" />-
</FrameLayout>
Here is what is looks like and here is my XML code.
Can someone please post the fixed XML layout code for me and explain what I am doing wrong? I want the - symbol on the left to be all of the way left, just like the > symbol on the right side. The black text should be just to the right of the - symbol.
<?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">
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="44dip"
android:stretchColumns="0"
android:divider="#null"
>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/infocells"
android:divider="#null" >
<ImageView
android:id="#+id/imgDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/minus" />
<TextView
android:id="#+id/txtKey"
android:text="Some text"
android:textSize="16dip"
android:textStyle="bold"
android:layout_marginLeft="8dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
android:layout_weight="1.0"
android:layout_marginTop="11dp"
android:layout_marginBottom="6dp"
android:textColor="#color/black"
/>
<TextView
android:id="#+id/txtValue"
android:text="Some text"
android:textSize="16dip"
android:layout_marginRight="8dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:layout_weight="1.0"
android:layout_marginTop="11dp"
android:layout_marginBottom="6dp"
android:textColor="#color/darkblue"
/>
<ImageView
android:id="#+id/imageView1"
android:layout_marginTop="7dp"
android:layout_marginRight="7dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrow" />
</TableRow>
</TableLayout>
</LinearLayout>
Why don't you make use of RelativeLayout and using various property of it you can align your TextView and ImageView according to your other views.If u want to set a - to the left then make use android:layout_alignParentLeft="true" and android:layout_alignParentLeft="true" for you > to set it to the right of the layout
In your ImageView you can set your X position using translationX like something below:
<ImageView
android:id="#+id/imgDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:translationX="-25"
android:src="#drawable/minus" />
Just try it. This is a quick solution only.
Here's an idea on how you can do it. Give it a try.
<RelativeLayout>
<ImageView
android:id="#+id/imgDelete"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/txtKey"
android:layout_toRightOf="#+id/imgDelete" />
<TextView
android:id="#+id/txtValue"
android:layout_toRightOf="#+id/txtKey" />
<ImageView
android:id="#+id/imageView1"
android:layout_alignParentRight="true" />
</RelativeLayout>
once more: me.
I have a TableLayout (http://imgur.com/XYdcg) for my "SingleItemAdvancedView" how i like to call it ;)
The thing is, I want the data [the TextViews which don't have string *Lbl as android:text set] (so NOT the description like : "name:" , "id:" etc.) to be displayed on the right side of the whole display, not like it's now ( they are displayed right next to the left table-column). I tried to align the layout to the right side, as well as only the text (with layout_gravity and gravity only). everything didn't work. My widths are all set to fill_parent , so I simply don't understand why. Help needed! Thanks!
My XML for the activity looks like this:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableRow>
<TextView android:text="#string/idLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView android:text=""
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/itemidv" />
</TableRow>
<TableRow>
<TextView android:text="#string/nameLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text=""
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/namev" />
</TableRow>
<TableRow>
<TextView android:text="#string/amountLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text=""
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/amountv" />
</TableRow>
<TableRow>
<TextView android:text="#string/unitLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text=""
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/unitv" />
</TableRow>
<TableRow>
<TextView android:text="#string/ppuLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text=""
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/ppuv" />
</TableRow>
<TableRow>
<TextView android:text="#string/totalLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text=""
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/totalv" />
</TableRow>
<TableRow>
<TextView android:text="#string/commentLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text=""
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/commentv" />
</TableRow>
<TableRow>
<TextView android:text="#string/enterqrLbl"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text=""
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/qrcodev" />
</TableRow>
<Button android:text="#string/delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/deleteItemBtn"
android:layout_marginTop="20dp"
android:onClick="btnListener" />
</TableLayout>
You could add android:stretchColumns="0" to TableLayout. So you would have something like this:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="0">
If you want both columns to stretch equally you could use '*' instead of '0'.