We Keep Coding

Need to show view above of seekbar at specific position android

I want to show seekbar with dashed line as per below images . This line will be display dynamically based on low/high value. I have attached below image.
I have achieved below image. Can you please help me in this?

Add your progress bar inside a constraint layout and have its width set to match the parent. Add two imageviews on top of it that have the dotted line as a resource. Add two vertical guidelines and restrict each imageview to the appropriate guideline. Set the percentage of the guidelines to be where you want each time on the progress bar and the views will move accordingly. You can programmatically change the percentage of the guidelines like so:
Guideline guideLineLeft = (Guideline) findViewById(R.id.your_left_guideline);
Guideline guideLineRight = (Guideline) findViewById(R.id.your_right_guideline);
ConstraintLayout.LayoutParams params = (ConstraintLayout.LayoutParams) guideLineLeft.getLayoutParams();
params.guidePercent = 0.10f; // 10%
guideLineLeft.setLayoutParams(params);
guideLineRight.getLayoutParams();
params.guidePercent = 0.90f; // 90%
guideLineRight.setLayoutParams(params);
UPDATE after comment:
<?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">
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:srcCompat="#drawable/ic_divider_more" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:srcCompat="#drawable/ic_divider_more" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.21" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.80"/>
</android.support.constraint.ConstraintLayout>

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.

Fit TextView under ImageView

I have 2 rows of "buttons" which are composed of a vertical LinearLayout of an ImageView and a TextView. The problem I'm having right now is trying to set the ImageView aspect ratio without hardcoding its dimensions.
I have already tried playing with the layout weights but it still forces the TextView to be partially cut off.
The xml structure I have is 2 horizontal LinearLayouts and each button is described above.
I've included a picture of my problem. You can see the first button is forcing the TextView out of the bounds. The rest of the buttons you see are hardcoded dimensions, but I don't want to do that because smaller screen sizes won't work.
Here is my layout for one button:
<LinearLayout
android:gravity="center_horizontal"
android:layout_weight="1"
android:padding="5dp"
android:orientation="vertical"
android:layout_width="0dip"
android:layout_height="match_parent">
<ImageView
android:id="#+id/setting_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#null"
android:clickable="true"
android:onClick="openSettings"
android:src="#drawable/menu" />
<TextView
android:id="#+id/setting_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textAlignment="center"
android:textColor="#android:color/white"
android:autoSizeTextType="uniform" />
</LinearLayout>

Try using images with lower dimensions.

Try using a RelativeLayout and setting the TextView as anchor for the image:
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="5dp">
<TextView
android:id="#+id/setting_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:text="Settings"
android:textAlignment="center"
android:textColor="#android:color/white"
android:autoSizeTextType="uniform" />
<ImageView
android:id="#+id/setting_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#id/setting_text"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:background="#null"
android:clickable="true"
android:onClick="openSettings"
android:src="#drawable/menu" />
</RelativeLayout>

How to keep views from disappearing in wrap_content

I have a problem where a view of mine is disappearing in my RecyclerView when the layout of that view is wrap_content. The RecyclerView is match_parent both directions, and uses a LinearLayout that inflates the below xml file. Here is what each piece of the RecyclerView is supposed to look like:
And here is the XML for that:
<?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="wrap_content"
android:layout_margin="10dp">
<View
android:id="#+id/scheduleBlockColor"
android:layout_width="15dp"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/scheduleBlockText"
android:background="#color/colorCougarRed" />
<RelativeLayout
android:id="#+id/scheduleBlockText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/scheduleBlockColor"
android:layout_toRightOf="#id/scheduleBlockColor"
android:paddingEnd="0dp"
android:paddingLeft="5dp"
android:paddingRight="0dp"
android:paddingStart="5dp">
<TextView
android:id="#+id/scheduleBlockTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:text="#string/schedule_block_time_default"
android:textSize="16sp" />
<TextView
android:id="#+id/scheduleBlockClassName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scheduleBlockTime"
android:ellipsize="end"
android:padding="2dp"
android:singleLine="true"
android:text="#string/schedule_block_class_default"
android:textColor="#000000"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/scheduleBlockRoom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scheduleBlockClassName"
android:padding="2dp"
android:text="#string/schedule_block_room_default"
android:textSize="16sp" />
</RelativeLayout>
</RelativeLayout>
My question is, how do I keep that colored piece from disappearing when the RecyclerView loads? If I have the parent RelativeLayout above set to match_parent, it works fine. I've tried this answer, but haven't had the same success

