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>
Related
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.
I need to adjust my layout with a button as exit on the right corner of the layout and an image button below the center of the layout. It should be accurately there to support the background for multiple screens.
I used relative layout and inside it the image buttons, but I am unable to set the image button 2 on its position. If i do it, the whole layout is vertically expanded.
<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:background="#00ffffff"
android:orientation="vertical"
tools:context="com.rabiya.menu.MainActivity"
android:id="#+id/rl01" >
<RelativeLayout
android:id="#+id/rl02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="15dp"
android:background="#drawable/background3" >
<ImageButton
android:id="#+id/exit3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:contentDescription="#string/image"
android:layout_alignParentTop="true"
android:background="#drawable/exit"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tv01"
android:background="#000"
android:layout_centerHorizontal="true"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rl03"
android:background="#00ffffff"
android:layout_below="#+id/tv01"
android:orientation="vertical"
>
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/click"
android:contentDescription="#string/image"
android:paddingTop="20dip" />
<ImageButton
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/click"
android:contentDescription="#string/image"
/>
<ImageButton
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/click"
android:contentDescription="#string/image"
/>
<ImageButton
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/click"
android:contentDescription="#string/image"
/>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
I don't understand cleary wath yo want but seems a problems that I have
And i change my layout to the FrameLayout
http://www.tutorialspoint.com/android/android_frame_layout.htm
Mayby a gravity center for one and gravite up aling right for the buton do the works
Create a new custom view extended from LinearLayour or RelativeLayout and place an image inside of it. If I understand correctly, you want to manipulate image inside of the button.
Once you have your own view with image inside of you can override on click to make it behave like button.
I'm sorry I'm new to Android and this seems like an easy question but I just don't get it. I have two buttons (same size) and two images (different sizes). I want the buttons below the images but exactly centered to it. I searched a couple of forums but I just don't get it how that works. I also don't understand how to declare one of the images as a parent so the button could be the child.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:id="#+id/negativ"
android:background="#drawable/smiley"
android:layout_below="#+id/titlet"
android:layout_marginTop="50dp"
android:layout_marginLeft="500dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textnhelpful"
android:background="#drawable/nothelp"
android:layout_below="#+id/negativ"
android:layout_marginTop="20dp"
android:layout_marginLeft="500dp"
/>
In android SDK you can't add image view to button as child or reverse, my solution make relative layout and add image view as child to layout make button and layout "wrap_content" and add button as child to layout andmake gravity "center".
Here is xml code
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</RelativeLayout>
I'm developing an android app that contains two image buttons, these image buttons seem to be frameless or don't have bounds around them , look at the following figures:
instead, i want to make the buttons look like if they have bounds on their edges, like the following figure:
and that's my XML code:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageButton
android:contentDescription="#string/minus"
android:id="#+id/mines"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:adjustViewBounds="true"
android:padding="10dp"
android:background="#21417D"
android:scaleType="centerInside"
android:src="#drawable/ac_button_minus" />
<ImageButton
android:contentDescription="#string/plus"
android:id="#+id/plus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:adjustViewBounds="true"
android:layout_marginRight="15dp"
android:padding="10dp"
android:background="#21417D"
android:scaleType="centerInside"
android:src="#drawable/ac_button_plus" />
</LinearLayout>
If you just want the spacing between the buttons use the attribute android:layout_margin in your xml, you can specify individual sides too so e.g.
<ImageButton
...
android:layout_marginLeft="16dp"
...
android:scaleType="centerInside"
android:src="#drawable/ac_button_minus" />
Having a lot of trouble getting an icon to huddle into the position I want it in. I looked at 3 different Stack Overflow questions and tried placing the image in a RelativeLayout, LinearLayout, and a TableRow. All with various XML options. Never managed to get the icon to go right and center itself between top and bottom of the allotted space. In the pic below, red is where it is now, blue is where I want it. Here's a pic (of how it looks now, which is incorrect) and the code (imageView1 is what I want to align):
And the code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:id="#+id/loginScrollView">
<TableLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical"
android:padding="5dp">
<ImageView android:id="#+id/logoImageView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="#drawable/logo" android:contentDescription="#string/app_name" />
<TextView android:id="#+id/demoTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="#string/logDetails" android:gravity="center_horizontal|center" />
<EditText android:id="#+id/emailEditText"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:hint="#string/loginHint" android:imeOptions="actionNext"
android:inputType="textEmailAddress" android:padding="20dp" />
<EditText android:id="#+id/passEditText"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:hint="#string/password" android:imeOptions="actionDone"
android:inputType="textPassword" android:padding="20dp" />
<TableRow android:id="#+id/rememberTableRow"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:id="#+id/rememberTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="#string/rememberDetails" android:layout_gravity="center" />
<CheckBox android:id="#+id/rememberCheckBox"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:padding="20dp" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_holo_dark" android:layout_weight="1" android:layout_gravity="center|right"/>
</TableRow>
<TableRow android:id="#+id/buttonTableRow"
android:layout_width="match_parent" android:layout_height="wrap_content">
<Button android:id="#+id/registerButton" android:layout_width="0dip"
android:layout_height="wrap_content" android:layout_gravity="bottom"
android:layout_weight="1" android:text="#string/register" />
<Button android:id="#+id/loginButton" android:layout_width="0dip"
android:layout_height="wrap_content" android:layout_gravity="bottom"
android:layout_weight="1" android:text="#string/login" />
</TableRow>
</TableLayout>
</ScrollView>
Here are the SO questions I've already looked at and tried to use as solutions:
Aligning ImageView to right of the layout android
Aligning with center in android with hierarchical Layouts
Android ImageButton not displaying on right side of the screen
There are multiple options, as far as I can tell. I'll give you two:
First option is to set a scaletype on the ImageView containing the overflow icon. You make it take up all remaining available space and set the scaletype to fitEnd. This will position the icon all the way at the right.
<ImageView android:id="#+id/imageView1"
android:layout_width="0dp" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:scaleType="fitEnd"
android:layout_weight="1" android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_normal_holo_dark" />
You can accomplish the same effect by setting a weight of 1 on the CheckBox, which will make it 'push' the ImageView with the overflow icon all the way to the right (thanks to a TableRow behaving similarly to a LinearLayout). You can then simply make the ImageView wrap its content. You may want to double check if there are no weird side effects to the clickable region in this case though.
<TableRow android:id="#+id/rememberTableRow"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:id="#+id/rememberTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center" android:text="#string/rememberDetails" />
<CheckBox android:id="#+id/rememberCheckBox"
android:layout_width="0dp" android:layout_height="wrap_content"
android:layout_weight="1" android:padding="20dp" />
<ImageView android:id="#+id/imageView1"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_normal_holo_dark" />
</TableRow>