I want to make one transparent rectangle view over one semitransparent rectangle view.
Desired:
┌──────────────┐
│ │
│ ┌─────────┐ │
│ │transparent │ │
│ └─────────┘ │
│ 50% transparent │
└──────────────┘
Actual:
┌────────────────┐
│ │
│ ┌───────────┐ │
│ │50% transparent │ │
│ └───────────┘ │
│ 50% transparent │
└────────────────┘
Code:
<View
android:id="#+id/overlay_half_shade"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/overlay_textguide"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:background="#80FFFFFF" /> // 50% transparent
<View
android:id="#+id/overlay_transparent"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="#+id/overlay_textguide"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:background="#drawable/focus_thumbnail_slide" /> // custom drawable: transparent rectangle with stroke
I guess that the whole transparency of the center region considers transparencies of both two overlapped boxes; resulting 50% transparency there. How can I solve this?
You can try like this and get your expected output
inner_shape.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:width="70dp" android:height="70dp" android:color="#80B22222" />
</shape>
in your xml layout
<RelativeLayout
android:id="#+id/overlay_half_shade"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_below="#+id/overlay_textguide"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:alpha="0.5"
android:background="#drawable/inner_shape">
Use Hierarchy like this
<RelativeLayout>
<FrameLayout ....
alpha =0.5/>
<FrameLayout ....
gravity=center
alpha =0.9/>// decide your transperany
</RelativeLayout>
I'm making an easy chatting app and I made a .9.png pic as the speech bubble. Here's a part of the message item layout XML (the bubble sent by user):
<LinearLayout
android:id="#+id/right_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#drawable/bg_send">
<TextView
android:id="#+id/right_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:textColor="#color/abc_primary_text_material_dark"/>
</LinearLayout>
The #drawable/bg_send is a 102px*102px .9.png file at app\res\. I thought it should be small displaying on my 5" 1920*1080 phone. But it's bigger than it should be and that caused blurring.
What should I do if I want to make it as I wish?
Instead of using .9.png use the drawable images instead. Here is the xml code that will fulfill your requirement.
res/drawable/bg_textview.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#607D8B"/>
<corners android:radius="30dp"/>
</shape>
The image stretches to the size of of your LinearLayout (for which it is the background). The margin around the TextView makes the LinearLayout bigger. Move the android:layout_margin="10dp" attribute to the LinearLayout to have a margin around the bubble.
Try this one
<LinearLayout
android:id="#+id/right_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
>
<TextView
android:id="#+id/right_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:background="#drawable/bg_send"
android:textColor="#color/abc_primary_text_material_dark"/>
Good luck
I am having troubles applying background color onto a list item layout. I am doing a sample app to learn android. My problem is that it shows the colored background, but it is not the size of the list item layout. Its a bit small. Its not working for some reasons, every one here suggested to set a background drawable, set it like this:
view.setBackgroundResource(R.drawable.ic_green);
I am doing this inside CursorAdapter.bindView(View view, Context context, Cursor cursor). Because of course I am dealing with list. Each item has a corresponding color data that I need to reflect on each list item. I need to do this programmatically. Since I must allow my self to change the background color as I please.
It looks like this:
My drawable resources like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFCC" />
</shape>
And this is how my list item layout looks like:
<?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="wrap_content"
android:layout_gravity="end"
android:layout_margin="5sp"
android:background="#drawable/note_style"
android:padding="5sp"
android:paddingLeft="10sp"
android:paddingRight="10sp" >
<TextView
android:id="#+id/textview_note_short"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:gravity="start"
android:maxLength="18"
android:maxLines="1"
android:text="#string/text_sample_short_note"
android:textSize="18sp" />
<TextView
android:id="#+id/textview_note_remind_every"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/textview_note_short"
android:layout_alignStart="#id/textview_note_short"
android:layout_below="#id/textview_note_short"
android:text="#string/text_sample_remind_every"
android:textSize="12sp" />
<TextView
android:id="#+id/textview_note_date_created"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignTop="#id/textview_note_short"
android:text="#string/text_sample_date"
android:textSize="12sp" />
<ImageView
android:id="#+id/imageview_note_notification_alarm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/textview_note_remind_every"
android:layout_alignRight="#id/textview_note_date_created"
android:layout_alignEnd="#id/textview_note_date_created"
android:adjustViewBounds="true"
android:contentDescription="#string/content_description_past_due"
android:maxHeight="20dp"
android:maxWidth="20dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_action_alarm" />
<ImageView
android:id="#+id/imageview_note_notification_due"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageview_note_notification_alarm"
android:layout_toLeftOf="#id/imageview_note_notification_alarm"
android:layout_toStartOf="#id/imageview_note_notification_alarm"
android:adjustViewBounds="true"
android:contentDescription="#string/content_description_past_due"
android:maxHeight="20dp"
android:maxWidth="20dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_action_due" />
</RelativeLayout>
It does change the background color at whim but, as you can see on the picture, the green background doesn't hit the edges of layout which should match the width of the screen and height-wrap its content.
Any ideas? Thank you!
I am trying to place an ImageView over a Button using RelativeLayout. Here is my xml:
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_weight="0.50" >
<Button
android:id="#+id/btnFindDaysInBetween"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue_500"
android:text="#string/dt_text_days" />
<ImageView
android:id="#+id/imageview_find_days_in_between"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="#string/empty"
android:src="#drawable/ic_check_circle_white" />
</RelativeLayout>
Here is the image screenshot:
As you can see, the ImageView's src image is not visible. However if i change the button at the back to an ImageView, the image of the top ImageView is visible. Please refer below..
Changed xml:
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_weight="0.50" >
<!--
<Button
android:id="#+id/btnFindDaysInBetween"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue_500"
android:text="#string/dt_text_days" />
-->
<ImageView
android:id="#+id/imageview_find_days"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:contentDescription="#string/empty"
android:src="#drawable/ic_send_black" />
<ImageView
android:id="#+id/imageview_find_days_in_between"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="#string/empty"
android:src="#drawable/ic_check_circle_white" />
</RelativeLayout>
Changed xml's screenshot:
What is it that i am doing wrong in the first layout?
The reason is actually very simple. :) We are so caught up thinking in 2D that we overlook the elevation - in Z.
There is nothing wrong with your first layout. The Button simply has a higher elevation than the ImageView - exactly 1dp higher. Therefore, no matter how you arrange the two views, the Button rises above.
A bit of proof:
A Button, by default gets the Widget.Material.Button style:
<!-- Bordered ink button -->
<style name="Widget.Material.Button">
<item name="background">#drawable/btn_default_material</item>
<item name="textAppearance">?attr/textAppearanceButton</item>
<item name="minHeight">48dip</item>
<item name="minWidth">88dip</item>
<item name="stateListAnimator">#anim/button_state_list_anim_material</item>
<item name="focusable">true</item>
<item name="clickable">true</item>
<item name="gravity">center_vertical|center_horizontal</item>
</style>
The attribute that introduces this elevation is android:stateListAnimator. StateListAnimator is similar to StateListDrawable, and provides state change animations. The complete xml is here: Link. But here's the base state of the button:
<!-- base state -->
<item android:state_enabled="true">
<set>
<objectAnimator android:propertyName="translationZ"
android:duration="#integer/button_pressed_animation_duration"
android:valueTo="0"
android:startDelay="#integer/button_pressed_animation_delay"
android:valueType="floatType"/>
<objectAnimator android:propertyName="elevation"
android:duration="0"
android:valueTo="#dimen/button_elevation_material"
android:valueType="floatType" />
</set>
</item>
As you can see, the elevation value for the button is set to #dimen/button_elevation_material:
<dimen name="button_elevation_material">1dp</dimen>
And that's how the ImageView ends up being behind/below the Button.
So, what can we do?
A straight-forward solution would be to set the ImageView's elevation to the same amount - 1dp.
Another solution, which will require a bit of work, is to remove the Button's elevation rather than change ImageView's. Based on the default StateListAnimator, we can create our own - and remove the elevation. Then, in your res/values-v21/styles.xml, define a style that inherits from Widget.Material.Button:
<style name="MyDepressedButtonStyle" parent="android:Widget.Material.Button">
<item name="android:stateListAnimator">#anim/customized_state_animator</item>
</style>
Now, set this style on your Button:
<Button
style="#style/MyDepressedButtonStyle"
....
.... />
Edit:
Actually, we can apply the customized StateListAnimator directly:
<Button
android:stateListAnimator="#anim/customized_state_animator"
....
.... />
No need to take the scenic route!
I found a solution:
simply android:elevation="2dp"
<Button
android:id="#+id/btnAccess"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_gravity="right|center"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView4"
android:background="#drawable/or"
android:layout_alignBottom="#+id/btnRegister"
android:layout_centerHorizontal="true"
android:layout_margin="5dp"
android:elevation="2dp" />
Actually it's much easier to just set the StateListAnimator to #null
<Button
...
android:stateListAnimator="#null" />
Source Android 5.0 android:elevation Works for View, but not Button?
Use ImageButton replace Button and set ImageButton background as transparent.
<ImageButton
android:id="#+id/btnFindDaysInBetween"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/blue_500_text"
android:background="#android:color/transparent"
/>
<ImageView
android:id="#+id/imageview_find_days_in_between"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="#string/empty"
android:src="#drawable/ic_check_circle_white" />
You can make a image that has your blue_500 color and text(that is easy to create), then set this image to your ImageButton. After that, your ImageView will see on the top of ImageButton.
Hope this help!
Button is just a TextView with a certain style applied to it, so if you replace Button with TextView you can display an ImageView on top of it. This also works on API < 21.
android:background exists for all the view. As the name suggests this is what is going to be there in the background.
android:src exists for ImageViews and its subclasses. You can think of this as the foreground. Because ImageView is a subclass of View you even have android:background for that.
If the foreground is smaller than background, the background portion which is not covered by the foreground would be visible.
Also, you can use transparency in the foreground in which case the background would be visible(transparently).
You can use BACKGROUND FOR ALL THE VIEWS.. But You can use SRC only for ImageView & ImageButton.....
#Vamsi I tried your both combinations and first one is not working with Button. You have to go through ImageView. This is what I tried with with ImageView:
While I tried to do it with Button and see what was result:
I tried to change the order but all in vain! It seems you have to go with either ImageView or ImageButton.
At the end! You can see what I had tried:
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent">
<!-- <ImageView
android:id="#+id/btnTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher_web"
android:contentDescription="#string/app_name"
android:text="#string/app_name" /> -->
<ImageView
android:layout_width="wrap_content"
android:id="#+id/imgView"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_launcher" />
<Button
android:id="#+id/btnTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imgView"
android:layout_alignTop="#+id/imgView"
android:text="#string/app_name" />
</RelativeLayout>
I had done same kind of work either with ImageView or ImageButton (probably with ImageView) and tried same approach as you were trying with Button.
Thanks
If you want to get an ImageView on top of a Button, and you are developing for Android API < 21 (for instance, KitKat = 19), the easiest way is to not use a Button at all and use 2 ImageView instead. Why would you want to do that? May be because you defined a drawable shape to make the button look "cooler", so you are already using android:background with that shape.
Ex:
<Button
android:id="#+id/button01"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/buttonshape"
/>
<ImageView
android:id="#+id/image01"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="10dp"
android:layout_marginStart="10dp"
android:src="#drawable/desiredImageOnTop"
/>
Where #drawable/buttonshape.xml is:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="30dp"
/>
<gradient
android:angle="45"
android:centerColor="#47A891"
android:centerX="35%"
android:endColor="#000000"
android:startColor="#E8E8E8"
android:type="linear"
/>
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp"
/>
<size
android:width="100dp"
android:height="100dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
</shape>
In that case, you should replace the Button with an ImageView, change android:background to android:src, and then, in the java code, you just add an OnClickListener as if it was a Button (both controls derive from View, and OnClickListener is a View event). Works like a charm!
Actually, This is not an error, it is a simple design issues. I have been working on it for last 2 hours. And at last get an easy way.
Now, I want to share the code.
<FrameLayout
android:layout_alignParentStart="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<androidx.appcompat.widget.AppCompatButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:background="#drawable/custom_button"
android:paddingLeft="33dp"
android:layout_marginStart="33dp"
android:text="CHECK APPOINTMENT"
android:textAlignment="viewEnd"
android:textSize="18sp"
/>
</LinearLayout>
<androidx.cardview.widget.CardView
android:layout_width="60dp"
android:layout_height="wrap_content"
app:cardCornerRadius="40dp">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:elevation="2dp"
android:src="#drawable/care_logo"
android:scaleType="fitCenter"
/>
</androidx.cardview.widget.CardView>
</FrameLayout>
It is working.
I placed ImageView on a Button with a diversion of RelativeLayout, hope this helps.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<View
android:id="#+id/tempview"
android:layout_width="0dp"
android:layout_height="0dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tempview"
android:background="#drawable/ic_launcher" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tempview"
android:src="#drawable/img_cancel" />
</RelativeLayout>
I have a problem with an ImageButton. The position of my image is not good into the ImageButton.
is there a way to fix that programmatically ?
<ImageButton
android:id="#+id/nouvelle_annonce_choose_image"
style="?android:attr/borderlessButtonStyle"
android:layout_width="170dp"
android:layout_height="170dp"
android:scaleType="center"
android:layout_gravity="center"
android:layout_marginTop="15dp"
android:background="#drawable/rounded_button"
android:gravity="center_vertical|center_horizontal"
android:src="#drawable/camera"
android:text="hello"
android:textColor="#color/blanc" />
rounded_button.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/blanc"/>
<stroke android:width="3sp" android:color="#color/blue_dark_normal" />
</shape>
You've started to do it, with the android:layout_marginTop. Either add a bottom margin, or else just us layout_margin, and you should be able to adjust the image as desired.
In fact, it's because of the android:layout_marginTop that your image is off centered. It is putting a large margin at the top of the image, without compensating for it at the bottom.
If margin doesn't work, then try playing with padding. Padding affects how things are aligned within the image. Padding is simply android:padding, or android:paddingBottom attributes.
Add this in your ImageButton xml:
android:scaleType="center"
Add this line in ImageButton xml
android:scaleType="fitCenter"