We Keep Coding

Different position on different screen size

I want to put a text, a button or something like that in a specific place on an image. But as devices have different screen resolution, the text is changing position and don't remain there where I have positioned it.
That is a view on Nexus 4:
That is a view on Pixel 2 XL
How can I solve this problem?
tuner_activity.xml
<?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">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/manico"
android:contentDescription="#string/chords" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="81dp"
android:layout_marginStart="81dp"
android:layout_marginTop="100dp"
android:text="D"
android:textColor="#color/black"
android:textSize="35sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="180dp"
android:layout_marginStart="180dp"
android:layout_marginTop="100dp"
android:text="G"
android:textColor="#color/black"
android:textSize="35sp"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="#+id/imageView" />
</android.support.constraint.ConstraintLayout>

Seems like you are using match_parent for ImageView width,height.
Your ImageView will stretch/skew based on device screen size, so it won't be possible for you to move your ButtonView accordingly.
However, in this case, you know image dimensions and aspect ratio in advance, you should create your ImageView based on those dimensions(instead of match_parent).Now ImageView will always maintain the aspect ratio and size and you can position your TextView,ButtonView accordingly.

Exoplayer ui split the screen and add double tap to go forward/backward circular effect

I have to reproduce the following circular effect on the exoplayer.
I added two views, exo_rew and exo_ffwd.
Which automatically do go back or forward by standard setting.
This is the code I've written so far:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="fill_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:id="#+id/exo_rew"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:gravity="center"
android:clickable="true"
android:focusable="true"
android:background="#00000000"
android:foreground="?attr/selectableItemBackground"
tools:ignore="Orientation" />
<LinearLayout
android:id="#+id/exo_ffwd"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:layout_alignParentLeft="false"
android:layout_alignParentRight="true"
android:gravity="center"
android:clickable="true"
android:focusable="true"
android:background="#00000000"
android:foreground="?attr/selectableItemBackground"
tools:ignore="Orientation" />
<LinearLayout
android:id="#+id/play_pause_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#15ffffff"
android:gravity="center"
>
<ImageButton
android:id="#id/exo_play"
style="#style/ExoMediaButton.Play"
/>
<ImageButton
android:id="#id/exo_pause"
style="#style/ExoMediaButton.Pause"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignWithParentIfMissing="false"
android:layout_centerHorizontal="false"
android:layout_centerVertical="false"
android:gravity="center_vertical"
>
<TextView
android:id="#id/exo_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="00:00"
android:textColor="#FFBEBEBE"
android:textSize="14sp"
android:textStyle="bold"
/>
<com.google.android.exoplayer2.ui.DefaultTimeBar
android:id="#id/exo_progress"
android:layout_width="0dp"
android:layout_height="26dp"
android:layout_weight="1"
app:played_color="#4589f2"
/>
<TextView
android:id="#id/exo_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="2:00:00"
android:textColor="#FFBEBEBE"
android:textSize="14sp"
android:textStyle="bold"
/>
</LinearLayout>
</RelativeLayout>
There are two problems that I could not solve:
1) That each view takes half of the screen, exo_rew on the left and exo_ffwd on the right.
I could not find a way to specify in xml a layout_width equal to match_parent/2.
Is there a way?
I tried with weightSum at 1, but it does not seem to work.
2) Create the circular effect as in the image.
the doubts are better to use a canvas creating a circle or a "circle reveal" effect.
Can someone give me a hand?

Best way would be to use ConstraintLayout and add these images with constraint start, end, bottom and top and give them width of 0dp, in this way they'll just occupy the width according to their constraint.
ConstraintLayout is very powerful it will also reduce your view hierarchy. And it would help your purpose.

If you want to add the same double tap behavior like YouTube, you can use my library to achieve it. My basic approach is to override the onTouchEvent of the PlayerView to detect DoubleTapGesture (SimpleGestureDetector) and creating an overlay on top of it.
I've written an answer here already. Use the following to implement it:
0) Requirements:
Minimum SDK: 21 (could be lower, but I've not tested older versions yet)
ExoPlayer2 library (at least 2.10.4) since the replaced view is written above ExoPlayer's PlayerView
1) Include it to your gradle (it's hosted on jitpack.io so you've got to add it to your respositories):
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
dependencies {
implementation 'com.github.vkay94:DoubleTapPlayerView:0.7.1'
}
2) Add the views inside your XML:
<FrameLayout
... >
<!-- Replace ExoPlayer's PlayerView -->
<com.github.vkay94.dtpv.DoubleTapPlayerView
android:id="#+id/doubletapplayerview"
app:player_layout_id="#layout/exo_simple_player_view"
app:use_controller="true"
...
/>
<!-- Other views e.g. ProgressBar etc -->
<!-- Add the overlay on top of PlayerView -->
<com.github.vkay94.dtpv.YouTubeDoubleTap
android:background="#color/dtp_overlay_dim"
android:id="#+id/youTubeDoubleTap"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
3) Set it up inside your activity:
// Link the PlayerView to the overlay to pass increment to the Player (seekTo)
// Important: set the (Simple)ExoPlayer to the PlayerView before this call
youTubeDoubleTap
.setPlayer(doubletapplayerview)
.setForwardRewindIncrementMs(5000)
// Set YouTube overlay to the PlayerView and double tapping enabled (false by default)
doubletapplayerview
.activateDoubleTap(true)
.setDoubleTapDelay(500)
.setDoubleTapListener(youTubeDoubleTap)
//.setDoubleTapListener(this) => handle event directly within´the activity
Link to the library on Github

