How TO Code Shape Drawables Lines

Develop Android Apps, how to code a shape divider

Next Tutorial
How To Code A Webview

Prev Page
View All Tutorials

ANDROID TUTORIAL, CODING A SHAPE DIVIDER

This is our app Shape Drawable
Android app shape drawable line

SHAPE DRAWABLES

Shape drawables can be created for: lines, rectangles, ovals, and rings.

For this app we are going to create a drawable line and add the color white to it and use it as a divider in our app.

You can add as many dividers as you like to your app page; and this is a way to sectionalize your app. Each section can have text or photos, whatever you like. Looking at our app photo you can see we have added text to each of the sectioned areas. We also added the android icon image in our third section.

The line can have whatever color you want, can be any height you want, and you can place it anywhere you like in the view(the screen view).

For additional reading on coding drawables browse to Android Developer
Coding Drawables

Naming Your App Using AIDE

Also read Naming Your Android App
When creating your app, choose: 'New Android App - Gradle/Java-XML' template or 'Example App Hello World', if your using the older version of AIDE.
To do so; choose Create New Project from the Left menu in AIDE, then select android gradle/java/xml app.
Then type in an App Name and a Package Name.
You can name your app whatever you like; if your using the name as shown in the example code from this page use;

ShapeDrawable as the app name and,
package name as; com.acw.learndrawables in the next line;

Once you have created your app; you cannot change the package name but you can change the app name.

To change the app name, just goto the app projects, highlight the app name as it is now; then select Rename. And, change the name in your strings.xml file also, at the app_name string. Save the strings.xml file and reRun your app to see the new name on the app.

The Code

Coded Pages for the app - ShapeDrawable

Because we create our app using a android java/xml template app; most pages we need to code are already created; therefore, we need only remove the code on the page and replace it with the code from this tutorial. The code is at the Example Code section on this page.
Once you paste the code; save the page.

main.xml, this layout page is already created; just copy paste the code from our Example Code section to replace code on page now and save the page.

strings.xml, this page already created for us, just copy paste the code from our Example Code section to replace code on page now and save the page.

MainActivity.java, this page already created for us, and we don't need to edit this page, so just leave it as it is.

AndroidManifest.xml, this page already created for us, and we don't need to edit this page, so just leave it as it is.

my_divider.xml, this page we need to create and put into the res/drawable folder of your app project; first create the drawable folder at res/;as so; res/drawable, then create the page and name it - my_divider.xml, and add the code to it from our Example Code section on this page, and save the page.

When we create our drawable file; my_divider.xml, we must define this page name in the element where you want it. like this:android:background="@drawable/my_divider"

All drawable shapes are coded this way, and the file(my_divider.xml) must be put into the res/drawable folder of your app project. If your app project does not have one then you must create the folder. Once your at the res/ folder in your project just select: create new folder and name it: drawable

FYI
You can add the ScrollView element in case your text scrolls out of the physical view's display
To add it, code it as the first element in your layout file; main.xml; and then close the tag at the end of your code.

In your app, use the LinearLayout coded element where ever you want to put a divider line.

EXAMPLE CODE - Code For This Tutorial

JUST USE YOUR MOUSE or highlight the text to copy the code for this tutorial
App Name is 'ShapeDrawable - located at AppProjects/ShapeDrawable in AIDE, open the AIDE app, then open App Projects,
THEN select the 'ShapeDrawable', app from your files hierachy(left menu); then click on any file from the app, like strings.xml Make sure at top of page, the app name 'ShapeDrawable' is there next to AppProjects like so: AppProjects/ShapeDrawable, then you know you have the proper App.

Once a file is in the editor, you can edit, save it, then RUN your APP, Install, and Open your app.

Make sure you SAVED EACH PAGE, before you RUN your code. SAVE, RUN, INSTALL, OPEN, your ShapeDrawable App.

Once it has been installed on your tablet, you can open it Simply by Clicking on the Android little green App Icon,with the wording 'ShapeDrawable' on your tablet. It will be with your other installed apps.

If you make further changes to this App, you need to SAVE, RUN, UPDATE, INSTALL, OPEN the app.

Example Code Shape Drawable Line :
Use Mouse To Copy Paste the Code

main.xml

<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="vertical"

android:layout_height="wrap_content">

</LinearLayout>

</ScrollView>
_______________________________________
my_divider.Xml

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">

<size android:height="46dp"

/>
</shape>
_____________________________________

strings.XML

<?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="app_name">ShapeDrawable</string>

<string name="textsection1">
To read additional info on Shape Drawables\n
goto android developer\n
https://developer.android.com/guide/topics/resources/drawable-resource.html\n
</string>

<string name="textsection2">You can  draw shapes of: line, rectangle, oval, and ring.\n\n
To code your shapes, you define your attributes for the shape in the res/drawable/filename.xml file, and then code in the element where you want it.
</string>

<string name="textsection3">From Android Shape Drawables: This is a line across the view, known as a divider. \n It is defined as a xml file located in the drawable folder at res/drawable, \n
and coded in the LinearLayout element as android:background="@drawable/my_divider. Name it as you like. \n You can define its width and color and place within the view.
  Dividers are ideal for sectioning a view.\n
</string>

</resources>
______________________________________

MainActivity.java

package com.acw.learndrawables;

import android.app.*;
import android.os.*;
import android.view.*;
import android.widget.*;

public class MainActivity extends Activity
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
{
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

__________________________________

android manifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.acw.learndrawables"
    android:versionCode="1"
    android:versionName="1.0" >

<uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="11" />

</manifest>

This free script provided by
JavaScript Kit

AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid.
GoTo Aide

ANDROID STUDIO - for creating Android Apps on your desktop computer.
Learn more - Android Studio

The Java XML files we code(example codes) and the Android Apps we create in our Free Tutorials are compatible with Android Studio and AIDE. Just choose Java XML as your Programming Language.

You May Like:
Make Sushi Rolls Taste World Wines Flavours and Aromas