I want to display the spinner in a rectangle with soild fill color around it. My code is given below
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="0dp"
android:layout_height="113dp"
android:layout_margin="10dp"
android:layout_marginStart="9dp"
android:layout_marginLeft="9dp"
android:layout_marginEnd="9dp"
android:layout_marginRight="9dp"
android:background="#drawable/rectangle_shape"
android:orientation="vertical"
android:padding="10dp"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Spinner
android:id="#+id/spinmain"
android:layout_width="352dp"
android:layout_height="25dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="60dp"
android:layout_marginBottom="416dp"
android:dropDownVerticalOffset="35dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/view7" />
</LinearLayout>
and rectangle_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/re/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FF0000" />
</shape>
</item>
<item android:left="5dp" android:right="5dp" android:top="5dp" >
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
</layer-list>
But the problem is that the spinner is hidden by the rectangle linear layout
How can I bring the spinner in front of it.Please suggest
Try to change android:layout_height="113dp" from 113 to match_parent
Related
I have managed to define and use a custom InfoWindow in my Google Maps app on Android, but I can't figure out how to create a similar custom layout to that shown on the right in these examples on developer.google.
I have created a simple rounded box with a red outline as a layout and am using this as the background drawable resouce for the layout:
round_bg_box_white_with_red_border.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp" />
<solid android:color="#fff" />
<stroke
android:width="2dp"
android:color="#f00" />
</shape>
custom_info_window.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_bg_box_white_with_red_border"
android:orientation="horizontal"
android:padding="5dp">
<TextView
android:id="#+id/fixed_prefix"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:maxLines="1"
android:textColor="#f00"
android:textSize="14sp"
android:text="prefix:"
android:textStyle="bold" />
<TextView
android:id="#+id/marker_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:textColor="#000"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
Thsi all works with my code, but I'd like to add the down pointing triangle extension to the background/layout so that the InfoWindow sits a little above the marker and points to it - as in the standard Google InfoWindows.
I want the box itself to be scaled to it the content (hence using a rectangle shape), but the 'stalk' that points down to NOT scale. ie the same behaviour as the standard InfoWindows.
One might consider it as a work-around, but here is my approach to the following design outcome:
The custom window consists of the content, the outer layout with a drawable as background and an adapted material down arrow icon with 0dp margin.
Your background can easily be updated with yours, despite the fact that a border would not show up. That would need some customization if necessary. The vector code of the triangle might be integrated in another drawable combining the two or smth.
After setup of your infoWindow overwrite
#Override
public View getInfoWindow(#NonNull Marker marker) {
View infoWindow = getLayoutInflater().inflate(R.layout.info_contents, requireView().findViewById(R.id.map), false);
TextView title = infoWindow.findViewById(R.id.location_marker_title);
title.setText(marker.getTitle());
TextView snippet = infoWindow.findViewById(R.id.location_marker_snippet);
snippet.setText(marker.getSnippet());
return infoWindow;
}
My layout looks like this (important the 0dp margin bottom, layout may be simplified):
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:cropToPadding="true">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="0dp"
android:background="#drawable/bg_tooltip"
android:gravity="center_horizontal|center_vertical"
android:maxWidth="250dp"
android:maxHeight="200dp"
android:minWidth="200dp"
android:orientation="horizontal"
android:padding="#dimen/activity_vertical_margin"
app:layout_constraintBottom_toTopOf="#+id/imageView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/location_marker_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="230dp"
android:text=""
android:textColor="#color/textDark"
android:textFontWeight="600"
android:textSize="20sp" />
<TextView
android:id="#+id/location_marker_snippet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="230dp"
android:text=""
android:textColor="#color/textDark"
android:textFontWeight="400"
android:textSize="14sp"
/>
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/imageView5"
android:layout_width="80dp"
android:layout_height="20dp"
android:layout_margin="0dp"
android:cropToPadding="true"
android:adjustViewBounds="true"
android:padding="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/ic_baseline_arrow_drop_down_24"
app:tint="#color/backgroundAltDark"
tools:ignore="ContentDescription" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
My background is a simple shape with round corners:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center_horizontal">
<item>
<shape>
<solid android:color="#color/backgroundAltDark" />
<corners android:radius="#dimen/radius_small" />
</shape>
</item>
</layer-list>
And the arrow looks after customized like this:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="30"
android:tint="?attr/colorControlNormal">
<path
android:fillColor="#android:color/white"
android:pathData="M7,10l5,5 5,-5z"/>
</vector>
I have the following square shape and have managed to align it by using the marginBottom and marginLeft etc but how would I create more than one of the same shape? I tried something like this but only one is showing at the moment....
This is the code for my box shape:
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<stroke android:width="2dp" android:color="#color/colorPrimary" />
<corners android:radius="20dp"/>
</shape>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<stroke android:width="2dp" android:color="#color/colorPrimary" />
<corners android:radius="20dp"/>
</shape>
</item>
This is my main activity code:
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/box"
android:text="Write here"
android:gravity="center"
android:layout_marginBottom="200dp"
android:layout_marginRight="200dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/box"
android:text="Write here"
android:gravity="center"
android:layout_marginBottom="200dp"
android:layout_marginRight="200dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="172dp"
android:layout_height="83dp"
android:layout_marginRight="200dp"
android:layout_marginBottom="200dp"
android:background="#drawable/box"
android:gravity="center"
android:text="Write here"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.824" />
You can get multiple boxes like what you have by duplicating it just assign them and put them into position.
This is what I try to achieve:
The amount of text will determine how large portion of the list item that should have the blueish background color.
I try to achieve this with a selector but then I end up with a blueish square where the uttermost parts are grey. Like this:
Any ideas how this can be done in a simple way? I.e. preferrably using XML only.
This is my approach (yields second picture):
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:constantSize="true"
android:variablePadding="false">
<item android:drawable="#drawable/btn_round_grey"/>
</selector>
and:
<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="wrap_content"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:background="#android:color/transparent"
android:clickable="true"
android:descendantFocusability="blocksDescendants"
tools:background="#drawable/btn_round_grey"
>
<RelativeLayout
android:id="#+id/grey"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<FrameLayout
android:id="#+id/text_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignBottom="#id/grey"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="false"
android:layout_alignParentTop="true"
android:padding="#dimen/list_item_padding"
>
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="#dimen/list_item_padding"
android:background="#android:color/transparent"
android:text="TEXT"
/>
</FrameLayout>
</RelativeLayout>
You can achieve the desired output by the following code
<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="wrap_content"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:background="#drawable/roundcorner_selector"
android:clickable="true"
android:descendantFocusability="blocksDescendants" >
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/half_roundcorner_selector"
android:padding="10dp"
android:text="TEdasdadaXT" />
</RelativeLayout>
roundcorner_selector:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners android:radius="10dp" />
<solid android:color="#android:color/darker_gray" />
</shape>
half_roundcorner_selector:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners
android:bottomRightRadius="10dp"
android:topRightRadius="10dp" />
<solid android:color="#android:color/holo_blue_light" />
</shape>
You can modify this as per your requirements.
In your code you need to set the custom drawable for the TextView. Because by setting the color as background it will take as square.
I have a popup to show in my xml. It should have a border. Following is the code:-
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="20dp" >
<RelativeLayout
android:id="#+id/rl_startpopup"
android:layout_width="340dp"
android:layout_height="320dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/popup_outline"
android:orientation="vertical" />
</RelativeLayout>
The popup_outline is a shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#192423"
android:startColor="#4a7669"
android:type="linear" />
<corners android:radius="8dp" />
<stroke
android:width="2dp"
android:color="#e4f4d3" />
</shape>
here is the image of the popup:-
This "popup_outline" is the white border shown. I want to use a repeatable pattern image instead of one color as the border. I have to do this in xml. Please help
You can use a FrameLayout to show the border and inside FrameLayout use ImageView or RelativeLayout to show other content.
Example:-
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/IMAGE_OF_YOUR_CHOICE_WITH_repeatable pattern"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
></RelativeLayout>
</FrameLayout>
You can use any layout to use border and inside the layout you free to use any view or layout e.g TextView, ImageView
Example:-
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/popupbox"
android:padding="50dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your Garage is empty" />
</RelativeLayout>
I have created a custom button like this :
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false" android:state_pressed="false">
<shape>
<gradient
android:endColor="#color/title_dark_red"
android:startColor="#color/title_red"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#color/red_stroke" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_focused="true" android:state_pressed="true">
<shape>
<gradient
android:endColor="#color/title_pressed_red"
android:startColor="#color/title_pressed_red"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#color/red_stroke" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_focused="false" android:state_pressed="true">
<shape>
<gradient
android:endColor="#color/title_pressed_red"
android:startColor="#color/title_pressed_red"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#color/red_stroke" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
The problem is sensitivity of the button is very bad, not like the regular buttons. The buttons are not too small in the screen, so it's easy to touch.
What can be the problem ?
P.S I'm using Button.OnClickListener() to set click handler.
Button is in relative layout structure :
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical"
>
<TextView
android:id="#+id/titlePlace"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#drawable/expand_bg"
android:gravity="center_vertical"
android:text=""
android:textColor="#color/titletextcolor"
android:textSize="18sp"
android:textStyle="bold" />
<Button
android:id="#+id/backButton"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignBaseline="#+id/showButton"
android:layout_alignBottom="#+id/showButton"
android:layout_alignParentLeft="true"
android:background="#drawable/custom_button_back"
android:layout_marginLeft="5dip"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:text="Places"
android:textColor="#color/white"
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>
It's a hardware related question. Software just takes on click event sent by hardware and checks whether it's in view's bounds.
Other potential issues:
inaccurate touch screen
view was animated and moved to different position
view is too small or finger too big ;)