I wonder if there is a way to create a view container with an Inner Shadow like in Figma in native Android.
I have already spent the whole day trying layer-list with different items (linear, radial gradients, shapes, bitmaps) but nothing seems to be similar to what I need.
Please check the attachment, pay attention to container's inner shadow, this is what I really need:
Links or parts of code/xml will be appreciated.
Thanks in advance!
Try this:
Example XML for the layer-list:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<corners android:radius="10dp"/>
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="10dp">
<shape android:shape="rectangle">
<solid android:color="#00000000"/>
<corners android:radius="10dp"/>
<padding
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="0dp"/>
</shape>
</item>
</layer-list>
You can set the above XML as the background for the CardView:
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/layer_list_example">
<!-- Add your content here -->
</androidx.cardview.widget.CardView>
Note that you may need to adjust the offset and blur radius to achieve the desired appearance.
Related
Is it possible to to have multiple shapes in a single drawable?
I am trying to create "progressDrawable" for seekbar; by making individual circles and offsetting with padding(Not a good idea I guess) in a single drawable resource file.
But doesn't seem to work as it shows in "preview" in Android Studio.
I have just started Android development; please help me figure this out guys. Also I feel there might be a better way to get this done, instead of making these individual circles in drawable file.
I'm trying to create something like this:
What I have accomplished so far:
<SeekBar
android:id="#+id/slider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/seekbar_cancel"
android:layout_toLeftOf="#+id/seekbar_apply"
android:progressDrawable="#drawable/custom_seeker"
/>
custom_seeker.xml:
<?xml version="1.0" encoding="utf-8"?>
<item android:top="0dp" android:left="0dp" android:bottom="7dp" android:right="7dp">
<shape android:shape="oval">
<size android:width="1dp"
android:height="1dp"/>
<solid android:color="#f06"/>
</shape>
</item>
<item android:top="0dp" android:left="2dp" android:bottom="7dp" android:right="5dp">
<shape android:shape="oval">
<size android:width="1dp"
android:height="1dp"/>
<solid android:color="#0f0"/>
</shape>
</item>
<item android:top="0dp" android:left="4dp" android:bottom="7dp" android:right="3dp">
<shape android:shape="oval">
<size android:width="1dp"
android:height="1dp"/>
<solid android:color="#0f8"/>
</shape>
</item>
<item android:top="0dp" android:left="6dp" android:bottom="7dp" android:right="1dp">
<shape android:shape="oval">
<size android:width="1dp"
android:height="1dp"/>
<solid android:color="#f00"/>
</shape>
</item>
Is it possible to to have multiple shapes in a single drawable?
Yes, you should use layer-list
I want my GridLayout to have rounded corners like the 3 Buttons do in the below picture. Does this require code that is different for rounding corners of Views such as Buttons, TextViews, etc?
gameplayGL.setBackgroundResource(R.drawable.roundedcorners);
gameplayGL.setBackgroundColor(Color.BLUE);
gameplayGL.getBackground().setAlpha(35);
roundedcorners.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
</shape>
I'm pretty sure calling setBackgroundColor(Color.BLUE) overrides the setBackgroundResource() call.
Try making a different drawable resource that is this
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
<solid
android:color="#350000FF" />
</shape>
Then setting the background of the gridview to that. You may have to play with the color value to get exactly what you want.
I have the following XML code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="0dp"
android:color="#CCFFFFFF" />
<solid android:color="#55FFFFFF" />
<padding
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="0dp" />
<corners android:topLeftRadius="0dp" android:topRightRadius="0dp" android:bottomLeftRadius="8dp" android:bottomRightRadius="8dp" />
</shape>
which produces the following:
How do I modify the code so there is a black line on the top like this:
You can add above the text and below the shape in xml file this code
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000000" />
You should do what with nine-patch or insert View widget with height 1dp (or more) and black background above this TextView.
when the color of the top layer IS NOT semi-transparent, there is a fast, versatil, and clean, to add borders to a view, with layerlist drawable.
Probably you couldnt use it in your case, but it this will be handful to somebody else who reach this question
for this, you create an xml file in you drawable folder, called border.xml with this content:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<padding android:left="0dp" android:top="0dp" android:right="0dp"
android:bottom="0dp" />
<solid android:color="#000000" />
</shape>
</item>
<item >
<shape
android:shape="rectangle">
<padding android:left="0dp" android:top="10dp" android:right="0dp"
android:bottom="0dp" />
<solid android:color="#ffffff" />
</shape>
</item>
</layer-list>
Then in your layout, you use
android:background="#drawable/border"
with this you have a way to quickly add borders, to one, or more sides of any view.
I'm using an xml file in drawable to make my buttons in my app 'pretty'.
^ Like that.
It works fine, however I want to add a tick or cross to the buttons (to mark completed or not) - I'm not too sure if it's possible.
Here is my xml for the buttons:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#449def" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="3dp" />
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#449def"
android:endColor="#2f6699"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="4dp" />
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
</shape>
</item>
</selector>
I'm setting the Background element on the button to use the above like #drawable/bluebuttons
Any help will be really appreciated
If you are using button then you can use Button's property in XML file.
android:drawableRight="#drawable/ANY_DRAWABLE_IMAGE"
In my case it was like this:
<Button android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...
...
android:drawableRight="#drawable/ic_tick" />
Or in your code, you can put like this:
// PUT ZERO FOR NO DRAWABLE
textView1.setCompoundDrawablesWithIntrinsicBounds(LEFT_DRAWABLE, TOP_DRAWABLE,RIGHT_DRAWABLE, BOTTOM_DRAWABLE);
Hope this will help you.
If you are interested in setting image on button dynamically from Activity then you can use this :
Drawable iconTick= getApplicationContext().getResources().getDrawable(R.drawable.icon_tick);
mBtnTaks1.setCompoundDrawablesWithIntrinsicBounds(iconTick, null, null, null); // left,top,right,bottom
Thanks.
Every time I try to customize the style of a view I have the same problem.
What parameters can I change; and how to override the system defaults? For example:
How to change the highlighted color of a element of a ListView when clicked
How to change the default frame of a DialogFragment? I mean the frame that is removed with the Style DialogFragment.STYLE_NO_FRAME.
Where can I check what are the values I should play with for achieve my custom layouts?
Thanks
Well you can change the look by creating a new xml file in the drawable folder but dont make a layout xml jus pick andrid xml from the wizard and it will give u a list of components you can modify including colour.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/black" />
</shape>
</item>
<item android:top="1dp" android:left="2dp" android:right="2dp" android:bottom="25dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_purple" />
</shape>
</item>
<item android:top="1dp" android:left="400dp" android:right="2dp" android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_purple" />
<corners android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp" android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
</shape>
</item>
<item android:top="1dp" android:left="2dp" android:right="400dp" android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_purple" />
<corners android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp" android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
</shape>
</item>
</layer-list>
then you can just change whats required!
But provider some code and i will be able to answer better..