I am trying to add a background image for a button and it is working, but not as I expected.
1st picture (without background)
2nd picture (with background)
I would like the background to cover only the button. In other words, the image should have the same form as the 2 buttons from above (I'm talking about the round corners and a bit smaller size).
Here is the xml of the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main" tools:context=".MainActivity"
android:orientation="vertical">
<LinearLayout android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent">
<Button
android:onClick="playerStats"
android:text="#string/plStats"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<LinearLayout android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent">
<Button
android:text="#string/comp"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<LinearLayout android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent">
<Button
android:background="#drawable/calendar"
android:text="#string/calendar"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
its easy to do that
you should use ImageButton and remove those Buttons for example
<ImageButton
android:src="#drawable/calendar"
android:text="#string/calendar"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
also if you want to remove the background of that button you can use :
android:background="#null"
Replace your layout with these layout...It can be helpfil for you
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main" tools:context=".MainActivity"
android:orientation="vertical">
<LinearLayout android:layout_weight="1" android:layout_height="match_parent" android:layout_width="match_parent">
<Button
android:onClick="playerStats"
android:text="#string/plStats"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<View ////I HAVE ADDED VIEW WHICH IS TRASNPARENT TO SEPRATE THE BUTTONS
android:layout_width="fill_parent"
android:layout_height="10dp"
android:background="#android:color/transparent" >
</View>
<LinearLayout android:layout_weight="1" android:layout_height="match_parent" android:layout_width="match_parent">
<Button
android:text="#string/comp"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<View ////I HAVE ADDED VIEW WHICH IS TRASNPARENT TO SEPRATE THE BUTTONS
android:layout_width="fill_parent"
android:layout_height="10dp"
android:background="#android:color/transparent" >
</View>
<LinearLayout android:layout_weight="1" android:layout_height="match_parent" android:layout_width="match_parent">
<Button
android:background="#drawable/calendar"
android:text="#string/calendar"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<View ////I HAVE ADDED VIEW WHICH IS TRASNPARENT TO SEPRATE THE BUTTONS
android:layout_width="fill_parent"
android:layout_height="10dp"
android:background="#android:color/transparent" >
</View>
The simplest solution is: You need to edit your image background (make it a little smaller and have corner) - it can be done easily by using Photoshop
Than use 9-patch tool for make 9-patch image (9-patch images can automatically resize to accommodate the contents of the view and the size of the screen)
The "without background" button is actually displaying it default background, so setting new background will override that corner-rounded-gray thing...
Check this question.
I recommend using ImageButton with android:src instead.
Related
How does one lay out 3 views horizontally such that the outer 2 views are of fixed width and the middle view fills the remaining available horizontal space? All of my attempts to do this have resulted in the rightmost view being pushed off the screen.
I struggled for a while to get this working and found how how to do it with RelativeLayout. See code example below and pay close attention to the usage of layout_toRightOf, layout_toLeftOf, and layout_alignParentRight
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="#dimen/eventDetailSectionHeight"
android:background="#color/grayout">
<SomeFixedWidthView
android:id="#+id/leftFixedWidthView"
android:layout_width="100dp"
android:layout_height="match_parent"/>
<SomeVariableWidthView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/leftFixedWidthView"
android:layout_toLeftOf="#+id/rightFixedWidthView"/>
<SomeFixedWidthView
android:id="#+id/rightFixedWidthView"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Try setting layout_weight for each child according to requirement.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<View
android:id="#+id/leftView"
android:layout_width="0dp"
android:layout_weight="0.4"
android:layout_height="match_parent"
android:background="#ff0000"/>
<View
android:id="#+id/middleView"
android:layout_width="0dp"
android:layout_weight="0.2"
android:layout_height="match_parent"
android:background="#33cc33"/>
<View
android:id="#+id/rightView"
android:layout_width="0dp"
android:layout_weight="0.4"
android:layout_height="match_parent"
android:background="#ff0000"/>/>
</LinearLayout>
Use below code for your desired result
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/leftView"
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="#ff0000"/>
<View
android:id="#+id/middleView"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#33cc33"/>
<View
android:id="#+id/rightView"
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="#ff0000"/>
</LinearLayout>
I have some difficulties with designing my app. My screen should contain toolbar and some edit fields. these fields should be places in the upper part of the screen under the toolbar. In the end it should look like this (sorry for quality of the image):
For this I decided to break the screen height into four equals parts and to pose my edit fields in the second quarter. I tried to use the following code to acchieve this, but it doesn't help: all the smaller relative layouts take all the screen.
I also tried:
to substitute the parent Relative layout with Linear layout
to replace "fill_parent" with "wrap_content".
After these actions the smaller layouts simply disappear.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:baselineAligned="false" >
<include android:id = "#+id/toolbarLogo" layout="#layout/toolbar_logo"></include>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.25"
/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.25"
>
<EditText
.../>
<EditText
...
/>
<Button
.../>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.5"
/>
</RelativeLayout>
Could you help me please with this problem?
Change your root layout to be a LinearLayout and ensure that the orientation is set to vertical. Change the layout_width of the children to be 1. See code below for an example:
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#f00"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#0f0"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00f"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#f0f"/>
</LinearLayout>
Try It.. Set
android:layout_weight="1"
for each LinearLayout and
set
android:weightSum="4"
for Parent LinearLayout and
Like This Example..
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="4">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#0ff"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ff2"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#01a"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#101"/>
</LinearLayout>
</RelativeLayout>
You can use google library PercentRelativeLayout with this library you can set width, height and margin of your views by procentege which is great because in all screen they look the same and of course it is not hard to code it. Here example:
<android.support.percent.PercentRelativeLayout
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">
<ImageView
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
app:layout_marginTopPercent="25%"
app:layout_marginLeftPercent="25%"/>
</android.support.percent.PercentRelativeLayout>
you must add this line in your build.gradle
dependencies {
compile 'com.android.support:percent:23.2.0'
}
Official documentation by Google https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html
And for your case should look maybe like this:
<RelativeLayout
android:id="#+id/firstLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_heightPercent="10%"
/>
<LinearLayout
android:id="#+id/secondLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#+id/firstLayout"
android:orientation="vertical"
app:layout_heightPercent="40%">
<EditText
android:layout_width="200dp"
android:layout_height="60dp"/>
<EditText
android:layout_width="200dp"
android:layout_height="60dp"/>
<Button
android:layout_width="200dp"
android:layout_height="60dp"/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#+id/secondLayout"
app:layout_heightPercent="30%"
/>
</android.support.percent.PercentRelativeLayout>
Hope this helps.
I need to dynamically resize central view, when keyboard (or another view) opens up from the bottom of the screen. I set android:windowSoftInputMode="stateHidden|adjustResize" in manifest, bit it doesn't helps. When keyboard opens, view is cropped from top and bottom. I need to get it scaled like on this picture.
It's name SnappingRecyclerView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
tools:context=".activity.MainActivity">
<LinearLayout
android:id="#+id/show_camera"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f4f5f7">
<ImageButton
android:id="#+id/btn_camera"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:background="#f4f5f7"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/camera59" />
...
</RelativeLayout>
...
</LinearLayout>
<com.superup.smartshelf.view.SnappingRecyclerView
android:id="#+id/item_list"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_above="#id/show_camera" />
</RelativeLayout>
I need to create a layout as shown in the image.
The rounded button with the arrow needs to be exactly between the blue and the gray background.
I'm having difficulties placing it without specifying the margins precisely, which is something I don't want to do because there is no guarantee it will look good on all resolutions and devices.
I would appreciate an xml sample for that
Thanks!
Use the desired drawable.. hope it works.. you can set width and height according to your need.
<?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" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:background="#1b96d9"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#e6e6e6"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/arrow" />
</FrameLayout>
</LinearLayout>
What I want to create should look like this :
I want it like this because I want the button to cover a part of the content of the webview making it unreachable for the user.
You can do it using FrameLayout as follows...
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<WebView
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Button" />
</FrameLayout>
Yes You can do.for that purpose you have to use relative layout.first you have add webview,then add image button and set gravity bottom to image button.i think this can help you.
<?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"
android:orientation="vertical" >
<WebView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="20dp"
/>
<ImageButton
android:layout_width="fill_parent"
android:layout_height="40dp"
android:background="#android:color/darker_gray"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>