Develop Reference

StylePlayerView controller xml overriding play and pause button not working

I updated my project exoplayer dependency, and i was updating my code with StylePlayerView (customized layout from exoplayer) reference, but when i executed my code the overrating about this 2 buttons PLAY and PAUSE, are not working, y use PLAY_PAUSE and works, but i want to customize this icons.. so if someone can help me, i really apreace it.
psdt.- And sorry about mi english because i speak spanish.
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.exoplayer2.ui.AspectRatioFrameLayout 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/customized_controller"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:background="#color/transparentBackground">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageButton
android:id="#+id/exo_rew"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/replay"
android:layout_gravity="center"
style="#style/ExoMediaButton.Rewind"
android:src="#drawable/ic_replay_10" />
<ImageButton
android:id="#+id/exo_play_pause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/play"
android:visibility="gone"
android:layout_gravity="center"
style="#style/ExoMediaButton.Play"
android:src="#drawable/ic_play"/>
<ImageButton
android:id="#+id/exo_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/play"
android:layout_gravity="center"
android:visibility="visible"
style="#style/ExoMediaButton.Play"
android:src="#drawable/ic_play"/>
<ImageButton
android:id="#+id/exo_pause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/pause"
android:layout_gravity="center"
android:visibility="visible"
style="#style/ExoMediaButton.Pause"
android:src="#drawable/ic_pause" />
<ImageButton
android:id="#+id/exo_ffwd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/fast_forward"
android:layout_gravity="center"
style="#style/ExoMediaButton.FastForward"
android:src="#drawable/ic_forward_30" />
</LinearLayout>
<TextView
android:id="#+id/exo_duration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:layout_weight="1"
android:textColor="#color/whitePrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<com.google.android.exoplayer2.ui.DefaultTimeBar
android:id="#+id/exo_progress"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:buffered_color="#color/grey_accent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/exo_duration"
app:layout_constraintStart_toEndOf="#+id/exo_position"
app:played_color="#color/blueLight"
app:unplayed_color="#color/whiteSecondary"
tools:ignore="SpeakableTextPresentCheck" />
<ImageView
android:id="#+id/bt_fullscreen"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:contentDescription="#string/full_screen"
android:src="#drawable/ic_fullscreen_24"
app:layout_constraintBottom_toTopOf="#+id/exo_progress"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="#+id/exo_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
android:textColor="#color/whitePrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/bt_close_player"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:contentDescription="#string/close"
android:paddingHorizontal="8dp"
android:src="#drawable/ic_chevron_left"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txvChapterTitle"
android:layout_width="0dp"
android:layout_height="0dp"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
android:paddingHorizontal="8dp"
android:text="#string/title"
android:textColor="#color/whitePrimary"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/bt_close_player"
app:layout_constraintEnd_toStartOf="#+id/lnSettings"
app:layout_constraintStart_toEndOf="#+id/bt_close_player"
app:layout_constraintTop_toTopOf="#+id/bt_close_player" />
<LinearLayout
android:id="#+id/lnSettings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:padding="12dp"
app:layout_constraintBottom_toBottomOf="#+id/bt_close_player"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/bt_close_player">
<ImageView
android:id="#+id/bt_settings"
android:layout_width="18dp"
android:layout_height="18dp"
android:contentDescription="#string/title_settings"
app:srcCompat="#drawable/ic_settings_24" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.exoplayer2.ui.AspectRatioFrameLayout>

I solved this issue for me by overriding the style and drawables. I created a new style on my values file like below:
<style name="ExoStyledControls.Button.Center.PlayPause">
<item name="android:src">#drawable/exo_styled_controls_pause</item>
<item name="android:contentDescription">#string/exo_controls_play_description</item>
<item name="android:padding">#dimen/exo_icon_padding</item>
</style>
<drawable name="exo_styled_controls_pause">#drawable/exo_styled_control_pause</drawable>
<drawable name="exo_styled_controls_play">#drawable/exo_styled_control_play</drawable>
The drawables exo_styled_control_play and exo_styled_control_pause should contain your own drawable code.
Do not forget to invalidate cache and restart if it doesn't work right away.

