First and foremost, I am new to Android Development, so this question might sound a little juvenile, but I am not able to get an answer to this. I have an app in which I need to display two different buttons side-by-side. I have specified the tags necessary to this and they run in one emulator but not in the other. Below is my code for button design:
file_name.xml:
<RelativeLayout>
//some code here
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="50dp"
android:layout_height="50dp"
android:paddingTop="15dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="36dp"
android:layout_marginStart="36dp"
android:layout_marginBottom="36dp" />
<Button
android:id="#+id/button2"
android:layout_width="45dp"
android:layout_height="45dp"
android:paddingTop="15dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="96dp"
android:layout_marginStart="36dp"
android:layout_marginBottom="36dp"
android:layout_toRightOf="#+id/button1" />
</RelativeLayout>
Is there something wrong with my tags, because as far as my knowledge goes, layout_toRightOF will place button2 after button1's layout completes. Also I have statically provided marginLeft for both.
Both the buttons appear in one emulator(google play services installed) and not in other(google play services not installed). Is it because of google play services not installed? Or some fault in the design of my buttons?
Any kind of help would be helpful.
Thank You in advance.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:text="1"
android:id="#+id/button1"
android:layout_width="50dp"
android:layout_height="50dp"
android:paddingTop="15dp"
android:layout_marginLeft="36dp"
android:layout_marginStart="36dp"
android:layout_marginBottom="36dp" />
<Button
android:text="2"
android:id="#+id/button2"
android:layout_width="45dp"
android:layout_height="45dp"
android:paddingTop="15dp"
android:layout_marginLeft="96dp"
android:layout_marginStart="36dp"
android:layout_marginBottom="36dp"
android:layout_toRightOf="#+id/button1" />
</RelativeLayout
Hope this helps
Is it necessary to use relative layout ??
If you need two button side by side you can just use one linear horizontal. So something like this.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="10"
android:orientation="horizontal"
>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
/>
</LinearLayout>
Relative layouts provides you more flexibility but it has to do two measure passes (Reference). So, it's better if you go with linear layout.
Related
<TextView
android:id="#+id/textViewGuessGame"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:text="Guess Game"
android:textSize="24sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="6dp" />
<TextView
android:id="#+id/textViewGameRules"
android:layout_width="wrap_content"
android:layout_height="61dp"
android:text="Game rules: guess the wrong number and you loose a point. Guess the right number and get one point "
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.13"
tools:layout_editor_absoluteY="54dp" />
<TextView
android:id="#+id/textViewResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:text="Points : 0 "
tools:layout_editor_absoluteY="233dp"
app:layout_constraintHorizontal_bias="0.455" />
<Button
android:id="#+id/buttonL"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="0"
tools:layout_editor_absoluteX="37dp"
tools:layout_editor_absoluteY="146dp" />
<Button
android:id="#+id/buttonR"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="0"
tools:layout_editor_absoluteX="208dp"
app:layout_constraintBaseline_toBaselineOf="#+id/buttonL" />
I want to make it so the two buttons go next to each other and text view game rules under the textviewguessgame. I am trying to make it so they do not go in the left corner all staked up together. Is there a video i could look at too so i don't have to keep asking questions each time?
Everything depends on the layout you are using. Looks like you are using ConstraintLayout but you didn't copy all the xml code. I recommand RelativeLayout, things aren't complicated in RelativeLayout and it is used to make layouts for different screen sizes.
Here's android developers official page tutorial for RelativeLayout.
https://developer.android.com/guide/topics/ui/layout/relative.html
Sometimes you want to use another layout but in your case RelativeLayout will be just fine.
According to your layout specifications, I think linear layout with vertical orientation is the best deal.Try below code.
<?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">
<TextView
android:id="#+id/textViewGuessGame"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:gravity="center"
android:layout_gravity="center"
android:text="Guess Game"
android:textSize="24sp"/>
<TextView
android:id="#+id/textViewGameRules"
android:layout_width="wrap_content"
android:layout_height="61dp"
android:padding="5dp"
android:text="Game rules: guess the wrong number and you loose a point. Guess the right number and get one point " />
<TextView
android:id="#+id/textViewResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Points : 0 "/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button
android:id="#+id/buttonL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0" />
<Button
android:id="#+id/buttonR"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"/>
</LinearLayout>
</LinearLayout>
I made a custom row layout xml file for a ListView so I could design each row to look how I want, but I'm having trouble actually designing the UI in this xml file. I'm trying to make the the activity ultimately look like this:
As you can see there is a listView with rows, each consisting of a game with a textView as a title, two buttons, and an imageView as the background. I've been doing a lot of research through Google's UI documentation but I can't figure out how to get the elements to appear on top of each other like this while have the row scale perfectly to different screen sizes. The furthest I've gotten is using a FrameLayout to place the different views on top of each other, but from here I cannot place the views in the correct position relative to each other. Any advice on how to do this or where I can find out how to do this?
XML so far (terrible I know):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal">
<ImageView
android:id="#+id/gameImageID"
android:layout_width="340dp"
android:layout_height="160dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/overwatch" />
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp" />
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:layout_toEndOf="#+id/gameNameID" />
</RelativeLayout>
Sure that is no problem. Just use weight to handle spacing and you don't need the frame layout just use relative as a root.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal">
<ImageView
android:id="#+id/gameImageID"
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/overwatch" />
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:weightSum="2">
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
You could also just use two nested Relative Layouts with gravity bottom left and bottom right and hold your buttons in there and align buttons to right with margins from side. Also don't use the "endOF" aligning as that will force a left alignment and make larger gaps on the right side of the screen even if you make it look good for one phone it will look bad on another. Aesthetics matter.
Or you could just float your buttons to the bottom left and bottom right with margins from side and make both set to match_parent so they fill the space but use padding to shrink the button look inside the space, but this can get messy. So I prefer the implementation above although some people won't like the extra layouts. It's just a matter of opinion though as the performance diff of using extra nested layouts is so tiny that no one can actually argue performance with a straight face haha.
<RelativeLayout
android:layout_width="340dp"
android:layout_height="160dp"
android:scaleType="centerCrop"
android:background="#drawable/overwatch" >
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="15dp" />
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="15dp"
android:layout_toEndOf="#+id/btnJoinLobby" />
</RelativeLayout>
Try this. And let me know if that helps.
Is there a way to specify that a view should lie strictly to the left of the center (or strictly to the right of the center)? I have two textviews, one for LOGIN and one for REGISTER. I have them as children of RelativeLayout. No matter what I do I can't get them to behave. The one configuration that works in the Graphical Layout of eclipse, only shows the registration button on a real device. Here it is
<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="wrap_content"
android:background="#drawable/login_bckg"
android:padding="10dip"
tools:context=".LoginActivity" >
...
<View
android:id="#+id/center_btns"
android:layout_width="1dp"
android:layout_height="20dp"
android:layout_below="#id/text_fields"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/login_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/text_fields"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toLeftOf="#id/center_btns"
android:background="#drawable/btn_bkg"
android:clickable="true"
android:gravity="center"
android:onClick="login"
android:padding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Login"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/register_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/text_fields"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="#id/center_btns"
android:background="#drawable/btn_bkg"
android:clickable="true"
android:gravity="center"
android:onClick="register"
android:padding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Register"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold" />
...
</RelativeLayout>
If I set them as children of a horizontal linearLayout, how do I specify their relationship to get it to work? I already tried that and no avail.
I wish I could post this as a comment but I don't quite have the rep... Anyway, to clarify, do you want the items to be right next to each other on the same line? If so the LinearLayout should work just fine...
<LinearLayout
...android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
/>
Should work just fine. If not you may try playing with weights depending on which one you want to take up more space. For weights to work you will need to see the width of both to fill_parent.
I'm having problems adding a button to my app using relative layout.When I use the graphical layout tool it shows up when i drag and drop the button but when I compile and run the apk on the emulator only the original 'sms' button is there.The new button should of been to the left of the 'sms' button
and here's the code from the xml file
<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="wrap_content"
android:background="#FF000000" >
<EditText
android:id="#+id/edit_message_input"
android:layout_width="match_parent"
android:layout_height="100dp"
android:hint="#string/edit_message_input"
android:inputType="textMultiLine"
android:background="#ff000000"
android:textColor="#CCCCCC"
/>
<Button
android:id="#+id/button2"
android:layout_width="150dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="36dp"
android:text="#string/translate_to_english"
android:onClick="sendToEnglish"
android:background="#CCCCCC"
/>
<Button
android:id="#+id/button1"
android:layout_width="150dp"
android:layout_height="40dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/translate_to_text"
android:onClick="sendToText"
android:background="#CCCCCC" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_above="#+id/button3"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="31dp"
android:ems="10"
android:hint="#string/edit_message_output"
android:inputType="textMultiLine"
android:background="#ff000000"
android:textColor="#CCCCCC" />
<Button
android:id="#+id/button3"
android:layout_width="150dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_alignRight="#+id/button2"
android:layout_marginRight="22dp"
android:background="#CCCCCC"
android:onClick="sendSMS"
android:text="#string/send_as_sms" />
<!-- test save button -->
<Button
android:id="#+id/save_word_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#cccccc"
android:text="#string/save_word" />
</RelativeLayout>
Any help or pointers much appreciated!
Don't assume what ever you design in XML layout will looks nice in every device, because there are wide range of android devices out in market.
Don't take fixed height/width layout if you want to support multiple screens.
android:layout_width="150dp"
android:layout_height="40dp"
Instead, you can mention "wrap_content" or "fill_parent".
To be honest, I suggest you head over to the android developer docs and spend some time reading the recommendations on designing interfaces.
Two particularly useful sections are:
http://developer.android.com/design/style/metrics-grids.html
and
http://developer.android.com/guide/topics/ui/layout/relative.html
http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html
You have a number of fixed dimensions in your xml and conflicting alignment attributes which appear to be causing a few problems.
Searched all day and came up with a poor solution i think.
i want three ImageButton placed on the right sida of the screen.
Not centered but just above center position..
With the code below i get the result i want but,
If the user have a bigger screen they will not have this position right?
I have tried the android:gravityall day and all i can do with it is
to center the three buttons very nicely.
What should i use to make the three buttons always stay at the positions that
they are on the image belove.
i have the button image in 3 different sizes in hdpi,mdpi,xhdpi folder.
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="A"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="B"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_A"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="C"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_B"
/>
</RelativeLayout>
Picture of the three buttons placed on the right side, and my daughter of course.
One option would be to put all three buttons within a LinearLayout (for simplicity's sake) and then set the layout of this container programmatically.
You can see the size of the screen using getResources().getDisplayMetrics().heightPizels and then set the top margin accordingly.
You could add a LinearLayout inside the RelativeLayout, and then use the following properties on the LinearLayout:
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
EDIT: Ok, I've done some testing and found a way of doing what you want without the use of styling it programatically, here's the xml:
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="80dip"
>
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true">
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
</LinearLayout>
</RelativeLayout>