I am adding a ViewPager to my app, together with an picture indicator.
I want the shape of the indicator to be a thin line instead of the usual dots.
For that, I have taken a reference from this answer here.
I have tried to modify the XML files given, like this:
default_dot.xml ---> default_line.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<solid android:color="#android:color/darker_gray"/>
<corners
android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
</shape>
</item>
</layer-list>
selected_dot.xml -----> selected_line.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<solid android:color="#color/colorAccent"/>
<corners
android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
</shape>
</item>
</layer-list>
And the file tab_selector.xml remains the same, just change the name of the corresponding xml files.
So, well, the result of all this, is that, the selected_line.xml (the pink one) is showed, however, the default_line.xml is not showed, so I can just see the pink like moving to the right/left as I swipe the pictures, but no default grey lines.
Please make changes to your selected_line.xml as follows
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:width="#dimen/activity_horizontal_margin"
android:color="#color/colorAccent" />
<size android:height="1dp" />
<solid android:color="#color/colorAccent" />
<corners
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
</shape>
</item>
Related
I have been trying to fix this but for whatever I do, I just cannot get the Bottom Rounded Corners the way I want, I am using the following
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<stroke android:width="0dp" />
<solid android:color="?attr/colorPrimaryDark" />
</shape>
</item>
<item android:top="0dp" android:bottom="1dp">
<shape
android:shape="rectangle">
<stroke android:width="0dp"/>
<solid android:color="?attr/colorPrimary"/>
<corners android:radius="15dp" android:bottomRightRadius="15dp" android:bottomLeftRadius="15dp" android:topLeftRadius="0dp" android:topRightRadius="0dp"/>
</shape>
</item>
</layer-list>
The Results are the following
It creates the corners but it adds grey color (colorPrimaryDark) to it where I want it to be white (colorPrimary") with a grey line - Any idea how I accomplish this?
A little hack is possible to get rid of line on top and sides: set negative offsets.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-1dp"
android:right="-1dp"
android:top="-1dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="?attr/colorPrimaryDark" />
<solid android:color="?attr/colorPrimary" />
<corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:radius="15dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp" />
</shape>
</item>
</layer-list>
Not sure will it work correctly on all devices / Android versions or not.
If you only want bottom border a Shape drawable will be enough . You do not need a layer-list for it .
try this
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1dp" android:color="#color/green"/>
<solid android:color="?attr/colorPrimary" />
<corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp" />
</shape>
The problem with your current code is first item have a solid color set . this is why the gray part showing .
I read documentation about TabLayout for add property to make border on top of TabLayout but I didn't find it anywhere in documentation.
So I want some trick to make TabLayout have border on top (or maybe at bottom).
Solved with this drawable xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#FFDDDDDD" />
<solid android:color="#FFFFFFFF" />
</shape>
</item>
<item
android:top="1dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#FFFFFFFF" />
<solid android:color="#00000000" />
</shape>
</item>
</layer-list>
and set into tablayout attribute/property:
android:background="#drawable/drawableName"
Use a custom ViewPager Strip.
Try this: https://github.com/ogaclejapan/SmartTabLayout
you have to create a drawable, then call in this way
android:background="#drawable/yourShapeHere"
the drawable is looks like:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF"/>
<stroke android:width="2dp" android:color="#515151"/>
<corners android:radius="3dp" />
<padding android:left="10dp" android:top="5dp" />
</shape>
I want to get shape similar to what you can see below. The thing I am missing is the header color (the color behind Anonymous text). I've reproduced what I wanted by simply moving mouse over second textview which is now highlighted and makes this effect :)
Current code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="2dp" android:color="#000000" />
<gradient android:startColor="#898989" android:endColor="#B5B5B5" android:angle="270"/>
<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp" android:topRightRadius="7dp"/>
</shape>
You need to use a Layer List that contains two drawables.
For example, the first will cover the whole shape, and the second will overlay it but with android:top="10dp" set, to create an offset showing the underlying first shape
Edit:
Like so:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<stroke
android:width="2dp"
android:color="#000000" />
<solid android:color="#00ff00" />
<corners
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="20dp">
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#B5B5B5"
android:startColor="#898989" />
<corners
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp" />
</shape>
</item>
</layer-list>
Use a LinearLayout and place two TextView with different shapes as background.
The first one having its upper corners rounded and the second one its bottom corners.
this tools might be helpful further in development
http://angrytools.com/
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
In My android xml layout i am applying the border by using the borderframe.xml as a background.
borderframe.xml file is looks like below:
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dip"
android:color="#ffffff"/>
<solid
android:color="#95865F"/>
<corners
android:radius="10px"/>
<padding
android:left="1dp"
android:right="1dp"
android:top="1dp"
android:bottom="1dp"/>
</shape>
Now, While there is a android:radius="10px" then it is works but while i am going to give round shape to specific corner only then it not works.
There is no any erro message in log cat but i found error in eclipse like:
The graphics preview in the layout editor may not be accurate:
* Different corner sizes are not supported in Path.addRoundRect.
Even if there is no padding in that xml file then also i am not able to see any border.
Now, what should i have to do for it ?
and whats the sollution of it if i want to create the rounded border for only topLeftcorner and bottomLeftCorner. ?
Thanks.
I am also facing the same problem. But for that I use layer-list. I post my answer here which may help you. Please check output screen
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#c1c1c1" />
<solid android:color="#c1c1c1" />
<corners android:radius="20dp"/>
</shape>
</item>
<item android:right="20dp"
>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#c1c1c1" />
<solid android:color="#c1c1c1" />
</shape>
</item>
</layer-list>
You'll have to do that, assuming you only want a rounded top left corner:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="20sp"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp" />
<gradient
android:startColor="#color/logo_blue"
android:endColor="#color/blue"
android:angle="0"/>
</shape>
Explanation: Every corner must (initially) be provided a corner radius greater than 1, or else no corners are rounded. If you want specific corners to not be rounded, a work-around is to use android:radius to set a default corner radius greater than 1, but then override each and every corner with the values you really want, providing zero ("0dp") where you don't want rounded corners. [source]
As a consequence, you need to define your drawable as:
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dip"
android:color="#ffffff"/>
<solid
android:color="#95865F"/>
<corners
android:radius="10px"
android:topRightRadius="0dp"
android:bottomRightRadius="0dp" />
<padding
android:left="1dp"
android:right="1dp"
android:top="1dp"
android:bottom="1dp"/>
</shape>
Update
From The Shape Drawable Resource Android Documentation:
android:radius
Dimension. The radius for all corners, as a dimension
value or dimension resource. This is overridden for each corner by the
following attributes.
overridden is the keyword for your problem…
I'm using SDK tools 19, platform-tools 11 and running the app in Android 4.0.3. Using the following XML works for me:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#dd000000"/>
<padding
android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<corners
android:bottomLeftRadius="25dp"
android:bottomRightRadius="25dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp" />
</shape>
The Eclipse warning is about not being able to show the preview. In het app it shows up correct.
I got the solution on one of the forums. I solved it by commenting each corner & adding to the xml in drawable. I have retained commented code below only for understanding.
XML Code-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#fd2149" />
<stroke android:width="1dip" android:color="#ffd102"/>
<!-- <corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
-->
<corners android:radius="8dp" />
</shape>
---Edited-
The above code is my back.xml in drawable folder and if required you can add padding to the same back.xml. For those who are new developers, the back.xml is referenced from your layout file as follows
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="20sp"
android:scrollbars="vertical"
android:background="#drawable/back">
Hope this helps.
I have been searching for possibilities to define different shapes inside a single shapes.xml and refer to each one on some specific events.
At last I've found a solution to my question. And the answer is using level-list.
<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:maxLevel="0">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#aaa"
android:endColor="#eee" android:angle="270" />
<corners android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp" android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
</shape>
</item>
<item android:maxLevel="1">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient android:startColor="#eee" android:centerColor="#ddd"
android:endColor="#00fff2" android:angle="270" />
<corners android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp" android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
</shape>
</item>
</level-list>
Apply this to the background attribute in the style. the Interchanging of differents shapes can be achieved by setting the level to that element.
Eg: findViewById(R.id.mybutton).getBackground().setLevel(1);
In the above code I'm setting the second shape to the button with id mybutton.
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1dip" android:color="#FF8000" />
<solid
android:color="#00FFFFFF"
android:paddingLeft="10dip"
android:paddingTop="10dip"/>
<corners android:radius="10px"/>
<padding
android:left="10dip"
android:top="10dip"
android:right="10dip"
android:bottom="10dip" />
</shape>
you can use this for Boarder and any shape ..its for reference...''
If it is useful so accept the answer and vote up the answer