Here is the link to what I have in mind.
https://dribbble.com/shots/1407665-Categories/attachments/204971
Is there a popular library anyone knows that can manage this, otherwise I am alright with going the customizing route.
I have my 9 buttons defined in my XML no problem.
Next I know I have to create a xml file in the drawable folder like "button_shape.xml". Then I add this to my code:
android:background="#drawable/button_shape"
I make my button have an image, I assume with:
android:drawableTop="#drawable/buttonImage"
I guess lastly is how do I create a shape that keeps the bottom colour a consistent size with the text. While allowing different button sizes. Also can I easily alternate the colours by setting the style on each button and defining them as so:
<style name ="ButtonTheme.Custom1" parent="Base.Widget.AppCompat.Button.Colored">
<item name="colorPrimary">#android:color/holo_blue_light</item>
<item name="colorPrimaryDark">#android:color/holo_blue_dark</item>
</style>
<style name ="ButtonTheme.Custom2" parent="Base.Widget.AppCompat.Button.Colored">
<item name="colorPrimary">#android:color/holo_green_light</item>
<item name="colorPrimaryDark">#android:color/holo_green_dark</item>
</style>
<style name ="ButtonTheme.Custom3" parent="Base.Widget.AppCompat.Button.Colored">
<item name="colorPrimary">#android:color/holo_red_light</item>
<item name="colorPrimaryDark">#android:color/holo_red_dark</item>
</style>
<style name ="ButtonTheme.Custom4" parent="Base.Widget.AppCompat.Button.Colored">
<item name="colorPrimary">#android:color/holo_orange_light</item>
<item name="colorPrimaryDark">#android:color/holo_orange_dark</item>
</style>
<style name ="ButtonTheme.Custom5" parent="Base.Widget.AppCompat.Button.Colored">
<item name="colorPrimary">#android:color/holo_blue_bright</item>
<item name="colorPrimaryDark">#android:color/holo_blue_light</item>
</style>
My custom shape so far is this, which is close; but how can I make the darker color keep a consistent size while the other moves according to size of button?
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="10dp">
<shape android:shape="rectangle" >
<size android:height="10dp" />
<solid android:color="#color/colorPrimaryDark" />
</shape>
</item>
<item android:top="120dp">
<shape android:shape="rectangle" >
<size android:height="120dp" />
<solid android:color="#color/colorPrimary" />
</shape>
</item>
</layer-list>
You can use RecyclerView and StaggeredGrid
https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html
Related
I have about 8 themes in my app, I need to have a specific drawable background (XML shape) for the login page only, and that can be changed when I change the theme.
Here is my default theme:
<style name="DefaultTheme" parent="CommonDark">
<item name="colorPrimary">#color/whiteTrasparentTheme</item>
<item name="colorPrimaryDark">#color/whiteTrasparentTheme</item>
<item name="colorAccent">#color/whiteTrasparentTheme</item>
<item name="buttonStyle">#style/BlackButtonText</item>
<item name="timerColor">#color/yellowTheme</item>
<item name="timerTextColor">#color/black</item>
<item name="iconTinting">#color/yellowThemeIcon</item>
<item name="iconBG">#color/yellowThemeSecondary</item>
</style>
Any help is appreciated.
Screenshots
This is what I want:
https://imgur.com/a/Y3nf2
This is what I have on all my themes
https://imgur.com/a/wD5Gd
for that you have to create a my_background_login.xml in drawable package :
in this xml you have to put this code :
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:centerColor="#555994"
android:endColor="#b5b6d2"
android:startColor="#555994"
android:type="linear" />
<corners
android:radius="0dp"/>
</shape>
you have specify your start color , center color and end color in xml..
then set this drawable as background in your main parent layout, so whenever you want to change you can directly change from this xml.
this is the proper way to get it done..
try it
I've added a sidebar (navigation drawer) to my app that currently looks like this:
http://i.imgur.com/aQOnNY4.png
However, the colors are wrong. The drawable image (.png) for the plus icon inside of the red circle should be white (as the image is), but it's being tinted blue and I'm not sure how to prevent this.
It appears to be blue because of the textColorSecondary value in my styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textColorPrimary">#color/dark_gray</item>
<item name="android:textColorSecondary">#color/blue</item>
</style>
Here is the list items for the sidebar:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item android:title="Menu">
<menu>
<item
android:icon="#drawable/ic_home_black_48dp"
android:title="One"
android:checked="true"/>
<item
android:icon="#drawable/ic_favorite_black_48dp"
android:title="Two" />
<item
android:icon="#drawable/custom_icon"
android:title="Three" />
</menu>
</item>
</group>
</menu>
Here is the custom_icon drawable used in the third item in the list:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/circle_icon">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#ff0000"
/>
<size
android:width="20dp"
android:height="20dp"
/>
</shape>
</item>
<item
android:drawable="#drawable/ic_add_white"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:top="2dp"
android:right="2dp"
android:bottom="2dp"
android:left="2dp"
/>
</layer-list>
How can I prevent the color of the plus icon from being changed by the value of textColorSecondary and keep its original white color?
As an additional side question, how can I style the sidebar completely (including subheader text color, list item text color, etc)? I can't find any tutorials online.
I've solved my own question.
Simply do the following:
NavigationView sidebar = (NavigationView) findViewById(R.id.sidebar);
sidebar.setItemIconTintList(null);
Came around lot of solutions but none of them couldn't help my problem ...Actually i was trying to change the color of dividers in actionbar tabs....
<style name="CustomTabBar" parent="#style/Widget.Sherlock.Light.ActionBar.TabBar">
<item name="android:divider">#drawable/divider_hori</item>
<item name="divider">#drawable/divider_hori</item>
<item name="android:showDividers">middle</item>
<item name="android:measureWithLargestChild">true</item>
<item name="android:dividerPadding">5dip</item>
<item name="android:dividerHeight">5dip</item>
</style>
if i use this code in my custom theme as everyone say...In reaction helps me to remove only the default divider ...but it's not drawing the divider which i had specified in "#drawable/divider_hori "
don't know wheather i have to use a 9 patch image or an xml...by the way my drawable/divider_hori looks like
xml - divider_hori
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="line" >
<gradient android:angle="90" >
<stroke
android:width="3dp"
android:color="#9f9f9f" />
<gradient>
</gradient>
</gradient>
</shape>
</item>
</layer-list>
so need help in this .....
I have a style for button like : http://ace-subido.github.io/css3-microsoft-metro-buttons/buttons.html (See Stripped button).
But I want to be able to use this style for different colors without recreating 4 xml files (a selector drawable + 3 button states drawables with layer list).
In a btn_stripped_orange.xml (and 2 other xml for different button states) I have a color
With this syntax, evrything is ok :-)
But instead of creating 4 new xml files for every different colors, I want to "pass a color" to btn_stripped_orange.xml (so I should rename it to btn_stripped.xml).
In style.xml I have to call #drawable/btn_stripped_orange_selector
after this btn_stripped_orange_selector call
I think I have to pass the border_color variable to the style in styles.xml with call #drawable/btn_stripped_orange_selector
I want to just create new style with the #drawable/btn_stripped_orange_selector as android:background (and rename it) and the color varaible
This is the code that I'm trying to do (no error in eclipse, but app crash on run), If I replace ?attr/border_color with a color #color/orange for exemple, it works perfectly. I think it's just a syntax problem.
My themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="btn_orange" parent="#style/btStripped1">
<item name="border_color">#attr/border_color</item>
</style>
<attr name="border_color" format="color" />
</resources>
My btn_stripped_orange_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/btn_stripped_orange_press" />
<item android:state_focused="true" android:drawable="#drawable/btn_stripped_orange_focus" />
<item android:drawable="#drawable/btn_stripped_orange" />
</selector>
My btn_stripped_orange.xml (nearly the same than _focus and _press) :
<?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="?attr/border_color" />
</shape>
</item>
<item android:left="5dp">
<shape android:shape="rectangle">
<solid android:color="#EEEEEE" />
</shape>
</item>
<item android:left="5dp">
<shape android:shape="rectangle">
<solid android:color="#EEEEEE" />
</shape>
</item>
</layer-list>
Finally in my styles.xml
<resources>
.....
<style name="btStripped1">
<!-- I want to pass a color variable here -->
<item name="android:background">#drawable/btn_stripped_orange_selector</item>
<item name="android:padding">6dp</item>
<item name="android:textColor">#android:color/black</item>
<item name="android:shadowColor">#android:color/white</item>
<item name="android:shadowDx">1</item>
<item name="android:shadowDy">1</item>
<item name="android:shadowRadius">1</item>
</style>
....
</resources>
I want a pure xml solution but if it's impossible and you have a solution with a bit of java code, your're welcome !
Thank you very very much for your help and sorry for average english !
I have a dashboard with icons and text like in the picture below.
What I want is a round-cornered filled background behind the 'My status' text. I drew on the picture what I want, but it needs to be filled, not only bordered like here (it's just for clarity that I drew it like that on the picture).
Right now this button is made through a style:
<style name="DashboardButton">
<item name="android:layout_gravity">center_vertical</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:drawablePadding">2dp</item>
<item name="android:textSize">14dp</item>
<item name="android:textColor">#877871</item>
<item name="android:background">#null</item>
</style>
How can I adapt this style to acheive it?
Can I also set the hover and active states via a style?
For the background to the button's text you either try to do this with a custom background graphic, but I think it would be easier to split your "button" into two parts and render the icon part as an ImageButton and for the label part as a normal button with a custom ShapeDrawable for the background, e.g. like so:
<shape>
<solid android:color="#0000FF" />
<stroke
android:width="2dp"
android:color="#FFFFFF" />
<corners
android:radius="8dp" />
<padding
android:left="8dp"
android:top="8dp"
android:right="8dp"
android:bottom="8dp" />
</shape>
For setting hover and active states you can use Android's StateListDrawable.