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.
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 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 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'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>