GraphView: how to fit width tablet screen?

Question

I'm fighting with GraphView in my Android app since it doesn't fit my tablet screen width even if in smartphone screen it works. I used relative constraints so it should work. Here my code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:fitsSystemWindows="true"
    android:paddingLeft="0dp"
    android:paddingTop="0dp"
    android:paddingRight="0dp"
    tools:context=".ui.dashboard.DashboardFragment">

    <Button
        android:id="@+id/browse"
        android:layout_width="233dp"
        android:layout_height="96dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginBottom="60dp"
        android:paddingLeft="0dp"
        android:paddingRight="0dp"
        android:text="Scegli un segnale"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/line_graph2"
        app:layout_constraintStart_toStartOf="@+id/line_graph2" />

    <com.jjoe64.graphview.GraphView
        android:id="@+id/line_graph2"
        android:layout_width="wrap_content"
        android:layout_height="383dp"
        android:layout_marginStart="35dp"
        android:layout_marginLeft="35dp"
        android:layout_marginTop="64dp"
        android:layout_marginEnd="30dp"
        android:layout_marginRight="30dp"
        android:padding="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.546"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />

</androidx.constraintlayout.widget.ConstraintLayout>

Here what I get when i try it on my tablet (Samsung Galaxy Tab A P550):

And here what I get in Pixel 3A emulated in Android Studio (however it's the same in my Honor 8)

I'm pretty new on Android Studio develpment. Thanks in advance!

UPDATE After I had followed Varsha Godage instruction I modified this way my xml and I get the same result.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="fill_parent"
    android:layout_height="fill_parent"
    android:fitsSystemWindows="true"
    android:paddingLeft="0dp"
    android:paddingTop="0dp"
    android:paddingRight="0dp"
    tools:context=".ui.dashboard.DashboardFragment">

    <Button
        android:id="@+id/browse"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginTop="97dp"
        android:layout_marginBottom="95dp"
        android:paddingLeft="0dp"
        android:paddingRight="0dp"
        android:text="Scegli un segnale"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/line_graph2" />

    <com.jjoe64.graphview.GraphView
        android:id="@+id/line_graph2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="0dp"
        android:padding="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.6"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

I get the same result using this virtual machine:

Name: New_Device_API_30

CPU/ABI: Google APIs Intel Atom (x86)

Path: /home/samastel/.android/avd/New_Device_API_30.avd

Target: google_apis [Google APIs] (API level 30)

Skin: galaxy_nexus

fastboot.chosenSnapshotFile:

hw.dPad: no

hw.lcd.height: 768

runtime.network.speed: full

hw.accelerometer: yes

hw.device.name: New Device

vm.heapSize: 48

skin.dynamic: yes

hw.device.manufacturer: User

hw.lcd.width: 1024

hw.gps: yes

hw.initialOrientation: Portrait

image.androidVersion.api: 30

hw.audioInput: yes

image.sysdir.1: system-images/android-30/google_apis/x86/

tag.id: google_apis

showDeviceFrame: yes

hw.camera.back: virtualscene

hw.mainKeys: yes

AvdId: New_Device_API_30

hw.camera.front: emulated

hw.lcd.density: 120

avd.ini.displayname: New Device API 30

hw.arc: false

hw.gpu.mode: auto

hw.device.hash2: MD5:5131845cdecd82a7945a092e26ede305

fastboot.forceChosenSnapshotBoot: no

fastboot.forceFastBoot: yes

hw.ramSize: 1536

hw.trackBall: no

PlayStore.enabled: false

fastboot.forceColdBoot: no

hw.battery: yes

hw.cpu.ncore: 4

hw.sdCard: yes

tag.display: Google APIs

runtime.network.latency: none

hw.keyboard: yes

hw.sensors.proximity: no

disk.dataPartition.size: 6442450944

hw.sensors.orientation: yes

avd.ini.encoding: UTF-8

hw.gpu.enabled: yes

Update N 2

Here there is my Java code of the interface

package com.example.ble.ui.grafici;

import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;

import androidx.annotation.NonNull;
import androidx.annotation.RequiresApi;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.ViewModelProvider;

import com.example.ble.AppUtilis;
import com.example.ble.MainActivity4;
import com.example.ble.R;
import com.jjoe64.graphview.GraphView;
import com.jjoe64.graphview.series.DataPoint;
import com.jjoe64.graphview.series.LineGraphSeries;

import java.util.List;

public class DashboardFragment extends Fragment {


    private Button browser;
    private AppUtilis util;
    private String path;
    private View root;
    private GraphicModel model;

    //private Fragment fSys;

    public View onCreateView(@NonNull LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        model = new ViewModelProvider(this).get(GraphicModel.class);
        model.getLiveSign().observe(getViewLifecycleOwner(), liveSign -> {
            draw(liveSign);
        });
        root = inflater.inflate(R.layout.fragment_dashboard, container, false);

        // fSys = (Fragment) browser.findViewById(R.id.fragment2);
        util = new AppUtilis(this.getContext());
        path = "";//setto il path a niente poi quando torno indietro torno il nulla e chiaramente dovrò bypassare
        browser = (Button) root.findViewById(R.id.browse);
        browser.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Intent intent = new Intent(util.getContext(), MainActivity4.class);
                System.out.println("Vado a cercare roba");
                startActivityForResult(intent, 2);
            }
        });


        return root;
    }

    @RequiresApi(api = Build.VERSION_CODES.N)
    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        // check if the request code is same as what is passed  here it is 2
        if (requestCode == 2) {
            path = data.getStringExtra("PATH");

            if (!path.equals("")) {
                //apri cose
                model.loadCSV(path);
                System.out.println(path);
            }


        }
    }
    //sarebbe carino salvarlo se si cambia schermata
    private void draw(List<Integer> sign) {
        GraphView graph = (GraphView) root.findViewById(R.id.line_graph2);
        graph.removeAllSeries();
        System.out.println(sign.size());

        if (sign.size() > 0) {
            LineGraphSeries<DataPoint> series = new LineGraphSeries<>();
            for (int i = 0; i < sign.size(); i++) {
                DataPoint point = new DataPoint(i, sign.get(i));
                series.appendData(point, true, sign.size());
            }
            graph.getViewport().setScalable(true);
            graph.getViewport().setScrollable(true);
            series.setThickness(3);

            graph.addSeries(series);

        }
    }


}

Answer 1

This happening as GraphView width is set to wrap_content and height is fixed. To make it resizable based on screen size set width to android:layout_width="match_parent" and height to android:layout_height="0dp" and define percentage of height you want this graph view to cover using app:layout_constraintHeight_percent="0.6" (with 0.6, height will be 60% of the screen height).