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>
Related
I try to make 3 buttons with vertical orientation, the problem is the first button have the widest than others, How I can make two others button automatic follow the first button width?
Should like this >
Below is the example of my code:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="THIS IS JUST A EXAMPLE BUTTON"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON 2"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON 3"/>
</LinearLayout>
</RelativeLayout>
Change your LinearLayout Like this, it will work fine
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="THIS IS JUST A EXAMPLE BUTTON" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="BUTTON 2" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="BUTTON 3" />
</LinearLayout>
This is what you can do if you'll be willing to use ConstraintLayout. You just need to tweak some parts but it'll look like how your example looks if you don't really need it look like a table.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="THIS IS JUST A EXAMPLE BUTTON"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="32dp"
android:text="BUTTON 2"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="32dp"
android:text="BUTTON 3"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button2" />
</android.support.constraint.ConstraintLayout>
I have create a RelativeLayout with buttons inside.
I'm using this xml code for create four buttons side by side:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px">
<RelativeLayout
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/relativeLayout1">
<Button
android:text="7"
android:layout_alignParentLeft="true"
android:layout_width="170dp"
android:layout_height="75.0dp"
android:id="#+id/button1" />
<Button
android:text="8"
android:layout_marginLeft="165dp"
android:layout_width="150dp"
android:layout_height="75dp"
android:id="#+id/button2"
android:layout_marginRight="119.0dp" />
<Button
android:text="9"
android:layout_marginLeft="310dp"
android:layout_width="150dp"
android:layout_height="75.0dp"
android:id="#+id/button3" />
<Button
android:text="Enter"
android:layout_marginLeft="455dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/button3" />
</RelativeLayout>
</LinearLayout>
The problem is that my margin is been started from RelativeLayout and not from my left object which in this case is Button.
So my question is: Will i have any problems if i will run application in different screen sizes??
The problem is that my margin is been started from RelativeLayout and
not from my left object which in this case is Button.
You could put your button to the right of the other button and the margin will be between them.
Example:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#color/blue" />
<Button
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="16dp"
android:layout_toRightOf="#id/button"
android:background="#color/accent" />
</RelativeLayout>
Please try that
-With linear layout you can make perfect drawings, I define every button "weight". That do thats They all share the line width evenly. If we say one to two, it will have twice as much space in the same line as the others
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout1">
<Button
android:text="7"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:id="#+id/button1"
android:layout_weight="1" />
<Button
android:text="8"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:id="#+id/button2"
android:layout_weight="1" />
<Button
android:text="9"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:id="#+id/button3"
android:layout_weight="1" />
<Button
android:text="ENTER"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:id="#+id/button4"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
I'm building my own application game for Android, it's a Tic Tac Toe game.
my activities contains mostly ImageViews , all the images placed in the dir res\drawable-mdpi ONLY.
the rest of the drawable folders are empty.
my problem is that when i run the app on a 5.4 inch MDPI screen it works fine and it looks like this:
but when i run the app on another screen of different size for example this 4.65 inch XHDPI screen, it looks like this:
in the above activity i used LinearLayout and RelativeLayout, what should i do to fit my layout to any screen ?
thanks
thanks for editting the pictures
this is the code of the xml file of activity_board.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/board_page_bg"
android:gravity="center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:background="#drawable/board"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="30dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/players_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="2dp"
android:text="#string/playersName"
android:textSize="30sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/players_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="5dp"
android:text="#string/playersPoints"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<TextView
android:id="#+id/machines_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="172dp"
android:layout_marginTop="5dp"
android:text="#string/machinePoints"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<TextView
android:id="#+id/machines_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="50dp"
android:onClick="openChat"
android:clickable="true"
android:text="#string/machineName"
android:textSize="30sp" />
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<ImageView
android:id="#+id/block1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:onClick="touch"
android:src="#drawable/block_1_empty" />
<ImageView
android:id="#+id/block2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="155dp"
android:onClick="touch"
android:src="#drawable/block_2_empty" />
<ImageView
android:id="#+id/block3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="310dp"
android:onClick="touch"
android:src="#drawable/block_3_empty" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="40dp" >
<ImageView
android:id="#+id/block4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:onClick="touch"
android:src="#drawable/block_4_empty" />
<ImageView
android:id="#+id/block5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="10dp"
android:onClick="touch"
android:src="#drawable/block_5_empty" />
<ImageView
android:id="#+id/block6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="310dp"
android:layout_marginTop="10dp"
android:onClick="touch"
android:src="#drawable/block_6_empty" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="55dp" >
<ImageView
android:id="#+id/block7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:onClick="touch"
android:src="#drawable/block_7_empty" />
<ImageView
android:id="#+id/block8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="155dp"
android:onClick="touch"
android:src="#drawable/block_8_empty" />
<ImageView
android:id="#+id/block9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="315dp"
android:onClick="touch"
android:src="#drawable/block_9_empty" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="6dp" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/game_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="105dp"
android:text="#string/gameNumber"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/count_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="390dp"
android:text="#string/countDown"
android:textSize="25sp" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/end_game"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/EndGame"
android:onClick="endGame"
android:src="#drawable/endgame_btn_1" />
</LinearLayout>
</LinearLayout>
Are you using RelativeLayout?
You should
1. use RelativeLayout as the base container
2. put the "Player" and "System" score inside the same horizontal LinearLayout so that they won't overlap
3. Put the "End game" button as an element which align parent bottom
The screenshots you attached shows that it's a problem caused by the soft status bar. RelativeLayout would help and you should try to prevent hard-coding the dimensions in numbers but making the auto-adjust in RelativeLayout using margins, "layout_toLeftOf", "layout_toRightOf" and etc.
Create a drawable folder, just the word "drawable", in res and put your game images in there. That will make the game images the same across every device density.
Without looking at your XML, I would agree that you're probably using hardcoded dp values instead of sizing the layout with math, ie, weights, match_parent, alignParentRight, etc.
I have adjusted your XML to be easier. I did not plug it into a previewer or anything.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/board_page_bg"
android:gravity="center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:layout_marginLeft="ADJUST ME"
android:layout_marginRight="ADJUST ME"
android:background="#drawable/board"
android:orientation="vertical" >
<!-- Scoreboard -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp" >
<TextView
android:id="#+id/players_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="2dp"
android:layout_alignParentLeft="true"
android:text="#string/playersName"
android:textSize="30sp" />
<TextView
android:id="#+id/players_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="5dp"
android:layout_toLeftOf="#id/players_name"
android:text="#string/playersPoints"
android:textSize="25sp" />
<TextView
android:id="#+id/machines_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="172dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="#id/machines_name"
android:text="#string/machinePoints"
android:textSize="25sp" />
<TextView
android:id="#+id/machines_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="50dp"
android:onClick="openChat"
android:layout_alignParentRight="true"
android:clickable="true"
android:text="#string/machineName"
android:textSize="30sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/block1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_1_empty" />
<ImageView
android:id="#+id/block2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_2_empty" />
<ImageView
android:id="#+id/block3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_3_empty" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/block4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_4_empty" />
<ImageView
android:id="#+id/block5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_5_empty" />
<ImageView
android:id="#+id/block6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_6_empty" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/block7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_7_empty" />
<ImageView
android:id="#+id/block8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_8_empty" />
<ImageView
android:id="#+id/block9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_9_empty" />
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="ADJUST ME" >
<TextView
android:id="#+id/game_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="#string/gameNumber"
android:textSize="25sp" />
<TextView
android:id="#+id/count_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="#string/countDown"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/end_game"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/EndGame"
android:onClick="endGame"
android:src="#drawable/endgame_btn_1" />
</LinearLayout>
</LinearLayout>
So i am creating this app which will display products in a grid, so for example on a nexus 7 portrait view, it will be 2 in each row, while in landscape mode, there will be 4 in a row.
Each product has a imagine, and then a few textviews below it displaying a few information.
However the last two textviews, which display free delivery and number of special offers, seems to be overlapped by the next image below. Could anyone please help me pin point where im going wrong. The layout is below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/product_grid_lister_image_background"
android:padding="1dp" >
<ProgressBar
android:id="#+id/image_loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminateDrawable="#drawable/progress_blue" />
<ImageView
android:id="#+id/product_grid_lister_image"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="10dp"
android:scaleType="center"/>
</RelativeLayout>
<RatingBar
android:id="#+id/product_grid_lister_rating_bar"
style="#style/GoldRatingBar.Large"
android:layout_width="wrap_content"
android:layout_height="18dp"
android:layout_marginTop="5dp"
android:numStars="5" />
<TextView
android:id="#+id/product_grid_lister_product_name_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="2"
android:includeFontPadding="false"
android:textColor="#color/black"
android:textSize="#dimen/text_dp_14pt" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/product_grid_lister_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:textColor="#color/black"
android:textSize="#dimen/text_dp_20pt" />
<TextView
android:id="#+id/product_grid_lister_was_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_price_text"
android:includeFontPadding="false"
android:textColor="#color/grey"
android:textSize="#dimen/text_dp_14pt" />
<TextView
android:id="#+id/product_grid_lister_offer_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_was_price_text"
android:includeFontPadding="false"
android:textColor="#color/red"
android:textSize="#dimen/text_dp_14pt" />
<TextView
android:id="#+id/product_grid_lister_special_offer_text"
style="#style/plp_special_offer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_offer_text"
android:includeFontPadding="false"
android:text="#string/plp_special_offer" />
<TextView
android:id="#+id/product_grid_lister_delivery_offer_text"
style="#style/plp_special_offer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_special_offer_text"
android:includeFontPadding="false"
android:text="#string/plp_delivery_offer" />
<CheckBox
android:id="#+id/product_grid_lister_star_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="6dp"
android:paddingBottom="6dp"
android:paddingLeft="6dp"
android:button="#drawable/product_grid_star_checkbox"
android:focusable="false" />
</RelativeLayout>
</LinearLayout>
You're missing a namespace declaration as well as a root layout. You need a root layout to anchor everything else in. Depending on your needs, perhaps a LinearLayout would do the trick. Below I've wrapped everything in a vertically oriented linear layout. Let me know if that solves anything for you.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/product_grid_lister_image_background"
android:padding="1dp" >
<ProgressBar
android:id="#+id/image_loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminateDrawable="#drawable/progress_blue" />
<ImageView
android:id="#+id/product_grid_lister_image"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="10dp"
android:scaleType="center" />
</RelativeLayout>
<RatingBar
android:id="#+id/product_grid_lister_rating_bar"
style="#style/GoldRatingBar.Large"
android:layout_width="wrap_content"
android:layout_height="18dp"
android:layout_marginTop="5dp"
android:numStars="5" />
<TextView
android:id="#+id/product_grid_lister_product_name_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:includeFontPadding="false"
android:lines="2"
android:textColor="#color/black"
android:textSize="#dimen/text_dp_14pt" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/product_grid_lister_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:textColor="#color/black"
android:textSize="#dimen/text_dp_20pt" />
<TextView
android:id="#+id/product_grid_lister_was_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_price_text"
android:includeFontPadding="false"
android:textColor="#color/grey"
android:textSize="#dimen/text_dp_14pt" />
<TextView
android:id="#+id/product_grid_lister_offer_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_was_price_text"
android:includeFontPadding="false"
android:textColor="#color/red"
android:textSize="#dimen/text_dp_14pt" />
<TextView
android:id="#+id/product_grid_lister_special_offer_text"
style="#style/plp_special_offer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_offer_text"
android:includeFontPadding="false"
android:text="#string/plp_special_offer" />
<TextView
android:id="#+id/product_grid_lister_delivery_offer_text"
style="#style/plp_special_offer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/product_grid_lister_special_offer_text"
android:includeFontPadding="false"
android:text="#string/plp_delivery_offer" />
<CheckBox
android:id="#+id/product_grid_lister_star_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:button="#drawable/product_grid_star_checkbox"
android:focusable="false"
android:paddingBottom="6dp"
android:paddingLeft="6dp"
android:paddingTop="6dp" />
</RelativeLayout>
</LinearLayout>
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.