You can modify the values.xml file in the library.
Go to Project -> Gradle: com.~~.Exoplayer-ui:2.18.0#aar -> res -> values.xml
See values.xml in project view
Search for exo_styled_controls_play or exo_styled_controls_pause
and edit here ----> #drawable/"your image"
This is where you can find the line of code

Android EditText error message popup text not showing

I'm having an issue in my app where the error popup on EditTexts shows but the text is not visible.
It looks something like this:
This happens with all the EditTexts in my app.
Here's an example layout XML
Layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradient"
android:fitsSystemWindows="true"
tools:context=".ui.onboarding.profile.OnboardingUserProfileActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
app:srcCompat="#drawable/shapes_background" />
<ProgressBar
android:id="#+id/login_progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:visibility="gone" />
<ScrollView
android:id="#+id/form"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="80dp"
android:orientation="vertical">
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:layout_marginBottom="20dp">
<ImageView
android:id="#+id/profileImageView"
android:layout_width="160dp"
android:layout_height="160dp"
android:scaleType="fitXY"
android:src="#drawable/user_profile_placeholder"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/cameraImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="#android:drawable/ic_menu_camera" />
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/firstnameTvLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="20dp"
android:layout_weight="0.33"
android:textColorHint="#color/colorVeryLightGray"
android:theme="#style/AppTheme.WhiteColorAccent"
app:errorTextAppearance="#style/error_appearance">
<android.support.design.widget.TextInputEditText
android:id="#+id/firstnameTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_firstname"
android:inputType="textPersonName"
android:maxLines="1"
android:nextFocusDown="#id/lastnameTv"
android:nextFocusForward="#id/lastnameTv"
android:singleLine="true"
android:textColor="#android:color/white"
android:textColorHint="#color/colorWhite"
android:theme="#style/AppTheme.WhiteEditText"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/lastnameTvLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="20dp"
android:layout_weight="0.33"
android:textColorHint="#color/colorVeryLightGray"
android:theme="#style/AppTheme.WhiteColorAccent">
<android.support.design.widget.TextInputEditText
android:id="#+id/lastnameTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_lastname"
android:inputType="textPersonName"
android:maxLines="1"
android:nextFocusDown="#id/usernameTv"
android:nextFocusForward="#id/usernameTv"
android:singleLine="true"
android:textColor="#android:color/white"
android:textColorHint="#color/colorWhite"
android:theme="#style/AppTheme.WhiteEditText" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/usernameTvLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.33"
android:textColorHint="#color/colorVeryLightGray"
android:theme="#style/AppTheme.WhiteColorAccent">
<android.support.design.widget.TextInputEditText
android:id="#+id/usernameTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_username"
android:imeActionId="6"
android:imeActionLabel="#string/action_sign_in_short"
android:imeOptions="actionUnspecified"
android:maxLines="1"
android:nextFocusDown="#id/nextBtn"
android:nextFocusForward="#id/nextBtn"
android:singleLine="true"
android:textColor="#android:color/white"
android:textColorHint="#color/colorWhite"
android:theme="#style/AppTheme.WhiteEditText" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/nextBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="16dp"
android:text="#string/next"
android:textStyle="bold"
android:theme="#style/AppTheme.PrimaryButton"
app:layout_anchor="#+id/form"
app:layout_anchorGravity="bottom|center_horizontal" />
</android.support.design.widget.CoordinatorLayout>
And the styles:
<style name="AppTheme.WhiteColorAccent">
<item name="colorAccent">#color/colorWhite</item>
</style>
<style name="AppTheme.WhiteEditText" parent="Widget.AppCompat.EditText">
<item name="android:textColor">#color/colorWhite</item>
<item name="colorControlNormal">#color/colorVeryLightGray</item>
<item name="colorControlActivated">#color/colorWhite</item>
<item name="colorControlHighlight">#color/colorWhite</item>
</style>
Setting error in the activity using firstnameTv.error = "This field can not be empty" (Kotlin)

