Using Material Design Components in Android Studio - android

I'm building my first app with Android studio and I'd like to use Material Design components such as cards in it.
I think I know how to add these by writing code, but I was wondering, is it possible to add cardview, recycleview etc. in design tab's palette somehow?

Whenever I used Android Studio to create material design apps, I always created the card through xml. It is then displayed correctly in the design view. However the widgets on the left hand side of the design view are only simple images, which are part of the actual Android API (do not need any extra references like in your case). To add a card to your page use the following xml:
<android.support.v7.widget.CardView
android:id="#+id/cardview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:elevation="100dp"
card_view:cardBackgroundColor="#color/cardview_initial_background"
card_view:cardCornerRadius="8dp"
android:layout_marginLeft="#dimen/margin_large"
android:layout_marginRight="#dimen/margin_large"
>
//add any widgets which you want inserted in the card here
</android.support.v7.widget.CardView>
Code has been taken from here.
Hope this helps :)

Related

"Ugly" CardView on Pre-Lollipop devices

I am using CardView as custom item for RecyclerView. They looks good on Android 5+ but so different on older Android versions.
On Android 5 +
On Android < 5
The code is the same:
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
card_view:cardCornerRadius="1dp"
card_view:cardElevation="1dp">
... other items ...
</android.support.v7.widget.CardView>
Is there a way to achieve the Android 5+ behavior on pre-Lollipop devices?
Using the support CardView? No.
Personally I think that the support CardView is broken and shouldn't be used at all. It looks and works a little bit different on Lollipop and on older systems. The shadow is different, the padding is different, content clipping doesn't work on pre-Lollipop devices, etc. The API is also weird and confusing. That's why it's hard to get good results on all platforms. If you can live without cards, I would go that way.
Of course it's possible to create a custom, nice-looking, backwards-compatible card, but it's a bit complex task. To create a card on your own you have to implement:
rounded corners with content clipping (doesn't work in the support CardView). Here's how to do it properly.
shadows drawn outside the card (not inside, like the support CardView). This one depends on your needs. I would override drawChild(...) in a parent container, where I could draw shadows around cards freely. Shadow generation method doesn't matter - it could be a gradient, a static 9-patch or a RenderScript-blurred black shape.
I was frustrated by the look and the API of CardView as well, so I created my own implementation. It can be found on GitHub - the library is called Carbon and using it is probably the easiest way to get a decent card. After importing the library simply add style="?attr/carbon_cardViewStyle" to any layout to make it look like a card:
<carbon.widget.RelativeLayout
style="?attr/carbon_cardViewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

Cannot Understand this code functionality

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context="com.bignerdranch.android.geoquiz.CheatActivity">
<TextView
android:id="#+id/answer_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp"
tools:text="Answer"/>
I am a novice in programming. I started with Big Nerd Ranch programming book. I came across this code. In the book it is stated as:
"This namespace allows you to override any attribute on a widget for the
purpose of displaying it differently in the Android Studio preview. Since TextView has a text attribute,
you can provide a literal dummy value for it to help you know what it will look like at runtime. The
value “Answer” will never show up in the real app. Handy!"
What does that actually mean? I am completely new. I know this is foolish question, please help me in this.
Thanks to that line
xmlns:tools="http://schemas.android.com/tools"
you can use in all your XML something like that
tools:text="Answer"
Thanks to that line
xmlns:android="http://schemas.android.com/apk/res/android"
you can use in all your XML element the android attribute, for example
android:id="#+id/answer_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp"
The book you're reading is a good book, keep continue and don't give up!
Tools is basically a collection of extra properties you can add to your TextView that assist you when designing layouts in Android Studio. In this particular example, tools:text allows you to put a fake value into your TextView which will only show up in the the layout preview in Android Studio.
This will allow you to see what a TextView looks like when designing your layout in Android Studio, but you don't have to worry about removing that dummy text from your layout when you build a "real" version of your app for a phone.
See also: Tools Attribute Reference

What is the ButtonBarLayout and how should we use it?

When I developed, I found a new widget called android.support.v7.widget.ButtonBarLayout unexpectedly. I tried to search it on the internet, but nothing was found, even on the official development documents site.
In the meantime, I found two ButtonBarLayout when I search ButtonBarLayout everywhere in Android Studio, one is android.support.v7.widget.ButtonBarLayout and the other is com.android.internal.widget.ButtonBarLayout. I tried to read source codes of both, I found that they are the same except package name. So I thought maybe android.support.v7.widget.ButtonBarLayout came from com.android.internal.widget.ButtonBarLayout after the internal ButtonBarLayout was through tests and released. At the same time, ButtonBarLayout is inherited from LinearLayout.
But there are some question:
What can we get from ButtonBarLayout literally and how should we use it?
I noticed the variable of private boolean mAllowStacking. When it changes, orientation of this layout would be changed. But I didn't really understand what it is used for.
So does somebody know ButtonBarLayout well?
P.S.: I used Android Studio of 2.0.0 Preview 4 and Gradle Plugin of 2.0.0-alpha3 and Android Support Library of 23.1.1 and Platform-tools of 23.1 and Build-tools of 23.0.2.
As others pointed out, the class description tells exactly what it is: an extension of LinearLayout that automatically switches to vertical orientation when it can't fit its child views horizontally.
I might add that this was clearly done to fit with the material design specifications about dialogs. They make a distinction between side by side buttons and stacked buttons. See for example:
Side-by-side buttons are recommended when the text of each label does
not exceed the maximum button width, such as the commonly used
OK/Cancel buttons.
While you should go for stacked buttons when the single button is too large, or there's not enough room for both:
When text labels exceed the maximum button width, use stacked buttons
to accommodate the text. Affirmative actions are stacked above
dismissive actions.
So, one possible use of this class, is when designing your own dialogs. For example, AlertDialog and AlertDialog.Builder offer internal support for dialogs with buttons, but sometimes you just want to subclass DialogFragment or AppCompatDialogFragment for a better control.
There, it might be useful to setup a bottom button bar that follows the design guidelines, and have full control on the buttons (like enabling and disabling, things you can't do with an AlertDialog AFAIK).
The source code describes ButtonBarLayout as follows:
/**
* An extension of LinearLayout that automatically switches to vertical
* orientation when it can't fit its child views horizontally.
*/
So, in essence, it is nothing but a smart LinearLayout which manages auto-switching orientations based on available space on screen.
The same ButtonBarLayout.java file describes mAllowStacking in comments as follows:
/** Whether the current configuration allows stacking. */
Source Code Here
You are right first of all. ButtonBar layout does not seem to be featured anywhere in the official Android documentation. I tried myself to search about it, but to no avail. However I have found some information which defines what is a ButtonBar layout and when to use it. Hopefully this will help you.
Most tutorials use the Buttonbar layout in a dialogbox or at the bottom of a screen to confirm or decline an option. The image below is a visual representation of how the ButtonBar layout has been used in a screen.
The screenshot above has the following layout xml:
<LinearLayout
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/Button01"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Show" />
<Button
android:id="#+id/Button02"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Change" />
</LinearLayout>
<EditText
android:id="#+id/myView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10" >
<requestFocus />
</EditText>
So essentially what Android is doing here is simply creating two buttons next to each other in a LinearLayout with each button having the match_parent parameter set to the width. Hence each button takes half the size of the screen. Android have actually taken away the hassle of creating seperate buttons and positioning them correctly to fit different screens, by creating a simple widget handling this altogether.
As with the support library, Android have implemented this for developers using an earlier API. It is normal for them to use the support library for this purpose.
Hope this helps :)
https://android.googlesource.com/platform/frameworks/base/+/master/core/java/com/android/internal/widget/ButtonBarLayout.java
Looking into the code, I think it's a LinearLayout for buttons (duh). You can probably look at it like the Dialog buttons divided by a vertical spacer: | . AllowStacking will change the orientation to vertical and the gravity to the right instead of bottom. I should try it out to give a better answer
ButtonBarlayout is not featured anywhere in the official Android documentation.
it is used for auto-switching orientations according to the space.
Regarding your question:
How should we use it?
I guess it is undocumented because it is not stable yet.
It just popped up because this long lasting complaint originate from poor ROM modification by device vendor.
https://code.google.com/p/android/issues/detail?id=78377
See #270 for the resolution regarding classpath and why all classes inside .internal. were made public.
And nope even that fix a lot of bugs from poor ROM modification are still out there (in lots of device of well known brands). The issue is soon declined by project member.
I don't think we should use it just yet until the document show up.
Just my $.02 though.
Just to add to the other answers, if you guys want to check the orientation of a ButtonBarLayout you should check the orienation AFTER the value has called on measure.
In other words (Kotlin):
buttonBarLayout.post {
val orientation = buttonBarLayout.orientation
val height = buttonBarLayout.measuredHeight
}

Show other view on slide up android

I am starting a new project in android.I have to make it like google maps.For example see the image below
The screen will be like this with 2 views.1st mark with red and other with yellow.
Now what i want is that when user drags view 2 from bottom to top it should be like this
How can i achieve this.Please do help me out as i new to andriod development
Thanks
Checkout AndroidSlidingUpPanel library, probably this is what you want to achieve.
There's a similar implementation in this library. Download the sample app here and see the
SlidingUpGridView
SlidingUpListView
SlidingUpRecyclerView
SlidingUpScrollView
SlidingUpWebView
options.
EDIT
Looks like AndroidSlidingUpPanel is a better solution.
EDIT 2
If you don't want to use that library, I suggest use the codes of that library. It's really not that much work.
Create a new package sliderlib or something in your project
Create two classes named ViewDragHelper.java and SlidingUpPanelLayout.java
Copy the contents of the two named classes here
Download these drawables to your drawable directory of your app
Add these values to your attrs.xml (create one if there isn't one)
And in your XML, use your new widget like this.
your_layout.xml
<your.app.package.sliderlib.SlidingUpPanelLayout>
xmlns:sothree="http://schemas.android.com/apk/res-auto"
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:panelHeight="68dp"
sothree:shadowHeight="4dp">
<!-- Your views to show in your Sliding Up Panel -->
</your.app.package.sliderlib.SlidingUpPanelLayout>
NOTE : The answer may not be exactly right. But it will be a start.

How to create a detailed-list view for Android 4.0 tablet, exactly like Contacts App?

I'm actually developing a tablet application for Android 4.0, and I need to use a layout displaying 2 or 3 panes (just like the default Contacts app).
It will display a catalog of products:
The first pane is a list of items
The second pane is the detailled view of the currently selected item in the list
The last pane is optional, showing a wish list (it can be showed or hidden)
The approach
So, I'm currently using a ListFragment for the list pane, and a simple Fragment for the details pane. The last one isn't actually integrated.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<fragment
android:id="#+id/listFragment"
android:layout_width="0dip"
android:layout_weight=".3"
android:layout_height="match_parent"
class="com.###.###.ui.fragments.ListFragment" />
<fragment
android:id="#+id/detailsFragment"
android:layout_width="0dip"
android:layout_weight=".7"
android:layout_height="match_parent"
class="com.###.###.ui.fragments.DetailsFragment" />
</LinearLayout>
Is there a better approach for this design ?
The style
I also want to follow the Android 4.0 Design Guidelines and apply to my app the same design as the default Contacts App. I searched for a tutorial on how to apply this style, and I can't find anything about that.
Here's an exact picture of what I need. (Sorry, I'm not yet allowed to post images...)
How can I implement the default Android 4.0 detailled-list style ?
I've seen this resource picture on the Guidelines webpage. I'm sure there is a simple way to implement this style on any application... So, if anyone can help me doing this...

Categories

Resources