Develop Reference

Responsive text and icon on button

I tried adding some text and an icon on buttons by using "android:text" and "android:drawableTop" but the result I get isn't really correct. The text and icon aren't centered and if I try the app in landscape or change the screen size the text disappears and the icon goes out of the button a bit.
This is the layout without both "android:text" and "android:drawableTop":
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/redButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="#FF0000"
app:layout_constraintBottom_toTopOf="#+id/blueButton"
app:layout_constraintEnd_toStartOf="#+id/yellowButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/greenButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="#00FF00"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/blueButton"
app:layout_constraintTop_toBottomOf="#+id/yellowButton" />
<Button
android:id="#+id/blueButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="#0000FF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/greenButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/redButton" />
<Button
android:id="#+id/yellowButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="4dp"
android:background="#FFFF00"
app:layout_constraintBottom_toTopOf="#+id/greenButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/redButton"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
I wonder if there is a way to make texts and icons responsive because I also tried to use svg icons but they weren't showing.
The result I get:
Portrait & Landscape
Any help would be appreciated, thanks.

Customizing buttons can be very frustrating in Android. I suggest you take a look to this popular library for Android called FancyButton. It offers you a wide variety of options to create the button you want by just using simple XML properties in your layout.
For example, with this bit of code:
<mehdi.sakout.fancybuttons.FancyButton
android:id="#+id/btn_spotify"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="10dp"
fancy:fb_borderColor="#FFFFFF"
fancy:fb_borderWidth="1dp"
fancy:fb_defaultColor="#7ab800"
fancy:fb_focusColor="#9bd823"
fancy:fb_fontIconResource=""
fancy:fb_iconPosition="left"
fancy:fb_radius="30dp"
fancy:fb_text="SHUFFLE PLAY"
fancy:fb_textColor="#FFFFFF" />
You can get this button with text and icon centered:

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="4"
android:orientation="vertical">
<Button
android:id="#+id/btnRed"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="#color/white"
android:background="#color/colorAccent"
android:textAllCaps="false"
android:drawableLeft="#drawable/ic_action_mywallet"
android:layout_weight="1"
android:text="Red Button"/>
<Button
android:id="#+id/btnGreen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="#color/white"
android:background="#color/colorAccent"
android:textAllCaps="false"
android:drawableLeft="#drawable/ic_action_mywallet"
android:layout_weight="1"
android:text="Green Button"/>
<Button
android:id="#+id/btnBlue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="#color/white"
android:background="#color/colorAccent"
android:textAllCaps="false"
android:drawableLeft="#drawable/ic_action_mywallet"
android:layout_weight="1"
android:text="Blue Button"/>
<Button
android:id="#+id/btnYellow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="#color/white"
android:background="#color/colorAccent"
android:textAllCaps="false"
android:drawableLeft="#drawable/ic_action_mywallet"
android:layout_weight="1"
android:text="Yellow Button"/>
</LinearLayout>

Drawables and text in the images are centered horizontally correctly.
Obviously the drawable you chose is very large, so in landscape there is no space for the text and in landscape the text is pushed at the bottom.
Try with another smaller drawable and you will see both text and drawable.
You can set:
android:padding="8dp"
so the drawable is not exactly at the top edge of the button.

how do I place relativelayout under another relativelayout using xml

I am trying to place a relativelayout under another (with recyclerview in it) within an activity layout container.
What I'd like to get is to have the action bar, then below a relativelayout with header (showing a spacer and 2 textviews), and below again another relativelayout that will host cards from a recyclerview.
This is the image of the wanted design:
What I get instead is this:
I am using the following xml (but tried many others)
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/Theme.AppCompat.Light">
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
tools:ignore="UselessParent">
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:contentDescription="image"
android:scaleType="centerCrop"
android:src="#drawable/category_detail_1" />
<TextView
android:id="#+id/spacer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingEnd="5dp"
android:paddingStart="5dp"
android:text=""
android:textColor="#fff"
android:textSize="25sp" />
<TextView
android:id="#+id/sub_header_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/spacer"
android:background="#66555555"
android:paddingEnd="5dp"
android:paddingStart="5dp"
android:text=""
android:textColor="#fff"
android:textSize="30sp"
android:textStyle="bold" />
<TextView
android:id="#+id/sub_header_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/sub_header_title"
android:background="#66555555"
android:paddingEnd="5dp"
android:paddingStart="5dp"
android:text=""
android:textColor="#fff"
android:textSize="20sp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/button_container"
android:layout_width="395dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header"
tools:ignore="UselessParent">
<android.support.v4.widget.Space
android:layout_width="#dimen/default_spacing_small"
android:layout_height="#dimen/default_spacing_small" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
I tried to put the second RelativeLayout nested as a child of the first one with no luck.
The Android Studio preview shows the design well formatted but after build the card list overlaps the header. Well formatted apart from the unknown line/constraint I do not know how to remove. It constraints the second relativelayout to the top.
What am I missing?
Any help is appreciated.

Use FrameLayout instead of android.support.constraint.ConstraintLayout
Or try with LinearLayout

RelativeLayout doesn't wrap_content on width on Android 6