You need to use
style="#style/AppTheme.WhiteEditText"
Instead of android:theme="#style/AppTheme.WhiteColorAccent"
Now question is why need to use style Instead of android:theme
When you use style it apply will apply only to that view
and When you use android:theme it apply will apply view as well as all of its children.
Read more about What is the difference between style and android:theme attributes?
SAMPLE CODE
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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/main_content"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent"
android:background="#color/colorPrimary">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:visibility="gone" />
<ProgressBar
android:id="#+id/login_progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:visibility="gone" />
<ScrollView
android:id="#+id/form"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
android:fillViewport="true">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="80dp"
android:orientation="vertical">
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:layout_marginBottom="20dp">
<ImageView
android:id="#+id/profileImageView"
android:layout_width="160dp"
android:layout_height="160dp"
android:scaleType="fitXY"
android:src="#color/colorNavBar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/cameraImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="#android:drawable/ic_menu_camera" />
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/firstnameTvLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="20dp"
android:layout_weight="0.33"
android:textColorHint="#color/colorVeryLightGray"
style="#style/AppTheme.WhiteColorAccent"
>
<android.support.design.widget.TextInputEditText
android:id="#+id/firstnameTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="First Name"
android:inputType="textPersonName"
android:maxLines="1"
android:imeOptions="actionNext"
android:nextFocusDown="#id/lastnameTv"
android:nextFocusForward="#id/lastnameTv"
android:textColor="#android:color/white"
android:textColorHint="#color/colorWhite"
style="#style/AppTheme.WhiteEditText" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/lastnameTvLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="20dp"
android:layout_weight="0.33"
android:textColorHint="#color/colorVeryLightGray"
style="#style/AppTheme.WhiteColorAccent">
<android.support.design.widget.TextInputEditText
android:id="#+id/lastnameTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Last Name"
android:inputType="textPersonName"
android:maxLines="1"
android:nextFocusDown="#id/usernameTv"
android:nextFocusForward="#id/usernameTv"
android:singleLine="true"
android:textColor="#android:color/white"
android:textColorHint="#color/colorWhite"
style="#style/AppTheme.WhiteEditText" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/usernameTvLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="20dp"
android:layout_weight="0.33"
android:textColorHint="#color/colorVeryLightGray"
style="#style/AppTheme.WhiteColorAccent">
<android.support.design.widget.TextInputEditText
android:id="#+id/usernameTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="user Name"
android:imeActionId="6"
android:imeActionLabel="AB"
android:imeOptions="actionUnspecified"
android:maxLines="1"
android:nextFocusDown="#id/nextBtn"
android:nextFocusForward="#id/nextBtn"
android:singleLine="true"
android:textColor="#android:color/white"
android:textColorHint="#color/colorWhite"
style="#style/AppTheme.WhiteEditText" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/nextBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="16dp"
android:text="Next"
android:textStyle="bold"
app:layout_anchor="#+id/form"
app:layout_anchorGravity="bottom|center_horizontal" />
</android.support.design.widget.CoordinatorLayout>
style
<style name="AppTheme.WhiteColorAccent">
<item name="colorAccent">#color/colorWhite</item>
</style>
<style name="AppTheme.WhiteEditText" parent="Widget.AppCompat.EditText">
<item name="android:textColor">#color/colorWhite</item>
<item name="colorControlNormal">#color/colorVeryLightGray</item>
<item name="colorControlActivated">#color/colorWhite</item>
<item name="colorControlHighlight">#color/colorWhite</item>
</style>
OUTPUT

You need to set the error in TextInputLayout, NOT in TextInputEditText
firstnameTvLayout.setError("Error goes here");
Also make sure you have done
firstnameTvLayout.setErrorEnabled(true);
See the documentation here for more details https://developer.android.com/reference/android/support/design/widget/TextInputLayout

