Hey Guyz help me I got stuck with an alignment setting problem... I am new to Android Development and the objective I want to achieve is I am making a Music Player in which I am trying to set an ImageView to an ImageButton but what I want to set it on the center and I did not find any way below is the code which I tried..
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageButton
android:alpha="50"
android:id="#+id/imageView1"
android:layout_width="115dp"
android:layout_height="115dp"
android:padding="6dp"
android:src="#drawable/play_btn"
android:background="#null"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/Artist"
android:layout_above="#+id/textView2"
android:layout_centerHorizontal="true" />
</RelativeLayout>
This is what I tried but I could not find any property like
alignWithMatchCenter = "parent ID" or centerInParent = "parent ID "
or is it possible if I can add ImageView within ImageButton Tag?
<ImageButton
android:layout_width="115dp"
android:layout_height="115dp"
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/Artist"
android:layout_above="#+id/textView2"
android:layout_centerHorizontal="true" />
/>
please help me friends.
Any help will be great appreciated.
Regards,
Sarosh Madara
Are you looking for something like this:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/imageView1"
android:alpha="50"
android:layout_width="115dp"
android:layout_height="115dp"
android:padding="6dp"
android:src="#drawable/play_btn"
android:layout_centerInParent="true"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/Artist"
android:layout_centerInParent="true" />
</RelativeLayout>
You can use android:layout_centerInParent="true" to center a child. You could also use a FrameLayout and set android:layout_gravity="center".
Related
I'm trying to put a small ImageView on top of a button, but somehow it stays under it. I don't understand why as this sort of layout work perfectly with other views.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_white_clickable"
android:text="#string/book_now"
android:id="#+id/but_book_now"
/>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:id="#+id/img_bookmark"
android:src="#drawable/ic_action_bookmark_full"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
I've tried with different background for the button, but the image can be seen only when it is transparent. I also tried to replace the ImageView with a colored View, still doesn't work.
Any idea? Thx
EDIT:
There is a confusion in answers I get, I mean to make the ImageView on top of the Button in its Z-order, not y-axis.
EDIT 2 :
I don't want to use an image button, the image is just a "pin" on the button that will appear/disappear.
I don't want to use a drawable on the button, I need to place it where I want exactly.
Using FrameLayout instead of RelativeLayout doesn't change anything.
Using imgView.bringToFront() doesn't work.
EDIT 3 :
The problem doesn't appear on device before Lollipop. On KitKat, the layout works as intended.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="80dp" >
<Button
android:id="#+id/filter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="7dp"
android:background="#0000FF"
android:gravity="center"
android:paddingBottom="25dp"
android:paddingTop="25dp"
android:text="Sort"
android:textColor="#FFFFFF" />
<ImageView
android:id="#+id/widget_title_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:adjustViewBounds="true"
android:paddingTop="-10dp"
android:scaleType="fitStart"
android:src="#drawable/ic_launcher" />
</FrameLayout>
Try it,though I haven't tested it.
Try
findViewById(R.id.img_bookmark).bringToFront();
You need to set the button below the imageview so:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_white_clickable"
android:text="#string/book_now
android:id="#+id/but_book_now"
android:layout_below="#+id/img_bookmark"/>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:id="#+id/img_bookmark"
android:src="#drawable/ic_action_bookmark_full"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
EDIT
I noticed now that you wanted an image ON TOP of a button not ABOVE so don't care to my code above and use ImageButton:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_white_clickable"
android:text="#string/book_now
android:id="#+id/but_book_now"
android:src="#drawable/ic_action_bookmark_full"/>
</RelativeLayout>
Sample code:
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/img_bookmark"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_alignParentRight="true"
android:src="#drawable/ic_launcher" />
<Button
android:id="#+id/but_book_now"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/img_bookmark"
android:text="Test" />
</RelativeLayout>
Note :
Edit the text and src, for your needs
If you want image view with button :
<Button
android:id="#+id/but_book_now"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_launcher"
android:background="#ff00ff"
android:text="This is button"
android:padding="10dp"
android:textColor="#ffff00"
/>
</RelativeLayout>
If you want image view without button :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/but_book_now"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:text="This is button"
android:padding="10dp"
android:textColor="#ffff00"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff00ff"
android:text="This is button"
android:padding="10dp"
android:textColor="#ffff00"
/>
</LinearLayout>
You can define a RelativeLayout as a Button and add ClickEvents on it, add a child View with color or a child ImageView with a PNG, or whatever or both, to put images or color over it.
Example
<FrameLayout android:id="#+id/buttonTextFillColor"
android:layout_width="#dimen/mini_icon_width"
android:layout_height="#dimen/mini_icon_height"
android:background="#drawable/input_button_background"
android:clickable="true">
<View
android:id="#+id/colorTextFillColor"
android:layout_width="23dp"
android:layout_height="23dp"
android:background="#FFFFFF"
android:layout_gravity="center" />
<ImageView
android:layout_width="23dp"
android:layout_height="23dp"
android:src="#drawable/button_fill_text"
android:layout_gravity="center"/>
</FrameLayout>
You get a union of elements:
How will you see it?
please add the layout_below for Button attribute
I want to change the color of a button when it's pressed or focused, or in fact, any state. However, I want to do it not only through XML, but also without using another drawable. Previous questions that address this, like Highlight a button when it pressed without using two drawable? and How to Change color of Button in Android when Clicked? do it either programmatically without drawables, or with drawables through XML. Is there a property I can set in a button.xml file or something that can change the background color of the view when highlighted or clicked, without consulting Java?
Here is the code to my activity_main.xml. If it's not completely obvious already, I'm using a static image for the game board to a phone tic-tac-toe game.
<?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" >
<ImageView
android:id="#+id/gameBoard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:contentDescription="#string/gameboard"
android:src="#drawable/gameboard" />
<ImageButton
android:id="#+id/squareOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="288dp"
android:layout_marginRight="219dp"
android:layout_marginTop="71dp"
android:background="#android:color/transparent"
android:contentDescription="#string/top_left"
android:src="#drawable/blank_button" />
<ImageButton
android:id="#+id/squareTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/squareOne"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/squareOne"
android:layout_marginLeft="110dp"
android:layout_marginRight="108dp"
android:background="#android:color/transparent"
android:contentDescription="#string/top_middle"
android:src="#drawable/blank_button" />
<ImageButton
android:id="#+id/squareThree"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/squareTwo"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/squareTwo"
android:minWidth="100dp"
android:background="#android:color/transparent"
android:contentDescription="#string/top_right"
android:src="#drawable/blank_button" />
<ImageButton
android:id="#+id/squareFour"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/squareOne"
android:layout_below="#+id/squareTwo"
android:layout_marginBottom="179dp"
android:layout_marginTop="9dp"
android:background="#android:color/transparent"
android:contentDescription="#string/middle_left"
android:src="#drawable/blank_button" />
<ImageButton
android:id="#+id/squareFive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/squareFour"
android:layout_alignLeft="#+id/squareTwo"
android:layout_alignRight="#+id/squareTwo"
android:layout_alignTop="#+id/squareFour"
android:background="#android:color/transparent"
android:contentDescription="#string/middle"
android:src="#drawable/blank_button" />
<ImageButton
android:id="#+id/squareSix"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/squareThree"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/squareFive"
android:layout_marginBottom="178dp"
android:background="#android:color/transparent"
android:contentDescription="#string/middle_right"
android:src="#drawable/blank_button" />
<ImageButton
android:id="#+id/squareSeven"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/squareFour"
android:layout_below="#+id/squareFive"
android:layout_marginBottom="70dp"
android:layout_marginTop="10dp"
android:background="#android:color/transparent"
android:contentDescription="#string/bottom_left"
android:src="#drawable/blank_button" />
<ImageButton
android:id="#+id/squareEight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/squareSeven"
android:layout_alignLeft="#+id/squareFive"
android:layout_alignRight="#+id/squareFive"
android:layout_alignTop="#+id/squareSeven"
android:background="#android:color/transparent"
android:contentDescription="#string/bottom"
android:src="#drawable/blank_button" />
<ImageButton
android:id="#+id/squareNine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/squareEight"
android:layout_alignLeft="#+id/squareSix"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/squareEight"
android:background="#android:color/transparent"
android:contentDescription="#string/bottom_right"
android:src="#drawable/blank_button" />
</RelativeLayout>
I use a blank_button.png file and stretch it over each square on the gameBoard ImageView. I know I know from all you haters that I should be using relative layouts instead, but I'm only looking for this app to run on a particular kind of device.
By xml,you can search by google.I will show you one way to solve the problem.
A forum which mentioned this problem
Of course,if you don't use xml,you must change this to java code.It's simple,but this means it won't show complex effects.
Supplement：Override the onStateChange method,you should override your widget.
I want to have a picture all at the bottom of one of the screens of my app, I finally achieved this, but eclipse automatically adds a bar on the top and at the bottom of my picture. I don't want this to be, could you please help?
If you need any more information from me, please say :P.
Edit: activity_main.xml:
`
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/metro" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_toLeftOf="#+id/imageButton1"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/syllabus" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageButton1"
android:layout_toRightOf="#+id/imageButton1"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/bus" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="18dp"
android:height="20dp"
android:textColor="#FFFFFF"
android:width="175dp" />
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageButton1"
android:layout_toLeftOf="#+id/imageButton3"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/supermarkt" />
<ImageButton
android:id="#+id/imageButton5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageButton2"
android:layout_below="#+id/imageButton2"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/restaurants" />
<ImageButton
android:id="#+id/imageButton6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageButton4"
android:layout_toRightOf="#+id/imageButton4"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/geldautomaat" />
<ImageButton
android:id="#+id/imageButton7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageButton4"
android:layout_toLeftOf="#+id/imageButton6"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/kaartrome" />
<ImageButton
android:id="#+id/imageButton8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageButton6"
android:layout_alignTop="#+id/imageButton7"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/italiaans" />
<ImageButton
android:id="#+id/imageButton9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageButton7"
android:layout_toLeftOf="#+id/imageButton7"
android:minHeight="100dp"
android:minWidth="100dp"
android:src="#drawable/telefoon" />
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<ImageView
android:id="#+id/Skyline"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:src="#drawable/skyline" />
</RelativeLayout>
`
It's hard to say what's happening if you don't have your relevant code posted.
If you're using an ImageView and writing your layout in XML the code should look something like this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="vertical" >
...other views for the screen...
<ImageView
android:layout_width="match_parent"
android:layout_heigth="wrap_content"
android:layout_gravity="bottom"
android:src="#drawable/some_img" />
</LinearLayout>
Assuming you're using a LinearLayout with vertical orientation, this should add your image to the layout, make it exactly the width of it's parent (the screen if it's parent is the root layout), and scale the length appropriately. The gravity makes the picture drop to the bottom of the layout (unless something is laid out under it).
There should be no bars at all.
EDIT: Code is now posted.
You should have all the views in your XML part of a root view, like the RelativeLayout that your image at the bottom is in. If you move the head of the relative layout to the top of the XML and add the xmlns:android="http://schemas.android.com/apk/res/android" to it, the image should do exactly what you want. The header should look like this and be at the top of the XML file.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/InnerRelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
Have you gone through the android developer tutorials? They are extremely helpful.
Here is what is looks like and here is my XML code.
Can someone please post the fixed XML layout code for me and explain what I am doing wrong? I want the - symbol on the left to be all of the way left, just like the > symbol on the right side. The black text should be just to the right of the - symbol.
<?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="wrap_content">
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="44dip"
android:stretchColumns="0"
android:divider="#null"
>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/infocells"
android:divider="#null" >
<ImageView
android:id="#+id/imgDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/minus" />
<TextView
android:id="#+id/txtKey"
android:text="Some text"
android:textSize="16dip"
android:textStyle="bold"
android:layout_marginLeft="8dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
android:layout_weight="1.0"
android:layout_marginTop="11dp"
android:layout_marginBottom="6dp"
android:textColor="#color/black"
/>
<TextView
android:id="#+id/txtValue"
android:text="Some text"
android:textSize="16dip"
android:layout_marginRight="8dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:layout_weight="1.0"
android:layout_marginTop="11dp"
android:layout_marginBottom="6dp"
android:textColor="#color/darkblue"
/>
<ImageView
android:id="#+id/imageView1"
android:layout_marginTop="7dp"
android:layout_marginRight="7dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrow" />
</TableRow>
</TableLayout>
</LinearLayout>
Why don't you make use of RelativeLayout and using various property of it you can align your TextView and ImageView according to your other views.If u want to set a - to the left then make use android:layout_alignParentLeft="true" and android:layout_alignParentLeft="true" for you > to set it to the right of the layout
In your ImageView you can set your X position using translationX like something below:
<ImageView
android:id="#+id/imgDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:translationX="-25"
android:src="#drawable/minus" />
Just try it. This is a quick solution only.
Here's an idea on how you can do it. Give it a try.
<RelativeLayout>
<ImageView
android:id="#+id/imgDelete"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/txtKey"
android:layout_toRightOf="#+id/imgDelete" />
<TextView
android:id="#+id/txtValue"
android:layout_toRightOf="#+id/txtKey" />
<ImageView
android:id="#+id/imageView1"
android:layout_alignParentRight="true" />
</RelativeLayout>
This might seem like a very easy question for some of you folks, but I can't find a way to display my TextView even after trying numerous solutions proposed on this site. Not that I am using the built-in Eclipse XML tool for Android and that the TextView is visible on this graphical layout. Here's what I've got so far :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/home_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:contentDescription="#string/no_of_screens"
android:id="#+id/imageViewHome"
android:layout_width="290dp"
android:layout_height="212dp"
android:layout_gravity="center_horizontal"
android:paddingTop="40dp"
android:src="#drawable/logo" />
<RelativeLayout
android:id="#+id/relativeid"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/launch_button"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="80dp"
android:text="#string/launch" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/launch_button"
android:layout_marginRight="20dp"
android:layout_toLeftOf="#+id/launch_button"
android:entries="#array/num_array"
android:prompt="#string/screen_prompt"
android:textSize="8pt" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/launch_button"
android:layout_alignBottom="#+id/launch_button"
android:layout_marginRight="16dp"
android:layout_toLeftOf="#+id/spinner1"
android:text="#string/no_of_screens"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
</LinearLayout>
As for now, all of the other elements are being displayed correctly. Any help would be greatly appreciated!
Thanks
Where do you want your textView?
I would loose these two:
layout_alignBaseline="#+id/launch_button
layout_alignBottom="#+id/launch_button
and use one of these:
layout_below="#+id/launch_button
layout_above="#+id/launch_button
That will put it either above or below the button.