Posts

Showing posts with the label Material Design

Android Material Design Button Styles

Image
Answer : I will add my answer since I don't use any of the other answers provided. With the Support Library v7, all the styles are actually already defined and ready to use, for the standard buttons, all of these styles are available: style="@style/Widget.AppCompat.Button" style="@style/Widget.AppCompat.Button.Colored" style="@style/Widget.AppCompat.Button.Borderless" style="@style/Widget.AppCompat.Button.Borderless.Colored" Widget.AppCompat.Button : Widget.AppCompat.Button.Colored : Widget.AppCompat.Button.Borderless Widget.AppCompat.Button.Borderless.Colored : To answer the question, the style to use is therefore <Button style="@style/Widget.AppCompat.Button.Colored" ....... ....... ....... android:text="Button"/> How to change the color For the whole app: The color of all the UI controls (not only buttons, but also floating action buttons, checkboxes etc.) is managed by the attribute ...

Android Support Design TabLayout: Gravity Center And Mode Scrollable

Answer : Tab gravity only effects MODE_FIXED . One possible solution is to set your layout_width to wrap_content and layout_gravity to center_horizontal : <android.support.design.widget.TabLayout android:id="@+id/sliding_tabs" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" app:tabMode="scrollable" /> If the tabs are smaller than the screen width, the TabLayout itself will also be smaller and it will be centered because of the gravity. If the tabs are bigger than the screen width, the TabLayout will match the screen width and scrolling will activate. this is how i did it TabLayout.xml <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_height="wrap_content" android:layout_width="wrap_content" android:background=...

Android "elevation" Not Showing A Shadow

Answer : I've been playing around with shadows on Lollipop for a bit and this is what I've found: It appears that a parent ViewGroup 's bounds cutoff the shadow of its children for some reason; and shadows set with android:elevation are cutoff by the View 's bounds, not the bounds extended through the margin; the right way to get a child view to show shadow is to set padding on the parent and set android:clipToPadding="false" on that parent. Here's my suggestion to you based on what I know: Set your top-level RelativeLayout to have padding equal to the margins you've set on the relative layout that you want to show shadow; set android:clipToPadding="false" on the same RelativeLayout ; Remove the margin from the RelativeLayout that also has elevation set; [EDIT] you may also need to set a non-transparent background color on the child layout that needs elevation. At the end of the day, your top-level relative layout sho...

Correct Usage Of A Spinner, Following Material Design Guidelines

Answer : A spinner will be automatically themed correctly for the Material Guidelines when your App Theme inherits from Material.Theme (or Appcompat). You can then declare and populate your spinner like described here: http://developer.android.com/guide/topics/ui/controls/spinner.html In Android Studio you can find the Spinner in the section "Widgets" at the bottom. I wrote an article here: There is No Material Design Spinner for Android covering usage, styling, data-binding, etc. of the material design "spinner".

Angular Material Grid Layout

Image
Answer : I'll give you the basics. In Angular Material (for Angular 2/4) the most commonly used attributes are: fxLayout="row | column" fxLayoutAlign="start | center | end | stretch | space-around | space-between | none" (can accept 2 properties at the same time) fxFlex="number" (can accept numbers from 1 to 100) You can also use postfix as fxLayout.xs and so on to apply rules only for specific resolution. For more info you can look through the docs: https://github.com/angular/flex-layout/wiki/API-Documentation To play around with alignment, you can use the demonstration from Angularjs Material resource (it's totally the same as for Angular Material for Angular 2/4): https://material.angularjs.org/latest/layout/alignment And another one useful link: https://tburleson-layouts-demos.firebaseapp.com/#/docs