You have to use style instead of android:theme. If you set android:theme to a view group, its children (error pop-up, in this case) will use the same style.
Your code
<android.support.design.widget.TextInputLayout
....
android:theme="#style/AppTheme.WhiteColorAccent"
....>
Change it to
<android.support.design.widget.TextInputLayout
....
style="#style/AppTheme.WhiteColorAccent"
....>

textInputLayout.setErrorEnable(true);

Padding or margins is only on left and right side but not on top and bottom

When I am trying to make a border (frame) around my ImageView by using padding or margin in FrameLayout (in code it has id: main_frame), it's only shown on left and right sides but not on top and bottom.
But as I wrote I need it around because it should look like frame.
There is a code:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
tools:context=".WallActivity">
<RelativeLayout
android:id="#+id/wall_frame"
android:layout_width="592dp"
android:layout_height="315dp"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout"
app:layout_constraintVertical_bias="1.0">
<ImageView
android:id="#+id/wall"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/room"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<FrameLayout
android:id="#+id/main_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#android:color/transparent"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="0.621"
android:layout_margin="40dp">
<FrameLayout
android:id="#+id/frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/black"
android:visibility="visible"
android:padding="20dp">
<FrameLayout
android:id="#+id/mat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/white"
android:visibility="visible"
android:padding="10dp">
<RelativeLayout
android:id="#+id/imageholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/transparent">
<ImageView
android:id="#+id/picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/nature"
android:visibility="visible"
android:layout_centerInParent="true"/>
</RelativeLayout>
</FrameLayout>
</FrameLayout>
</FrameLayout>
</RelativeLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="586dp"
android:layout_height="36dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:orientation="horizontal"
android:weightSum="35.5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/hideBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Hide"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:id="#+id/clearBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Clear"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:id="#+id/lockBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Lock"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5" />
<Button
android:id="#+id/exportBTN"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Export"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5" />
<Button
android:id="#+id/wallBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Wall"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:id="#+id/pictureBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Picture"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
And here is the screenshot.
Do you have any idea how to solve it? I tried searching but couldn't find anything similar. Or is there a better way to make frames?
Thank you!
//Edited:
I added full xml code, added some padding to FrameLayouts with id: mat, frame. It looks perfect but main_frame is still broken. main_frame should be invisible (with transparent color) so you may think it's not necessarily to solve it, but I find out when I let it be like that it brokes image when I change it. It adds some white borders (only just on left and right side) to the image...
There is another picture to show you that frames look good but as I said main_frame is broken...

Add this: android:padding="2dp" to the FrameLayout with id frame. You can change 2dp to what you like.

You might consider having a simple layout using one RelativeLayout and an ImageView. The RelativeLayout might have a background whereas the ImageView will have some padding along with a background as well. So the layout will be something like this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/room">
<ImageView
android:id="#+id/picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#android:color/black"
android:padding="16dp"
android:scaleType="fitCenter"
android:src="#drawable/nature" />
</RelativeLayout>
Hope that helps!

Constraint Layout TextView Overlap

