I am trying to place two imageviews -
<ImageView
android:id="#+id/ivLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:focusable="true"
android:layout_marginTop="20dp"
/>
<ImageView
android:id="#+id/ivAction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="110dp"
android:layout_centerHorizontal="true"
android:focusable="true"
/>
There is some overlapping between the images . The Action image overlaps with the logo. This is expected behaviour as they both have some common space on the screen.
The top part of action image comes on top of the logo while i want the bottom part of the logo to come over the top of action image .
What is happening - Action is on top
--
what is required -- Action should go to the background
I will appreciate any help.
Just change the order of your 2 ImageViews in your XML. The system draws them in the same order, so whatever you put first comes on bottom.
Try this. This will place your top image at the center of your background image
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
<ImageView
android:id="#+id/ivLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:focusable="true"
android:layout_marginTop="20dp"
/>
<ImageView
android:id="#+id/ivAction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="110dp"
android:layout_centerInParent="true"
android:focusable="true"
/>
</RelativeLayout>
Related
I want to align the icons accordingly in my android app in the top bar my top bar has side menu on the left image
It has some empty space after the side menu icon I want to fill that space by arranging the icons accordingly but I don't know how to do that
please help me to avoid that empty space and put the icon in that place
I have also attached image for better view
Thanks
please try to create a custom layout for action bar & inflate it.
You can use setlogo method in toolbar to fill the your desired space
toolbar.setLogo(R.drawable.yourlogo);
or simply set all icon inside your toolbar according to your requirement.
like this
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<LinearLayout
android:layout_width="wrap_content"
android:orientation="horizontal"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:background="#mipmap/ic_launcher"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:background="#mipmap/ic_launcher"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:background="#mipmap/ic_launcher"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:background="#mipmap/ic_launcher"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:background="#mipmap/ic_launcher"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
Hope this help!
I'm trying to build the following layout on Android without any success.
I want a text to be displayed on my screen. It can take the whole width, but must be centered horizontally.
On the same line, on the right side of the screen I want to display a small layout. It shouldn't impact the horizontal centering of the main text and the main text shouldn't be visible behind the layout displayed on the right.
I cannot use a hard color for my layout background as it's displayed on a transparent background over a bitmap...
Any idea on how to achieve this ?
I can either use a RelativeLayout in which case the main text isn't centered based on the middle of the screen (it takes the right layout width into account)
Or the text is displayed behind the right layout...
Edit:
Here is one of my test
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom|center_horizontal"
android:layout_centerInParent="true"
android:fontFamily="sans-serif"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:singleLine="true"
android:textColor="?android:attr/textColorPrimary"
android:textSize="17sp"
android:text="very looooooooooooooooooooooooooooooooong text"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerInParent="true"
android:layout_alignParentRight="true"
android:padding="3dp"
android:visibility="visible" >
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_vertical"
android:filter="true"
android:src="#drawable/device_access_time" />
<Spinner
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical" />
</LinearLayout>
</RelativeLayout>
RelativeLayouts adhere to the principle of z-indexes, so if you put the right-aligned layout first, the centered text view will be drawn correctly on top.
What I am trying to do seems very basic in theory, but cannot find any information on this on the web. I have a series of clickable imagebuttons, containing images. I would like it so that when a user clicks on one of these imagebuttons, it becomes highlighted with a simple border.
To achieve this, I have created a basic solid-colour 62x62 pixel image and wish to place it -behind- my original 60x60 imagebutton. This will create the illusion of a border. My plan is to set it to non-visible by default and then have the code set it to visible on click. Sounds straight-forward.
However, in my layout, the solid-colour image always sits on top of the original image, and I cannot find any way of sending it behind. I would rather not do this in code, I am sure this is a layout issue (but will set it in code if I absolutely must).
Relevant section of layout, where the ImageView needs to sit behind the player 1 ImageButton:
<RelativeLayout
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:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="20dp"
android:paddingBottom="20dp" tools:context=".MainActivity"
android:id="#+id/Form_PlayerSelection"
android:background="#drawable/dark_wood">
<ImageButton
android:id="#+id/btnPlayer1"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/player_blank"
android:adjustViewBounds="false"
android:clickable="true"
android:cropToPadding="false"
android:padding="0dp"
android:scaleType="fitXY"
android:layout_marginLeft="15dp"
android:layout_marginTop="50dp" />
<ImageView
android:id="#+id/p1border"
android:layout_width="62dp"
android:layout_height="62dp"
android:src="#drawable/selectborder"
android:clickable="false"
android:cropToPadding="false"
android:padding="0dp"
android:scaleType="fitXY"
android:layout_marginLeft="13dp"
android:layout_marginTop="48dp"/>
<ImageButton
android:id="#+id/btnPlayer2"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/player_blank"
android:adjustViewBounds="false"
android:clickable="true"
android:cropToPadding="false"
android:padding="1dp"
android:scaleType="fitXY"
android:layout_marginLeft="85dp"
android:layout_marginTop="50dp" />
</RelativeLayout>
Each child is added in order and to the top of the ViewGroup. So, the bottom element should be your first child.
i am writing an application to control a robot
for controlling i need ( up, down , right, left ) keys
i used eclipse designer to create it but maybe it is not possible
i want to create something like this :
how can i create buttons like this in center of screen ?
is there a better way to create arrow keys on android ?
Here you go :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<View
android:id="#+id/view1"
android:layout_width="30dp"
android:layout_height="30dp"
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_below="#+id/view1"
android:layout_centerHorizontal="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/view1"
android:layout_centerHorizontal="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/view1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/view1"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
Of course, you can replace ImageView with anything else like an ImageButton.
Be sure, if you change the name of the first view, tu update the name in the 4 ImageView.
And be aware that the corners of each image are overlapping each other.
I suggest using ImageButtons and setting the background for each to a State List Drawable xml file. This will change the image between states(focused, pressed, etc).
The tricky part would be positioning each so that they orient themselves in this sort of "box" you have above.
Just create some PNGs of each button in their positions. Up button points up, left points left etc. Then use RelativeLayout to position them with respect to each other. You can also use Buttons as well
I designed one layout which have total 4 RelativeLayout one is outer cover and 3 are child of it. When I put White color in the outer layout than no spaces are left but when I put 9patch image as drawable image than little default padding/margin are left. Is there any properly which solve the padding/margin issue? I have tried margin negative but it will hide bit layout I think it is not proper solution, here is my layout
when I put white color as background than my layout look like
Here is the following code of my layout
<RelativeLayout
android:id="#+id/DetailSection1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/HeaderLayout"
android:layout_toLeftOf="#+id/DetailSection2"
>
<TextView
android:id="#+id/lblRestaurantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/DetailSection1"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:textColor="#color/heding_font"
android:textSize="#dimen/headingFont"
android:text="Restaurant Name" />
<ImageView
android:id="#+id/imgpin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblRestaurantName"
android:layout_margin="5dp"
android:src="#drawable/pin" />
<TextView
android:id="#+id/lblAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblRestaurantName"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgpin"
android:text="Address"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
<ImageView
android:id="#+id/imgphone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblAddress"
android:layout_margin="5dp"
android:src="#drawable/phn" />
<TextView
android:id="#+id/lblMobile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblAddress"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgphone"
android:text="Mobile"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
<ImageView
android:id="#+id/imgstar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblMobile"
android:layout_margin="5dp"
android:src="#drawable/star" />
<TextView
android:id="#+id/lblStar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblMobile"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgstar"
android:text="Star"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/DetailSection2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignBottom="#+id/DetailSection1"
android:layout_toLeftOf="#+id/DetailSection3"
android:layout_toRightOf="#+id/lblStar" >
<ImageView
android:id="#+id/imgmore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/read_more" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/DetailSection3"
android:layout_width="95dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/HeaderLayout"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:background="#drawable/photo_cover" >
<ImageView
android:id="#+id/imgRestaurant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/lblMobile"
android:layout_margin="5dp"
android:src="#drawable/rihanna" />
</RelativeLayout>
</RelativeLayout>
From the 9-patch drawable image you posted:
The bottom line which indicates the horizontal data population on the view wasn't drawn from the starting point of left.
I am not sure about it. And I know I wasn't clear in explaining the above line.
Just check this:
Consider the below 9-patch is used as a background for a TextView. If you put some text in it, it will start from the area where the bottom line is drawn. Which mean it will start from the left and go all the way to right.
If you use the following 9-patch as a background and try the same thing which you did above. Will result in Text not written from the left. It leaves a bit padding.
That is the reason why you get such result. Of course I am 100% sure about it.
So, just to find out if this works. Try changing the bottom line to fill complete image.
I think you better apply the background color for which layout you want exactly.And one more keep the code so that we can understand easily what is your issue.