CODEWITHSUNDEEP
androidandroid-layout
Cem
Cem

Reputation: 155

Splitting the screen into half(horizontally) while using a border for TextViews (Android)

I have a layout which divides the screen into two horizontally and it works correctly. But when I try to put a border (as a background image from my custom drawable folder) the second TextView does not start at the half of the page. It comes next to the first view. How can I fix?

Here is that part of my xml.

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/border_tasks"
            android:orientation="horizontal">
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Bekleyen                 \n Görevler \n 10"
                android:layout_weight="1"/>
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Biten                     \n Görevler \n 90"
                android:layout_weight="1"/>

        </LinearLayout>
    </LinearLayout>

Here is the full xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/activitychart"
    android:orientation="vertical">
   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@drawable/border_name"
       android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text ="Adı Soyadı"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Anadolu Sigorta - Eksper"
        />
   </LinearLayout>
    <com.github.mikephil.charting.charts.PieChart
        android:id="@+id/chart"
        android:background="@drawable/border_name"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:paddingLeft="@dimen/_5sdp"
        android:scaleX="1.02"
        android:scaleY="1.02"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/border_tasks"
        android:orientation="horizontal">
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Bekleyen                 \n Görevler \n 10"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Biten                     \n Görevler \n 90"
            android:layout_weight="1"/>

    </LinearLayout>
</LinearLayout>

And here is border tasks (values are just random, you can change them.) The reason I use two different textviews is that I will add an additional border for each text view after adding a wider border which encapsulates both of them

border_tasks.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:radius="20dp"/>
    <size android:width="@dimen/_160sdp" android:height="@dimen/_60sdp" ></size>
    <padding android:left="10dp" android:right="@dimen/_160sdp" android:top="10dp" android:bottom="10dp"/>
    <stroke android:width="1dp" android:color="#CCCCCC"/>
</shape>

Here @dimen/_160sdp refers to 160 dp and so on. I played with the values but I could not make it work.

Upvotes: 0

Views: 225

Answers (1)

Juan
Juan

Reputation: 5589

The problem is with the border_task.xml. I changed it by removing the size tag and changing the padding to 10dp from all directions.

This generates a rounded border containing both textviews. And the text views occupy 50/50 of the space.

    <?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
        <corners android:radius="20dp"/>
        <padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp"/>
        <stroke android:width="1dp" android:color="#CCCCCC"/>
    </shape>

Hint: to separate the border of the LinearLayout from the border of the screen add a margin of 5dp to the LinearLayout.

Upvotes: 1

Related Questions