Hi peoples, I am stuck, I would like to reproduce the design of this TabLayout. Does anyone have an idea on how to do it?
Create 2 drawables for selected and unselected as below,
drawable_selected_tab.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp" />
<solid android:color="#android:color/white"/>
</shape>
drawable_unselected_tab.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/gray"/>
</shape>
Now, You have to create selector using these 2 drawables,
tab_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- For selected tab -->
<item
android:drawable="#drawable/drawable_selected_tab"
android:state_selected="true"/>
<!-- For unselected tab -->
<item
android:drawable="#drawable/drawable_unselected_tab"
android:state_selected="false"/>
</selector>
Now give this tab_Selector.xml to your TabLayout's tabBackground like,
<com.google.android.material.tabs.TabLayout
...
app:tabBackground="#drawable/selector_tab" />
Add more properties to this above TabLayout as per your requirement.
Related
In my application I should TabLayout and ViewPager.
I want when selected Item set padding for tabIndicatorColor in tabLayout.
By default show me such as this image :
Bu t I want when selected item, show me such as this :
I want set Padding for tabIndicatorColor.
My TabLayout XML code:
<android.support.design.widget.TabLayout
android:id="#+id/serialDetail_tabLayout"
android:layout_width="match_parent"
android:layout_height="#dimen/size50"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:tabIndicatorColor="#color/colorAccent"
app:tabSelectedTextColor="#color/colorAccent"
app:tabTextAppearance="#style/allCapsTabLayout"
app:tabTextColor="#color/white" />
How can I it? please help me. Thanks all <3
Yes it is possible without custom view and external library..
you may create one selector file
tab_indicator_line.xml add into drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:state_pressed="false">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-5dp" android:left="-5dp" android:right="-5dp" android:bottom="5dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<stroke android:color="#color/colorPrimary" android:width="2dp"/>
</shape>
</item>
</layer-list>
</item>
<item android:state_selected="true" android:state_pressed="true">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-5dp" android:left="-5dp" android:right="-5dp" android:bottom="5dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<stroke android:color="#color/colorPrimary" android:width="2dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
Now apply in tabLayout using
app:tabBackground="#drawable/tab_indicator_line"
app:tabIndicatorHeight="0dp"
Tell me if any query..
There are two easy ways to do this. Either you use a custom layout for tab or just add a view below the tab of same color.The second option is more easier.
need help
I have searched for my requirement but didn't found so posting my own question.
I need to show line above tabs not below as all solution is for adding the line below the tabs text.
should I use custom tabs or android supports this scenario without making custom ??
links I have viewed are as follows
https://www.google.com.pk/search?q=fabric+documentation&rlz=1C1CHBD_enPK741PK753&oq=fabric+documentation+&aqs=chrome..69i57.5669j0j7&sourceid=chrome&ie=UTF-8#safe=active&q=how+to+adding+line+above+tabs+android
no code is posted as I want to know what should be used .. ur suggestion would be helpful .. thanks
Try this create a background in res/drawable folder and set app:tabBackground="#drawable/selector"
make your like this Tablayout
<android.support.design.widget.TabLayout
android:id="#+id/detail_tabs"
android:layout_width="match_parent"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabIndicatorHeight="0dp"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabBackground="#drawable/selector" />
Here selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:state_pressed="false">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="3dp" android:left="-5dp" android:right="-5dp" android:bottom="-5dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorWhite"/>
<stroke android:color="#color/colorPrimary" android:width="2dp"/>
</shape>
</item>
</layer-list>
</item>
<item android:state_selected="true" android:state_pressed="true">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="3dp" android:left="-5dp" android:right="-5dp" android:bottom="-5dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorWhite"/>
<stroke android:color="#color/colorPrimary" android:width="2dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
Hope it will works if not then add comment.
app:tabIndicatorGravity="top"
Its very simple now to show the indicator at the top with this.
I want to make a button for my shape like this one
Is there a way to do this with xml ?
Like setting some points, in my case I have 5..
What you need is to create a shape xml file in your project's drawable-xxx folder and then use this shape as background for a button.
Here is the shape file called arrow_shape.xml:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Colored rectangle-->
<item>
<shape android:shape="rectangle">
<size
android:width="100dp"
android:height="40dp" />
<solid android:color="#5EB888" />
<corners android:radius="0dp"/>
</shape>
</item>
<!-- This rectangle for the top arrow edge -->
<!-- Its color should be the same as the layout's background -->
<item
android:top="-40dp"
android:bottom="65dp"
android:right="-30dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<!-- This rectangle for the lower arrow edge -->
<!-- Its color should be the same as the layout's background -->
<item
android:top="65dp"
android:bottom="-40dp"
android:right="-30dp">
<rotate
android:fromDegrees="-45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
Then use it as button's background, for example
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/arrow_shape"/>
Here is the screenshot:
More info on Layer-List you can find here.
EDIT:
Keep in mind though that I used certain values for the shape's width and height. If you change those you might need to change the values of the top, bottom and right attributes. So, in that case consider using different values in your project's values directory.
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:width="50dp" android:height="10dp" android:right="6dp">
<shape>
<solid android:color="#android:color/holo_green_dark"/>
<corners
android:bottomLeftRadius="2dp"
android:topLeftRadius="2dp"/>
</shape>
</item>
<item android:width="7dp" android:height="7dp"
android:left="50dp">
<rotate android:fromDegrees="45"
android:pivotX="0"
android:pivotY="0">
<shape>
<solid android:color="#android:color/holo_green_dark"/>
</shape>
</rotate>
</item>
</layer-list>
With the Material Components library you can just use the standard MaterialButton defining the shapeAppearanceOverlay attribute:
Something like:
<com.google.android.material.button.MaterialButton
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.Button.Triangle"
... />
And in your style define:
<style name="ShapeAppearanceOverlay.Button.Triangle" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
<item name="cornerFamilyTopRight">cut</item>
<item name="cornerFamilyBottomRight">cut</item>
<item name="cornerSizeTopRight">50%</item>
<item name="cornerSizeBottomRight">50%</item>
</style>
I'm trying to style the divider for ListView. What I want is just 2 simple horizontal lines.
list.xml
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/ListView" >
</ListView>
styles.xml
<style name="ListView" parent="android:style/Widget.ListView">
<item name="android:divider">#drawable/divider</item>
<!-- 5dp: just to make sure there's enough space -->
<item name="android:dividerHeight">5dp</item>
</style>
divider.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#00ffff" />
<size android:height="1dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#ff0000" />
<size android:height="1dp" />
</shape>
</item>
</layer-list>
The result is a horizontal line with height of 5dp(should be 2, isn't it?) and color of red(color of second item). The first item with color #00ffff does not show up at all.
Can someone please suggest the code for 2 simple horizontal lines?
I'd better answer my own question...
It seems styles.xml - style - item takes the color of the last item in layer-list as background for the entire divider. This last item is on top of other layers, and that is why other items in the layer-list don't show up.
The key is padding.
styles.xml
<style name="ListView" parent="android:style/Widget.ListView">
<item name="android:divider">#drawable/divider</item>
<item name="android:dividerHeight">10dp</item>
</style>
divider.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#0000ff" />
<padding android:top="5dp"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#ff0000" />
</shape>
</item>
</layer-list>
So in my case I just need to change 10dp/5dp to 2dp/1dp to get 2 thin horizontal lines.
I am trying to draw border in one side only to ImageButton object,
like in CSS: border-left: 2px solid black;.
Is there any way to do that with style only? (Without inserting a blank view between them)
Thank you!
EDIT:
I used the <selector> tag with the ImageButton.
After alot of searching, I found way to do that.
Create xml file that containce the border style (border_style.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="rectangle">
<!-- The border color -->
<solid android:color="#000" />
</shape>
</item>
<item android:left="1dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle">
<!-- The fill color-->
</shape>
</item>
</layer-list>
then in the selector, you write like that:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<!-- Press Event -->
</item>
<item android:state_focused="true">
<!-- Focuse Event -->
</item>
<item android:drawable="#drawable/border_style.xml" />
</selector>
You do not able to do like css. You need to create a xml and put the xml in android drable folder and send the image-button background
And rectangle drawable back.xml (put into res/drawable folder):
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#ffffff" />
<stroke android:width="1dip" android:color="#4fa5d5"/>
</shape>