I have 2 devices: Asus Zenfone 2 (6.0.1) and Galaxy Note 3 (5.0)
In my app I take photo and on the next screen I show it on ImageView and add some information on it. Here is xml layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true"
android:background="#android:color/black">
<LinearLayout
android:id="#+id/preview_buttons"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:background="#android:color/black">
<TextView
android:id="#+id/tv_cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="#android:color/white"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:textSize="16sp"
android:text="CANCEL"/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"/>
<TextView
android:id="#+id/tv_accept"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="#android:color/white"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:textSize="16sp"
android:text="ACCEPT"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/preview_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#android:color/holo_blue_bright"
android:layout_above="#id/preview_buttons">
<ImageView
android:id="#+id/image_preview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
/>
<TextView
android:id="#+id/preview_top_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:layout_alignRight="#id/image_preview"
android:layout_alignTop="#id/image_preview"
android:gravity="right"
android:background="#drawable/top_text_background"
android:textSize="16sp"
android:textColor="#android:color/white"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginBottom="8dp"
android:layout_alignLeft="#id/image_preview"
android:layout_alignBottom="#id/image_preview"
android:src="#drawable/ic_verified_grey600"/>
<TextView
android:id="#+id/preview_bottom_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="16dp"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:layout_alignRight="#id/image_preview"
android:layout_alignBottom="#id/image_preview"
android:gravity="right"
android:background="#drawable/bottom_text_background"
android:textSize="16sp"
android:textColor="#android:color/white"/>
</RelativeLayout>
</RelativeLayout>
UPD. I have problem with RelativeLayout "preview_container"
From this layout I expect its width would wrap, if ImageView's width doesn't fill whole screen and be on the screen center. And it works nice on GN3, but on my AZ2 I get space at right side (No reputation to insert image, it's here http://i.imgur.com/cSujbAp.png)
UPD2. What I expect: RelativeLayout wraped correctly, so I don't see background. Example from my GN3 here (http://i.imgur.com/vKGQq8r.jpg). Transparent background also can't help because after that I need to get drawing cache of this layout and work with it
I know about alignParent issue, but I don't use it now and my extra views placed correct.
Please help me, what's wrong?

<ImageView
android:id="#+id/image_preview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
/>
android:layout_height="match_parent" should not be match_parent.

Your preview_top_text has the width set to match_parent so it means that, since her container is the same of the image, it will stretch way to contain also the textview and not only the imageview.
Add the android:layout_centerHorizontal="true" parameter to the imageview and it should be centered.
Hope it helped
UPDATE POINT 2
two possibilities:
change the sizes of the TextViews to wrap_content
change the background of the second relativelayout to transparent

Aligning two images and text in LinearLayout

I want to align two pictures and text. When the first picture is commented out, the text and the second picture are aligned in the middle of a card. But the first picture is always aligned to bottom of the card. I tried all layout properties so far without luck.
See the screenshot for example. I do not understand why the circle is bigger than OK button because when I open these files they have the same dimensions. Where is the issue? I want to use LinearLayout as the simplest layout manager available.
<android.support.v7.widget.CardView
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp"
app:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp"
android:layout_marginTop="14dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/badge_type"
android:src="#drawable/ic_gold_circle"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/badge_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:text="#string/badge_title_KNIGHT"
style="#style/PlayRecordHeader"
/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<ImageView
android:id="#+id/badge_status"
android:src="#drawable/ic_correct"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"/>
</LinearLayout>
</android.support.v7.widget.CardView>
Update with layout_gravity="center_vertical"

I think you have to keep
android:layout_gravity="center_vertical"
and remove
android:layout_marginLeft="16dp"
android:layout_marginTop="14dp"
in the LinearLayout

Android: Change CardView Layout on Orientation Change

So I've spent a day on this one and it's time to turn to the pros on StackOverflow.
I am working with RecyclerView and CardView to display cards that contain text and an image. In portrait it looks great but in landscape there is space on both sides of the image instead of being flush with the edge of the card. I cannot change the dimensions of the image so I would like to change the XML of the CardView on orientation change, like you can do with a Fragment or Activity.
Is this possible and how could this be implemented? The only thought I have now would be to have another ViewHolder inside of my RecyclerViewAdapter that is used when checking for orientation returns Landscape. I'm hoping for a simpler solutions. Thanks in advance guys.
CardView XML. Notice that the width of the card is set to match_parent.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/placeCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="8dp"
android:background="#drawable/ripple"
android:clickable="true"
android:focusable="true"
android:foreground="?selectableItemBackground">
<RelativeLayout
android:id="#+id/rippleForeground"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/articleImageView"
android:layout_width="match_parent"
android:layout_height="228dp" />
<RelativeLayout
android:id="#+id/infoRelativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/paletteView"
android:background="#android:color/white"
android:paddingRight="8dp"
android:paddingBottom="8dp"
android:paddingLeft="8dp">
<TextView
android:id="#+id/titleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginTop="8dp"
android:text="#string/placeholder"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceMedium"/>
<TextView
android:id="#+id/abstractTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/titleTextView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="8dp"
android:text="#string/placeholder" />
<!--<TextView
android:id="#+id/timeTextView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/placeholder"
android:textColor="#color/colorSecondaryText"/>-->
<TextView
android:id="#+id/globalTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/abstractTextView"
android:layout_alignParentBottom="true"
android:padding="8dp"
android:gravity="center"
android:text="#string/placeholder"
android:textStyle="bold"
android:textColor="#color/colorSecondaryText"/>
</RelativeLayout>
<View
android:id="#+id/paletteView"
android:layout_width="match_parent"
android:layout_below="#id/articleImageView"
android:layout_height="4dp"
android:layout_marginTop="12dp"/>
</RelativeLayout>

Add a layout_land folder in res and copy your xml to it.You will use xml in this folder if your orientation is Landscape.You can change the xml in this folder to fit.

You can scale the image in the xml like this:
<ImageView
android:id="#+id/articleImageView"
android:layout_width="match_parent"
android:layout_height="228dp"
android:scaleType="fitXY" />