I'm having some issues inside a constraint layout where i have a TextView which supports multiple lines. When the TextView is expanded it overlaps with other components inside the constraint layout. Below is the XML layout that i'm using and a GIF to demonstrate.
Any help would be much appreciated.
Demonstration -> https://puu.sh/xPFSF/3f6711a68f.gif
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:background="#color/activity_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<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:layout_width="match_parent"
android:focusableInTouchMode="true"
android:layout_height="0dp">
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/leftGuideline"
app:layout_constraintGuide_begin="20dp"
android:orientation="vertical"/>
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rightGuideline"
app:layout_constraintGuide_end="20dp"
android:orientation="vertical"/>
<TextView
android:id="#+id/subject"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/subject"
android:layout_marginTop="20dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="#id/leftGuideline"
app:layout_constraintEnd_toEndOf="#id/rightGuideline" />
<EditText
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/your_message"
android:layout_marginTop="20dp"
android:minLines="2"
app:layout_constraintTop_toBottomOf="#id/subject"
app:layout_constraintStart_toStartOf="#id/leftGuideline"
app:layout_constraintEnd_toEndOf="#id/rightGuideline" />
<Button
android:id="#+id/sendMessageButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="#string/send_message"
style="#style/button_main"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toBottomOf="#id/message"
app:layout_constraintStart_toStartOf="#id/leftGuideline"
app:layout_constraintBottom_toTopOf="#+id/saveDraftButton"
app:layout_constraintEnd_toEndOf="#id/rightGuideline" />
<TextView
android:id="#+id/saveDraftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/save_draft"
android:layout_marginBottom="10dp"
android:drawableStart="#drawable/icon_arrow"
android:gravity="center_vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/leftGuideline"
app:layout_constraintEnd_toEndOf="#id/rightGuideline" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
Edit: Removed RecyclerView as it wasn't necessary.
As requested, button_main style:
<style name="button_main" parent="#style/button">
<item name="android:textColor">#color/button_main_stateful_text</item>
<item name="android:background">#drawable/primary_action_button</item>
<item name="android:textSize">#dimen/h5_size</item>
<item name="android:textAllCaps">false</item>
</style>
button_main_stateful_text & primary_action_button are just two selectors that switch between colours.

scottazord adding
app:layout_constraintBottom_toTopOf="#+id/sendMessageButton"
to EditText should solve your problem.
the EditText full code is
<EditText
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="your message"
android:layout_marginTop="20dp"
android:minLines="2"
app:layout_constraintTop_toBottomOf="#id/subject"
app:layout_constraintStart_toStartOf="#id/leftGuideline"
app:layout_constraintEnd_toEndOf="#id/rightGuideline"
app:layout_constraintBottom_toTopOf="#+id/sendMessageButton"/>
now this should solve your issue

Custom toolbar using ConstraintLayout in android

I am trying to create my own custom Toolbar for my project. Currently I am using RelativeLayout to create it. But I wanna avoid deep hierarchy of Views. So I wanna create it using ConstrainLayout. How can I achieve the following in ConstraintLayout.
Code for the above layout:
<RelativeLayout
android:id="#+id/customAppBarLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:paddingEnd="10dp"
android:paddingStart="10dp">
<ImageView
android:id="#+id/toolbarCloseButton"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
app:srcCompat="#drawable/ic_cancel" />
<TextView
android:id="#+id/toolbarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginStart="15dp"
android:layout_toEndOf="#+id/toolbarCloseButton"
android:textColor="#000"
android:textSize="18sp"
tools:text="Puzzle" />
<RelativeLayout
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true">
<ImageView
android:id="#+id/coinIcon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:paddingBottom="2dp"
android:paddingRight="2dp"
app:srcCompat="#drawable/ic_single_coin"
tools:ignore="MissingPrefix" />
<TextView
android:id="#+id/prizeSize"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_centerInParent="true"
android:background="#drawable/circular_background"
android:focusable="true"
android:focusableInTouchMode="true"
android:freezesText="true"
android:gravity="center"
android:marqueeRepeatLimit="marquee_forever"
android:maxEms="20"
android:maxLines="1"
android:padding="1dp"
android:scrollHorizontally="true"
android:textColor="#fff"
android:textSize="6sp"
tools:text="100" />
</RelativeLayout>
</RelativeLayout>
How this can be done in ConstraintLayout ?

I wrote a simple layout. You can see my code to improve your layout. Hope it helps:
<?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="wrap_content"
android:background="#00ffff">
<TextView
android:id="#+id/tv"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#0000ff"
android:gravity="center_vertical"
android:text="TextView"
android:textColor="#android:color/white"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/iv_1"
app:layout_constraintRight_toLeftOf="#+id/iv_2"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/iv_1"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#android:color/holo_red_dark"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/iv_2"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#00ff00"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

You need to add your custom layout inside the toolbar code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" >
<!-- your custom layout here -->
<include android:id="#+id/actionBar" layout="#layout/action_bar_layout"/>
</android.support.v7.widget.Toolbar>