It is because of the height set on the <View>. It gets messed up (even with match_parent) by the fact that it doesn't have content. Since the intention is to have a vertical stripe, you could anchor it to the top and bottom of the parent. You already are doing it for the bottom part (kind of, aligning it to the bottom of the text view container), so you only need to take care of the top anchoring:
<View
android:id="#+id/scheduleBlockColor"
...
android:layout_alignParentTop="true"
... />

Instead of padding using layout_margin inside your RelativeLayout.

spreading a DataGrid across the screen will all it's items visible

I'm writing my first android application. I'm using android 2.3.3 SDK.
the game is kind of a cards game that has a 4x4 grid of cards on the screen.
when the game starts the only thing visible on the screen is the datagrid (no menus or nothing).
so the GameActivity layout is the following:
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/faces_grid_view"
android:numColumns="4"
android:verticalSpacing="1dp"
android:horizontalSpacing="1dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</GridView>
this is the relevant code of the onCreate function of the GameActivity class:
Display display = getWindowManager().getDefaultDisplay();
final int width = display.getWidth();
final int height = display.getHeight();
final int bottomPadding=150;
//Display display = getWindowManager().getDefaultDisplay();
gameTurns = new ArrayList<GameTurn>();
imageWidth=width/4;
imageHeight=(height-bottomPadding)/4;
imageAdapter = new ImageAdapter(this,imageWidth,imageHeight);
facesGridView = (GridView) findViewById(R.id.faces_grid_view);
facesGridView.setAdapter(imageAdapter);
in the onCreate() code I'm getting the defaultDisplaySize, divide it by 4 so i'll know the max height and width that an image can take.
for some reason I need to add a bottomPadding. I checked it on galaxy note and galaxy tab 10.1 and maybe the getDefaultDisplay also returns the space of the bottom toolbar of the tablet itself so the pictures overlap the all screen without any padding.
as you can see I set an adapter for the GridView. the adapter extends BaseAdapter
and i paste to his constructor the width and height the I calculated earlier.
the getView function of the adapter contains the following:
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) { // if it's not recycled, initialize some attributes
imageView = new ImageView(mContext);
LayoutParams param = new LinearLayout.LayoutParams(this.imageWidth,this.imageHeight);
imageView.setLayoutParams(new GridView.LayoutParams(param));
imageView.setAdjustViewBounds(true);
imageView.setScaleType(ScaleType.CENTER_INSIDE);
imageView.setPadding(1,1,1,1);
} else {
imageView = (ImageView) convertView;
}
so a couple of questions:
is there a way just to configure the datagrid to be visible on the all screen and to show all items with no scrolling without configuration the image width or height ? why do I need to work so hard for such a simple task?
if I do need to calculate stuff myself, is there a way to get the actual Activity height and width so I won't need to add any padding? welp I want it to work on all scree sizes in landscape and portrait.
I tired to change and play with the configuration for many days and that's the best I've achieved so far so any information regarding the issue would be greatly appreciated.
update
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="*"
android:weightSum="4" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageView
android:id="#+id/imageView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageView
android:id="#+id/imageView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
</TableRow>
</TableLayout>
this xml file results in a 4 images centered and spread vertically (this fits the all screen so there may be more below).
.
what did i miss? :)
thanks!
Kfir

is there a way just to configure the datagrid to be visible on the all
screen and to show all items with no scrolling without configuration
the image width or height ? why do I need to work so hard for such a
simple task?
This is a simple task just that you're using the wrong widget. You would generally use a GridView if the grid of cells is bigger than the screen so you could benefit from the GridView's recycling mechanism(to improve performance and to don't get in trouble with the app's memory). This is not your case as you want all the cells to be visible.
I would use a TableLayout with width and height set to FILL_PARENT(with stretchColumns set to * so the row columns will have the same width) which will contain four TableRows(with layout_weight set to 1(and weighSum set to 4 for the parent TableLayout) so they will have equal height), also the layout_height for the TableRow will be set to 0dp. Each TableRow will contain four ImageViews.
if I do need to calculate stuff myself, is there a way to get the
actual Activity height and width so I won't need to add any padding?
Help I want it to work on all scree sizes in landscape and portrait.
I would advise you to use the solution I posted above. If you still want to use the GridView then make it fill all the width/height (by using fill_parent and not wrap_content like you did for the layout_width/height) and in the onCreate method use a Handler to post a Runnable in which you retrieve the GridView's LayoutParams and use those to set up the adapter.