Use FrameLayout instead of LinearLayout Like this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<FrameLayout
android:id="#+id/exo_rew"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00000000"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground" />
<FrameLayout
android:id="#+id/exo_ffwd"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00000000"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground" />
</LinearLayout>

ConstraintLayout applying margin bottom to a view, also applies it to the top of the view

I have a TextView, below it an EditText and below it another TextView. When I apply a bottom margin of 12 dp to the EditText, it's applied but it also applies to the top of the view. I don't know if this is the way ConstraintLayout works. marginTop works as expected.
https://i.stack.imgur.com/VEOUz.jpg

From what i can see in your attachment you are creating a vertical chain but you didn't restrain your "description" to the bottom. This could cause issues since the constraint layout doesn't know where the chain ends. make sure you add app:layout_constraintBottom_toBottomOf="parent" or whatever view you need as a bottom chain constraint on the description TextView.
I recreated your example and there is mirror margin for the edit text.
<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">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
app:layout_constraintBottom_toTopOf="#id/editText"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="edit text"
app:layout_constraintBottom_toTopOf="#+id/description"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/name" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Description"
android:textColor="#color/colorTextPrimaryLight"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText" />
You can play around with the chainStyle to see which fits best your needs.

How can i remove unnecessary top padding in cardview?

I managed to implement Cardviews in my app, but the cardview show an unnecessary padding in the top.
What i want to achieve is to get a header image like this :
Here's my cardview Layout file :
<android.support.v7.widget.CardView
android:id="#+id/programCardview"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
card_view:cardUseCompatPadding="true"
xmlns:card_view="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/programHeader"
android:layout_width="match_parent"
android:layout_height="160dp"
android:src="#drawable/createdprogramviewcard"/>
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp">
<TextView
android:id="#+id/programTitle"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="Programme d'endurance"
android:textSize="20sp"
android:textAlignment="center"/>
<TextView
android:id="#+id/objectif"
android:layout_below="#+id/programTitle"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Objectif : " />
<TextView
android:id="#+id/programObjectif"
android:layout_below="#+id/programTitle"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="6 séances"
android:layout_toRightOf="#id/objectif"/>
<TextView
android:id="#+id/programWorkouts"
android:layout_below="#+id/programTitle"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textAlignment="textEnd"
android:layout_alignParentRight="true"
android:text="6 séances" />
</RelativeLayout>
</LinearLayout>
This is the code of the RecyclerView :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewPrograms"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
I manage to change the attribute cardUseCompatPadding but that not affect the internal form of the cardview, it's just there to separate them.
Thanks in advance.

I found a solution for my problem by changing the height of the imageView to 130dp. Apparently since i made the with of the image to match_parent, i had to find the exact height that will suit the image inside the cardview without giving it some extra padding.

The situation is due to two reasons, the first is that the height property of the CardView is in match_parent or in a larger size than the components occupy and at the same time the gravity property of the layout is in center.
To fix it just set the gravity of the LinearLayout to center | fill or just to fill.

I used these below attributes and it works for me.
card_view:cardElevation="0dp"
card_view:cardMaxElevation="0dp"
Or you can just use MaterialCardView instead of legacy CardView

Splitting Android Layout Vertically Adding Gravity To Both Sides To Center Objects

I have an android layout I'd like to split down the middle vertically and then add gravity so I can center items within the left and the right halves of the layout.
Can someone explain or post an example of how this might be accomplished?
Thus far I've created a layout and a horizontal layout. My problem is the horizontal layout needs balance so I'd like to figure out a way to change my current layout (show below) to include a way of centering the objects within the left and right halves of the screen.
SOURCE:
<?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:background="#drawable/background"
android:orientation="vertical" >
<ImageView
android:id="#+id/emblem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="24dp"
android:gravity="center"
android:scaleType="fitStart"
android:src="#drawable/apn_app_logo" />
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/emblem"
android:layout_alignParentRight="true"
android:layout_marginBottom="23dp"
android:layout_marginRight="22dp"
android:background="#drawable/apn_app_go_button" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/go_button"
android:gravity="center"
android:text="#string/start_text2"
android:textColor="#000000"
android:textSize="18sp" />
</RelativeLayout>

First of all android:orientation attribute will not work in Relative Layout.If you want to split the screen half into two equal layout your parent layout will be a linear layout with android:orientation= horizontal. Then inside that have 2 LinearLayout with each android:orientation= vertical. Inside 1st Linear layout you can have the ImageView , Button and TextView with each of their layout_gravity=center.
Hope this helps. If you want to do something in the 2nd half of teh screen , do all teh stuffs in the 2nd LinearLayout.
Happy Coding.

Here's some code which should be self-explanotory:
<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:orientation="horizontal"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#00dd00"
android:gravity="center"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#dd0000"
android:gravity="center_horizontal"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
and here's what you'll achieve: