i made another linear layout beside the first one by your help, but now after trying to add a new button in the left the button is not appearing even though i made wrap_content as i learned but still it's not appearing while the buttons in the first linearlayout are working perfectly i hope you can help and thanks
this is the main.xml
<?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="fill_parent"
android:gravity="right"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="اضغط على من تريد معرفة المزيد عنه"
android:padding="10dp"
/>
<Button
android:id="#+id/buttontype1"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="Start" />
<Button
android:id="#+id/button1"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="Start" />
<Button
android:id="#+id/button2"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="Stop"/>
<Button
android:id="#+id/button3"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="Start" />
<Button
android:id="#+id/button4"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Stop" />
<Button
android:id="#+id/button5"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="Start" />
<Button
android:id="#+id/button6"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="Stop"/>
<Button
android:id="#+id/button7"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="Start" />
<Button
android:id="#+id/button8"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="Stop"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="vertical" >
<Button
android:id="#+id/buttonkk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="HII"/>
</LinearLayout>
</LinearLayout>
Put everything inside a ScrollView
Try to set all your button with value android:layout_weight="1"
It allows you to achieve proportional distribution of elements within a LinearLayout.
Read that : http://ugiagonzalez.com/2012/01/19/android-linearlayout-distribution-explained-weight-and-sizes/
Related
This is my first app so sorry I know its not that good. My english neither.
I got a problem with my xml design: I want 2 Buttons and 2 TextViews in one line and to fill the whole line. At the moment it looks like that:
but it gets even worse:
My code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<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:layout_weight="0"
android:text="-" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="+" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="-" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="+" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="-" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<Button
android:id="#+id/button13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="+" />
</LinearLayout>
<!--
skipping additional rows of identical structure
-->
</LinearLayout>
The problem is that you use wrap_content on the children of the linear layout. there are 2 solutions to your problem one is to use match parent on the text views and add gravity centre to them like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="-" />
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="centre"
android:text="TextView" />
<TextView
android:id="#+id/textView13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="centre"
android:text="TextView" />
<Button
android:id="#+id/button13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="+" />
</LinearLayout>
And another solution is to use a constraint layout with allows you to spread the child views using chains.
If I understood correctly, you should try for each of your LinearLayout :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="4" // number of sub items
>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="-" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
<TextView
android:id="#+id/textView11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
<Button
android:id="#+id/button11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="+" />
Also, you should take a look at RecyclerViews and create your own adapter and rows. It will be much easier to deal with.
I have just started learning to programme for Android in Java and as my first program, I decided to write a simple TicTacToe game. Since I am new to Android Studio I don't know how the alignment works here.
I am perfectly satisfied with the alignment of buttons in content_main.xml but for some reason when I run the code in the emulator they get shifted to the left.
Just in case if it might come in handy I attach the xml code to this post
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.anar.testnewest.MainActivity"
tools:showIn="#layout/activity_main">
<RelativeLayout
android:layout_width="368dp"
android:layout_height="442dp"
android:layout_centerInParent="true"
android:textAlignment="center"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="34dp">
<Button
android:id="#+id/btn1"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginTop="99dp"
android:onClick="btn1" />
<Button
android:id="#+id/btn2"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn1"
android:layout_alignBottom="#+id/btn1"
android:layout_toLeftOf="#+id/btn3"
android:layout_toStartOf="#+id/btn3"
android:onClick="btn2" />
<Button
android:id="#+id/btn3"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn2"
android:layout_alignBottom="#+id/btn2"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:onClick="btn3" />
<Button
android:id="#+id/btn4"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/btn1"
android:layout_marginTop="26dp"
android:onClick="btn4" />
<Button
android:id="#+id/btn5"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn4"
android:layout_alignBottom="#+id/btn4"
android:layout_centerHorizontal="true"
android:onClick="btn5" />
<Button
android:id="#+id/btn6"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn5"
android:layout_alignEnd="#+id/btn3"
android:layout_alignRight="#+id/btn3"
android:onClick="btn6" />
<Button
android:id="#+id/btn7"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/btn4"
android:layout_alignRight="#+id/btn4"
android:layout_below="#+id/btn4"
android:layout_marginTop="22dp"
android:onClick="btn7" />
<Button
android:id="#+id/btn8"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn7"
android:layout_alignBottom="#+id/btn7"
android:layout_alignLeft="#+id/btn5"
android:layout_alignStart="#+id/btn5"
android:onClick="btn8" />
<Button
android:id="#+id/btn9"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn8"
android:layout_alignBottom="#+id/btn8"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:onClick="btn9" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="70dp"
android:text="TicTacToe"
android:textColor="#color/colorAccent"
android:textSize="40sp" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
Thanks in advance for your time and help guys :)
If you want to the right layout .
Just add app:layout_constraintLeft_toLeftOf="parent" and app:layout_constraintTop_toTopOf="parent" to your RelativeLayout .
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="368dp"
android:layout_height="442dp"
android:layout_centerInParent="true"
android:textAlignment="center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/btn1"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginTop="99dp"
android:onClick="btn1"/>
<Button
android:id="#+id/btn2"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn1"
android:layout_alignBottom="#+id/btn1"
android:layout_toLeftOf="#+id/btn3"
android:layout_toStartOf="#+id/btn3"
android:onClick="btn2"/>
<Button
android:id="#+id/btn3"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn2"
android:layout_alignBottom="#+id/btn2"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:onClick="btn3"/>
<Button
android:id="#+id/btn4"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/btn1"
android:layout_marginTop="26dp"
android:onClick="btn4"/>
<Button
android:id="#+id/btn5"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn4"
android:layout_alignBottom="#+id/btn4"
android:layout_centerHorizontal="true"
android:onClick="btn5"/>
<Button
android:id="#+id/btn6"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn5"
android:layout_alignEnd="#+id/btn3"
android:layout_alignRight="#+id/btn3"
android:onClick="btn6"/>
<Button
android:id="#+id/btn7"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/btn4"
android:layout_alignRight="#+id/btn4"
android:layout_below="#+id/btn4"
android:layout_marginTop="22dp"
android:onClick="btn7"/>
<Button
android:id="#+id/btn8"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn7"
android:layout_alignBottom="#+id/btn7"
android:layout_alignLeft="#+id/btn5"
android:layout_alignStart="#+id/btn5"
android:onClick="btn8"/>
<Button
android:id="#+id/btn9"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn8"
android:layout_alignBottom="#+id/btn8"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:onClick="btn9"/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="70dp"
android:text="TicTacToe"
android:textColor="#color/colorAccent"
android:textSize="40sp"/>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
Output
Just add these properties to RelativeLayout,
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
It is better to have Start and End than Left and Right properties. B'cos it also supports RTL layouts.
I am working with android and I have designed my xml in which I am showing three buttons at the bottom of my screen. Now I want to show a textbox at the center of my screen along with three buttons at the bottom of the screen.
Below is my layout which shows three buttons at the bottom of the screen but it doesn't show textbox at the center of the screen -
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<EditText
android:id="#+id/edittext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button"
android:layout_below="#+id/textView1"
android:layout_marginTop="61dp"
android:ems="10"
android:inputType="text" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ButtonA" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ButtonB" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ButtonC" />
</LinearLayout>
</LinearLayout>
And also how do I add a placeholder in the textbox just like we do in HTML? As soon as I click in the testbox that placeholder will be gone and they can start typing.
Try using ReleativeLayout instead then for the TextView you can set attribute named
android:layout_centerInParent="true"
, and for three buttons , set layout_alignParentBottom :
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
then align other two buttons related to first.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/edittext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignRight="#id/button3"
android:text="ButtonA" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignRight="#id/button3"
android:text="ButtonB" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="ButtonC"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
Use below code, i think its work for you
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ButtonA" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ButtonB" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ButtonC" />
</LinearLayout>
<EditText
android:id="#+id/edittext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:ems="10"
android:hint="Your Hint Here"
android:inputType="text" >
</EditText>
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/edittext"
android:layout_centerHorizontal="true" />
I reviewed your code and sorted it out for you.
android:hint="Your Message here". can be used to add a placeholder in the textbox.
`
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<EditText
android:id="#+id/edittext"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:layout_alignLeft="#+id/button"
android:layout_below="#+id/textView1"
android:layout_marginTop="61dp"
android:ems="10"
**android:hint="#string/edit_message"**
android:inputType="text" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ButtonA" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ButtonB" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ButtonC" />
</LinearLayout>
`
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.
I've got an example layout that I'm trying to create in android using xml. I am able to create similar layouts but I feel as if my approach might be wrong.
What I have been doing in these cases is nesting relative layouts to act as a "row". The below image demonstrates what I would do.
How would you guys create a layout similar to this? I feel as if nesting relative layouts is overkill but I'm not sure how I can keep everything centred if I don't.
When I didn't nest the layouts I used
android:layout_toRightOf="..."
android:layout_below="#+id/t1"
on t5, t6 and t7 (from the image). The result looked incorrect. t1, t2, t3 and t4 wasn't centred horizontally any more.
Is there a way to like tell the relative layout that everything after this point should appear on a new row? Or is relative layouts the wrong way to go for things like this? I don't think a table layout would work correctly since each row doesn't necessarily need to have the same amount of views and they need to be centred.
Any suggestions appreciated!
You could nest two horizontal LinearLayouts within a vertical LinearLayout. Maybe not so efficient as a RelativeLayout, but easier to get the centering behavior you want.
<?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="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="D" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="E" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="F" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="G" />
</LinearLayout>
</LinearLayout>
Here's another version of the same layout using RelativeLayout. I started with the nested LinearLayouts above, selected "Refactor > Android > Change Layout...", selected RelativeLayout, and then tweaked the resulting layout until I got things centered.
I used a couple of tricks to get it right. I started by centering the middle button on the parent, then built out to the left and right. On the top row, where there is an even number of buttons and space in the center, I used a centered, 0-width TextView to anchor the buttons. That's a bit hacky, I guess, but it gets the job done. :-)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#+id/TextView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/hello" />
<TextView
android:id="#+id/Dummy"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_centerInParent="true"
android:layout_below="#+id/TextView1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/Dummy"
android:layout_toLeftOf="#+id/Dummy"
android:text="B" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignTop="#+id/Dummy"
android:layout_toLeftOf="#+id/button2"
android:text="A" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignTop="#+id/Dummy"
android:layout_toRightOf="#+id/Dummy"
android:text="C" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignTop="#+id/Dummy"
android:layout_toRightOf="#+id/button3"
android:text="D" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_below="#+id/Dummy"
android:text="F" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/button6"
android:layout_alignBaseline="#+id/button6"
android:layout_toLeftOf="#+id/button6"
android:text="E" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button6"
android:layout_alignTop="#+id/button6"
android:layout_toRightOf="#+id/button6"
android:text="G" />
</RelativeLayout>
You could also try it using the weight.
<?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"
android:weightSum="10" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="2.5"
android:gravity="center"
android:text="hello" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="A" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="B" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="C" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="D" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="E" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="F" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="G" />
</LinearLayout>
</LinearLayout>
Check this out:
<?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="match_parent"
>
<LinearLayout
android:id="#+id/l1"
android:layout_width="fill_parent"
android:layout_height="50dp"></LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="2dp"
android:background="#android:color/white"
android:layout_below="#+id/l1"
android:id="#+id/v1"/>
<LinearLayout
android:id="#+id/l2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/v1"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp">
<Button
android:id="#+id/pos"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
/>
<Button
android:id="#+id/neu"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"/>
<Button
android:id="#+id/neg"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"/>
<Button
android:id="#+id/neg"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"/>
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="2dp"
android:background="#android:color/white"
android:layout_below="#+id/l2"
android:id="#+id/v2"
/>
<LinearLayout
android:id="#+id/l3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/v2"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp">
<Button
android:id="#+id/pos"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
/>
<Button
android:id="#+id/neu"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"/>
<Button
android:id="#+id/neg"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"/>
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="2dp"
android:background="#android:color/white"
android:layout_below="#+id/l3"
android:id="#+id/v3"
/>
</RelativeLayout>
You could also try using linear layout instead. in the first linear layout set the weightsum to 4 and the layout weight to 1 to make it equal divided and set each views gravity to center.
Do the same thing in send Linear Layout.