I'm trying to possition my button not exactly in center, but let's say in the 2/5s of the screen height, I was looking for attribute unsuccessfully, so I tried this approach
<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="#drawable/background"
android:padding="20dp" >
<ImageButton
android:id="#+id/flashlight_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#+id/fakeView"
android:background="#null"
android:contentDescription="#string/flashlight_button_description"
android:src="#drawable/freeml_bright" />
<View
android:id="#+id/fakeView"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerInParent="true"
android:background="#FFAABB" />
</RelativeLayout>
However it does not work, even if I set margin on the fake view.
Padding attribute works, however as it is a big image and if I want it to start at 2/5ths of screen height, it covers the center point of screen, so if I use padding attribute it works but it pushes it away from center and does not allow it to cover it.
Alhough, I made it work using LinearLayout, which I wanted to avoid because there are more Views on top and bottom next to each other so it would lead to nested views using linear layout. Unfortunately I think its the only option.
It basically it uses another linear layout that fills the remaining space left unused by top and bottom views with height=0dp and weight=1 and sets its gravity to center.
<?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:padding="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/application_logo_description"
android:src="#drawable/mylight" />
<ImageButton
android:id="#+id/settings_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#null"
android:contentDescription="#string/settings_button_description"
android:src="#drawable/settings_button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="#+id/flashlight_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:contentDescription="#string/flashlight_button_description"
android:src="#drawable/flashlight_button_selector" />
<View
android:id="#+id/fakeView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="60dp"
android:background="#FFAABB" />
</LinearLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:contentDescription="#string/powered_by_description"
android:src="#drawable/powered_by" />
<ImageButton
android:id="#+id/ad_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:background="#null"
android:contentDescription="#string/ad_button_description"
android:src="#drawable/freeml" />
</LinearLayout>
Depending on the screen size of the target device, padding by X dp might move it more than just a fifth of the height.
You might have to code this movement yourself. However, nothing prevents you from doing:
<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="#drawable/background"
android:padding="20dp" >
<View
android:id="#+id/fakeView"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerInParent="true"
android:background="#FFAABB" />
<ImageButton
android:id="#+id/flashlight_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#+id/fakeView"
android:marginBottom="50dp"
android:background="#null"
android:contentDescription="#string/flashlight_button_description"
android:src="#drawable/freeml_bright" />
</RelativeLayout>
Don't use margin, use padding (top), like so:
<View
android:id="#+id/fakeView"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerInParent="true"
android:paddingTop="80dp"
android:background="#FFAABB" />
That should work, though I've not tested it!
try using attribute android:layout_toLeftOf="#+id/fakeView"
Related
I want my green picture file to fill my android application's screen, but it does not fill the screen no matter what I try and I don't know why. I tried applying the fitXY attribute, I tried setting the width and height of the imageview in java to values larger than the screen width/height and it still doesn't fill the screen. It appears to be stuck at some fixed dimension. The preview image in the xml perspective shows me this http://imgur.com/a/hEzFZ and the actual outcome is this http://imgur.com/a/qPGN2
I do not know what to try anymore. Can someone please recommend something? I have included the xml code below.
<FrameLayout
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"
tools:context=".MainActivity">
<FrameLayout
android:id="#+id/camera_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Capture"
android:id="#+id/capture"
android:layout_gravity="center_horizontal|bottom" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imgClose"
android:layout_gravity="right|top"
android:background="#android:drawable/ic_menu_close_clear_cancel"
android:padding="20dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/redReference"
android:src="#drawable/red"
android:layout_gravity="center" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/blueReference"
android:src="#drawable/blue"
android:layout_gravity="center" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/green"
android:src="#drawable/green"
android:layout_gravity="center" />
</FrameLayout>
Although it is not clear from this code what exactly is wrong, here are some things to check:
android:layout_width and android:layout_height should have the value match_parent.
Make sure that the size of the parent of the FrameLayout matches the size of the screen.
EDIT: This worked for me (I have removed some colours):
<FrameLayout 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"
tools:context=".MainActivity">
<FrameLayout
android:id="#+id/camera_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<Button
android:id="#+id/capture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:text="Capture" />
<ImageButton
android:id="#+id/imgClose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|top"
android:background="#android:drawable/ic_menu_close_clear_cancel"
android:padding="20dp" />
<ImageView
android:id="#+id/redReference"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:layout_gravity="center"
android:src="#drawable/green" />
</FrameLayout>
EDIT 2: if you want to display just a colour you don't need to put an image there. Just use the colour code. This way you can also remove the scaleType line.
I have a TextView that has a height of wrap_content.On the top and the bottom is a TextView line. I was wondering if there is anyway to have the lines resize based on the height determined by the text wrap. See Image below.
Note: The background of the TextView is transparent. so I cannot just draw the line through and use a FrameLayout.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/margin_connection_line"
android:layout_marginBottom="#dimen/margin_connection_line"
>
<View
android:id="#+id/top_vertical_line"
android:layout_above="#+id/connection_text"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#color/font_white"
/>
<TextView
android:id="#+id/connection_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_larger"
android:layout_marginRight="#dimen/margin_larger"
android:layout_gravity="center"
android:padding="#dimen/margin_larger"
android:gravity="center"
android:textColor="#color/font_white"
android:background="#drawable/connection_white_border"
android:text="#string/sample_text"
/>
<View
android:id="#+id/bottom_vertical_line"
android:layout_below="#+id/connection_text"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#color/font_white"
/>
</RelativeLayout>
I don't really understand if the two lines are TextViews or just Views.
Anyway you should use a simple RelativeLayout. This is to have two lines with 10dp width.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<View
android:layout_width="10dp"
android:layout_height="match_parent"
android:layout_above="#+id/textView"
android:layout_centerHorizontal="true" />
<View
android:layout_width="10dp"
android:layout_height="match_parent"
android:layout_below="#+id/textView"
android:layout_centerHorizontal="true" />
I'm updating an old existing app to be 4+ only and am trying to introduce a flavour of Material Design for < Lollipop. To that end, I am using MaterialDesignLibrary to add a few elements - in particular, the floating button.
The floating button displays OK, along with its animation, but I cannot get its bottom position displaying correctly.
Despite the recommendation that the component should be put in the right-bottom of the screen, I am trying to put the component in the right-bottom of my container wrapper... The right positioning works ok, but the bottom positioning seems to take from the wrong element.
Here is my xml for the section in the screen:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:layout_marginTop="10dip" >
<RelativeLayout
android:id="#+id/llFeelingContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/light_background"
android:baselineAligned="true"
android:orientation="vertical" >
<TextView
android:id="#+id/tvFeelingTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="3dip"
android:paddingLeft="5dip"
android:textSize="16sp" />
<View
android:id="#+id/vSeparatorTop"
android:layout_width="match_parent"
android:layout_height="1dip"
android:layout_below="#id/tvFeelingTitle"
android:background="#color/material_lightgreen_100" />
<LinearLayout
android:id="#+id/llCircleContentHolder"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_below="#id/vSeparatorTop"
android:baselineAligned="false"
android:orientation="horizontal"
android:paddingBottom="5dip"
android:paddingTop="3dip" >
<LinearLayout
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:gravity="center"
android:text="pain"
android:textSize="14sp"
android:textStyle="bold" />
<com.app.prohealth.extras.CircleDisplay
android:id="#+id/circlePain"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/circle_0"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:gravity="center"
android:text="energy"
android:textSize="14sp"
android:textStyle="bold" />
<com.app.prohealth.extras.CircleDisplay
android:id="#+id/circleMood"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/circle_0"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:gravity="center"
android:text="mood"
android:textSize="14sp"
android:textStyle="bold" />
<com.app.prohealth.extras.CircleDisplay
android:id="#+id/circleEnergy"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/circle_0"
android:gravity="center" />
</LinearLayout>
</LinearLayout>
<View
android:id="#+id/vSeparatorBottom"
android:layout_width="match_parent"
android:layout_height="1dip"
android:layout_below="#id/llCircleContentHolder"
android:background="#color/material_lightgreen_100" />
<TextView
android:id="#+id/tvFeelingSubTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/vSeparatorBottom"
android:paddingBottom="3dip"
android:paddingLeft="5dip"
android:text="How are you feeling now?"
android:textSize="16sp" />
</RelativeLayout>
<com.gc.materialdesign.views.ButtonFloat
android:id="#+id/buttonFloat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginTop="20dp"
android:background="#1E88E5"
materialdesign:animate="true"
materialdesign:iconDrawable="#drawable/fab_ic_add" />
</FrameLayout>
Here is a shot of where the Floating Button appears, and where it should appear:
You'll see in the code that I have tried negative margins and padding, but nothing I've tried has had any effect.
The Floating Button should appear aligned with the bottom of tvFeelingSubTitle; what has gone wrong?
UPDATE
The suggestion from mistwalker did work, in as much as the button now aligns itself to the bottom. However, it expands the height of the bottom container to match the height of the button:
I tried a number of different variations on the suggestion, which either squashed the button to fit a fixed height container, or overwrote the content completely.
The layout I am wanting to create is more like this:
Maybe this isn't possible and I'm wasting my time and yours...
What do you think?
Try putting
android:layout_below="#id/vSeparatorBottom"
android:align_baseline=#id/tvFeelingSubTitle
android:alignParentRight="true"
and remove the margin attributes plus the alignParentBottom one.
That should do it.
ADD:
About your second question - You are seeing that because your floating action button(FAB) is INSIDE your RelativeLayout.
Instead have FrameLayout as the outermost parent and the RelativeLayout (minus the FAB) and FAB as siblings.
Then adjust the style on the FAB to sit in the bottom right corner of your FrameLayout with layout_gravity=bottom|right and any margins you may want to add.
I have 2 image views in a linear layout like so:
<LinearLayout
style="#style/home_icon_row"
android:orientation="horizontal">
<ImageView
android:id="#+id/ibtn_home_bus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ico_bus_selector" />
<ImageView
android:id="#+id/ibtn_home_butoday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ico_butoday_selector" />
</LinearLayout>
How can i align the two images so that they are evenly placed within the linear layout. Something similar to "justified text" so that it has equal spacing on the left and right of the image from each other and the border of the screen.
it's not the best solution, but it should work:
<LinearLayout
style="#style/home_icon_row"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="0dp"
android:enable="false"
android:focussable="false"
android:clickable="false"
/>
<ImageView
android:id="#+id/ibtn_home_bus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ico_bus_selector" />
<View
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="0dp"
android:enable="false"
android:focussable="false"
android:clickable="false" />
<ImageView
android:id="#+id/ibtn_home_butoday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ico_butoday_selector" />
<View
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="0dp"
android:enable="false"
android:focussable="false"
android:clickable="false" />
</LinearLayout>
if this is for some kind of landing it's ok but if it's a hard used layout think about implementing it dinamically via javacode to make it faster.
EDIT: i added 3 attributes ( enable, focussable, clickable ) to disable the placehodler view so that they'll be considered only at measures/layout time, but not during events handling.
// try this way here is alternative to use two sub linear layout rather three View.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/home_icon_row"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/ibtn_home_bus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ico_bus_selector" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/ibtn_home_butoday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ico_butoday_selector" />
</LinearLayout>
</LinearLayout>
You should be able to get similar effect by using layout_width="0dp", layout_weight="1" and scaleType="centerInside" for both ImageViews.
The only difference is that space between the images can be bigger.
<LinearLayout
style="#style/home_icon_row"
android:orientation="horizontal"
android:padding="#dimen/padding">
<ImageView
android:id="#+id/ibtn_home_bus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ico_bus_selector"
android:layout_marginRight="#dimen/padding"/>
<ImageView
android:id="#+id/ibtn_home_butoday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ico_butoday_selector" />
</LinearLayout>
I have a list of elements and a layout at the bottom of the screen. This layout contains some ImageButtons. It looks in such a way:
Here is my markup:
<?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" >
<ListView
android:id="#+id/cloudListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/cloud_list_layout"
android:layout_alignParentTop="true" >
</ListView>
<LinearLayout
android:id="#+id/cloud_list_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:paddingBottom="3dp"
android:paddingTop="3dp"
android:visibility="visible" >
<ImageButton
android:id="#+id/btn_cloud_copy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/cloud_copy_selector" />
<ImageButton
android:id="#+id/btn_cloud_paste"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/cloud_paste_selector" />
<ImageButton
android:id="#+id/btn_cloud_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/cloud_delete_selector" />
</LinearLayout>
</RelativeLayout>
I want to align my ImageButtons uniformly across the entire width. I now have three buttons but they may be more or less. Is it possible to apply some universal markup to the bottom layout that provides uniform aligning across the with for any number of buttons? For three buttons it must look like this:
Thanks!
Apply android:layout_weight="1" to all the ImageButton and change
android:layout_width="wrap_content"
to
android:layout_width="match_parent"
take a look at the weight property.
<ImageButton
android:id="#+id/btn_cloud_copy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/cloud_copy_selector"
android:layout_weight="1"
/>
<ImageButton
android:id="#+id/btn_cloud_paste"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/cloud_paste_selector"
android:layout_weight="1"
/>
<ImageButton
android:id="#+id/btn_cloud_delete"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/cloud_delete_selector"
android:layout_weight="1"
/>