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>
Related
I am trying to make a list that looks like the list in the Material Design Guidelines. Google uses these round icons all over the place it seems like. I want to use a colored circle with a material design icon on it. Pretty much exactly like this image:from the guidelines page.
Do I need to create a circle drawable and then just set the icon on top of it, so I have two overlapping views? I feel like there must be a better solution than using two views for every icon.
To make the custom circle drawable:
..drawable/circle_drawable.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="100dip"/>
<solid
android:color="#ff4CAF50" />
<stroke
android:width="2dip"
android:color="#FFF" />
<padding
android:left="6dip"
android:right="6dip"
android:top="5dip"
android:bottom="5dip" />
</shape>
To change circle_drawable color programmatically on Activity:
String hexColor = String.format("#%06X", (0xFFFFFF & intColor));
Drawable drawable = ContextCompat.getDrawable(MyActivity.this, R.drawable.circle_drawable);
drawable.setColorFilter(intColor, PorterDuff.Mode.SRC_ATOP);
layoutWithCircleDrawable.setBackground(drawable);
Then now on you layout you must assign a new background using the new circle_drawable.xml and then just set the icon on top of it.
Layout
...........
<FrameLayout
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
android:id="#+id/layoutWithCircleDrawable"
android:layout_gravity="center_vertical"
android:background="#drawable/circle_drawable">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView36"
android:src="#drawable/ic_folder"/>
</FrameLayout>
To create a circle drawable you can use this library https://github.com/hdodenhof/CircleImageView
It's very good implementation.
add this to layout file
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="#drawable/profile"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>
and for gradle dependencies
dependencies {
...
compile 'de.hdodenhof:circleimageview:2.1.0'
}
for the images you can use picasso library
Aspicas had the right answer, but I made a few changes and want to post my code just in case it helps in the future. And since I am using C# (Xamarin.Android) some methods look a little different.
My circle drawable:
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#33464d"/>
</shape>
My layout for the full list item. I am using vectors for icons so I have to use AppCompatImageView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/routines_rv_item"
android:layout_width="match_parent"
android:layout_height="72dp"
android:orientation="horizontal">
<FrameLayout
android:id="#+id/icon_frame"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="top"
android:layout_margin="16dp"
android:background="#drawable/circle_drawable">
<android.support.v7.widget.AppCompatImageView
android:id="#+id/list_icon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
android:scaleType="fitCenter"/>
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/rv_main_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingBottom="2dp"
android:paddingRight="16dp"
android:textColor="#color/primary_text_default_material_light"
android:textSize="16sp" />
<TextView
android:id="#+id/rv_secondary_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingRight="16dp"
android:paddingTop="2dp"
android:textColor="#color/secondary_text_default_material_light"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
And the relevant code in my adapter where I change the color and set the icon image (note: have to pass in activity context to the adapter to access resources):
...
var vh = (ViewHolder)holder;
var drawable = ContextCompat.GetDrawable(_context, Resource.Drawable.circle_drawable);
string colorStr = _context.Resources.GetString(Resource.Color.primary).Substring(3);
drawable.SetColorFilter(Color.ParseColor("#"+colorStr), PorterDuff.Mode.SrcAtop);
vh.IconFrame.Background = drawable;
vh.ListIcon.SetImageResource(Resource.Drawable.ic_book_white_24px);
...
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 have two clickable text views with the same drawable left image. When I open fragment first time the first image looks bigger then second one. After clicking on first text view the next fragment is opening and then when I return back two images have the same size. What's wrong? Please help to find out reason of this bug.
This is my layout:
<include layout="#layout/toolbar" />
<RelativeLayout
android:id="#+id/dmvLawyers"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true">
<TextView
style="#style/DashBtnStyle"
android:drawableLeft="#drawable/lawyer_selected"
android:text="#string/dmv_lawyers"
android:textAllCaps="false" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingRight="#dimen/add_friends_padding_left"
android:src="#drawable/add" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="#dimen/divider"
android:background="#color/lineColor" />
<RelativeLayout
android:id="#+id/tlcLawyers"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true">
<TextView
style="#style/DashBtnStyle"
android:drawableLeft="#drawable/lawyer_selected"
android:text="#string/tlc_lawyers"
android:textAllCaps="false" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingRight="#dimen/add_friends_padding_left"
android:src="#drawable/add" />
</RelativeLayout>
</LinearLayout>
This is image drawable (lawyer_selected.xml), where femida is png image, and white background is needed for selected state (button in selected state is green and image should be with white frame):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<padding
android:bottom="#dimen/dash_icon_padding"
android:left="#dimen/dash_icon_padding"
android:right="#dimen/dash_icon_padding"
android:top="#dimen/dash_icon_padding"/>
<solid android:color="#android:color/white"/>
<corners
android:radius="#dimen/dash_icon_radius"/>
</shape>
</item>
<item android:drawable="#drawable/femida"/>
</layer-list>
Image femida.png
Just use nested LinearLayout instead and use android:layout_weight="1" or any required value to you and it will work for sure.
**In your case it will be 1 only, while the main parent LinearLayout can have wrap_content as height
I am trying a simple application where I wanted to show some values within a circle. I referred some article and using shape files I can able to generate circle.
But I am not able to add TextView within that circle.
Can anyone help me in solving this?
here is my shape file.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<stroke android:width="2dp" android:color="#000000"/>
</shape>
here is my layout file.
//<RelaiveLayout> outer RelativeLayout
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/eDeleted"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true">
<View android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:background="#drawable/circle"/>
</LinearLayout>
</RelativeLayout>
I want to add a TextView within View.
Try this:
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="text"
android:background="#drawable/circle"
android:gravity="center"/>
I hope this can help you
View cannot contain child views, only ViewGroup can do that. LinearLayout is a ViewGroup, so, you can replace your View with a TextView and try setting a background on your layout or text view itself.
I want to show the image aligned to the top in the relative layout and the shadow should be around the image and not around the layout. What is going wrong I can't understand.
<RelativeLayout
android:layout_width="117dp"
android:layout_height="162dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:src="#drawable/rectangle"
android:background="#drawable/drop_shadow"/>
</RelativeLayout>
This is how the image looks when preview in design mode. notice the white background that is coming because of drop shadow and it looks like eventhough the actual image is smaller but the imageview is taking relative layout parameters to drop shadow. Any help is appreciated.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
Here selector file:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dp"
android:color="#000000" />
</shape>
Hope this might help.
Looks like you just need add the adjustViewBounds property. That property defaults to false...
<RelativeLayout
android:layout_width="117dp"
android:layout_height="162dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:adjustViewBounds="true" <-- ADD THIS
android:src="#drawable/rectangle"
android:background="#drawable/drop_shadow"/>
</RelativeLayout>