I want to create a layout like this:
I have 3 different images: the background, the white square and the V sign.
How can I position them as in the photo, if I want the box to move from side to side
and the V sign to fade in\out when onClick is triggered.
I have tried:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#drawable/off_background">
<ImageView
android:id="#+id/handle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/handle"
android:scaleType="centerInside" />
<ImageView android:id="#+id/switch_v"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/switch_v"
android:layout_gravity="center"
android:scaleType="centerInside"/>
</RelativeLayout>
which gives me the order correctly, but not posed correctly:
You have to use layout_align for this issue. I have tested it for your example and it worked correctly.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#drawable/off_background" >
<ImageView
android:id="#+id/handle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:scaleType="centerInside"
android:src="#drawable/handle" />
<ImageView
android:id="#+id/switch_v"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/handle"
android:layout_alignTop="#id/handle"
android:layout_alignBottom="#id/handle"
android:layout_alignRight="#id/handle"
android:layout_gravity="center"
android:scaleType="centerInside"
android:src="#drawable/switch_v" />
</RelativeLayout>
Create a drawable for the the white square and the V sign:
white_square_and_V_sign.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<bitmap
android:src="#drawable/handle"/>
</item>
<item>
<bitmap
android:gravity="center"
android:src="#drawable/switch_v"/>
</item>
</layer-list>
Create a drawable for the the white square:
white_square.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<bitmap
android:src="#drawable/handle"/>
</item>
</layer-list>
Create a Selector:
mySelector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/white_square"
android:state_pressed="true" />
<item android:drawable="#drawable/white_square_and_V_sign" />
</selector>
Use it in your layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#drawable/off_background" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/mySelector"/>
</RelativeLayout>
Related
I want to add a background behind the button. I want to create an opaque shape from white color for this background.. I did this with a gradient, but I couldn't. I want to create a soft shape.. I want a white shape like in the picture
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="270"
android:dither="false"
android:endColor="#FFFFFF"
android:startColor="#CCFFFFFF" />
<corners android:radius="5dp" />
</shape>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#drawable/drop_shadow" // here
android:paddingTop="16dp">
<TextView
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
android:gravity="center"
android:text="#string/next"
android:textColor="#color/white"
android:textSize="22sp"
android:textStyle="bold" />
</RelativeLayout>
You should use a FrameLayout as root layout, and use an ImageView anchored to the bottom of the screen:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/id_framelayout"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".YourActivity">
<TextView
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
android:gravity="center"
android:text="#string/next"
android:textColor="#color/white"
android:textSize="22sp"
android:textStyle="bold"
/>
<LinearLayout
android:orientation="vertical"
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageView
android:src="#drawable/shadow"
android:layout_width="match_parent"
android:layout_height="200dp"
/>
<FrameLayout
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="200dp">
< IF YOU WANT, YOU CAN INSERT HERE YOUR BUTTON >
</FrameLayout>
</LinearLayout>
</FrameLayout>
The shadow should be defined on res/drawable/shadow.xml as follows:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="-90"
android:endColor="#FFFFFF"
android:centerColor="#88FFFFFF"
android:startColor="#android:color/transparent"
android:type="linear">
</gradient>
</shape>
In my view, I would like a ripple effect to appear whenever a user touches an ImageView in the layout. I've tried wrapping the ImageView inside a RelativeLayout, but it hasn't worked. Here is the layout:
<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"
tools:context="com.sample.me.TapActivity" >
<RelativeLayout
android:id="#+id/tap_view_frame"
android:layout_width="#dimen/activity_tap_image_width"
android:layout_height="#dimen/activity_tap_image_height"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:clickable="true"
android:background="#drawable/ripple_view" >
<ImageView
android:id="#+id/tap_view"
android:src="#drawable/ram"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:clickable="true" />
</RelativeLayout>
<TextView
android:id="#+id/tap_name_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white"
android:layout_marginLeft="#dimen/textview_horizontal_margin"
android:layout_alignParentLeft="true"
android:layout_above="#+id/tap_number_textView"/>
<TextView
android:id="#+id/tap_number_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white"
android:layout_marginBottom="#dimen/textview_vertical_margin"
android:layout_alignLeft="#+id/tap_name_textView"
android:layout_alignBottom="#+id/tap_view_frame" />
<android.support.v7.widget.CardView
android:id="#+id/tap_card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/cardview_horizontal_margin"
android:layout_marginRight="#dimen/cardview_horizontal_margin"
android:layout_marginTop="#dimen/cardview_vertical_margin"
android:layout_below="#+id/tap_view_frame">
<android.support.v7.widget.RecyclerView
android:id="#+id/tap_options_recyclerview"
android:layout_width="match_parent"
android:layout_height="#dimen/cardview_tap_height" />
</android.support.v7.widget.CardView>
And here is the "ripple_view" drawable:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#ffa0a0a0">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#ffa0a0a0"/>
</shape>
</item>
</ripple>
I have also tried adding in the android:background="?android:attr/selectableItemBackground" tag, but that didn't seem to help. Can anyone explain why the ripple is not showing up? I used the same method to enable the effect in my custom buttons and RecyclerView rows, but it is not working for the RelativeLayout. Ideally, I would like to avoid using a third party library for something as simple as this.
I want to create a button with background color, icon and text in android.
But I don't know how to add image. My XML is:
<?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:layout_margin="12dp"
android:orientation="vertical" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button"
android:text="BOTON"
/>
</TableLayout>
</LinearLayout>
And my background:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape android:shape="rectangle" >
<corners android:radius="6dip" />
<stroke android:width="1dip" android:color="#5e7974" />
<gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92" />
</shape>
</item>
</selector>
I want to make some like this:
how add background image plus text in my background button? I tried put icon with property android:drawableleft but the size was to little for the size of button...
This isn't actually that hard. I just had to do this for my own project.
Android Buttons have a drawableLOCATION property in the XML.
To put an image at the top, as you want it, you'd use
android:drawableTop="#drawable/your_drawable_icon"
All four possible options are:
android:drawableLeft
android:drawableRight
android:drawableBottom
android:drawableTop
To adjust the spacing/padding of the image icon, you can use
android:drawablePadding="12dp"
You can read more about this here.
If that isn't accurate enough for you, you can use a RelativeLayout and put stuff in it to look right.
I had to do that for my current project. So instead of the button, I had this for my XML:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:id="#+id/applianceInfoLayout"
android:clickable="true"
android:background="#drawable/button_background" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/service_menu_icon_padding"
android:layout_marginRight="#dimen/service_menu_icon_padding"
android:id="#+id/infoTextView"
android:src="#drawable/ic_applianceinfo"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:layout_centerVertical="true"
android:text="Info"
android:textColor="#E6E7E8"
android:fontFamily="sans-serif-light"
android:textAllCaps="false"
android:textSize="22sp"
android:layout_toRightOf="#id/infoTextView"/>
</RelativeLayout>
Which gave me this:
I have a background set in my activity_main.xml simply as that:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background4">
And I also have this imageview:
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="14dp"
android:layout_toLeftOf="#+id/textView5"
android:src="#drawable/contact" />
and my selector.xml looks like that:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/contact_pressed"/>
<item
android:state_focused="true"
android:drawable="#drawable/contact"/>
<item android:drawable="#drawable/contact"/>
</selector>
And nothing happens on image press
try to change this:
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="14dp"
android:layout_toLeftOf="#+id/textView5"
android:src="#drawable/contact" />
with this:
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="14dp"
android:layout_toLeftOf="#+id/textView5"
android:src="#drawable/selector" />
Obviously your selector.xml should be into drawable folder
The selector you mention above IS a background. What View are you trying to use? Maybe use an ImageView, you can set your selector as the "background" then use the image as the "src"? Alternatively, you could use seperate overlapping views in a FrameLayout or a RelativeLayout
I have to make another highlight color for ListView item. I use custom adapter for items, and i have following code:
Layout:
<?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="fill_parent"
android:background="#FFFFFF"
android:weightSum="1.0"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_weight="0.13"
android:background="#drawable/booklist_header"
android:orientation="horizontal"
android:layout_height="0dp" >
<ImageView
android:id="#+id/imageViewBookListBack"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:src="#drawable/back_button" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_weight="0.77"
android:layout_height="0dp" >
<ListView
android:id="#+id/listViewCurrentList"
android:listSelector="#drawable/selector"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</ListView>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutBooklistAdwhirl"
android:layout_width="fill_parent"
android:layout_weight="0.1"
android:layout_height="0dp" >
</LinearLayout>
</LinearLayout>
Code for item layout:
<?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="fill_parent"
android:background="#FFFFFF"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageViewBookListItemImage"
android:layout_width="120dp"
android:layout_marginTop="15dp"
android:layout_height="120dp" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="135dp"
android:layout_marginTop="15dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textViewBookListItemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textColor="#000000"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textViewBookListItemAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textColor="#000000"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
Code for selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#color/green" /> <!-- focused -->
<item android:state_focused="true" android:state_pressed="true" android:drawable="#color/green" /> <!-- focused and pressed-->
<item android:state_pressed="true" android:drawable="#color/green" /> <!-- pressed -->
<item android:drawable="#color/green" /> <!-- default -->
</selector>
Code for color.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="green">#006400</color>
<color name="white">#FFFFFF</color>
</resources>
But I have a problem: ListView item doesn't change color by click! It has white color always. Where have I made mistake?
This is how you do it:
First, in your ListView, put the following:
android:listSelector="#00000000"
This makes your listSelector (the color you normally see when you click the listview) transparent.
Next, set the LinearLayout of your item layout to this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/selector"
android:orientation="horizontal" >
I had the same problem a few days ago and it took me ages to figure this out. Hopefully it works for you!
You can try to add this: android:drawSelectorOnTop="true" to the definition of the ListView.
Hope this will help you!
P.S. You can optimize your main layout and remove the unnecessary layouts. You can use layoutopt for this.
android:drawSelectorOnTop="true"
Even if this is late to the question, I came to a simpler solution, which I would like to share even for my future self:
In your ListView just set
android:listSelector="#drawable/selector"
In your List Item you need to remove the background.