I have created an application with buttons of "same size" and I added images to it which are also in the same size. Following is my code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".HomeScreen" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="*"
android:weightSum="4" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/fBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/fStr" />
<Button
android:id="#+id/rBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/rStr" />
<Button
android:id="#+id/sBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/sStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/cBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/cStr" />
<Button
android:id="#+id/aBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/aStr" />
<Button
android:id="#+id/lBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/lStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/oBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/oStr" />
<Button
android:id="#+id/tBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/tStr" />
<Button
android:id="#+id/eBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/eStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/dBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/dStr" />
<Button
android:id="#+id/hBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/hStr" />
<Button
android:id="#+id/aBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/aStr" />
</TableRow>
</TableLayout>
</RelativeLayout>
But the problem is, it does not generate what I expected. Following is how it get displayed in eclipse editor
Following is how it get displayed in emulator
As you can see, first column and third column are bigger than the second column. But what I expected is columns in same size.
Following is my strings.xml file in case it is helpful
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="fStr">Fffffffff</string>
<string name="rStr">Rrrrrr</string>
<string name="sStr">Ssssss </string>
<string name="cStr">Ccccccc</string>
<string name="aStr">Aaaaaaa</string>
<string name="lStr">Lllll</string>
<string name="oStr">Oooooooooooo</string>
<string name="tStr">Ttttt</string>
<string name="eStr">Eeeeee</string>
<string name="dStr">Dddddddddd</string>
<string name="cStr">Cccccccc</string>
<string name="hStr">Hhhh</string>
<string name="aStr">Aaaaaaaaaa aaaa</string>
</resources>
How can I solve this issue?
Try setting the layout_width to 0dp, that's fixed this issue for me before.
Change all the Button android:layout_width to fill_parent
android:layout_width="fill_parent"
try this way :
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buttonssssssssssssssssssssssss" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buttonssssssssssssssssssssssss" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buttonssssssssssssssssssssssss" />
</LinearLayout>
Change the layout:width attribute of the table row with fill parent
android:layout_width="fill_parent"
I think you can solve this issue adding
<LinearLayout
android:layout_width="fill_parent"
android:orientation="horizontal"
and into your LinearLayout(here) you can add your blocks with: android:layout_width="0.0dip"
if you want to put some margin between the blocks... use: android:layout_marginLeft="sizehere.0dip" android:layout_marginRight="sizehere.0dip"
</LinearLayout>
Well I agree and recommend the use of layout_weight where you have to make a distribution or divide width among the view objects.
Also looking at your code I would suggest using lesser views as you are using TableLayout that is not actually required if you just use a LinearLayout with three buttons and use the above mentioned property properly.
I am also not sure why you actually need RelativeLayout in this case. If you go by hierarchy-viewer tool from android-sdk then you will come to know the lesser the number of views you are using a layout the low memory your screen will use and hence responsive.
The latter one is just a suggestion
Related
I created this interface such that, the top most row of the table layout has 3 equally distributed buttons using layout_weight. But this is what I end up with:
And this is my code:
<RelativeLayout
android:id="#+id/content_rel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ECECEC"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/blurImage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<ImageButton
android:id="#+id/btnHeartLike"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:src="#drawable/selector" />
<ImageButton
android:id="#+id/btnShare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:src="#drawable/share39" />
<ImageButton
android:id="#+id/btnProductComment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:src="#drawable/comment_icon" />
</TableRow>
I didn't add the rest of the code since it's long and irrelevant (I think?). Let me know if you need the rest as well but I think the problem is with the layout it is in? What do you think is wrong?
why you are using TableRow. you can create it using linearlayout
use the following code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button1"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
the another way
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</TableRow>
</TableLayout>
</LinearLayout>
Try setting the width to 0 instead of having wrap_content: android:layout_width="0.0dip"
And check the following link for the explanation.
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'm trying to make myself an app to track my progress at the gym since it's one of my new year resolution... I don't go to the gym, and I figure that if I can track progress, i could have some interest in going back.
Here's my issue:
I'm doing my main layout right now, and I want one large button that says: Start workout.
I would like to have 4 buttons centered next to each other with some spaces between each other and the four together would have the form of a square.
I wrote this code, and nothing is working at all right now. I just don't even know where to look anymore. I know I could use LinearLayout but I read everywhere that RelativeLayout should be prioritize
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<Button
android:id="#+id/start_workout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:hint="#string/start_workout"
/>
<Button
android:id="#+id/log_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:hint="#string/log_button"
/>
<Button
android:id="#+id/progress_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:hint="#string/progress_button"
/>
<Button
android:id="#+id/cardio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/calendar_button"
android:layout_below="#id/progress_button"
android:hint="#string/cardio_button"
/>
<Button
android:id="#+id/calendar_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/cardio_button"
android:layout_below="#+id/log_button"
android:hint="#string/calendar_button" />
</RelativeLayout>
Here it is.
The first button is screen wide and top aligned.
The other four occupy each 1/4th the screen width and are all below the top one
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity"
>
<Button
android:id="#+id/start_workout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Start workout"
android:textSize="12sp"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/start_workout"
android:orientation="horizontal"
>
<Button
android:id="#+id/cardio_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cardio"
android:textSize="12sp"
/>
<Button
android:id="#+id/progress_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Progress"
android:textSize="12sp"
/>
<Button
android:id="#+id/calendar_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Calendar"
android:textSize="12sp"
/>
<Button
android:id="#+id/log_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Log"
android:textSize="12sp"
/>
</LinearLayout>
</RelativeLayout>
Try this,but better to use linear layout in your case
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:id="#+id/cardio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/log_button"
android:hint="cardio_button" />
<Button
android:id="#+id/progress_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/log_button"
android:layout_alignBottom="#+id/log_button"
android:layout_toRightOf="#+id/cardio_button"
android:hint="progress_button" />
<Button
android:id="#+id/calendar_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/cardio_button"
android:layout_alignBottom="#+id/cardio_button"
android:layout_toRightOf="#+id/cardio_button"
android:hint="calendar_button" />
<Button
android:id="#+id/log_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/start_workout"
android:layout_marginTop="50dp"
android:layout_toLeftOf="#+id/progress_button"
android:hint="log_button" />
<Button
android:id="#+id/start_workout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:hint="start_workout" />
</RelativeLayout>
I have developed an app, which look like below, in vertical view.
This is the code of this app
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".HomeScreen" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="*"
android:weightSum="4" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/fBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/fStr" />
<Button
android:id="#+id/rBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/rStr" />
<Button
android:id="#+id/sBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/sStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/cBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/cStr" />
<Button
android:id="#+id/aBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/aStr" />
<Button
android:id="#+id/lBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/lStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/oBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/oStr" />
<Button
android:id="#+id/tBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/tStr" />
<Button
android:id="#+id/eBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/eStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/dBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/dStr" />
<Button
android:id="#+id/hBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/hStr" />
<Button
android:id="#+id/aaBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/aStr" />
</TableRow>
</TableLayout>
</RelativeLayout>
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="fStr">Fffffffff</string>
<string name="rStr">Rrrrrr</string>
<string name="sStr">Ssssss </string>
<string name="lStr">Lllll</string>
<string name="oStr">Oooooooooooo</string>
<string name="tStr">Ttttt</string>
<string name="eStr">Eeeeee</string>
<string name="dStr">Dddddddddd</string>
<string name="cStr">Cccccccc</string>
<string name="hStr">Hhhh</string>
<string name="aStr">Aaaaaaaaaa aaaa</string>
</resources>
This app has 2 issues.
The gap between button image and text is too much
When the app is in horizontal view, the entire alignment is messed up, and get displayed as below.
As you can see, there is not text!
How can I solve this issue?
Create a new folder under res folder named layout-land and put your layout(XML file) in that folder.
See this doc
Try this.. give table row width as match_parent and height as wrap_content and remove weight. then if you give weight for something you need to give 0dp for particular height or width
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".HomeScreen" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="*"
android:weightSum="4" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/fBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="fStr" />
<Button
android:id="#+id/rBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="rStr" />
<Button
android:id="#+id/sBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="sStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/cBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="cStr" />
<Button
android:id="#+id/aBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="aStr" />
<Button
android:id="#+id/lBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="lStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/oBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="oStr" />
<Button
android:id="#+id/tBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="tStr" />
<Button
android:id="#+id/eBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="tStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/dBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="tStr" />
<Button
android:id="#+id/hBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="tStr" />
<Button
android:id="#+id/aaBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="tStr" />
</TableRow>
</TableLayout>
</RelativeLayout>
This problem is due to the size that image if you take small size images then you face this problem.....if you want put big sized images then You have to change RelativeLayout to ScrolView
and then TableLayout height should be wrap_content.....
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.